Tailwind CSS 是什么，它与传统 CSS 框架有什么区别？ - 面试题

Tailwind CSS 是一个实用优先的 CSS 框架，它提供了大量的预定义类名，让开发者能够快速构建用户界面。与传统 CSS 框架（如 Bootstrap）不同，Tailwind CSS 不提供预构建的组件，而是提供底层的工具类，让开发者可以自由组合这些类来创建独特的设计。

Tailwind CSS 的核心优势：

快速开发：无需编写自定义 CSS，直接使用预定义类
高度可定制：通过配置文件完全自定义设计系统
响应式设计：内置响应式前缀（sm、md、lg、xl、2xl）
深色模式：内置深色模式支持
小体积：通过 PurgeCSS 自动删除未使用的样式
一致性：强制使用统一的设计令牌

安装和配置：

通过 npm 安装：npm install -D tailwindcss
初始化配置：npx tailwindcss init
配置文件：tailwind.config.js
在 CSS 中引入：@tailwind base; @tailwind components; @tailwind utilities;

常用类名示例：

间距：p-4（padding）、m-2（margin）、mt-4（margin-top）
颜色：bg-blue-500（背景色）、text-white（文字颜色）
布局：flex、grid、block、inline-block
尺寸：w-full（宽度 100%）、h-screen（高度 100vh）
字体：text-xl、font-bold、leading-relaxed
边框：border-2、rounded-lg、shadow-md

响应式设计：

断点：sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px）
示例：md:w-1/2（中等屏幕及以上宽度为 50%）

配置文件示例：

javascript
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
  plugins: [],
}

最佳实践：

使用 @apply 提取重复的类
合理使用配置文件自定义设计系统
利用 JIT 模式提高性能
使用插件扩展功能
保持 HTML 结构清晰