最近流行りのCSS関連の技術としてよく話題に上がるTailwind CSSについての発表です。
Tailwind CSSはユーティリティファーストのCSSフレームワークで、以下のようにHTMLに対して「ユーティリティ(汎用)クラス」を設定することで、スタイルをあてる方式を取っています。
例: ‹button class=”m-8 px-8 py-4 bg-red-400 hover:bg-red-200”›
本トークでは、この設定されたクラスの中の hover:bg-red-200
の hover:
部分(これを状態(ステート)修飾子と呼びます)に注目し、他にどのような修飾子があるのか?どんな使い方ができるのか?を限られた時間でできる限り余すこと無くご紹介します!
意外と知らなかった。ここまで表現できたのか。となる修飾子がたくさんあるので、ぜひ聞いてください!