Vite で Tailwind CSS を使う

"@tailwindcss/vite": "^4.0.3",
"tailwindcss": "^4.0.3"

Tailwind CSS v4.0 以降、Vite プラグイン を使って Tailwind をインストールできる。次のコマンドからパッケージをインストールする。

pnpm add tailwindcss @tailwindcss/vite

インストールしたプラグインを使うために vite.config.ts を更新する。

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
});

CSS ファイルで tailwindcss をインポートする。

@import 'tailwindcss';

これで Vite で Tailwind CSS を使えるようになる。

ちなみに Astro でもこの Vite プラグインが使われていて、用意されているコマンドを使うことでより簡単に Tailwind を使える。 → Astro で Tailwind CSS を使う も参照。