タブやアコーディオン、ドロップダウン——「開いているときだけ見た目を変えたい」UIで、JavaScriptからクラスをいちいち付け外ししていませんか？ classList.add(‘active’) と remove(‘…
続きを読むTailwind CSSのdata属性で状態スタイルを切り替える方法（data-*）
Tailwind CSS
Tailwind CSSでダークモードを実装する方法｜dark:の使い方とv4の設定
「ダークモードに対応してほしい」と言われて、身構えた経験はありませんか？ 全部のスタイルを2つ用意するのは大変そう……と思いきや、Tailwind CSSなら dark: という接頭辞を付けるだけで、驚くほど簡単に対応で…
続きを読むTailwind CSSでフォームを綺麗に作る方法｜入力欄・ラベル・バリデーション表示
フォームって、地味なわりに崩れやすいと思いませんか？ <input> をそのまま置くとブラウザのデフォルト枠が出てきて、デザインが一気に古く見える……。かといって細かくスタイルを当てるのも面倒。 Tailwi…
続きを読むTailwind CSSのpeerとは？groupとの違い・peer-checked・peer-invalid・効かない原因まで解説
「チェックされたら、別の要素の色を変えたい」「入力エラーのときだけメッセージを赤く出したい」——こういうUI、JavaScriptを書かずにできたら楽だと思いませんか？ Tailwind CSSには group という仕…
続きを読むTailwind CSSの使い方【初心者向け】レイアウト・カードUI・レスポンシブまで実践解説
Tailwind CSSを導入したものの、「結局どうやってUIを組めばいいの？」と手が止まっていませんか？ 公式ドキュメントを開くとクラスが大量に並んでいて、「p-4？flex？md:？……どれをどう使えば、ちゃんとした…
続きを読むTailwind CSSのgroup-hover完全解説｜ネスト（入れ子）する方法も紹介
Tailwind CSSの group-hover は、親要素にマウスを乗せたときに子要素のスタイルを変えられる便利な機能です。ですが、いざ使おうとすると「group-hoverが効かない」「group が複数あるときに…
続きを読む