Tailwind CSS ホームページ
  1. インストール
  2. Create React App で Tailwind CSS をインストールする

Create React AppはカスタムPostCSS設定をサポートしておらず、PostCSSエコシステムにおける多くの重要なツールと互換性がありません。例えば、 `postcss-import`.

Vite を使用することを強くお勧めします。 Vite, Parcel, Next.js、または Remix をCreate React Appの代わりに使用することをお勧めします。同等以上の開発体験が得られるだけでなく、より柔軟に、TailwindとPostCSSの設定をより詳細に制御できます。

  1. プロジェクトを作成する

    まず、Create React App v5.0+で新しいReactプロジェクトを作成します（まだ設定していない場合）。 Create React App v5.0+で新しいReactプロジェクトを作成します（まだ設定していない場合）。

    ターミナル
    npx create-react-app my-projectcd my-project

  2. Tailwind CSS をインストールする

    npm を介して tailwindcss をインストールし、次に init コマンドを実行して tailwind.config.js ファイルを生成します。

    ターミナル
    npm install -D tailwindcssnpx tailwindcss init

  3. テンプレートパスを設定する

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

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

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

    Tailwind の各レイヤーの @tailwind ディレクティブを ./src/index.css ファイルに追加します。

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

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

    npm run start でビルドプロセスを実行します。

    ターミナル
    npm run start

  6. プロジェクトで Tailwind の使用を開始する

    Tailwind のユーティリティクラスを使用してコンテンツのスタイリングを開始します。

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