Tailwind CSS
中心的な概念
Utility-First Fundamentals : 独自の CSS を書き下すのではなく、既存のクラスを HTML に適用するという思想 これにより、独自 CSS を書かずに独自コンポーネント設計が可能
Handling Hover, Focus, and Other States : 全てのユーティリティクラスは条件で適用できる
hover:xxx とか
group-hover:xxx のように、親要素の条件による適用もできる
Responsive Design
sm:xxx、md:xxx みたいなプレフィクスを付けることで、画面幅を条件としたスタイルの適用が可能
Dark Mode
Reusing Styles
基本的にはコンポーネントとして切り出すと良い (React コンポーネントなど)
@apply ディレクティブで、ユーティリティパターンを独自 CSS として定義できる
Adding Custom Styles
tailwind.config.js の theme セクション
角括弧記法で、任意の値を指定できる : class="top-[117px]"
theme 関数を使用してデザイントークンを指定できる : class="grid Grid-cols-[fit-content(theme(spacing.32))]"
完全に任意なプロパティを指定することもできる : class="[mask-type:luminance]"
任意の variant も : class="lg:[&:nth-child(3)]:hover:underline"
空白はアンダースコアで表現 (Tailwind が自動的に空白に置き換える) : class="grid grid-cols-[1fr_500px_2fr]
バックスラッシュでエスケープできる
空白が適切でない箇所は空白に変換されない
class="text-[22px]" と class="text-[#bada55]" は、その値で font-size なのか color なのか判別
変数を使っている場合などで判別ができない場合はヒントを与えられる : class="text-[length:var(--my-var)]"
真に独自の CSS スタイルを追加したければ、スタイルシートに記述するのが最も楽
@layer ディレクティブで、Tailwind のレイヤーにスタイルを追加することもできる