Open1
Tailwind CSS の CSS 共通化について
酒井 駿あまりやりすぎない方がいいとある。
一部和訳
「@apply」を使用する際は、ただコードを「きれいに見せる」ためだけに使わないように注意しましょう。確かに、TailwindクラスでいっぱいのHTMLテンプレートは見た目が良くないかもしれません。しかし、カスタムCSSが多く含まれるプロジェクトで変更を行う方がもっと悪いです。
もしすべてに「@apply」を使用し始めると、実質的には再びCSSを書いていることになり、Tailwindが提供するワークフローや保守性の利点を捨て去ることになります。例えば：
- 常にクラス名を考えなければならず、何かに名前を付けることに時間を取られたりエネルギーを消耗したりすることは、作業を遅くする大きな原因になります。
- 変更を加えるために複数のファイルを行き来しなければならないため、すべてを一か所にまとめることに比べて、作業の流れを大きく阻害します。
- スタイルの変更が恐ろしいことになります。CSSはグローバルですので、あるクラスの min-width の値を変更しても、サイトの別の部分に影響を与えないと確信できますか？
- CSSのバンドルサイズが大きくなります。
「@apply」を使用する場合は、ボタンやフォームコントロールのような非常に小さく、高い再利用性のあるものに限定しましょう。そしてそれも、Reactのようなフレームワークを使用している場合には、コンポーネントの方が良い選択になる場合があります。