Tailwind CSS - 主页

使用 Tailwind CSS 进行现代 Web 开发

快速开始 | 核心概念 | 最佳实践 | 资源

Tailwind CSS 是一个现代化的、实用工具优先的 CSS 框架，旨在快速精准地构建定制用户界面。Tailwind 不提供预设样式的组件，而是提供低级别的实用工具类，您可以直接在 HTML 中组合这些类，将您的独特设计变为现实。

2024 年为何选择 Tailwind CSS？

无与伦比的定制性： 无需离开 HTML 或编写任何自定义 CSS，即可构建您能想象到的任何设计。
闪电般的工作流程： 实用工具优先的方法消除了上下文切换，让您专注于构建。
超优化的性能： 即时 (JIT) 编译器只会生成您实际使用的样式，从而产生微小的 CSS 文件包和闪电般的加载速度。
响应式设计： 借助内置的可组合屏幕尺寸前缀（如 md: 和 lg:），创建复杂的响应式布局变得直观简单。
保证一致性： 使用预定义的设计系统（包含颜色、间距和排版）来工作，确保您的用户界面保持一致且专业。
蓬勃发展的生态系统： 凭借 Typography 和 Forms 等官方插件，以及与所有现代前端框架的集成，Tailwind 完美适用于任何技术栈。

Tailwind CSS 入门

虽然您可以使用 Play CDN 进行快速演示，但在实际项目中推荐通过包管理器安装 Tailwind。这样可以解锁 Tailwind 的全部潜力，包括自定义和性能优化。

推荐：Tailwind CLI 安装

按照以下步骤设置一个新项目：

# 1. 安装 Tailwind CSS
# 使用 npm
npm install -D tailwindcss
# 或者使用 yarn
yarn add -D tailwindcss

# 2. 创建您的配置文件
npx tailwindcss init

# 这将创建一个 `tailwind.config.js` 文件。

3. 配置您的模板路径： 打开 tailwind.config.js 并告诉 Tailwind 在哪里可以找到您的 HTML 和 JS 文件，以便它能够扫描这些文件以查找类名。

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

4. 将 Tailwind 指令添加到您的 CSS 中： 创建一个主 CSS 文件（例如，./src/input.css）并添加以下行。

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

5. 启动构建过程： 运行 Tailwind CLI 来扫描您的模板并构建您的 CSS 文件。在您工作时，请保持它在后台运行。

# 在您的终端中运行此命令
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

6. 在您的 HTML 中链接编译后的 CSS： 最后，将编译后的 output.css 文件添加到 HTML 的 <head> 部分。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">
    Hello world!
  </h1>
</body>
</html>

用于快速演示：Play CDN

对于原型设计或在线试用，您可以通过单个 <script> 标签添加 Tailwind。请注意，这不推荐用于生产环境。

<!doctype html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

先决条件

为了充分利用 Tailwind CSS，您应该对 HTML 和 CSS 有扎实的理解。了解现代 JavaScript 框架（如 React 或 Vue）和包管理器（如 npm）会很有帮助，但并非入门的必需条件。

核心概念一览

本教程系列将引导您了解 Tailwind 的核心概念。与其记住每一个类，不如专注于理解其底层系统。

布局： Flexbox、Grid、Display、Position、Sizing、Spacing

样式： Colors、Typography、Backgrounds、Borders、Effects、Filters

交互性： Hover/Focus 状态、Transitions、Animations

响应性： 移动优先断点 (sm:、md:、lg:)

自定义： 配置 tailwind.config.js 以匹配您的品牌

常见问题 (FAQ)

问：我的 HTML 代码看起来很乱，有这么多类。这正常吗？

是的，起初会如此。但这种所谓的“混乱”也具有高度的可读性和局部作用域。现代的解决方案是创建可复用组件（例如在 React/Vue 中），将这些冗长的类字符串封装起来，从而两全其美：既有可维护的组件，又拥有实用工具类的强大功能。

问：Tailwind CSS 与 Bootstrap 有何不同？

Bootstrap 提供预构建的组件（如 .card、.btn-primary），这使得标准布局的开发速度很快，但更难定制。Tailwind 则提供低级别的实用工具类，让您可以完全自由地构建自定义设计，而无需与框架样式“作斗争”。

问：如何处理表单或散文的自定义样式？

Tailwind 为此提供了官方的第一方插件。使用 @tailwindcss/forms 来获得美观、一致的表单样式，并使用 @tailwindcss/typography 通过单个 .prose 类来样式化博客文章或文档页面等内容块。

# 安装官方插件
npm install -D @tailwindcss/forms @tailwindcss/typography

问：如何在页面上居中一个元素？

要水平居中块级元素，请使用 mx-auto。要在一个容器内水平和垂直居中内容，请使用 Flexbox。将 flex items-center justify-center 应用于父容器。

<!-- Center child in the middle of the screen -->
<div class="min-h-screen flex items-center justify-center">
  <div>Centered Content</div>
</div>