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.jsimport { 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.tsximport "./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.jsexport default {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
};
tailwind.config.js
ファイルでテンプレートパスを設定します:
./tailwind.config.jsexport 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.tsximport "./main.css";
export default function HomePage() {
return <h1 className="text-2xl font-bold">Hello World</h1>;
}
これ以上何もする必要はありません。開発サーバーを起動すると、適用されたスタイルを確認できます。
pnpm react-server
スタイルは本番ビルド時にも適用されます。
pnpm react-server build