Tailwindcss v4 導入手順 with vite

1. はじめに

以下はtailwindcss v4の導入手順です。viteと連携を想定しています。
v3から設定が変わり混乱したので、備忘録がてら書き残します。

※ 筆者はreactのプロジェクトに追加してます。vite入ってれば大体これと同じ手順で導入できます。

2. インストール

tailwindcssv4をviteと連携させて用いるには以下の二つのパッケージが必要です。
npmでインストールしましょう

• tailwindcss
  • tailwind本体
• @tailwindcss/vite
  • tailwindcss v4で導入されたvite公式プラグイン

npm install tailwindcss @tailwindcss/vite

3. vite.config.js(またはvite.config.ts)の設定

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'  // Reactの場合
import tailwindcss from '@tailwindcss/vite'

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

4. CSSの設定

src/index.cssなどのメインcssファイルに以下の1行を追加します。

@import 'tailwindcss';

5. 開発サーバーの起動

npm run dev

これでtailwindcssが使えるようになっています。

6. お試しで使ってみる

App.jsxなどに以下の文言を追加してみましょう

<div className="text-red-500">Hello World!!</div>

リロード後、赤文字で表示されていればtailwindcss導入完了です。