統合このページを編集

Tailwind CSS

@lazarv/react-serverは、Tailwind CSS v3とv4の両方と互換性があります。Tailwind CSS v3を使用する場合はPostCSSおよびAutoprefixerプラグインを使用し、Tailwind CSS v4を使用する場合は公式のTailwind CSSプラグインを使用して、Viteを使用した標準のReactプロジェクトで使用するのと同じようにTailwind CSSを使用できます。

Tailwind CSS v4をプロジェクトにインストールするには、Tailwind CSSの公式ドキュメントGet started with Tailwind CSS Using Viteに従ってください。

依存関係をインストールします:

pnpm add -D tailwindcss @tailwindcss/vite

vite.config.jsファイルにプラグインを追加します:

vite.config.js
import { defineConfig } from "vite"; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [ tailwindcss(), ], });

styles.cssファイルでTailwind CSSをインポートする必要があります:

styles.css
@import "tailwindcss";

公式の手順との唯一の違いは、HTMLファイルではなくサーバーコンポーネントにstyles.cssファイルをインポートすることです:

src/pages/index.tsx
import "./styles.css"; export default function HomePage() { return <h1 className="text-2xl font-bold">Hello World</h1>; }

これでReact Server ComponentsまたはクライアントコンポーネントでTailwind CSSを使用できるようになりました。

@lazarv/react-serverでTailwind CSS v4を使用する完全な例を確認するには、更新されたPokémon exampleを確認してください。

次のコマンドを実行すると、プロジェクトにTailwind CSS v3をインストールできます:

pnpm add -D tailwindcss@3 postcss autoprefixer
pnpm dlx tailwindcss@3 init

Tailwind CSSをpostcss.config.jsファイルに追加します:

./postcss.config.js
export default { plugins: { tailwindcss: {}, autoprefixer: {}, } };

tailwind.config.jsファイルでテンプレートパスを設定します:

./tailwind.config.js
export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], };

tailwind.config.jsファイル内のcontentを更新または拡張して、コンポーネント、ページ、およびTailwind CSSクラスを含むその他のファイルへのパスを含めます。

main.cssファイルに次の行を追加します:

./main.css
@tailwind base; @tailwind components; @tailwind utilities;

これでReact Server ComponentsまたはクライアントコンポーネントでTailwind CSSを使用できるようになりました。

./src/pages/index.tsx
import "./main.css"; export default function HomePage() { return <h1 className="text-2xl font-bold">Hello World</h1>; }

これ以上何もする必要はありません。開発サーバーを起動すると、適用されたスタイルを確認できます。

pnpm react-server

スタイルは本番ビルド時にも適用されます。

pnpm react-server build