🍃

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

2021/03/18に公開

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

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

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

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

.vscode/setting.json

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

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

.vscode/setting.json

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

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

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