【React】React (+Vite) で TailwindCSS を適用する

はじめに

ReactでのTailwindCSSの適用方法で少しつまずいたので、セットアップ方法をまとめます。
一般的な方法、Viteを用いた方法をそれぞれ記載しています。

セットアップ方法

1. プロジェクト作成

       npx create-react-app my-project
       cd my-project
   

   Viteの場合、以下のコマンドで作成します。

   Vite

       npm create vite@latest my-project -- --template react
       cd my-project
   

2. TailwindCSSをインストール

       npm install -D tailwindcss
       npx tailwindcss init
   

   Viteの場合、以下のコマンドでインストールします。

   Vite

       npm create vite@latest my-project -- --template react
       cd my-project
   

3. 作成されたtailwind.config.jsファイルを開く

4. contentプロパティのパスに、srcフォルダ内のファイルをすべてを参照するパスを指定する

   tailwind.config.js

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

   "./src/**/*.{js,jsx,ts,tsx}"
   

5. index.cssに、tailwindの情報を追加する

   index.css

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

さいごに

通常のReactのcreate-react-appでの作成方法と、Viteを用いた方法では若干異なるところに注意しましょう！

参考