「このカードの中のチェックボックスがオンになったら、カードごと枠線を青くしたい」——こういうUI、ついJavaScriptで addEventListener を書いてしまっていませんか？ Tailwind CSSには …
続きを読むTailwind CSSのhas-*入門｜group-has / peer-hasで「子の状態」から親を装飾する（JSなし）
CSS
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でhoverが効かない原因と対処｜v4のタッチデバイス問題を解決
「昨日まで効いていた hover: が、Tailwind CSS を v4 に上げたら急に効かなくなった」——そんな経験はありませんか？ ボタンにマウスを乗せても色が変わらない。でもコードは間違っていない。実はこれ、あな…
続きを読むTailwind CSSとBootstrapの違い｜どっちを使うべきか実例とコードで解説
「Tailwind CSSとBootstrap、結局どっちを使えばいいの？」と迷っていませんか？どちらもCSSを効率よく書くための人気フレームワークですが、設計思想がまったく逆で、向いている場面もはっきり分かれます。なん…
続きを読むTailwind CSSの使い方【初心者向け】レイアウト・カードUI・レスポンシブまで実践解説
Tailwind CSSを導入したものの、「結局どうやってUIを組めばいいの？」と手が止まっていませんか？ 公式ドキュメントを開くとクラスが大量に並んでいて、「p-4？flex？md:？……どれをどう使えば、ちゃんとした…
続きを読む[Rails]SassC::SyntaxError: Error: Invalid CSS after “…”: expected expression (e.g. 1px, bold), was “.png);”の解決方法【Rails 7/8対応】
本番環境で assets:precompile を実行した瞬間、SassC::SyntaxError: Error: Invalid CSS after "…": expected expressio…
続きを読む