VSCodeのTailwind CSS IntelliSenseに補完対象を正規表現で追加できるようになった

1 min read読了の目安(約800字

前回、React Nativeでtailwindを使う方法について書きました。
その際、VSCodeの拡張機能であるTailwind CSS IntelliSenseでは補完されず、不便であるという内容を書きました。

https://zenn.dev/shon0/articles/3157650d9b3cb1b0eb41

しかし、この問題を解決できるようになりました!

補完対象を追加できるようになった

Tailwind CSS IntelliSenseのv0.5.1から補完対象を正規表現で追加できるようになりました。

.vscode/setting.json
{
  "tailwindCSS.experimental.classRegex": [
    ["classnames\\(([^)]*)\\)", "'([^']*)'"]
  ]
}

https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129#issuecomment-735915659

tailwind-rn で使う場合

React Nativeでtailwindを使いたいときに導入するtailwind-rnの場合の正規表現の書き方は以下の通り。

.vscode/setting.json
{
  "tailwindCSS.experimental.classRegex": ["tailwind\\('([^')]*)"]
}

これで以下のようなスタイルの書き方でもtailwindのクラス名の補完がされます。

  <View style={tailwind('flex-1')}>