インストール
Rspack プロジェクトでの Tailwind CSS のセットアップ。
まだプロジェクトをセットアップしていない場合は、新しい Rspack プロジェクトを作成することから始めます。最も一般的なアプローチは、以下を使用することです： Rspack CLI.
npm create rspack@latest`@tailwindcss/postcss` とそのピア依存関係をインストールします。
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader`rspack.config.js` ファイルで、PostCSS ローダーを有効にします。詳細については、以下を参照してください： ドキュメントを参照してください。
export default defineConfig({ // ... module: { rules: [ { test: /\.css$/, use: ["postcss-loader"], type: "css", }, // ... ], },}プロジェクトのルートに `postcss.config.mjs` ファイルを作成し、以下を追加します： PostCSS 設定に `@tailwindcss/postcss` プラグイン。
export default { plugins: { "@tailwindcss/postcss": {}, },};`Tailwind CSS` をインポートする `@import` を `./src/index.css` に追加します。
@import "tailwindcss";`npm run dev` でビルドプロセスを実行します。
npm run devTailwind のユーティリティクラスを使用してコンテンツをスタイルします。
export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}