「tailwindcss-layout」タグのついた3記事

Tailwind CSS で Flexbox レイアウトを構築する手順。flex コンテナの作成から flex-direction / flex-wrap / justify-content / align-items / gap / order までを表で整理し、ナビゲーションバー・カード・検索フォームの実装例で定着させます。

CSS Grid を Tailwind CSS で活用する方法。grid-cols / grid-rows・col-span / row-span・place-items・grid-auto-flow・サブグリッド対応まで体系化し、ダッシュボード / カードギャラリー / 画像グリッドの実装で定着させます。

Tailwind CSS の 4px ベースのスペーシングシステム。padding / margin / gap / space-* / 論理プロパティ (ps/pe) を比較し、フルブリードレイアウトのための負マージンや v4 の任意値指定まで実践例で整理します。