返回文章列表

2026年4月25日

Tailwind CSS 实用技巧

#CSS #Tailwind #前端

为什么选择 Tailwind CSS

Tailwind CSS 是一个功能优先（utility-first）的 CSS 框架：

快速开发 — 不用离开 HTML 写样式
一致性 — 内置设计系统约束
体积小 — 自动 tree-shaking 未使用的样式
响应式 — sm:, md:, lg: 前缀

实用技巧

1. 使用 `group` 实现父子联动

<div class="group p-4 hover:bg-gray-100 rounded-xl">
  <h3 class="group-hover:text-blue-500 transition-colors">
    标题会随父元素悬停变色
  </h3>
  <p class="group-hover:opacity-100 opacity-0 transition-opacity">
    描述文字会渐入
  </p>
</div>

2. `line-clamp` 截断多行文本

<p class="line-clamp-2">
  这段很长的文本会被截断为两行，多余的部分
  会显示省略号...
</p>

3. 暗色模式

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-gray-100">
    自动适应暗色模式
  </p>
</div>

Tailwind CSS v4 引入了原生 CSS 变量支持，主题切换更加流畅！