Tailwind CSS を Rspack でインストール

Rspack プロジェクトで Tailwind CSS をセットアップする。

プロジェクトを作成する

まだ設定していない場合は、まず新しい Rspack プロジェクトを作成します。最も一般的なアプローチは、以下を使用することです。 Rspack CLI.

ターミナル

npm create rspack@latest

Tailwind CSS をインストール

@tailwindcss/postcss とそのピア依存関係をインストールします。

ターミナル

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

PostCSS サポートを有効にする

rspack.config.js ファイルで、PostCSS ローダーを有効にします。詳細については、ドキュメントを参照してください。ドキュメントをご覧ください。

rspack.config.ts

export default defineConfig({
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["postcss-loader"],
        type: "css",
      },
      // ...
    ],
  },
}

PostCSS プラグインを設定する

プロジェクトのルートに postcss.config.mjs ファイルを作成し、PostCSS 設定に @tailwindcss/postcss プラグインを追加します。 @tailwindcss/postcss プラグインを PostCSS 設定に追加します。

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Tailwind CSS をインポート

Tailwind CSS をインポートする @import を ./src/style.css に追加します。

style.css

@import "tailwindcss";

ビルドプロセスを開始する

npm run dev でビルドプロセスを実行します。

ターミナル

npm run dev

プロジェクトで Tailwind の使用を開始する

Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

App.vue

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

Tailwind CSS を Rspack でインストール

React を使用する

Vue を使用する

プロジェクトを作成する

Tailwind CSS をインストール

PostCSS サポートを有効にする

PostCSS プラグインを設定する

Tailwind CSS をインポート

ビルドプロセスを開始する

プロジェクトで Tailwind の使用を開始する