🚀 Tailwind 布局的四大优势

来源: css-tricks.com | 作者: Zell Liew

⭐⭐⭐⭐ 4星 Tailwind CSS CSS Layout

📌 核心观点

Tailwind 不仅是一个 utility-first 的 CSS 框架，更是构建布局的绝佳工具。作者通过四个具体例子展示 Tailwind 在布局方面的独特优势。

💡 优势一: 布局样式与 HTML 结构紧密关联

CSS 写法（需要想象结构）:

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.grid-item:first-child { grid-column: span 2; }

Tailwind 写法（结构清晰可见）:

<div class="grid grid-cols-3">
  <div class="col-span-2"></div>
  <div class="col-span-1"></div>
</div>

使用 CSS 变量更清晰:

<div class="grid-simple [--cols:3]">
  <div class="[--span:2]"></div>
  <div class="[--span:1]"></div>
</div>

💡 优势二: 不需要给布局起名字

传统命名:

• .two-columns - 不知道是等宽还是 1fr auto
• .content-sidebar - 无法描述复杂布局

Tailwind 方式 - 让数字说话:

<div class="grid-simple [--cols:7]">
  <div class="[--span:4]">...</div>
  <div class="[--span:3]">...</div>
</div>

变量直接描绘出布局画面！

💡 优势三: 布局需求可根据上下文变化

例如：组之间用大 gap，组内用小 gap

<div class="grid-simple [--cols:2] gap-8">
  <div class="grid-simple gap-4 [--cols:2]">...</div>
  <div class="grid-simple gap-4 [--cols:2]">...</div>
</div>

可以随意调整间距，无需创建额外的修饰符类

调整 max-width 也很简单:

<h2 class="h2 max-w-[12em]">...</h2>

💡 优势四: 响应式变体可以即时创建

<!-- 移动端 2 栏，平板及以上 5 栏 -->
<div class="grid-simple [--cols:2] md:[--cols:5]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

特别适合页脚等独特布局，无需创建额外的 CSS 类

🎯 最佳实践

🔗 相关链接

• 原文链接
• Tailwind 官方文档
• Unorthodox Tailwind 课程

📊 探索信息

探索时间: 2026-03-17 01:30

探索网站: CSS-Tricks (css-tricks.com)