［Tailwind］Tailwind CSS のプロジェクトの作成

Tailwind CSS のプロジェクトを作成します。
Node.js を使用しますので、まだインストールしていない場合は、「Node.js のインストール」を参考にしてインストールしてください。

動作確認：tailwindcss v4.1.18

Vite でプロジェクトを作成します。

npm create vite@latest test002

プロジェクトの作成方法は「Node.js のインストール」を参考にしてください。

プロジェクトをカレントにして次のコマンドを実行します。

npm install tailwindcss @tailwindcss/vite

npm install -D @tailwindcss/vite

Vite の開発サーバーで Tailwind を使う際に必要となります。

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite' // Tailwind プラグインのインポート

export default defineConfig({
    base: './',  // URL を相対パスにする

    plugins: [
        tailwindcss(), // Tailwind のプラグインを登録します
    ],
})

vite.config.ts を作成または修正したら、Vite の開発サーバーを再起動してください。

先頭に次のコードを追加します。v4 から変更されています。

@import "tailwindcss";

main.ts や index.html などに、Tailwind のクラスを使った要素を追加します。
<div class="text-9xl">TEST</div>

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  
  <div class="text-9xl">TEST</div> <!-- 追加 -->
  
     :
    省略
     :

大きな文字で TEST と表示されれば OK です。

Tailwind のクラスが認識されない場合は、

・ビルドして出力された CSS に 使用した Tailwind のクラスが含まれているか？
・@tailwindcss/vite をインストールしたか？
・vite.config.ts でプラグインとして @tailwindcss/vite を登録したか？
・ブラウザの検証ツールでクラスが認識されているか？何か問題が出ていないか？
・@import "tailwindcss"; をわざと間違えてエラーになるか？（正常に読まれているか？）
・Vite ではなく、@tailwindcss/cli でビルドして認識されるか？

などを確認してください。

Tailwind CSS の CLI（コマンドラインインターフェース）をインストールします。
Vite を使わずにビルドできます。

@tailwindcss/cli のインストール

npm install -D @tailwindcss/cli

CSS のビルド

npx @tailwindcss/cli -i ./src/style.css -o ./dist/output.css

src/style.css をビルドして、dist/output.css を出力します。
また、プロジェクト配下の .html, .js, .ts, .jsx, .tsx, .vue などで使用された Tailwind のクラスも、css に出力されます。