ReactでTailwind CSSをセットアップする

目次

ReactでTailwind CSSをセットアップする

Tailwind CSSはユーティリティファーストのCSSフレームワークです。
Reactと組み合わせることで、迅速かつ効率的にコンポーネントのスタイリングが可能になります。
本記事では、ReactプロジェクトにTailwind CSSを導入する手順をご紹介します。

ステップ1: インストール

まず、新しいReactプロジェクトを作成します。

npx create-react-app my-app
cd my-app

次に、Tailwind CSSをインストールします。

npm install tailwindcss

ステップ2: 設定

Tailwind CSSの設定ファイルを生成します。

npx tailwindcss init

これにより、tailwind.config.jsファイルがプロジェクトのルートディレクトリに生成されます。

PostCSSの設定ファイルを作成します。

touch postcss.config.js

このファイルに以下の内容を追加します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

次に、Tailwind CSSのスタイルシートを作成します。

touch src/tailwind.css

そして、以下のコードをtailwind.cssに追加します。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

src/index.cssを以下のように編集して、Tailwind CSSをインポートします。

@import './tailwind.css';

最後に、package.jsonのscriptsセクションを以下のように編集します。

"scripts": {
  "start": "npm run watch:css && react-scripts start",
  "build": "npm run build:css && react-scripts build",
  "build:css": "postcss src/tailwind.css -o src/index.css",
  "watch:css": "postcss src/tailwind.css -o src/index.css"
}

ステップ3: 使用

これで、ReactコンポーネントでTailwind CSSのクラスを使用できるようになります。

function App() {
  return (
    <div className="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div className="flex-shrink-0">
        <img className="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"/>
      </div>
      <div>
        <div className="text-xl font-medium text-black">ChitChat</div>
        <p className="text-gray-500">You have a new message!</p>
      </div>
    </div>
  );
}

export default App;

以上で、ReactプロジェクトにTailwind CSSを導入し、コンポーネントをスタイリングする準備が整いました。
各Tailwind CSSクラスは、特定のCSSスタイルを表し、これによって迅速かつ効率的にデザインを行うことができます。