React プロジェクトへの Tailwind CSS の導入と使い方

React プロジェクトに Tailwind CSS を導入することで、カスタムCSSを書く手間を大幅に削減し、一貫性のあるデザインを素早く実装できます。

以下の手順で Tailwind CSS を設定します。

Tailwind CSS のインストール

React プロジェクトのルートディレクトリで以下のコマンドを実行し、必要なパッケージをインストールします：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Tailwind の設定ファイルの生成

以下のコマンドを実行して、Tailwind の設定ファイルを生成します：

npx tailwindcss init -p

これにより、tailwind.config.js と postcss.config.js が作成されます。

Tailwind の設定を更新

tailwind.config.js を開き、以下のように内容を更新します：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS ファイルの作成

src ディレクトリに index.css ファイル（既に存在する場合はそれを使用）を作成または編集し、以下の内容を追加します：

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS の読み込み

src/index.js ファイルで、作成した CSS ファイルをインポートします：

import './index.css';

Tailwind クラスの使用

これで Tailwind CSS を使用する準備が整いました。コンポーネント内で Tailwind のクラスを使用できます。

例えば：

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold text-blue-600">
        Tailwind CSS を使った React アプリ
      </h1>
    </div>
  );
}

ビルドプロセスの最適化（オプション）

プロダクションビルドで未使用の CSS を削除し、ファイルサイズを最適化するには、package.json の build スクリプトを以下のように更新します：

"scripts": {
  "build": "GENERATE_SOURCEMAP=false tailwindcss -i ./src/index.css -o ./src/tailwind.output.css && react-scripts build"
}

これにより、ビルド時に最適化された Tailwind CSS が生成されます。

Posted : 24.07.14