Tailwind CSS 4 新特性与实用技巧

Tailwind CSS 4 简介

Tailwind CSS 4 带来了革命性的变化：从 JavaScript 配置转向 CSS-first 配置，性能提升显著。

CSS-first 配置

不再需要 tailwind.config.js，直接在 CSS 中配置：

@import "tailwindcss";
@theme {
  --color-primary: #2563eb;
  --color-dark: #1a1a2e;
  --font-sans: "Inter", "Noto Sans SC", sans-serif;
}

自定义主题色

定义主题色后，可以直接在类名中使用：

<button class="bg-primary text-white">Click me</button>
<p class="text-dark">Hello World</p>

实用技巧

1. 渐变色背景

<div class="bg-gradient-to-r from-blue-500 to-indigo-600">
  Beautiful gradient
</div>

2. 卡片悬停效果

<div class="rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
  Hover me
</div>

3. 响应式网格

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
  <!-- Responsive grid -->
</div>

性能优化

Tailwind CSS 4 的新引擎带来了显著的性能提升：

• 构建速度更快 — 全新的解析引擎
• 输出体积更小 — 智能去除未使用的样式
• 更好的兼容性 — 原生 CSS 支持

总结

Tailwind CSS 4 是前端开发的优秀工具，CSS-first 配置和性能提升让它更加强大和易用。