Tailwind CSS 布局 #

<div class="container mx-auto">
  <!-- 内容最大宽度受限于当前断点，并水平居中 -->
</div>

<div class="container mx-auto px-4">
  <!-- 默认不居中，需要添加 mx-auto -->
  <!-- 建议添加水平内边距 -->
</div>

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}

<!-- 块级元素 -->
<div class="block">块级元素</div>

<!-- 内联元素 -->
<span class="inline">内联元素</span>

<!-- 内联块 -->
<span class="inline-block">内联块</span>

<!-- 隐藏 -->
<div class="hidden">隐藏元素</div>

<div class="flex">
  弹性容器
</div>

<div class="inline-flex">
  内联弹性容器
</div>

<div class="grid">
  网格容器
</div>

<div class="inline-grid">
  内联网格容器
</div>

<!-- 移动端隐藏，桌面端显示 -->
<div class="hidden md:block">
  仅在 md 及以上显示
</div>

<!-- 移动端显示，桌面端隐藏 -->
<div class="block md:hidden">
  仅在 sm 显示
</div>

<!-- 特定断点显示 -->
<div class="hidden lg:block xl:hidden">
  仅在 lg 显示
</div>

<!-- 静态定位（默认） -->
<div class="static">静态定位</div>

<!-- 相对定位 -->
<div class="relative">
  相对定位
  <div class="absolute top-0 right-0">绝对定位子元素</div>
</div>

<!-- 绝对定位 -->
<div class="absolute top-0 left-0">绝对定位</div>

<!-- 固定定位 -->
<div class="fixed bottom-0 left-0">固定在底部</div>

<!-- 粘性定位 -->
<div class="sticky top-0">粘性定位</div>

<!-- 方向偏移 -->
<div class="absolute inset-0">填充父元素</div>
<div class="absolute inset-x-0 top-0">顶部条</div>
<div class="absolute inset-y-0 left-0">左侧栏</div>
<div class="absolute top-0 right-0">右上角</div>
<div class="absolute bottom-0 left-0">左下角</div>

<!-- 绝对居中 -->
<div class="relative h-64">
  <div class="absolute inset-0 m-auto w-32 h-32 bg-blue-500">
    居中元素
  </div>
</div>

<!-- 或者使用 transform -->
<div class="relative h-64">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    居中元素
  </div>
</div>

<div class="z-0">z-index: 0</div>
<div class="z-10">z-index: 10</div>
<div class="z-20">z-index: 20</div>
<div class="z-30">z-index: 30</div>
<div class="z-40">z-index: 40</div>
<div class="z-50">z-index: 50</div>
<div class="z-auto">z-index: auto</div>

<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50">
  导航栏
</nav>

<!-- 模态框 -->
<div class="fixed inset-0 z-50">
  模态框
</div>

<!-- 下拉菜单 -->
<div class="relative">
  <button>菜单</button>
  <div class="absolute top-full left-0 z-10">
    下拉内容
  </div>
</div>

<!-- 可见（默认） -->
<div class="overflow-visible">内容可见</div>

<!-- 隐藏 -->
<div class="overflow-hidden">内容隐藏</div>

<!-- 滚动 -->
<div class="overflow-scroll">始终显示滚动条</div>

<!-- 自动 -->
<div class="overflow-auto">内容溢出时显示滚动条</div>

<!-- 剪裁 -->
<div class="overflow-clip">内容剪裁</div>

<!-- 水平溢出 -->
<div class="overflow-x-auto overflow-y-hidden">
  水平滚动
</div>

<!-- 垂直溢出 -->
<div class="overflow-y-auto overflow-x-hidden">
  垂直滚动
</div>

<!-- 平滑滚动 -->
<div class="scroll-smooth">
  平滑滚动
</div>

<!-- 自动滚动 -->
<div class="scroll-auto">
  自动滚动
</div>

<!-- 左浮动 -->
<div class="float-left">左浮动</div>

<!-- 右浮动 -->
<div class="float-right">右浮动</div>

<!-- 清除浮动 -->
<div class="float-none">不浮动</div>
<div class="clear-left">清除左浮动</div>
<div class="clear-right">清除右浮动</div>
<div class="clear-both">清除两侧浮动</div>

<div class="clear-left">清除左浮动</div>
<div class="clear-right">清除右浮动</div>
<div class="clear-both">清除两侧浮动</div>
<div class="clear-none">不清除</div>

<!-- 填充 -->
<img class="object-fill w-full h-48" src="image.jpg">

<!-- 包含 -->
<img class="object-contain w-full h-48 bg-gray-200" src="image.jpg">

<!-- 覆盖 -->
<img class="object-cover w-full h-48" src="image.jpg">

<!-- 无缩放 -->
<img class="object-none w-full h-48" src="image.jpg">

<!-- 缩小 -->
<img class="object-scale-down w-full h-48" src="image.jpg">

<img class="object-cover object-center w-full h-48" src="image.jpg">
<img class="object-cover object-top w-full h-48" src="image.jpg">
<img class="object-cover object-bottom w-full h-48" src="image.jpg">
<img class="object-cover object-left w-full h-48" src="image.jpg">
<img class="object-cover object-right w-full h-48" src="image.jpg">

<!-- 可见 -->
<div class="visible">可见元素</div>

<!-- 隐藏（保留空间） -->
<div class="invisible">隐藏但保留空间</div>

<!-- 折叠（不保留空间） -->
<div class="collapse">折叠元素</div>

<!-- hidden：不渲染，不占空间 -->
<div class="hidden">不显示</div>

<!-- invisible：隐藏但占空间 -->
<div class="invisible">隐藏但占空间</div>

<!-- visible：正常显示 -->
<div class="visible">正常显示</div>

<body class="pt-16">
  <nav class="fixed top-0 left-0 right-0 z-50 bg-white shadow">
    <div class="container mx-auto px-4 h-16 flex items-center justify-between">
      <span class="font-bold text-xl">Logo</span>
      <div class="space-x-4">
        <a href="#" class="hover:text-blue-500">首页</a>
        <a href="#" class="hover:text-blue-500">关于</a>
        <a href="#" class="hover:text-blue-500">联系</a>
      </div>
    </div>
  </nav>
  
  <main class="container mx-auto px-4">
    页面内容
  </main>
</body>

<div class="flex">
  <aside class="sticky top-20 h-screen w-64 flex-shrink-0 overflow-y-auto">
    侧边栏内容
  </aside>
  
  <main class="flex-1">
    主内容区
  </main>
</div>

<div class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
  <div class="bg-white rounded-lg p-6 max-w-md">
    模态框内容
  </div>
</div>

<div class="overflow-x-auto">
  <div class="flex space-x-4 pb-4">
    <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow p-4">卡片 1</div>
    <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow p-4">卡片 2</div>
    <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow p-4">卡片 3</div>
    <div class="flex-shrink-0 w-64 bg-white rounded-lg shadow p-4">卡片 4</div>
  </div>
</div>