Tailwind CSS 实用技巧分享

前言

Tailwind CSS 已经成为我日常开发中不可或缺的工具。今天来分享一些我在使用过程中积累的实用技巧。

1. 善用任意值语法

Tailwind 的任意值语法（arbitrary values）非常强大，当预设的工具类不能满足需求时，可以直接使用方括号语法：

/* 自定义颜色 */
bg-[#FFB6C1]

/* 自定义间距 */
p-[13px]

/* 自定义网格 */
grid-cols-[1fr_2fr_1fr]

2. 响应式设计的最佳实践

采用移动端优先的策略，从小屏幕开始设计：

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

3. 暗色模式适配

使用 dark: 前缀，配合 CSS 变量，可以轻松实现暗色模式：

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

4. 动画与过渡

Tailwind 内置了丰富的过渡和动画工具类：

<button class="transition-all duration-300 ease-out hover:scale-105 hover:shadow-lg">
  优雅的按钮动画
</button>

总结

Tailwind CSS 的设计哲学是让你在不离开 HTML 的情况下完成大部分样式工作。熟练掌握这些技巧后，你的开发效率会大大提升。

希望这些分享对你有帮助！