Tailwindcssの差分が更新されない！

2026年1月28日2026年1月29日

Tailwindcssの差分が更新されない！

順調にTailwindcssを使っていたある日・・・。

とあるクラスをあててもスタイルが表示されない！

それは「border-l-4」。

「border-l-2」はスタイルがあたるのになんで？！

そんな場合は通常、

①スーパーリロード（Ctrl+Shift+R）

②一度bashのwatchを止めて、watchなしでbashを叩く

Bash

npx @tailwindcss/cli -i ./customize.css -o ./tailwind.css

npx @tailwindcss/cli -i ./customize.css -o ./tailwind.css

のいずれかを行えばスタイルがあたるはずなんだが、それでもスタイルがあたらない場合がある。

確かに、tailwind.css（仮）の中身を確認すると、「border-l-4」は見当たらない。

よく見たら「border-teal-300」までないじゃないか！

tailwind.css（仮）にborder-l-4の定義を直接書いてみると、ちゃんと動く。

でもbashを叩いた瞬間、それが消えてしまう（泣）

どうしたものか考えた結果、customize.css（仮）に下記を書くことに。

CSS

@layer components { 
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-teal-300 {
    border-color: var(--color-teal-300);
  }
}

@layer components { 
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-teal-300 {
    border-color: var(--color-teal-300);
  }
}