TailwindCSS 路线 02：布局与响应式——把断点策略写成“团队规范”

<div class="px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12">

<main className="mx-auto max-w-5xl px-4 pb-24 pt-12 sm:px-6 sm:pt-16 lg:px-8">
  <header className="border-b border-[var(--border)]/60 pb-10">
    <h1 className="font-serif text-4xl font-bold tracking-tight">文章</h1>
    <p className="mt-4 text-lg text-stone-600 dark:text-stone-400">说明</p>
  </header>

  <div className="mt-8 space-y-2">
    {/* rows */}
  </div>
</main>

<article className="mx-auto max-w-3xl px-4 pb-24 pt-12 sm:px-6 sm:pt-16">
  <header className="pb-10">{/* meta + title */}</header>
  <div className="pt-2">{/* body */}</div>
</article>

<main className="mx-auto max-w-6xl px-4 pb-24 pt-10 sm:px-6 lg:px-8">
  <div className="grid gap-6 md:grid-cols-[260px,1fr]">
    <aside className="md:sticky md:top-6">{/* nav */}</aside>
    <section className="min-w-0">{/* content */}</section>
  </div>
</main>