Tailwind CSS - 实用优先的现代 CSS 框架

Tailwind CSS 是一个实用优先的 CSS 框架，它提供了诸如 flex、pt-4、text-center 和 rotate-90 等原子类，可以直接在 HTML 标记中组合使用来构建任何设计。本文介绍 Tailwind CSS 的核心特性和优势。

为现代 Web 而生

Tailwind CSS 充分利用最新的 CSS 特性，为开发者提供愉悦的开发体验。

响应式设计

只需在任意工具类前添加屏幕尺寸前缀，即可在特定断点应用样式：

<div class="text-base md:text-lg lg:text-xl">
  响应式文字大小
</div>

滤镜效果

支持 backdrop-blur 等多种滤镜效果，可叠加使用直到满足设计需求：

<img class="blur-sm brightness-150 grayscale" src="photo.jpg" />

暗黑模式

在任何颜色类前添加 dark: 前缀，即可在暗黑模式下应用：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  自适应主题内容
</div>

CSS 变量主题定制

通过简单的 CSS 变量即可自定义主题：

@theme {
  --font-sans: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --color-mint-500: oklch(0.7 0.28 145);
}

P3 广色域

Tailwind 的调色板使用更鲜艳的广色域颜色，无需了解复杂概念即可获得更丰富的色彩。

CSS Grid 布局

直接在 HTML 中使用 Grid 工具类，让复杂布局更易理解：

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

过渡与动画

过渡效果直观易用，只需添加几个工具类即可实现：

<button class="transition ease-in-out duration-300 hover:scale-105">
  悬停放大
</button>

级联层

Tailwind 使用 CSS 层（@layer）避免特异性问题，确保样式按预期应用。

逻辑属性

支持多语言文本方向，RTL（从右到左）布局不再是噩梦。

容器查询

将元素标记为容器，让子元素根据容器尺寸自适应：

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2">
    <!-- 内容 -->
  </div>
</div>

渐变效果

无需记忆复杂的渐变语法，用几个工具类即可创建平滑渐变：

<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  渐变背景
</div>

3D 变换

支持在三维空间中缩放、旋转和平移元素：

<div class="transform rotate-y-12 hover:rotate-y-0 transition-transform">
  3D 旋转效果
</div>

构建更快、体积更小

Tailwind 在构建生产版本时会自动移除所有未使用的 CSS，最终的 CSS 包体积是最小的。大多数 Tailwind 项目向客户端传输的 CSS 不到 10KB。

广泛应用

由于 Tailwind 的低层级特性，它不会鼓励你设计相同的网站两次。许多知名网站都使用 Tailwind 构建，包括：

• OpenAI
• Shopify
• Reddit
• The Verge
• Google I/O
• TED Talks
• Midjourney
• NASA/JPL

Tailwind Plus 组件库

Tailwind Plus 是由 Tailwind CSS 创作者设计和开发的一系列精美、完全响应式的 UI 组件集合，包含数百个即用型示例。

相关资源

• 官方文档: https://tailwindcss.com/docs
• 在线演练场: https://play.tailwindcss.com/
• GitHub 仓库: https://github.com/tailwindlabs/tailwindcss
• Headless UI: https://headlessui.com
• Heroicons: https://heroicons.com