Tailwind CSS 从入门到精通

admin

2025-11-23 05:21 阅读 1879

快速掌握Tailwind CSS工具类框架，提升开发效率

Tailwind CSS 实用指南

Tailwind CSS 是一个功能类优先的 CSS 框架，让你无需离开 HTML 就能快速构建现代化界面。

1. 安装配置

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

配置 tailwind.config.js：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        primary: "#3490dc",
      },
    },
  },
  plugins: [],
}

2. 布局类



  内容
  固定


  1
  2-3

3. 响应式设计

使用断点前缀：sm(640px), md(768px), lg(1024px), xl(1280px)


  响应式宽度

响应式字体

4. 状态变体


  自动适配

5. 间距与尺寸


padding

margin


  尺寸控制

6. 自定义组件

/* 使用 @apply 提取组件 */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white 
         rounded-lg hover:bg-blue-600 
         transition-colors duration-200;
}

.card { @apply p-6 bg-white rounded-xl shadow-lg hover:shadow-xl; }

7. 动画效果


  悬停动画

加载中...


旋转

最佳实践

使用 @apply 提取重复的类组合
配置主题扩展而非覆盖默认值
启用 JIT 模式获得更好性能
使用 Prettier 插件自动排序类名