拡張機能：Tailwind CSS IntelliSenseをReactの定数にも反映

ども！今回は、VSCodeの拡張機能Tailwind CSS IntelliSenseを使用している人に向けて書いています。拡張機能をReactを書いているときに、定数としてCSSを吐き出すと拡張機能が仕事をしてくれない問題の解決法を見つけました。公式のページにちゃんと書いてありましたが、こだわりない人はコピペしちゃってください。

1 導入
2 本題
3 おわり

導入

ども！誇大広告気味の龍ちゃんです。金曜日も終わりそうな雰囲気を醸し出している17:24に興奮した状態で執筆を始めています。今日は出社しているので、むやみやたらに歩けないのでリフレッシュのために会社の階段を登りに行っていました。

さて今回ですが、VSCodeを使ってTailwind CSSを書いているすべての人に届いてほしい内容になっています。前提ですが、VSCodeでTailwind CSSを書いている人は、拡張機能：Tailwind CSS IntelliSenseをインストールしてください。

今回の記事が届いてほしいのはこんな人です。

VSCodeの『Tailwind CSS IntelliSense』を使用しているけど、CSSを定数で定義したときに、拡張機能（予測変換や色付け）が反応してくれない

公式リファレンス→英語のサイトでやっとで解決法を見つけることができました。とりあえず、ReactでTailwindを使用している人は、絶対ぶち当たる問題だと思うので、さらみしていってください。

本題

内容はVSCodeのsettings.jsonを開いて以下を追記してください。

"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    ".*Styles.*",
    ".*Style.*" // Add ".*Styles.*" (or whatever matches your naming scheme)
  ]

そしたら、「~Style」や「~Styles」と命名した内容が以下のようになります。