ReactへのTailwindCSSの反映

はじめに

CRA(create-react-app)でTailwindCSSを使う際の設定ポイントを纏める。

インフォメーション
WindowsでエディタはCURSORを使用していますが、VSCodeでもいけると思います。
yarnを使用していますがnpmでもいけると思います。（適宜読み替えてください）

大まかな手順

1. TailwindCSSとcracoをインストールする
2. tailwind.config.jsを設定する
3. postcss.config.jsを設定する
4. craco.config.jsを設定する
5. input.cssを用意する
6. package.jsonを設定する
7. input.cssにimportを設定する

1. TailwindCSS と craco をインストールする

ターミナルでコマンドを入力しTailwindCSSをインストールする。

yarn add tailwindcss postcss autoprefixer

次にcracoをインストールする。（指定の仕方が他と若干違うので注意）

yarn add @craco/craco

2. tailwind.config.jsを設定する

まずtailwind.config.jsを生成する。

npx tailwindcss init

そしてtailwind.config.jsを以下のように設定する。（あくまで参考です）
importantを付けるかどうか、contentのパスはお好みで。

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

3. postcss.config.jsを設定する

まずpostcss.config.jsを生成する。

npx tailwindcss init --postcss

そしてpostcss.config.jsを以下のように設定する。（あくまで参考です）

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. craco.config.jsを設定する

tailwind.config.jsと同じフォルダにcraco.config.jsを作成し以下のように記載する。

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

5. input.cssを用意する

場所はある程度どこでもよいが、あまりtopフォルダにファイルを作成するのは好きではないので以下の位置にinput.cssを作成。
src/css/tailwind/input.css

ファイルの内容は以下の通り

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

@tailwind のところに波線が出て「Unknown at rule @tailwind」と表示されるが無視！
これ以降開くことはないので何も設定していないが、気になる人はsettings.jsonとかでlintのignoreなどを設定してエディタとしてワーニングが出ないようにする。
（そもそもlintを入れていない人はワーニングでないと思う）

6. package.jsonを設定する

このままだと yarn start をする前に毎回TailwindCSSのCSSファイルを作成するコマンドを実行する必要があるが、だるいので yarn start の時に自動的にoutput.cssを作成するように変更する。

  "scripts": {
    "start": "BROWSER=none react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

上記の部分を以下のように変更する。

  "scripts": {
    "build:tailwind": "tailwindcss -i ./src/css/tailwind/input.css -o ./src/css/tailwind/output.css --watch",
    "start": "yarn run build:tailwind & BROWSER=none craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

• tailwindcssコマンドを利用して、TailwindCSSのビルド結果を /src/css/tailwind/output.css に出力している
• start のところで、先に build:tailwind を実行してから開始している（BROWSER=none は yarn start 時にブラウザが自動的に起動しない設定。　今回の件とは関係ない）
• cracoを使ってReactとTailwindCSSを統合している

7. index.jsにimportを設定する

/src/index.js に input.css と output.css をimportしTailwindCSSが反映されるようにする。

import './css/tailwind/output.css';