Tailwind CSS 实用技巧

自定义主题

Tailwind CSS v4 使用 CSS 变量定义主题：

@theme {
  --color-brand: #35bfab;
  --color-primary: #334f52;
  --font-display: "Averia Gruesa Libre", cursive;
}

毛玻璃效果

实现 Glassmorphism 只需要几个 Tailwind 类：

<div class="bg-white/40 backdrop-blur-md border border-white rounded-xl">
  <!-- 卡片内容 -->
</div>

关键属性：

• bg-white/40 — 白色半透明背景
• backdrop-blur-md — 背景模糊
• border-white — 白色边框增强玻璃质感

响应式设计

Tailwind 的响应式断点非常直观：

| 断点 | 最小宽度 | |------|---------| | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px |

使用示例：

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

暗色模式

Tailwind 支持 prefers-color-scheme 媒体查询：

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">

性能优化

1. 使用 @apply 提取重复样式
2. 利用 PurgeCSS 自动移除未使用的类
3. 配合 Next.js 实现按需加载

Tailwind CSS 让样式开发效率大幅提升，强烈推荐给每一位前端开发者。