【React学習 #4】ReactにTailwind CSSを導入する

はじめに

この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

※既にReactプロジェクトが作成済みである前提です。

動作環境

• PC：Macbook
• CPU：Intel
• OS：MacOS Ventura 13.3.1

参考

Create React App を使用して Tailwind CSS をインストールする

Tailwind CSSをインスール

以下のコマンドを実行してTailwind CSSをインストールします。

# Reactプロジェクト直下に移動する。
cd [ReactプロジェクトまでのPath]

# Tailwind CSSをインストールする。
npm install -D tailwindcss

# initコマンドを実行してconfigファイルを作成する。
npx tailwindcss init

テンプレートパスを構成する

tailwind.config.jsを編集し、ファイル内のすべてのテンプレートファイルへのパスを追加します。

tailwind.config.js

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

CSSにTailwindディレクティブを追加する

index.cssにTailwindディレクティブを追加する

/src/index.css

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

ビルドプロセスを開始する

以下のコマンドを実行する。

npm run start

これでTailwind CSSを使う準備は完了です。

Tailwind CSSを使用する

App.jsでTailwind CSSが使えるか確かめます。
App.jsを以下のように編集します。

/src/App.js

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

export default App;

ブラウザで「 http://localhost:3000/ 」を開き、Tailwind CSSが適用されていることを確認できます。