TailwindCSS のクラス名を自動補完を効かせつつ任意の変数名に代入する方法

TailwindCSSでクラス名を定義する際、VSCodeだと拡張機能をインストールしていると自動補完が有効になります。

自動補完はconst className = "" という変数名に対しても有効になります。

ちなみに、デフォルトで自動補完が有効になる変数名は、

• "class",
• "className",
• "ngClass",

の３つです。

では、const mySpecialStyles = "" だとどうでしょう。もちろん自動補完は効きません。

このような、任意の mySpecialStyles や greatStylesのような変数名であっても自動補完を効かせる方法はないのか？ しらべてみたところ、次の設定方法があったので共有したいと思います。

元はGitHub Discussionsで紹介されていたので、詳しくはそちらを御覧ください。

VSCodeの設定

VSCodeの設定は簡単で、次の図を参考に Class Attributes の項目に移動して、 Add item で.*Styles*を追加してください。

settings.jsonに追記する場合は、以下のとおりです。

これで、mySpecialStyles や greatStylesのような変数名でも自動補完が有効になります🎉

基本的にインラインでクラスを定義していくのが TailwindCSS の推奨かと思いますが、重複した定義になったり、コードが読みづらくなるので、分離してスッキリしたい方はぜひ試してみてください🙂