Tailwind CSS 实用指南

Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量预定义的实用类，让你可以快速构建现代化的用户界面。

为什么选择 Tailwind CSS？

1. 快速开发：不需要编写自定义 CSS，直接使用实用类
2. 响应式设计：内置响应式前缀，轻松实现响应式布局
3. 可定制：通过配置文件轻松定制设计系统
4. 体积小：只包含你使用的样式，生产环境体积很小

基础使用

安装和配置

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

基本类名

<div class="bg-blue-500 text-white p-4 rounded-lg">
  这是一个蓝色背景的卡片
</div>

响应式设计

Tailwind 使用移动优先的方法：

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

深色模式

Tailwind 支持深色模式：

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  支持深色模式的元素
</div>

实用技巧

1. 使用 @apply 指令：在自定义 CSS 中复用 Tailwind 类
2. 配置主题：在 tailwind.config.js 中自定义颜色、字体等
3. 使用插件：扩展 Tailwind 的功能

总结

Tailwind CSS 是一个强大的工具，可以大大提高开发效率。通过合理使用实用类和配置，可以快速构建出美观且一致的界面。