Tailwind CSS 4 实用技巧

前言

Tailwind CSS 4 带来了全新的引擎和 API，让样式开发更加高效。

自定义主题

/* globals.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-surface: #f8fafc;
  --font-display: 'Inter', sans-serif;
}

响应式设计

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 响应式卡片布局 -->
</div>

暗色模式

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

组合技巧

<!-- 卡片组件 -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 
            bg-white dark:bg-gray-800 p-6 shadow-sm
            hover:shadow-md transition-shadow">
  <h3 class="text-lg font-semibold">标题</h3>
  <p class="mt-2 text-gray-600 dark:text-gray-400">内容</p>
</div>

动画与过渡

<div class="transition-all duration-300 ease-in-out hover:scale-105">
  Hover me
</div>

总结

Tailwind CSS 4 让样式开发变得前所未有的高效，结合暗色模式和响应式设计，可以快速构建出优秀的用户界面。