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

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

ども！今回は、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」と命名した内容が以下のようになります。