TailwindCSS 实用技巧

TailwindCSS 是一个功能优先的 CSS 框架，让你可以快速构建现代化的用户界面。

响应式设计

TailwindCSS 使用移动优先的断点系统：

html
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 移动端全宽，平板一半，桌面三分之一 -->
</div>

暗色模式

轻松实现暗色模式支持：

html
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">
    支持暗色模式的文本
  </p>
</div>

常用布局模式

Flexbox 居中

html
<div class="flex items-center justify-center h-screen">
  <div>居中内容</div>
</div>

Grid 布局

html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

自定义动画

css
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

总结

TailwindCSS 的实用类方法让 CSS 开发变得更加高效和愉快。