tailwind使ってみてハマったこと

はじめに

今回は表題の通りtailwindを使ってみてハマったところとその解決法について書いていきたいと思います。

ハマったところ①　急にスタイルが当たらなくなる

原因と解決法 : コンポーネントのあるファイル/ディレクトリがtailwind.config.ts内のcontentに含まれていない

./src/featuresコンポーネントを作成した場合、追記する必要がある

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/features/**/*.{js,ts,jsx,tsx,mdx}", // ←---追記!
  ],

~~~~~~~~~~~ 省略 ~~~~~~~~~~~~~~

ハマったところ② prettier-plugin-tailwindcssが効かない

className内のユーティリティクラスを並び替えてくれる公式が提供しているprettierプラグインです。

原因と解決法 : .prettierrcにプラグインを追記していなかった

.prettierrc

{
    "tabWidth": 4,
    "plugins": ["prettier-plugin-tailwindcss"] 
}

こうすることで問題なくフォーマッターが働きました。

ハマったところ③ js変数をユーティリティクラスに入れても動かない

以下のようなコードです。

const width = "30px";
<div className={`w-[${width}]`}></div>;

原因と解決策 : tailwindの仕様的に無理

tailwind公式より引用

Tailwind がクラス名を抽出する方法の最も重要な意味は、ソース ファイル内に完全に切れていない文字列として存在するクラスのみが検索されるということです。
文字列補間を使用する場合、または部分クラス名を連結する場合、Tailwind はそれらを見つけられないため、対応する CSS を生成しません。

なので、完全に切れていない文字列として存在するクラスを変数に入れていればいける
例 : const width = "w-[30px]"

おわりに

お読みいただきありがとうございました。

tailwindは初めて触りましたが、慣れるまでは大変そうですね...
クラス名を考えないでよかったり、html-cssをファイルを行き来して照合する手間が省けたりするのはとても良いと感じています。

また、ハマりポイントがあれば随時追記していこうと考えています。