ReactでTailwind CSSを導入する方法

ReactでTailwind CSSを導入する方法
- Tailwind CSSの設定手順
- サンプルコンポーネント

ReactアプリケーションにTailwind CSSを導入する方法を紹介します。
例として、TypeScriptを使用したNext.jsアプリケーションにTailwind CSSを設定します。

Tailwind CSSの設定手順

1. Tailwind CSSのインストール

Tailwind CSSの依存関係をインストールします。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

または

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Tailwind CSSの設定

tailwind.config.jsファイルを開き、次のように設定を行います。

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

3. グローバルCSSファイルの設定

styles/globals.cssファイルに次のようにTailwindのディレクティブを追加します。

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

サンプルコンポーネント

以下は、TypeScriptを使用したReactコンポーネントの例です。
このコンポーネントは、Tailwind CSSを使用してスタイリングされています。

import React from 'react';

const ExampleComponent: React.FC = () => {
  return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-500">
        Hello, Tailwind CSS with TypeScript!
      </h1>
    </div>
  );
};

export default ExampleComponent;

この手順で、Next.jsとTypeScriptを使用したプロジェクトにTailwind CSSを導入することができます。