Tailwind CSS V4 + VITE

Tailwind CSS V4ではVITEプラグインが提供されるようになり、簡潔で高速な統合が可能に。
あと、CSSファイルに@import "tailwindcss"と書くだけでインポートできるようになった。

https://tailwindcss.com/docs/installation/using-vite

npm i tailwindcss @tailwindcss/vite -D

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

@import "tailwindcss";

本件、CursorのアシスタントAIが対応できない事象を観測した。
具体的には、以下の古いインポート方法をどうしても提案してくるため、Tailwind CSSが有効にならない現象を解決できなかった。

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

Tailwind CSS V4のリリースは2025年1月下旬で、だいたい3ヶ月くらい前だが、これくらいの新しさだとAIに頼りきりはハマる可能性があると分かったのは収穫。