Tailwindでエディトリアル調のUIを作る

トーンを先に決める

今回は「紙面風 + 工業的アクセント」を狙って、以下を軸にしました。

• 見出しはセリフ体
• 本文は可読性優先の和文フォント
• 強調色はシアン/エメラルド系

CSS変数で配色を管理

:root {
  --bg-canvas: 248 246 240;
  --text-main: 20 30 38;
  --surface: 255 255 255;
  --line: 205 218 224;
  --accent: 6 95 120;
}

ダークモードは対称性を意識

ライト側だけ作ると、ダーク時に情報の重みが崩れがちです。 セマンティック変数を先に作っておくと、トーンの調整が一括でできます。