Tailwind CSS

Tailwind CSS 简介

Tailwind CSS 是一个实用至上的 CSS 框架，专为快速构建自定义用户界面而设计。与传统 UI 套件（如 Bootstrap、Material UI）不同，它不提供预制组件，而是提供一套低层次的实用类（utility classes），让开发者直接在 HTML 中组合出任意设计。

设计理念

框架核心理念是「实用类优先」（utility-first）：

• 直接在标记语言中应用原子化样式，避免在 CSS 与 HTML 之间反复切换
• 类名直观映射 CSS 属性，例如 flex、pt-4、text-center、rotate-90
• 无需离开 HTML 即可完成样式调整，提升开发效率
• 通过约束设计系统实现一致的间距、配色、排版与阴影

核心特性

按需生成

默认情况下，Tailwind 仅扫描项目源文件并生成实际使用到的样式类，生产构建产物体积通常仅为几 KB，优于大多数传统 CSS 框架。

响应式设计

内置 sm、md、lg、xl、2xl 断点，可直接在类名中加前缀实现响应式布局：

<!-- 在中等及以上屏幕宽度时变为三列 -->
<div class="grid md:grid-cols-3">
  <!-- 内容 -->
</div>

状态变体

支持 hover、focus、active、disabled、group-hover、peer-checked 等状态前缀，便于表达交互样式：

<button class="bg-blue-500 hover:bg-blue-700">
  提交
</button>

暗色模式

通过 dark: 前缀启用暗色主题变体，依赖 prefers-color-scheme 或自定义选择器。

自定义配置

通过 tailwind.config.js 扩展或覆盖默认主题，包括颜色、字体、断点、间距等：

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        brand: '#1da1f2',
      },
    },
  },
  plugins: [],
}

安装与使用

使用 npm 安装：

npm install -D tailwindcss
npx tailwindcss init

在入口 CSS 文件中引入：

/* src/input.css */
@tailwind base;     /* 注入基础样式与 CSS 重置 */
@tailwind components; /* 注入组件类 */
@tailwind utilities;  /* 注入实用类 */

启动开发监听模式：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

生产构建：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

适用场景

• 需要快速构建自定义 UI 风格的项目
• 设计系统需要严格约束的设计师与前端协作
• 希望避免类名冲突、追求高可维护性的中大型应用
• 与 React、Vue、Svelte、Next.js 等现代框架无缝集成

延伸阅读

完整 API、插件机制、JIT 引擎原理与高级用法，请参考官方文档站点。该项目使用 MIT 许可证发布，社区活跃，适合长期采用。