愛用しているcoc-tailwindcss3プラグインが、Tailwind CSS v4に対応しました！

tailwindcss v4の主な変更点

まずtailwindcss v4の変更点ですが、設定方法など大きな変更がありました。公式アップグレードガイドによると、主な変更点として下記があります：

デフォルトでtailwind.config.jsファイルが不要になった
設定ファイルがJavaScriptからCSSへと移行
@tailwindディレクティブから通常の@import文への変更
モダンブラウザの機能に依存する新しい実装

coc-tailwindcss3の対応内容

GitHubをみると、@yaegassy さんのcoc-tailwindcss3では以下の修正が行われました：

package.jsonのactivationEventsを変更：

-    "workspaceContains:**/?(tailwind|tailwind.config|tailwind.*.config|tailwind.config.*).?(js|cjs|ts|mjs)"
+    "*"

以前はtailwind設定ファイルが存在する場合のみプラグインが有効化されていましたが、v4での仕様変更に対応するため、常に有効化されるようになりました。

使い方

coc-tailwindcss3のインストールは以下のコマンドで行えます：

:CocInstall @yaegassy/coc-tailwindcss3

クラス名に対応するCSSを表示してくれるのが最高すぎます！

詳細については、GitHubリポジトリを参照してください。

おわりに

tailwindcssで開発していると「クラス名が合っているか」「どのような挙動をするかCSSで知りたい」ということに悩まされがちですが、coc-tailwindcss3を使うことでtailwindcssの開発体験は大きく改善します。Vim + tailwindcss を使っている方には激おすすめのプラグインです！

参考リンク:

coc-tailwindcss3 GitHub - メインリポジトリ
Tailwind CSS v4公式アップグレードガイド - 公式の移行ガイド
Tailwind CSS v4.0 - v4の公式発表記事
@tailwindcss/language-server - 言語サーバーパッケージ