同じカードコンポーネントなのに、サイドバーに置くと窮屈で崩れて見える——そんな経験はありませんか？ 広いメイン領域では横並びできれいに収まるのに、狭いサイドバーに置いた途端、画像とテキストが横に並んだままはみ出してしまう…
続きを読むTailwind CSS v4のコンテナクエリ入門｜@containerで「置き場所」に応じて変わるUIを作る
デザイン
Tailwind CSS v4でtailwind.config.jsが無い？｜@themeでカスタムカラーを定義する方法
Tailwind CSS を v4 に上げたら、tailwind.config.js が見当たらない——「設定ってどこに書くの？」「ブランドカラーを追加したいのに、今までのやり方が通用しない」と戸惑っていませんか？ これ…
続きを読むTailwind CSSでline-clampが効かない｜paddingの落とし穴と正しい行数省略の使い方
カード一覧の本文抜粋を「2行で切って … を出したい」と思って line-clamp-2 を付けたのに、3行目がはみ出したり、まったく効かなかったり——そんな経験はありませんか？ クラス名は合っているのに省略されない。で…
続きを読むTailwind CSS v3→v4 移行でスタイルが効かない・崩れる時の原因と対処【逆引き】
「Tailwind CSS を v4 に上げたら、いきなり画面が崩れた」——そんな経験、ありませんか？ v4 は 2025 年 1 月にリリースされ、Rust 製の新エンジン（Oxide）とCSSファースト設定への大きな…
続きを読むTailwind CSSで管理画面レイアウトを作る方法｜固定ヘッダー・サイドバー開閉・スクロール領域まで
Tailwind CSS で管理画面やダッシュボードを作ろうとして、「ヘッダーを固定したいのにスクロールで消える」「サイドバーとメインのスクロールがうまく分かれない」「スマホでサイドバーをどう畳めばいいのか分からない」—…
続きを読むTailwind CSSでhoverが効かない原因と対処｜v4のタッチデバイス問題を解決
「昨日まで効いていた hover: が、Tailwind CSS を v4 に上げたら急に効かなくなった」——そんな経験はありませんか？ ボタンにマウスを乗せても色が変わらない。でもコードは間違っていない。実はこれ、あな…
続きを読むTailwind CSSとBootstrapの違い｜どっちを使うべきか実例とコードで解説
「Tailwind CSSとBootstrap、結局どっちを使えばいいの？」と迷っていませんか？どちらもCSSを効率よく書くための人気フレームワークですが、設計思想がまったく逆で、向いている場面もはっきり分かれます。なん…
続きを読むTailwind CSSのdata属性で状態スタイルを切り替える方法（data-*）
タブやアコーディオン、ドロップダウン——「開いているときだけ見た目を変えたい」UIで、JavaScriptからクラスをいちいち付け外ししていませんか？ classList.add(‘active’) と remove(‘…
続きを読むTailwind CSSでダークモードを実装する方法｜dark:の使い方とv4の設定
「ダークモードに対応してほしい」と言われて、身構えた経験はありませんか？ 全部のスタイルを2つ用意するのは大変そう……と思いきや、Tailwind CSSなら dark: という接頭辞を付けるだけで、驚くほど簡単に対応で…
続きを読むTailwind CSSでフォームを綺麗に作る方法｜入力欄・ラベル・バリデーション表示
フォームって、地味なわりに崩れやすいと思いませんか？ <input> をそのまま置くとブラウザのデフォルト枠が出てきて、デザインが一気に古く見える……。かといって細かくスタイルを当てるのも面倒。 Tailwi…
続きを読む12
