tailwindcssコマンドが使えない時の対処法

事象

• 最新のTailwind CSSをインストールしたが、コマンドが存在しないと言われる

% npm install -D tailwindcss

up to date, audited 1352 packages in 1s

269 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
% npx tailwindcss init -p   
sh: tailwind: command not found

原因

Tailwind CSS バージョン 4 以降 では、npx tailwindcss init -p コマンドが使用できないため

※ viteを使用するインストールに変わったらしい

解決策

1. Tailwind CSSのバージョンを落とす（Tailwind CSS バージョン 3を使用する）
2. 以下の手順でTailwind CSS バージョン 4を使用する

1. Tailwind CSS のインストール

プロジェクトのディレクトリで、以下のコマンドを実行して Tailwind CSS と Vite 用のプラグインをインストールします。

npm install tailwindcss @tailwindcss/vite

2. Vite の設定ファイルにプラグインを追加

vite.config.js または vite.config.ts ファイルに Tailwind CSS のプラグインを追加します。

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. CSS ファイルに Tailwind CSS をインポート

Tailwind CSS を使用するために、CSS ファイル内で Tailwind CSS をインポートします。

例: src/index.css

@import 'tailwindcss';

4. React コンポーネントでの使用例

Tailwind CSS をインポートした後、React コンポーネント内でクラス名を使用してスタイルを適用できます。

例: src/App.jsx

import './index.css';

function App() {
  return (
    <div className="text-center">
      <h1 className="text-3xl font-bold">Hello, Tailwind CSS!</h1>
    </div>
  );
}

export default App;

これで、Tailwind CSS を使用したスタイリングが可能となります。