フロントエンドカンファレンス沖縄2022
LT 5分

あなたはいくつ知ってる?Tailwind CSSの状態(ステート)修飾子!

gatchan0807 がっちゃん gatchan0807
1

最近流行りの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-200hover: 部分(これを状態(ステート)修飾子と呼びます)に注目し、他にどのような修飾子があるのか?どんな使い方ができるのか?を限られた時間でできる限り余すこと無くご紹介します!

意外と知らなかった。ここまで表現できたのか。となる修飾子がたくさんあるので、ぜひ聞いてください!