Tailwind CSS - 核心概念

Tailwind CSS - 现代核心概念

Tailwind CSS 是一个实用工具优先的 CSS 框架，用于快速构建现代、定制设计的网站。理解其核心概念是有效使用它的关键。本指南涵盖了其基本原则，从实用工具优先的特性到高级定制和现代开发工作流程。

JIT 引擎：颠覆者

现代 Tailwind CSS 由即时 (JIT) 编译器驱动。JIT 引擎不是分发所有可能的实用工具，而是扫描你的文件并仅生成你实际使用的 CSS。这带来了微小的生产构建文件，并支持像任意值（例如 top-[117px]）这样的强大功能，而不会使你的 CSS 膨胀。

核心概念参考

主题	描述	示例
实用工具优先基础	通过在 HTML 中直接应用小型、单一用途的实用工具类来构建复杂的组件。	<div class="p-4 bg-white rounded-lg shadow-md">
处理状态	使用 hover:、focus:、active:、disabled: 和 group-hover: 等变体来为不同状态的元素设置样式。	<button class="bg-blue-500 hover:bg-blue-700">
响应式设计	在特定的断点（sm:、md:、lg:、xl:）应用样式，以创建完全响应式的布局。	<div class="w-full md:w-1/2">
暗色模式	使用 dark: 变体轻松为你的网站添加暗色主题，它采用 class 策略。	<body class="bg-white dark:bg-gray-900">
重用样式	使用 @apply 将重复的实用工具模式提取到自定义类中，或者在 React/Vue 等框架中构建可重用组件。	.btn { @apply px-4 py-2 rounded; }
定制设计系统	通过 tailwind.config.js 文件修改或扩展 Tailwind 的默认主题（颜色、间距、字体）。	theme: { extend: { colors: { 'brand': '#ff0000' } } }

示例：一个现代、响应式的个人资料卡片

此示例结合了几个核心概念：实用工具优先、响应式设计、状态处理和暗色模式。请注意布局如何在中小屏幕（md:）上从垂直变为水平。

<!DOCTYPE html>
<!-- 要切换暗色模式，你可以在此处使用 JavaScript 添加/移除 'dark' 类 -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // 为演示启用基于 class 策略的暗色模式
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen p-4">

  <div class="w-full max-w-sm mx-auto bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <!-- 图片部分 -->
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://picsum.photos/seed/profile/400/400" alt="Modern building architecture">
      </div>
      <!-- 内容部分 -->
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">软件工程师</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Alex Doe</a>
        <p class="mt-2 text-slate-500 dark:text-slate-400">使用 Tailwind CSS 构建精美且响应式的 Web 应用程序。期待与您联系！</p>

        <!-- 带状态的按钮 -->
        <button class="mt-4 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-slate-800">
          联系我
        </button>
      </div>
    </div>
  </div>

</body>
</html>

现代开发工作流程

1. 安装

对于一个真实项目，你将通过像 npm 这样的包管理器安装 Tailwind。

# 使用 npm
npm install -D tailwindcss

# 初始化 Tailwind，创建 tailwind.config.js
npx tailwindcss init

2. 配置

在 tailwind.config.js 中告诉 Tailwind 扫描哪些文件以查找实用工具类。

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

3. 将 Tailwind 指令添加到你的 CSS

创建一个主 CSS 文件（例如 src/input.css）并添加 @tailwind 指令。这是 Tailwind 注入其生成样式的地方。

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

4. 运行构建过程

使用 Tailwind CLI 编译你的 CSS 文件。

# 一次性编译
npx tailwindcss -i ./src/input.css -o ./dist/output.css

# 监听变化
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch