【React】ReactアプリにTailwind Cssを導入する手順

# 目的・前提
CSSフレームワークの一つである**Tailwind CSS**を、Reactアプリに導入するための手順を記載します。

**M1 Mac**で行うことを前提としています。
※本記事は2022年6月25日時点に執筆。

# 手順
#### １. ターミナルを起動し、以下コマンドでReactアプリを作成する
※すでにReactアプリを作成済みの方は飛ばして「２.」から始めて大丈夫です。
```
npx create-react-app sample-react-tailwind
```
 
#### ２. ターミナルにて、Reactアプリのホームディレクトリに移動する
```
cd sample-react-tailwind
```

#### ３. 以下コマンドを実行し、Tailswind CSSを使う上で必要なライブラリをインストールする。
```
npm install -D tailwindcss postcss autoprefixer
```
#### ４. 以下コマンドを実行し、tailwind.config.js と postcss.config.jsを作成する。
```
npx tailwindcss init -p
```
![Screen Shot 2022-06-25 at 16.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/e22b7691-4883-ec87-414d-6a2e989ddbe6.png)

#### ５. tailwind.config.jsの「content」を以下のように修正し、Tailwind CSSを反映させたいファイルを指定する。
``` js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

#### ６. 画面に読み込んでいるCSSファイルに、以下の記述を追記する。
./src/index.css
``` css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
![Screen Shot 2022-06-25 at 15.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/6f2ef9f3-c00a-f703-efdd-baf4871144b0.png)


#### ７. 以下コマンドでReactアプリを起動
```
npm run start
```
デフォルトのブラウザで以下画面が表示されるはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/22e362c4-3e49-adc9-a5b9-890768e4824d.png)

#### 

#### ８. Tailwind CSSが用意しているクラス名を、各タグのclassName属性に指定する
まずは、Tailwind CSSを反映させたいファイル（今回はApp.js）を以下のように書き換える。

./src/App.js
``` react
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <h1>
        Hello Tailwind CSS!
      </h1>
      <p>Tailwind CSSです</p>
      <button>ボタン</button>
    </div>
  );
}

export default App;

```
「6.」で表示された画面が以下のように変わります。
![Screen Shot 2022-06-25 at 15.49.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/eed164d3-1da1-51d8-14f7-6204bc402f28.png)
Screen Shot 2022-06-25 at 15.49.59

同ファイルにて、各タグのclassName属性にTailswind CSSがあらかじめ用意しているクラス名を指定します。
``` react
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="border border-gray-400 rounded-2xl p-2 m-2 flex justify-around items-center">
      <h1 className="text-3xl font-bold underline">
        Hello Tailwind CSS!
      </h1>
      <p className="m-0 text-gray-400">Tailwind CSSです</p>
      <button className="bg-gray-300 border-0 p-2 rounded-md hover:bg-gray-400 hover:text-white">ボタン</button>
    </div>
  );
}

export default App;
```
Tailwind CSSが反映され、画面は以下のようになると思います。
![Screen Shot 2022-06-25 at 15.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2640031/b3c567e9-025e-a2db-75aa-ce6f2ae6dc98.png)

以上がTailwind CSSを導入するまでの手順となります。

# まとめ（というか感想）
初期設定が少し手間ですが、１から自分でデザインするよりは楽だと思うので、Tailwind CSS活用していきたいなぁと思っています。

現在勉強中の書籍「モダンJavaScriptの基本から始めるReact実践の教科書」に記載されているTailwind CSSの導入方法だと、エラーが発生して上手くいかなかったため、やり方を調べたのが本記事作成の背景。
2021年10月ごろに発売した書籍なのに、たった半年で書籍通りで動かなくなるとは。。

この本だと**CRACO**というツールをインストールしているのですが、CRACOの設定を記述してもエラーになってしまう。どうやら、現在ではCRACOを使わなくてもReactアプリでTailwind CSSを使えるようになっているらしいです。

色々ググった結果、結局はTailswind CSSの公式サイトに行き着いて、無事Tailswind使えるようになりました。やはり公式は避けては通れないですね。。


# 参考文献
・[【公式】Install Tailwind CSS with Create React App](https://tailwindcss.com/docs/guides/create-react-app)
・[TypeError: match.loader.options.plugins is not a function
](https://peaku.co/questions/8047-typeerror:-matchloaderoptionsplugins-no-es-una-funcion)・[モダンJavaScriptの基本から始めるReact実践の教科書](https://www.amazon.co.jp/dp/B09BV2HGN3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)