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 (

        <img className="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"/>

        ChitChat

You have a new message!

  );
}

export default App;

以上で、ReactプロジェクトにTailwind CSSを導入し、コンポーネントをスタイリングする準備が整いました。

各Tailwind CSSクラスは、特定のCSSスタイルを表し、これによって迅速かつ効率的にデザインを行うことができます。