【React】Create React AppへのTailwind CSS導入手順

はじめに

Create React AppでTailwind CSSを導入する手順について記載します。

基本的にTailwindの公式サイトでの紹介通り進めていき、適宜補足します。

Create React Appの使用はもはや推奨されていないようです（詳細は参考サイトをご確認ください）
使用される場合はご自身の判断でお願いします。

環境

• 作業日: 2023/12/23
• OS： M1 mac/Sonoma version14.2.1
• React: 18.2.0
• Node.js: v20.9.0
• Tailwind: v3.4.0

手順

1. Reactアプリのプロジェクトの作成

すでに作成済みの場合は飛ばして2.へどうぞ。
my-projectの部分は好きなプロジェクト名を入れてください。

npx create-react-app my-project

2. 作成されたディレクトリへの移動

cd my-project

3. Tailwind CSSのインストール

npm install -D tailwindcss

4. 設定ファイルの追加

npx tailwindcss init

実行するとsrc/以下にtailwindの設定ファイル tailwind.config.js が作成されます。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 設定ファイルへのパスの記載

4.で作成された tailwind.config.js にこれから作っていくReactのコンポーネントのパスを追加します。

tailwind.config.js

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

6. index.cssへの設定追加

Tailwindを使用できるよう、./src/index.cssに以下を追加します。

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

7. Reactアプリの起動

my-project/以下でコマンドを実行し、Reactアプリを起動します¹。

npm run start

ブラウザが立ち上がり、http://localhost:3000/へ接続されます。

8. Tailwindを使用してみる

早速Tailwindを試してみます。
App.jsに適当なHTMLを書き、className属性にTailwindのクラス名を指定します。すると、Tailwindで用意されているスタイルを適用できます。

./index.css のimportをお忘れなく！

例1

./src/App.js

import './index.css';

export const App = () => {
  return (
    <>
      <h1 className="text-3xl font-bold underline">Hello world!</h1>
    </>
  );
};

例2

./src/App.js

import './index.css';

export const App = () => {
  return (
    <>
     <div className="border border-gray-400 rounded-2xl p-2 m-2 flex justify-around items-center w-80">
        <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>
    </>
  );
};

終わりに

2021年9月に出版された『モダンJavaScriptの基本から始める　React実践の教科書』を使用して学習しており、紹介されたTailwindを試そうとしましたが、本で紹介されているやり方ではバージョンの違いでうまくいかなかったので、公式サイトを見て実施しました。

参考サイト

Create React Appについて

npm start

1. npm start は npm run start のエイリアスなので、この2つの挙動は同じのようです。 ↩