ViteでReactのプロジェクトを生成

ViteでReact【Typescript】のプロジェクトをテンプレートから生成する。

$ yarn create vite tailwind-setup --template react-ts

プロジェクト名としてtailwind-setup、テンプレートとしてTypeScriptのReactテンプレートreact-tsを指定する。

プロジェクト生成後、cd tailwind-setupで作成したプロジェクトディレクトリに移動してyarn installを行い依存関係を解決する。

tailwindcssを追加する

tailwindcssの本体と必要あるプラグインをまとめてインストールする。

$ yarn add --dev tailwindcss postcss autoprefixer

開発環境でしか使わないため、--devとしてdevDependenciesに含めるようにする。

設定ファイルの作成

tailwindcssの設定ファイルとpostcssの設定ファイルを作成する。

$ yarn tailwindcss init -p

テンプレートパスの構成

tailwind.config.jsにtailwindcssを適用するテンプレートパスを追加する。
contentの中にパスを追加する。

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

tailwindcssディレクティブの追加

main.tsxで読み込みしているindex.cssの記述をすべて削除し、以下のtailwindディレクティブを3行記述する。

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

適用確認

app.tsxの<p>Hello Vite + React!</p>に以下のクラスを適用する。

<p className="text-orange-300">Hello Vite + React!</p>

tailwindcssで文字の色が装飾されることが確認できれば完了。