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

TailwindCSSを書いているすべての人に向けて
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

ども!今回は、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』!それにしても海外ニキのサイトかっこいいな!

ではまた~

アバター画像
About 龍:Ryu 106 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる