React JS プロジェクトでの Tailwind CSS のセットアップ

React アプリをまだお持ちでない場合は、作成してください:

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

1. Tailwind CSS をインストールする 次のコマンドを実行して、Tailwind CSS とその依存関係をインストールします。

npm install -D tailwindcss postcss autoprefixer

次に、Tailwind CSS を初期化します。

npx tailwindcss init

これにより、プロジェクトに tailwind.config.js ファイルが作成されます。

1. Tailwind を構成する tailwind.config.js ファイルを編集してコンテンツ パスを構成します。コンテンツ キーを次のものに置き換えます。

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

1. Tailwind ディレクティブを CSS に追加する src フォルダーで、index.css というファイルを見つけるか作成します。次の Tailwind ディレクティブを追加します。

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

1. React に CSS をインポートする Index.css がプロジェクトにインポートされていることを確認します。 src/index.js ファイルには以下が必要です。

import './index.css';

1. 開発サーバーを起動します React アプリを実行して、Tailwind CSS の動作を確認します。

npm start

以上がReact JS プロジェクトでの Tailwind CSS のセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。