【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

５. tailwind.config.jsの「content」を以下のように修正し、Tailwind CSSを反映させたいファイルを指定する。

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

６. 画面に読み込んでいるCSSファイルに、以下の記述を追記する。

./src/index.css

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

７. 以下コマンドでReactアプリを起動

npm run start

デフォルトのブラウザで以下画面が表示されるはず。

８. Tailwind CSSが用意しているクラス名を、各タグのclassName属性に指定する

まずは、Tailwind CSSを反映させたいファイル（今回はApp.js）を以下のように書き換える。

./src/App.js

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

同ファイルにて、各タグのclassName属性にTailswind CSSがあらかじめ用意しているクラス名を指定します。

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が反映され、画面は以下のようになると思います。

以上が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
・TypeError: match.loader.options.plugins is not a function
・モダンJavaScriptの基本から始めるReact実践の教科書