TAG
#Tailwind CSS
8 件の記事がこのタグでまとめられています。
Tailwind ユーティリティクラスは実 CSS のどこに落ちるか — 命名から読む utility-first
Tailwind のユーティリティクラスは text-sm や px-4 のように CSS プロパティと値の 1:1 マッピングですが、デザインシステムの「役割」までは届きません。AetherEchoes の paper/ink/cat-* 4 階層と、Tailwind v4 の @theme で utility と token を合流させた実装の観点で整理します。
OKLCH 色空間でデザイナーが実務で詰まる 3 点
Tailwind v4 でデフォルト化された OKLCH カラー。グラデーションの色かぶり、中間色のくすみ、ブランド色の置き換えの 3 つで、私が実装側として詰まったポイントと運用を整理します。
<dialog> / Popover / <details name> をデザイナーの目で使い分ける
ネイティブ HTML の overlay 3 兄弟、<dialog> と Popover API と <details name> を AetherEchoes の管理画面と記事ページで実装してみた。「閉じ方」のデザインを先に決めれば、3 つの使い分けはほぼ自動で決まります。
B+A Hybrid デザインシステム採択の記録
AetherEchoes に採択した B+A Hybrid 案。Atlas をメイン軸に、Reader 記事に Ledger の編集ツールを差し込むハイブリッド。
Next.js 16 + Tailwind v4 を本番で動かして気付いた N 個のこと
Pages Router + @theme + next/font 7 種で個人雑誌を組んだ実装メモ。CSS 変数の名前空間、フォントの preload 戦略、ISR の落とし穴。
Tailwind CSS v4 の @theme で色と余白を一本化する
Tailwind v4 では設定ファイルが CSS ベースに切り替わりました。`@theme` で色・余白・タイポグラフィをひとつの場所で管理する方法を紹介します。
CSS Custom Properties で design tokens を運用する
Figma の Variables と CSS の `--` プロパティを 1:1 で同期させる運用ルール。デザインと実装が乖離しない仕組み。
グリッドはまず 8px から。それ以外を許さない
4 や 6 や 10 が混ざる UI は、すべての隙間が「なんとなく」になる。8 の倍数だけにすると、設計がシンプルになる。