はじめに

tailwindCSS intellisenseってtailwindの初学者にとってありがたい機能ですよね。
しかーし、v4をcss構成で使用しようとすると全く機能しなかったので今回はその解決方法を紹介します。

tailwindcss intellisense[拡張機能]

htmlファイル内で以下のことを行ってくれる拡張機能です。

カスタムクラスの補完
カラーパレットやフォントなどの補完
ホバーで設定内容のツールチップ表示

Tailwind CSS v4 と CSSベース設定

これまではtailwindのテーマの設定なんかはtailwind.config.jsに記述していましたよね。
しかし、v4以降はCSSベースの構成も可能になり、設定とスタイルをtailwind.config.jsではなくCSSファイル1つに直接記述できるようになりました。

設定とスタイルの分離をなくす→ 開発者がCSSを書く場所でそのまま設定も完結
簡単で直感的な開発体験の提供→ 設定を別ファイルで管理する必要がなく、構成がシンプルに

※従来の tailwind.config.js も引き続き利用可能です。ダークモードの設定などスタイルの条件分岐なんかの複雑な処理はこれまで通り、tailwind.config.jsが必要みたいです。

intellisenseが効かない？？

intellisenseは標準でtailwind.config.jsを解析して機能する拡張機能なので、v4をcssベースで利用する場合は標準では機能しません。なので、vscodeの設定を変更します。

settings.json

settings.jsonの開き方

コマンドパレット(Command+Shift+P)に>Preferences: Open Workspace Settings (JSON)
※ワークスペースの設定ならWorkspaceユーザーの設定ならUserにしてください。

jsonファイルの中で Tailwindの設定はJSファイルじゃなくて、cssファイルだよ！ と指定してあげましょう。

settings.json

"tailwindCSS.experimental.configFile": "Tailwind の設定を書いたCSSファイルの相対パス"

// 例
"tailwindCSS.experimental.configFile":  "app/assets/stylesheets/application.tailwind.css"

これで拡張機能が今まで通り機能するはずです。