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

Reactプロジェクトの作成

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

npx create-react-app my-app

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

Tailwind CSSのインストールと設定

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

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;

TailwindCSSの動作確認

Reactアプリを起動します。

npm start

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

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

参考リンク

新しい React アプリを作る – React

ユーザインターフェース構築のための JavaScript ライブラリ

js.legacy.reactjs.org

Install Tailwind CSS using PostCSS - Tailwind CSS

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

tailwindcss.com