Tailwind CSS - 简介

Tailwind CSS - 现代入门指南

Tailwind CSS 是一个工具优先（utility-first）的 CSS 框架，专为快速 UI 开发而设计。与 Bootstrap 等基于组件的框架不同，Tailwind 提供了低级别的实用工具类，让你可以无需离开 HTML 文件就能构建完全自定义的设计。

JIT 引擎：现代 Tailwind 的核心

现代 Tailwind CSS 由即时编译 (JIT) 编译器提供支持。这是一个颠覆性创新。JIT 引擎不再交付一个庞大、预定义的 CSS 文件，而是扫描你的 HTML、JavaScript 和其他模板文件中的类名，并仅生成你实际使用的 CSS。这使得生产构建包极其小巧，无论你在开发过程中使用了多少实用工具类。

入门指南：现代工作流程

虽然你可以使用 CDN 进行快速演示，但 Tailwind 的真正威力在于通过像 npm 这样的包管理器进行完善的构建设置来解锁。

1. 安装

# 进入你的项目目录
npm install -D tailwindcss
npx tailwindcss init

这会创建一个 tailwind.config.js 文件。

2. 配置内容路径

在 tailwind.config.js 中，告诉 Tailwind 在哪里查找你的类。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 创建你的主 CSS 文件

创建一个 CSS 文件（例如 ./src/input.css）并添加 Tailwind 指令。

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 启动构建过程

运行 Tailwind CLI 来编译你的 CSS。--watch 标志（flag）会在你进行更改时自动重新构建。

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

最后，在你的 HTML 文件中链接 ./dist/output.css 并开始构建！

2024 年的主要优势

快速开发：通过直接在标记中组合实用工具，快速构建复杂的界面。
高度可定制：在 tailwind.config.js 文件中调整每一个颜色、间距单位、字体和断点（breakpoint）。
微小的生产构建包：JIT 引擎确保你的最终 CSS 文件只有几 KB。
无需命名约定：告别为 .user-profile-card__header--active 这样的类名绞尽脑汁。
组件友好：与 React、Vue 和 Svelte 等现代框架完美结合，让你能够创建封装好的、带样式的组件。

解决常见问题

“我的 HTML 文件中充满了这些类，看起来很混乱！”

这是常见的初次印象。现代解决方案是采用基于组件的工作流程。当你将重复的 UI 提取到模板片段或 JavaScript 框架组件中时，一长串类只在一个地方定义。对于非组件化项目，你可以在 CSS 中使用 @apply 指令来创建自定义的、可重用的组件类。

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700;
}

<!-- 在你的 HTML 文件中 -->
<button class="btn-primary">Click me</button>

“它有陡峭的学习曲线。”

学习曲线主要在于记忆实用工具的名称。然而，它们高度直观（p-4 用于内边距，flex 用于弹性盒，text-lg 用于大文本）。借助官方的 Tailwind CSS IntelliSense 等现代编辑器扩展，你将获得自动补全和类预览功能，让这个过程变得更加简单。