ReactでTailwind CSSを使用する（PostCSSプラグイン使用）

この記事について

PostCSSプラグインを使用してReactでTailwind CSSを使用する方法です。

試験的に使用するだけなら、下記をpublic/index.htmlのheadタグ内に記載するCDNを使用する方法で問題ありません。

<script src="https://cdn.tailwindcss.com"></script>

ただ本番で使用するには推奨されていません。
CDNで使用するとGoogle Chromeのデベロッパーツールにも下記の警告が表示されています。

React　　　：18.2.0
Tailwind CSS：3.1.8

任意のディレクトリで下記のコマンドを実行します。

npx create-react-app my-app

作成したディレクトリをVSCodeで開きます。

作成したディレクトリで下記のコマンドを実行します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

作成されたtailwind.config.jsファイルに、tailwindCSSを使用したいディレクトリを指定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
　content: ["./src/**/*.{html,js}"],
　theme: {
　extend: {},
　},
　plugins: [],
};

プロジェクト内のメインのCSSファイルに対して下記を記述します。

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

Reactアプリを起動します。

npm start

tailwindCSSの記述が反映されるか確認します。

反映されることが確認できました。