🍶

Tailwind Variantsに触れてみるという記事を読んで自分も触れてみて思った注意点

2023/06/07に公開

実際に触れてみるといくつか注意点があったので紹介します。

VS CodeのTailwind CSS IntelliSenseが効かない問題

Tailwind Variantsで以下のようにコードを書くと、Tailwind CSS IntelliSenseが効きません。

Tailwind CSS IntelliSenseが効かないのは死活問題なので効かせる方法を調べていると、issueが既に存在しており、解決方法も書かれていました。

解決方法はsettings.jsonに以下の設定を追加するだけです。

settings.json

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

すると、このようにIntelliSenseが効いてくれるようになります。

これが効かないのも死活問題ですね。

この問題の解決方法はprettier-plugin-tailwindcssのREADMEのSorting classes in function callsという章に書かれており、prettierの設定に以下を加えることで解決します。

prettier.config.js

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindFunctions: ["tv"],
};

Tailwind Variantsには定義したvariantsの型を取得するためのVariantPropsという型が用意されていますが、これが機能しておらず全てがany型になってしまいます。

v5.0.4に戻せば動くらしいですが、そうするとv5.1で修正されたAsync Server Componentの型エラーだったりが戻ってしまうのでちょっと厳しいですね。

Tailwind Variants良さそう

Tailwind Variantsには定義したvariantsの型を取得するためのVariantPropsという型が用意されていますが、これが機能しておらず全てがany型になってしまいます。

ありがとうございます！記事の中身も修正しておきます！！