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

TailwindCSSを書いているすべての人に向けて

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

導入

ども!誇大広告気味の龍ちゃんです。金曜日も終わりそうな雰囲気を醸し出している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」と命名した内容が以下のようになります。

実行結果はこうなるんやで!

ついでに予測変換も機能するようになります。なしでも書けますが、やはり出ている方が書きやすいですよね。

おわり

これを機に命名規則系についても考えたほうが良いかもしれません。TailwindとReactを組み合わせるときのTipsがいい感じにまた増えました。

前回記事、おいておきます。『React+Tailwind コンポーネントの引数(変数)で色を設定したいとき

全く同じ内容の海外ニキのサイトも置いておきます。『Using Tailwind IntelliSense within strings』!それにしても海外ニキのサイトかっこいいな!

ではまた~

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です