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