Tailwind CSS 完全指南

NOTE

本文档最后更新于 2026年4月，涵盖 Tailwind CSS 4.0 新特性、常用工具类、响应式设计、暗色模式及与设计系统集成。

Tailwind CSS 概述

什么是 Tailwind CSS

Tailwind CSS 是一个实用优先（Utility-First）的 CSS 框架，通过提供大量低层次的工具类（Utility Classes）来实现样式构建。与传统 CSS 框架（如 Bootstrap）不同，Tailwind 不提供预构建的组件，而是提供原子化的样式原语，让开发者通过组合工具类来构建自定义设计。

Tailwind CSS 核心理念：

理念	说明
实用优先	提供低层次工具类，非高级组件
原子化	每个类做一件事，职责单一
约束设计	通过设计令牌约束取值范围
零运行开销	无 JavaScript 运行时
Purge 支持	生产构建自动移除未使用样式

Tailwind CSS 发展历程

版本	发布年份	核心特性
Tailwind CSS 0.x	2017	概念验证，基础工具类
Tailwind CSS 1.0	2019	稳定版，组件化开始
Tailwind CSS 2.0	2020	深色模式、响应式变体、JIT 引擎
Tailwind CSS 3.0	2022	Just-in-Time 引擎、孔雀配置
Tailwind CSS 4.0	2024	Lightning CSS、原子化 API、改进性能

核心理念

为什么选择 Tailwind：

快速原型开发：无需切换文件，直接在 HTML 中编写样式
一致性保证：设计令牌约束确保样式统一
减少 CSS 文件：无需编写大量自定义 CSS
响应式简单：前缀即断点，清晰直观
维护性好：样式与组件同在，消除冲突

IMPORTANT

Tailwind 的学习曲线主要在于记忆常用工具类。一旦熟悉后，开发效率显著提升。

Tailwind CSS 4.0 新特性

Lightning CSS 集成

Tailwind CSS 4.0 使用 Rust 编写的 Lightning CSS 作为 CSS 处理引擎，性能大幅提升：

指标	Tailwind 3.x	Tailwind 4.0
构建速度	基准	3-5x 提升
热更新	~200ms	~50ms
CSS 输出	标准 CSS	可选压缩/优化
Sourcemap	完整	优化体积

原子化 CSS API

4.0 引入了新的 CSS 优先配置方式：

/* 直接在 CSS 中定义主题 */
@theme {
  /* 颜色 */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
  --color-primary-950: #082f49;
 
  /* 字体 */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
 
  /* 间距 */
  --spacing-128: 32rem;
 
  /* 圆角 */
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
}

CSS-first 配置

/* style.css */
@import "tailwindcss";
 
/* 自定义颜色 */
@theme {
  --color-brand: oklch(70% 0.2 240);
  --color-brand-hover: oklch(60% 0.25 240);
}
 
/* 使用自定义颜色 */
.btn-primary {
  background-color: var(--color-brand);
}
 
.btn-primary:hover {
  background-color: var(--color-brand-hover);
}

改进的暗色模式

@theme {
  --color-surface: #ffffff;
  --color-surface-dark: #0f172a;
}
 
.card {
  background-color: var(--color-surface);
  color: #1e293b;
}
 
@media (prefers-color-scheme: dark) {
  .card {
    background-color: var(--color-surface-dark);
    color: #e2e8f0;
  }
}

改进的伪类支持

/* Tailwind 4.0 支持更多伪类 */
.field {
  &:focus {
    outline: 2px solid var(--color-primary);
  }
 
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
 
  &:invalid {
    border-color: red;
  }
}

Tailwind vs CSS Modules vs Styled Components 对比

样式方案对比

特性	Tailwind CSS	CSS Modules	Styled Components
编写位置	HTML/JSX	独立 .module.css	JavaScript/TSX
工具类	50-200 个/组件	1-10 个	1-5 个
学习曲线	中等	低	中等
设计一致性	自动约束	需手动规范	需手动规范
运行时开销	零	零	有（JS 注入）
构建体积	小（purge）	小	中等
IDE 支持	优秀	优秀	优秀
组件复用	困难	简单	简单
动态样式	需模板字符串	需模板字符串	优秀

代码风格对比

Tailwind CSS：

function Button({ variant = 'primary', children }) {
  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors';
 
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700'
  };
 
  return (
    <button className={`${baseStyles} ${variants[variant]}`}>
      {children}
    </button>
  );
}

CSS Modules：

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.15s;
}
 
.primary {
  background-color: #2563eb;
  color: white;
}
 
.primary:hover {
  background-color: #1d4ed8;
}
 
.secondary {
  background-color: #e5e7eb;
  color: #1f2937;
}

import styles from './Button.module.css';
 
function Button({ variant = 'primary', children }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
}

Styled Components：

import styled from 'styled-components';
 
const ButtonBase = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.15s;
`;
 
const PrimaryButton = styled(ButtonBase)`
  background-color: #2563eb;
  color: white;
 
  &:hover {
    background-color: #1d4ed8;
  }
`;
 
const SecondaryButton = styled(ButtonBase)`
  background-color: #e5e7eb;
  color: #1f2937;
 
  &:hover {
    background-color: #d1d5db;
  }
`;
 
function Button({ variant = 'primary', children }) {
  const ButtonComponent = variant === 'primary'
    ? PrimaryButton
    : SecondaryButton;
 
  return <ButtonComponent>{children}</ButtonComponent>;
}

性能对比

指标	Tailwind	CSS Modules	Styled Components
CSS 文件大小	~10KB	~20KB	~30KB
JS 运行时	0KB	0KB	~15KB
首次渲染	最快	快	中等
动态样式性能	快	快	中等

核心配置

基础配置

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 内容扫描路径
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html'
  ],
 
  // 主题扩展
  theme: {
    extend: {
      // 颜色
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1'
        }
      },
 
      // 字体
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace']
      },
 
      // 间距
      spacing: {
        '128': '32rem'
      },
 
      // 圆角
      borderRadius: {
        'xl': '1rem',
        '2xl': '1.5rem'
      },
 
      // 动画
      animation: {
        'spin-slow': 'spin 3s linear infinite'
      }
    }
  },
 
  // 插件
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio')
  ]
};

PostCSS 配置

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

Vite 配置

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [react(), tailwindcss()]
});

常用工具类速查表

布局类

类别	工具类	说明
Display	`block`, `inline-block`, `flex`, `grid`, `hidden`	元素显示类型
Flex	`flex`, `flex-row`, `flex-col`, `items-center`, `justify-between`	弹性盒布局
Grid	`grid`, `grid-cols-3`, `gap-4`, `col-span-2`	网格布局
Spacing	`p-4`, `m-4`, `px-4`, `py-2`, `space-x-4`	内边距/外边距
Sizing	`w-full`, `h-screen`, `min-h-0`, `max-w-lg`	尺寸控制
Position	`relative`, `absolute`, `fixed`, `sticky`	定位方式
Z-Index	`z-0`, `z-10`, `z-50`, `z-index`	层级控制

弹性盒（Flexbox）工具类

工具类	说明
`flex`	display: flex
`inline-flex`	display: inline-flex
`flex-row`	flex-direction: row
`flex-col`	flex-direction: column
`flex-wrap`	flex-wrap: wrap
`flex-1`	flex: 1 1 0%
`flex-auto`	flex: 1 1 auto
`flex-none`	flex: none
`items-start`	align-items: flex-start
`items-center`	align-items: center
`items-end`	align-items: flex-end
`justify-start`	justify-content: flex-start
`justify-center`	justify-content: center
`justify-between`	justify-content: space-between
`justify-around`	justify-content: space-around
`gap-4`	gap: 1rem
`gap-x-4`	column-gap: 1rem
`gap-y-4`	row-gap: 1rem

网格（Grid）工具类

工具类	说明
`grid`	display: grid
`grid-cols-1` 到 `grid-cols-12`	列数
`col-span-1` 到 `col-span-12`	跨越列数
`row-span-2`	跨越行数
`grid-rows-3`	行模板
`auto-cols-min`	grid-auto-columns: min-content

间距（Spacing）工具类

前缀	说明	示例
`p-*`	padding	`p-4` = padding: 1rem
`m-*`	margin	`m-4` = margin: 1rem
`px-*`	padding-left/right	`px-4`
`py-*`	padding-top/bottom	`py-4`
`mx-*`	margin-left/right	`mx-auto`
`my-*`	margin-top/bottom	`my-4`
`space-x-*`	gap (水平)	`space-x-4`
`space-y-*`	gap (垂直)	`space-y-4`

间距数值表（rem）

数值	像素	Tailwind 类
0	0px	`p-0`, `m-0`
1	4px	`p-1`, `m-1`
2	8px	`p-2`, `m-2`
3	12px	`p-3`, `m-3`
4	16px	`p-4`, `m-4`
5	20px	`p-5`, `m-5`
6	24px	`p-6`, `m-6`
8	32px	`p-8`, `m-8`
10	40px	`p-10`, `m-10`
12	48px	`p-12`, `m-12`
16	64px	`p-16`, `m-16`
20	80px	`p-20`, `m-20`
24	96px	`p-24`, `m-24`
auto	auto	`m-auto`
px	1px	`border px`

排版（Typography）工具类

类别	工具类	说明
字号	`text-xs` 到 `text-9xl`	字体大小
字重	`font-thin` 到 `font-black`	字体粗细
行高	`leading-none` 到 `leading-relaxed`	行高
字间距	`tracking-tighter` 到 `tracking-widest`	字母间距
文本对齐	`text-left`, `text-center`, `text-right`	对齐方式
文本颜色	`text-gray-500`, `text-red-600`	文本颜色
文字装饰	`underline`, `line-through`, `no-underline`	装饰线
溢出	`truncate`, `overflow-ellipsis`	文本溢出

字号数值表

类名	像素	rem
`text-xs`	12px	0.75rem
`text-sm`	14px	0.875rem
`text-base`	16px	1rem
`text-lg`	18px	1.125rem
`text-xl`	20px	1.25rem
`text-2xl`	24px	1.5rem
`text-3xl`	30px	1.875rem
`text-4xl`	36px	2.25rem
`text-5xl`	48px	3rem
`text-6xl`	60px	3.75rem
`text-7xl`	72px	4.5rem
`text-8xl`	96px	6rem
`text-9xl`	128px	8rem

背景与边框

类别	工具类	说明
背景色	`bg-blue-500`, `bg-transparent`	背景颜色
背景图	`bg-cover`, `bg-center`, `bg-no-repeat`	背景设置
边框	`border`, `border-2`, `border-t`, `border-gray-300`	边框样式
圆角	`rounded`, `rounded-lg`, `rounded-full`	圆角大小
阴影	`shadow`, `shadow-lg`, `shadow-none`	阴影效果
透明度	`bg-opacity-50`, `opacity-50`	透明度

交互状态

状态	工具类前缀	示例
Hover	`hover:`	`hover:bg-blue-600`
Focus	`focus:`	`focus:ring-2`
Active	`active:`	`active:bg-blue-800`
Disabled	`disabled:`	`disabled:opacity-50`
Group Hover	`group-hover:`	`group-hover:text-blue-600`

响应式设计

断点前缀

前缀	最小宽度	典型设备
`sm:`	640px	大手机
`md:`	768px	平板
`lg:`	1024px	笔记本
`xl:`	1280px	桌面
`2xl:`	1536px	大桌面

响应式示例

// 响应式布局
function ResponsiveLayout() {
  return (
    <div className="container mx-auto">
      {/* 移动端：单列，平板：两列，桌面：三列 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card>Item 1</Card>
        <Card>Item 2</Card>
        <Card>Item 3</Card>
      </div>
 
      {/* 响应式文本 */}
      <h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
        Responsive Heading
      </h1>
 
      {/* 响应式间距 */}
      <div className="p-4 md:p-8 lg:p-12">
        Content with responsive padding
      </div>
 
      {/* 响应式隐藏/显示 */}
      <div className="hidden md:block">
        {/* 仅在平板及以上显示 */}
      </div>
      <div className="block md:hidden">
        {/* 仅在移动端显示 */}
      </div>
    </div>
  );
}

移动优先设计

Tailwind 采用移动优先（Mobile-First）策略，基础样式适用于所有屏幕，通过断点前缀逐步增强：

// 基础样式（移动端）
function Button() {
  return (
    <button className="
      w-full           /* 移动端：全宽 */
      px-4 py-2        /* 移动端：内边距 */
      text-sm          /* 移动端：小字体 */
      md:w-auto        /* 平板及以上：自动宽度 */
      md:px-6          /* 平板及以上：更大内边距 */
      md:text-base     /* 平板及以上：正常字体 */
      lg:px-8          /* 桌面：更大内边距 */
      lg:text-lg        /* 桌面：大字体 */
    ">
      Button
    </button>
  );
}

暗色模式

模式选择

// tailwind.config.js
module.exports = {
  // 方式1：基于媒体查询（自动跟随系统）
  darkMode: 'media',
 
  // 方式2：基于类名（手动控制）
  darkMode: 'class'
};

class 模式使用

// React 组件中切换暗色模式
import { useState, useEffect } from 'react';
 
function ThemeToggle() {
  const [dark, setDark] = useState(false);
 
  useEffect(() => {
    const isDark = document.documentElement.classList.contains('dark');
    setDark(isDark);
  }, []);
 
  const toggleTheme = () => {
    if (dark) {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    } else {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    }
    setDark(!dark);
  };
 
  return (
    <button onClick={toggleTheme}>
      {dark ? '🌙' : '☀️'}
    </button>
  );
}

暗色模式样式

function Card() {
  return (
    <div className="
      bg-white                    /* 亮色模式背景 */
      text-gray-900               /* 亮色模式文字 */
      dark:bg-gray-900            /* 暗色模式背景 */
      dark:text-gray-100          /* 暗色模式文字 */
    ">
      <h2 className="
        text-gray-900              /* 亮色模式 */
        dark:text-white            /* 暗色模式 */
      ">
        Card Title
      </h2>
      <p className="
        text-gray-600              /* 亮色模式 */
        dark:text-gray-400         /* 暗色模式 */
      ">
        Card content
      </p>
    </div>
  );
}

Tailwind v3.4+ 暗色模式增强

/* Tailwind v3.4+ 支持 */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --color-primary: #0ea5e9;
  }
 
  .dark {
    --color-primary: #38bdf8;
  }
}
 
.btn {
  /* 自动适应暗色模式 */
  background-color: var(--color-primary);
}

自定义设计系统

@theme 指令（Tailwind 4.0）

@import "tailwindcss";
 
@theme {
  /* 品牌颜色 */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
 
  /* 语义颜色 */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
 
  /* 圆角系统 */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
 
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

设计令牌

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 颜色系统
      colors: {
        // 使用 OKLCH 获得更好的色彩一致性
        brand: {
          DEFAULT: 'oklch(55% 0.2 250)',
          light: 'oklch(70% 0.18 250)',
          dark: 'oklch(40% 0.22 250)'
        }
      },
 
      // 字体系统
      fontFamily: {
        display: ['Inter', 'system-ui', 'sans-serif'],
        body: ['Source Sans Pro', 'system-ui', 'sans-serif'],
        code: ['Fira Code', 'monospace']
      },
 
      // 间距系统
      spacing: {
        '18': '4.5rem',
        '88': '22rem'
      },
 
      // 圆角系统
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem'
      },
 
      // 动画
      animation: {
        'fade-in': 'fadeIn 0.3s ease-out',
        'slide-up': 'slideUp 0.3s ease-out'
      },
 
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' }
        }
      }
    }
  }
};

组件化最佳实践

// 创建可复用的按钮组件
function Button({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  className = ''
}) {
  const baseStyles = 'inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
 
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100',
    outline: 'border-2 border-gray-300 hover:bg-gray-100 dark:border-gray-600',
    ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800'
  };
 
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };
 
  return (
    <button
      className={`
        ${baseStyles}
        ${variants[variant]}
        ${sizes[size]}
        ${disabled || loading ? 'opacity-50 cursor-not-allowed' : ''}
        ${className}
      `}
      disabled={disabled || loading}
    >
      {loading && <Spinner />}
      {children}
    </button>
  );
}

组件模式

常见组件模式

卡片组件：

function Card({ title, children, footer, className = '' }) {
  return (
    <div className={`
      bg-white dark:bg-gray-800
      rounded-xl shadow-md
      border border-gray-200 dark:border-gray-700
      overflow-hidden
      ${className}
    `}>
      {title && (
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
            {title}
          </h3>
        </div>
      )}
      <div className="px-6 py-4">
        {children}
      </div>
      {footer && (
        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
          {footer}
        </div>
      )}
    </div>
  );
}

输入框组件：

function Input({
  label,
  error,
  className = '',
  ...props
}) {
  return (
    <div className={className}>
      {label && (
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          {label}
        </label>
      )}
      <input
        className={`
          w-full px-4 py-2
          bg-white dark:bg-gray-800
          border border-gray-300 dark:border-gray-600
          rounded-lg
          text-gray-900 dark:text-gray-100
          placeholder-gray-400 dark:placeholder-gray-500
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
          disabled:opacity-50 disabled:cursor-not-allowed
          ${error ? 'border-red-500 focus:ring-red-500' : ''}
        `}
        {...props}
      />
      {error && (
        <p className="mt-1 text-sm text-red-600 dark:text-red-400">
          {error}
        </p>
      )}
    </div>
  );
}

性能优化

JIT 模式

Tailwind CSS 的 Just-in-Time（JIT）引擎只生成实际使用的样式，确保 CSS 文件体积最小：

// 自动启用，无需配置
// 只需确保 content 配置正确
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ]
};

关键 CSS 提取

// 使用 @tailwindcss/critters 插件提取关键 CSS
import critters from '@tailwindcss/critters';
 
export default {
  plugins: [
    require('tailwindcss'),
    critters()
  ]
};

减少工具类数量

提取重复模式：将常用组合封装为组件
使用 @apply：将工具类提取到 CSS 类

/* 使用 @apply 提取 */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg transition-colors;
}
 
.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500;
}

AI 应用实战

AI 聊天界面

function AIChat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
 
  return (
    <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-900">
      {/* Header */}
      <header className="px-6 py-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
          AI Assistant
        </h1>
      </header>
 
      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-6 space-y-4">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`
              flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}
            `}
          >
            <div
              className={`
                max-w-[70%] rounded-2xl px-4 py-2
                ${msg.role === 'user'
                  ? 'bg-blue-600 text-white rounded-br-md'
                  : 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-bl-md'
                }
              `}
            >
              <p className="whitespace-pre-wrap">{msg.content}</p>
            </div>
          </div>
        ))}
      </div>
 
      {/* Input */}
      <div className="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
        <div className="flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Ask AI..."
            className="
              flex-1 px-4 py-2
              bg-gray-100 dark:bg-gray-700
              border border-gray-300 dark:border-gray-600
              rounded-full
              text-gray-900 dark:text-gray-100
              placeholder-gray-400 dark:placeholder-gray-500
              focus:outline-none focus:ring-2 focus:ring-blue-500
            "
          />
          <button className="
            px-4 py-2 bg-blue-600 text-white rounded-full
            hover:bg-blue-700 transition-colors
            disabled:opacity-50
          ">
            Send
          </button>
        </div>
      </div>
    </div>
  );
}

图像生成界面

function ImageGenerator() {
  const [prompt, setPrompt] = useState('');
  const [images, setImages] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
 
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
          Image Generator
        </h1>
 
        {/* Prompt Input */}
        <div className="mb-8">
          <textarea
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Describe your image..."
            rows={4}
            className="
              w-full px-4 py-3
              bg-white dark:bg-gray-800
              border border-gray-300 dark:border-gray-600
              rounded-xl text-gray-900 dark:text-gray-100
              focus:outline-none focus:ring-2 focus:ring-blue-500
            "
          />
          <button
            onClick={generate}
            disabled={loading || !prompt}
            className="
              mt-4 px-6 py-3
              bg-gradient-to-r from-purple-600 to-pink-600
              text-white font-medium rounded-xl
              hover:opacity-90 transition-opacity
              disabled:opacity-50 disabled:cursor-not-allowed
            "
          >
            {loading ? 'Generating...' : 'Generate Image'}
          </button>
        </div>
 
        {/* Generated Images */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {images.map((url, i) => (
            <div
              key={i}
              className="aspect-square rounded-2xl overflow-hidden shadow-lg"
            >
              <img
                src={url}
                alt={`Generated ${i + 1}`}
                className="w-full h-full object-cover"
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

技术概述与定位

Tailwind CSS 在前端生态中的位置

Tailwind CSS 属于原子化 CSS（Atomic CSS） 阵营，与传统 CSS 框架走了截然不同的路线。在前端样式解决方案的版图中，Tailwind 占据着独特的位置：

前端样式解决方案版图：

┌─────────────────────────────────────────────────────────────────────────────┐
│                          预构建组件库                                       │
│  Bootstrap │ Material UI │ Ant Design │ Chakra UI │ Radix UI              │
│  提供：按钮、卡片、导航等完整组件                                           │
│  代价：高度定制需要覆盖样式                                                │
├─────────────────────────────────────────────────────────────────────────────┤
│                          传统 CSS 框架                                      │
│  Foundation │ Bulma │ Tailwind UI (组件市场)                               │
│  提供：网格系统、基础样式、设计规范                                         │
│  代价：仍需编写自定义 CSS                                                  │
├─────────────────────────────────────────────────────────────────────────────┤
│                          CSS-in-JS 方案                                     │
│  Styled Components │ Emotion │ Goober │ Linaria                            │
│  提供：组件级作用域、动态样式、主题系统                                       │
│  代价：运行时开销、样式重复、调试困难                                        │
├─────────────────────────────────────────────────────────────────────────────┤
│                          原子化 CSS（Utility-First）                        │
│  ═══════════════════════════════════════════════                            │
│  Tailwind CSS │ UnoCSS │ Windi CSS │ Tachyon                               │
│  ═══════════════════════════════════════════════                            │
│  提供：最小工具类单元、约束性设计系统、零运行时                              │
│  优势：极致定制能力、无冗余代码、完美契合组件化                              │
└─────────────────────────────────────────────────────────────────────────────┘

Tailwind CSS 的核心价值主张

Tailwind CSS 的设计哲学建立在三个核心价值主张之上：

1. 约束即自由（Constraints Enable Creativity）

传统 CSS 给了开发者无限的可能性，但这种自由往往导致样式的不一致性。Tailwind 通过预定义的设计令牌（Design Tokens）约束取值范围：

约束维度	传统 CSS	Tailwind CSS
颜色	任意十六进制值	从预设调色板选择
间距	任意像素值	4px 为基准的固定梯度
字体大小	任意值	预定义刻度
圆角	任意值	预定义半径

这种约束不是限制，而是引导。它确保即使在大型团队中，所有人都在使用同一套视觉语言。

2. 内联即就近（Inline Styles with Constraints）

传统的 BEM 或 CSS Modules 方法要求开发者在两个地方维护样式：HTML 结构和 CSS 文件。Tailwind 将样式直接内联到 HTML/JSX 中：

// 传统方法：样式与结构分离
// Button.jsx
import styles from './Button.module.css';
 
export function Button({ children, variant = 'primary' }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
}
 
// Button.module.css
.button { padding: 0.5rem 1rem; border-radius: 0.5rem; }
.primary { background: #2563eb; color: white; }
 
// Tailwind 方法：样式与结构合一
export function Button({ children, variant = 'primary' }) {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
  };
  
  return (
    <button className={`px-4 py-2 rounded-lg ${variants[variant]}`}>
      {children}
    </button>
  );
}

3. 零运行时（Zero Runtime）

Tailwind 生成的 CSS 在构建时完全确定，不依赖 JavaScript 运行时。这意味着：

首屏渲染更快（无需等待 JS 执行）
更小的 bundle 体积
更好的 SEO（样式内联在 HTML 中）
SSR/SSG 友好

Tailwind CSS vs 竞品深度对比

UnoCSS 是 Tailwind 的强劲对手：

维度	Tailwind CSS	UnoCSS
配置方式	tailwind.config.js	uno.config.ts
预设	@tailwindcss/preset-*	@unocss/preset-*
图标	@tailwindcss/heroicons	@iconify/icons
JIT 引擎	内置	内置（Attotify）
社区规模	极大	快速增长
插件生态	成熟	新兴
学习曲线	中等	较低

UnoCSS 的优势在于更灵活的配置和更快的性能，但 Tailwind 的优势在于更成熟的生态和更广泛的社区支持。

Tailwind CSS 的适用场景

强烈推荐使用 Tailwind 的场景：

高度定制化的 UI 系统：需要独特视觉风格的产品
设计系统驱动的产品：遵循严格设计令牌的组件库
快速原型开发：需要快速迭代的项目
全栈框架集成：Next.js、Nuxt、Remix 等现代框架
需要极致性能的站点：追求 Core Web Vitals 优化的项目

可能不适合的场景：

简单静态页面：使用纯 HTML + 少量 CSS 可能更高效
CMS 主题定制：需要大量覆盖而非从头构建
遗留项目迁移：从传统 CSS 迁移成本较高
设计师主导的项目：设计师可能更习惯可视化工具

完整安装与配置

环境要求

Tailwind CSS 4.0 的环境要求：

要求	最低版本	推荐版本
Node.js	18.0.0	20.x LTS
npm/pnpm/yarn	8.x/8.x/1.22	最新稳定版
构建工具	Vite 5+ / Webpack 5+	Vite 6+

使用 Vite 安装（推荐）

Vite 是 Tailwind 官方推荐的构建工具，配置简单，性能优秀。

Step 1: 创建项目

# 使用 Vite 创建 React + TypeScript 项目
npm create vite@latest my-project -- --template react-ts
cd my-project
 
# 或使用 pnpm
pnpm create vite my-project -- --template react-ts
cd my-project

Step 2: 安装 Tailwind CSS 4.0

# 安装 Tailwind CSS Vite 插件
npm install -D @tailwindcss/vite
 
# 或 pnpm
pnpm add -D @tailwindcss/vite

Step 3: 配置 Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  // 路径别名配置
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

Step 4: 引入 Tailwind 指令

/* src/index.css */
@import "tailwindcss";

Step 5: 运行开发服务器

npm run dev
# 或 pnpm dev

使用 Next.js 安装

Next.js 项目可以使用 Tailwind 的 Next.js 插件：

Step 1: 创建项目

npx create-next-app@latest my-project --typescript --tailwind --eslint
# 或
pnpm create next-app my-project --typescript --tailwind --eslint

Step 2: 配置 PostCSS（如果需要）

// postcss.config.mjs
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
 
export default config;

Step 3: 创建 CSS 文件

/* app/globals.css */
@import "tailwindcss";

使用 Webpack 配置

虽然 Vite 是推荐选择，但对于已有 Webpack 配置的项目：

Step 1: 安装依赖

npm install -D tailwindcss postcss autoprefixer
# 或
pnpm add -D tailwindcss postcss autoprefixer

Step 2: 初始化配置

npx tailwindcss init -p

Step 3: 配置 tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
    },
  },
  plugins: [],
};

Step 4: 配置 PostCSS

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Step 5: 在 CSS 中引入

/* src/styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* 自定义组件类 */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700;
  }
}

Vue 项目配置

Step 1: 创建 Vue 项目

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app

Step 2: 安装 Tailwind

npm install -D @tailwindcss/vite
pnpm add -D @tailwindcss/vite

Step 3: 配置 Vite

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

Step 4: 引入样式

/* src/style.css */
@import "tailwindcss";

独立 CSS 项目

不需要构建工具？Tailwind 也支持 CDN 快速原型：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind 快速原型</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-lg p-6">
    <h1 class="text-2xl font-bold text-gray-900 mb-4">Hello Tailwind!</h1>
    <p class="text-gray-600">使用 CDN 快速构建原型。</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
      点击我
    </button>
  </div>
</body>
</html>

WARNING

CDN 方式仅适用于原型开发，不建议在生产环境使用。

核心概念详解

概念一：JIT 引擎与原子化 CSS

JIT 引擎工作原理

Tailwind CSS 的 Just-in-Time (JIT) 引擎是其最核心的技术创新。在 JIT 模式下，Tailwind 不再预生成所有可能的工具类（这会导致巨大的 CSS 文件），而是根据实际使用的类名按需生成。

传统模式 vs JIT 模式：

维度	传统模式 (Tailwind < 2.0)	JIT 模式 (Tailwind 2.0+)
CSS 文件大小	~400KB+ (完整工具类)	~10KB (仅使用部分)
生成策略	预生成所有类	按需扫描生成
任意值支持	不支持	支持 `[value]` 语法
断点定制	固定	完全可定制

JIT 扫描流程：

┌─────────────────────────────────────────────────────────────────────┐
│                          JIT 编译流程                                │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  1. 源码扫描                                                         │
│     └── 读取所有模板文件 (jsx, tsx, vue 等)                           │
│                                                                      │
│  2. 类名提取                                                         │
│     └── 使用正则匹配 className="..." 中的类名                         │
│         例如: "px-4 py-2 bg-blue-600"                               │
│                                                                      │
│  3. 按需生成                                                         │
│     └── 只为提取到的类生成对应的 CSS 规则                              │
│         px-4 → padding-left: 1rem; padding-right: 1rem;             │
│         py-2 → padding-top: 0.5rem; padding-bottom: 0.5rem;        │
│                                                                      │
│  4. 构建输出                                                         │
│     └── 输出极小的最终 CSS 文件                                       │
│                                                                      │
└─────────────────────────────────────────────────────────────────────┘

任意值语法

JIT 引擎支持**任意值（Arbitrary Values）**语法，允许开发者使用任意值：

// 任意宽度
<div className="w-[calc(100%-2rem)]">
  自定义宽度
</div>
 
// 任意颜色
<div className="bg-[#1a1a2e] text-[color:#e94560]">
  自定义颜色
</div>
 
// 任意字体大小
<div className="text-[17px]">
  非标准字号
</div>
 
// 任意间距
<div className="m-[2rem] p-[2.5rem]">
  自定义间距
</div>
 
// 组合使用
<div className="w-[100px] h-[200px] bg-[rgba(255,0,0,0.5)]">
  任意组合
</div>

TIP

任意值虽然方便，但应谨慎使用。过度使用会失去 Tailwind 的约束优势。建议将频繁使用的任意值添加到配置中。

原子化 CSS 的本质

Tailwind 的每个工具类都是单一职责的原子：

/* Tailwind 生成的原子类 */
.p-4 { padding: 1rem; }
.m-4 { margin: 1rem; }
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #ffffff; }
.rounded-lg { border-radius: 0.5rem; }
.font-bold { font-weight: 700; }
 
/* 组合使用这些原子类构建复杂样式 */
.button {
  /* 效果等同于： */
  padding: 1rem 2rem;
  background-color: #3b82f6;
  color: #ffffff;
  border-radius: 0.5rem;
  font-weight: 700;
}

概念二：设计令牌与主题系统

设计令牌的定义

设计令牌（Design Tokens）是设计系统中最小的不可分割的设计决策单元。它们将设计决策（颜色、间距、字体等）抽象为可复用的变量：

/* CSS 变量形式的设计令牌 */
:root {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  
  --spacing-4: 1rem; /* 16px */
  --spacing-8: 2rem; /* 32px */
  
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
}

Tailwind 4.0 @theme 指令

Tailwind 4.0 引入了 CSS-first 的主题配置方式：

@import "tailwindcss";
 
/* 使用 @theme 定义设计令牌 */
@theme {
  /* 品牌颜色 - 使用 HSL */
  --color-brand-50: hsl(210 100% 97%);
  --color-brand-100: hsl(210 100% 94%);
  --color-brand-200: hsl(210 100% 87%);
  --color-brand-300: hsl(210 100% 76%);
  --color-brand-400: hsl(210 100% 59%);
  --color-brand-500: hsl(210 100% 50%);
  --color-brand-600: hsl(210 100% 45%);
  --color-brand-700: hsl(210 100% 37%);
  --color-brand-800: hsl(210 100% 28%);
  --color-brand-900: hsl(210 100% 18%);
  --color-brand-950: hsl(210 100% 10%);
 
  /* 语义颜色 */
  --color-success: hsl(142 76% 36%);
  --color-warning: hsl(38 92% 50%);
  --color-error: hsl(0 84% 60%);
  --color-info: hsl(199 89% 48%);
 
  /* 间距系统 */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;
 
  /* 圆角系统 */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
 
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 
  /* 动画 */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-bounce-slow: bounce 2s infinite;
}
 
/* 定义关键帧动画 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Tailwind 3.x 配置文件形式

对于 Tailwind 3.x 或需要 TypeScript 配置的项目：

// tailwind.config.ts
import type { Config } from 'tailwindcss';
 
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class', // 或 'media'
  theme: {
    // 颜色系统
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a',
        950: '#172554',
      },
      // 支持 OKLCH 色彩空间
      brand: {
        DEFAULT: 'oklch(55% 0.2 250)',
        light: 'oklch(70% 0.18 250)',
        dark: 'oklch(40% 0.22 250)',
      },
    },
 
    // 字体系统
    fontFamily: {
      sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
      serif: ['Merriweather', 'Georgia', 'serif'],
      mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      display: ['Playfair Display', 'Georgia', 'serif'],
    },
 
    // 间距扩展
    spacing: {
      '18': '4.5rem',
      '88': '22rem',
      '128': '32rem',
    },
 
    // 圆角扩展
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      'DEFAULT': '0.25rem',
      'md': '0.375rem',
      'lg': '0.5rem',
      'xl': '0.75rem',
      '2xl': '1rem',
      '3xl': '1.5rem',
      'full': '9999px',
    },
 
    // 阴影扩展
    boxShadow: {
      'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
      'glow': '0 0 20px rgba(59, 130, 246, 0.5)',
      'glow-lg': '0 0 40px rgba(59, 130, 246, 0.6)',
    },
 
    // 动画扩展
    animation: {
      'fade-in': 'fadeIn 0.3s ease-out',
      'slide-up': 'slideUp 0.3s ease-out',
      'slide-down': 'slideDown 0.3s ease-out',
      'spin-slow': 'spin 3s linear infinite',
      'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
    },
    keyframes: {
      fadeIn: {
        '0%': { opacity: '0' },
        '100%': { opacity: '1' },
      },
      slideUp: {
        '0%': { transform: 'translateY(10px)', opacity: '0' },
        '100%': { transform: 'translateY(0)', opacity: '1' },
      },
      slideDown: {
        '0%': { transform: 'translateY(-10px)', opacity: '0' },
        '100%': { transform: 'translateY(0)', opacity: '1' },
      },
    },
 
    // 断点扩展
    screens: {
      'xs': '320px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
 
    // Z-index 扩展
    zIndex: {
      '-1': '-1',
      '0': '0',
      '10': '10',
      '20': '20',
      '30': '30',
      '40': '40',
      '50': '50',
      '60': '60',
      '70': '70',
      '80': '80',
      '90': '90',
      '100': '100',
      'auto': 'auto',
    },
  },
  plugins: [
    require('@tailwindcss/forms'), // 表单样式
    require('@tailwindcss/typography'), // Prose 文章排版
    require('@tailwindcss/aspect-ratio'), // 宽高比
    require('@tailwindcss/container-queries'), // 容器查询
  ],
} satisfies Config;

概念三：响应式设计系统

移动优先的设计哲学

Tailwind 采用**移动优先（Mobile-First）**的设计方法。这意味着：

基础样式默认应用于所有屏幕
更大的屏幕使用前缀增强（sm:, md:, lg:, xl:, 2xl:）
不是”在小屏幕上隐藏”，而是”在大屏幕上显示”

// 移动优先的设计示例
function Navigation() {
  return (
    // 基础：单列堆叠（移动端）
    // md 以上：水平导航
    <nav className="
      flex-col gap-4 p-4
      md:flex-row md:justify-between md:items-center
    ">
      <div className="text-xl font-bold">Logo</div>
      
      {/* 基础：移动端菜单（默认显示） */}
      {/* md 以上：大屏幕水平菜单 */}
      <ul className="
        flex-col gap-2
        md:flex-row md:gap-6
      ">
        <li><a href="#" className="hover:text-blue-500">首页</a></li>
        <li><a href="#" className="hover:text-blue-500">关于</a></li>
        <li><a href="#" className="hover:text-blue-500">联系</a></li>
      </ul>
    </nav>
  );
}

响应式断点详解

前缀	最小宽度	典型设备	使用场景
`sm:`	640px	大屏手机、横屏手机	平板竖屏
`md:`	768px	平板横屏、小笔记本	平板设备
`lg:`	1024px	笔记本、桌面显示器	笔记本
`xl:`	1280px	大桌面显示器	大屏设备
`2xl:`	1536px	超大屏幕	4K 显示器

响应式设计模式

1. 网格响应式布局

// 响应式网格
function ProductGrid() {
  return (
    <div className="
      grid
      grid-cols-1        /* 移动端：1列 */
      sm:grid-cols-2     /* 大手机：2列 */
      md:grid-cols-3     /* 平板：3列 */
      lg:grid-cols-4     /* 笔记本：4列 */
      xl:grid-cols-5     /* 大屏：5列 */
      gap-4 md:gap-6 lg:gap-8
    ">
      {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
        <ProductCard key={i} />
      ))}
    </div>
  );
}

2. 组件响应式变体

// 响应式按钮
function ResponsiveButton() {
  return (
    <button className="
      /* 基础：紧凑尺寸 */
      px-3 py-1.5 text-sm
      
      /* 平板及以上：标准尺寸 */
      md:px-4 md:py-2 md:text-base
      
      /* 大屏及以上：更大尺寸 */
      lg:px-6 lg:py-2.5 lg:text-lg
      
      /* 其他样式 */
      bg-blue-600 text-white rounded-lg
      hover:bg-blue-700
      transition-colors
    ">
      响应式按钮
    </button>
  );
}

3. 响应式排版

// 响应式字体大小
function Hero() {
  return (
    <div className="text-center space-y-4 md:space-y-6">
      <h1 className="
        text-3xl       /* 移动端 */
        sm:text-4xl    /* 大手机 */
        md:text-5xl    /* 平板 */
        lg:text-6xl    /* 笔记本 */
        xl:text-7xl    /* 大屏 */
        font-bold tracking-tight
      ">
        响应式标题
      </h1>
      
      <p className="
        text-base       /* 移动端 */
        md:text-lg      /* 平板及以上 */
        lg:text-xl      /* 大屏 */
        text-gray-600 dark:text-gray-400
        max-w-2xl mx-auto
        px-4            /* 移动端内边距 */
        md:px-0         /* 平板及以上无边距 */
      ">
        这是一段响应式描述文本。在不同屏幕上会自动调整字号和间距。
      </p>
    </div>
  );
}

4. 条件渲染 vs 响应式显示

function ConditionalVsResponsive() {
  return (
    <div>
      {/* 方式1：条件渲染（推荐用于复杂内容） */}
      {/* 移动端不渲染这个组件 */}
      <div className="hidden md:block">
        <DesktopOnlyComponent />
      </div>
      
      {/* 方式2：响应式显示/隐藏 */}
      {/* 只是视觉上的显示隐藏，内容始终存在 */}
      <div className="block md:hidden">
        {/* 仅在移动端显示 */}
        <MobileMenu />
      </div>
      <div className="hidden md:block">
        {/* 仅在桌面显示 */}
        <DesktopNav />
      </div>
      
      {/* 方式3：灵活切换 */}
      <div className="
        flex-col
        lg:flex-row
        gap-4
      ">
        {/* 在小屏垂直堆叠，大屏水平排列 */}
        <Sidebar />
        <MainContent />
      </div>
    </div>
  );
}

概念四：状态变体系统

交互状态变体

Tailwind 提供丰富的状态变体来处理用户交互：

function StateVariantsDemo() {
  return (
    <div className="space-y-8 p-8">
      {/* 基础按钮 */}
      <button className="
        px-4 py-2 rounded-lg font-medium
        bg-blue-600 text-white
        /* 交互状态 */
        hover:bg-blue-700 hover:shadow-lg
        focus:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
        active:bg-blue-900 active:scale-95
        disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:shadow-none
        /* 过渡动画 */
        transition-all duration-200 ease-in-out
      ">
        状态演示按钮
      </button>
 
      {/* 输入框 */}
      <input
        type="text"
        placeholder="输入框状态演示"
        className="
          w-full max-w-md px-4 py-2
          bg-white dark:bg-gray-800
          border border-gray-300 dark:border-gray-600
          rounded-lg
          /* 状态变体 */
          placeholder:text-gray-400
          focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none
          hover:border-gray-400
          disabled:bg-gray-100 disabled:cursor-not-allowed
          invalid:border-red-500 invalid:ring-red-500
          /* 过渡 */
          transition-colors duration-200
        "
      />
 
      {/* 分组悬停效果 */}
      <div className="group p-4 bg-gray-100 rounded-lg hover:bg-gray-200">
        <h3 className="text-lg font-semibold group-hover:text-blue-600 transition-colors">
          分组悬停
        </h3>
        <p className="text-gray-600 group-hover:text-gray-900 transition-colors">
          悬停父元素时，子元素也会响应
        </p>
      </div>
    </div>
  );
}

伪类变体完整列表

变体	伪类	用途
`hover:`	`:hover`	鼠标悬停
`focus:`	`:focus`	获得焦点
`active:`	`:active`	激活/点击中
`disabled:`	`:disabled`	禁用状态
`required:`	`:required`	必填字段
`invalid:`	`:invalid`	无效输入
`valid:`	`:valid`	有效输入
`checked:`	`:checked`	选中状态
`indeterminate:`	`:indeterminate`	不确定状态
`placeholder:`	`::placeholder`	占位符样式

结构化伪类变体

变体	伪类	用途
`first:`	`:first-child`	第一个子元素
`last:`	`:last-child`	最后一个子元素
`only:`	`:only-child`	唯一子元素
`odd:`	`:nth-child(odd)`	奇数子元素
`even:`	`:nth-child(even)`	偶数子元素
`first-of-type:`	`:first-of-type`	同类型第一个
`last-of-type:`	`:last-of-type`	同类型最后一个

// 结构化伪类示例
function StructuredVariantsDemo() {
  const items = ['首页', '产品', '关于', '联系', '博客'];
  
  return (
    <nav className="space-y-4">
      {/* 列表样式 */}
      <ul className="space-y-2">
        {items.map((item, index) => (
          <li
            key={item}
            className="
              px-4 py-2 rounded-lg
              first:bg-blue-100 first:text-blue-700
              last:bg-green-100 last:text-green-700
              odd:bg-gray-50
              even:bg-white
              hover:bg-blue-50
              transition-colors
            "
          >
            {item}
          </li>
        ))}
      </ul>
 
      {/* 表格斑马纹 */}
      <table className="w-full">
        <tbody>
          {[1, 2, 3, 4, 5].map(i => (
            <tr
              key={i}
              className={`
                border-b border-gray-200
                odd:bg-white even:bg-gray-50
                hover:bg-blue-50
              `}
            >
              <td className="px-4 py-2">项目 {i}</td>
              <td className="px-4 py-2">$100 x {i}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </nav>
  );
}

概念五：暗色模式实现

暗色模式的实现策略

Tailwind 支持两种暗色模式实现方式：

方式一：媒体查询（media）

/* 使用 prefers-color-scheme 媒体查询 */
@media (prefers-color-scheme: dark) {
  /* 系统暗色模式时生效 */
  .card {
    background-color: #1f2937;
    color: #f9fafb;
  }
}

// tailwind.config.js
module.exports = {
  darkMode: 'media', // 自动跟随系统设置
};

方式二：类名（class）

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 需要手动切换
};

// React 中切换暗色模式
function ThemeToggle() {
  const toggleDark = () => {
    document.documentElement.classList.toggle('dark');
    localStorage.theme = document.documentElement.classList.contains('dark') 
      ? 'dark' 
      : 'light';
  };
 
  return (
    <button onClick={toggleDark} className="p-2 bg-gray-200 dark:bg-gray-700 rounded">
      切换主题
    </button>
  );
}

完整的暗色模式系统

// App.tsx
import { useState, useEffect } from 'react';
 
function App() {
  // 初始化主题
  useEffect(() => {
    const theme = localStorage.theme;
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (theme === 'dark' || (!theme && prefersDark)) {
      document.documentElement.classList.add('dark');
    }
  }, []);
 
  const toggleTheme = () => {
    const isDark = document.documentElement.classList.toggle('dark');
    localStorage.theme = isDark ? 'dark' : 'light';
  };
 
  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 transition-colors">
      <button onClick={toggleTheme}>
        切换主题
      </button>
      
      {/* 暗色模式组件示例 */}
      <Card />
    </div>
  );
}
 
// Card.tsx
function Card() {
  return (
    <div className="
      bg-white dark:bg-gray-800
      text-gray-900 dark:text-gray-100
      border border-gray-200 dark:border-gray-700
      rounded-xl shadow-sm dark:shadow-gray-900/50
      p-6
    ">
      <h2 className="
        text-xl font-bold
        text-gray-900 dark:text-white
      ">
        暗色模式卡片
      </h2>
      <p className="
        mt-2
        text-gray-600 dark:text-gray-400
      ">
        这段文字在暗色模式下会自动调整颜色。
      </p>
    </div>
  );
}

常用命令与操作

Tailwind CLI

Tailwind 提供独立的 CLI 工具，可以在没有构建工具的情况下使用：

安装 CLI

npm install -D tailwindcss
# 或
npx tailwindcss

初始化配置

npx tailwindcss init
# 或
npx tailwindcss init -p  # 同时创建 postcss.config.js

监视模式（开发）

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

生产构建

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

自定义输出路径

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

VS Code 配置

安装 Tailwind CSS IntelliSense 扩展

// .vscode/settings.json
{
  // Tailwind CSS IntelliSense 配置
  "tailwindCSS.includeLanguages": {
    "plaintext": "html",
    "typescriptreact": "html"
  },
  
  // 启用 Tailwind CSS 提示
  "tailwindCSS.emmetCompletions": true,
  
  // 显示 CSS 颜色预览
  "tailwindCSS.showColors": true,
  
  // 验证工具类
  "tailwindCSS.validate": true,
  
  // 实验性功能
  "tailwindCSS.experimental": {
    "configFile": "./tailwind.config.js"
  },
  
  // 文件关联
  "files.associations": {
    "*.twig": "html"
  }
}

Play CDN 快速原型

使用 Play CDN 在浏览器中实时预览 Tailwind 效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Play</title>
  
  <!-- Tailwind Play CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: '#ff6b6b',
          }
        }
      }
    }
  </script>
</head>
<body class="p-8">
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-lg p-6">
    <h1 class="text-2xl font-bold text-brand mb-4">自定义品牌色</h1>
    <p class="text-gray-600">使用 Play CDN 快速原型设计。</p>
  </div>
</body>
</html>

Tailwind Play 在线编辑器

Tailwind Play 是官方提供的在线 Playground：

实时预览
分享代码片段
测试自定义配置
保存和收藏

高级配置与技巧

插件系统

官方推荐插件

npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/aspect-ratio
npm install -D @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'), // 表单重置样式
    require('@tailwindcss/typography'), // Prose 文章排版
    require('@tailwindcss/aspect-ratio'), // 宽高比
    require('@tailwindcss/container-queries'), // 容器查询
  ],
};

自定义插件

// 插件示例：添加自定义工具类
const plugin = require('tailwindcss/plugin');
 
module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, addBase, theme }) {
      // 添加基础样式
      addBase({
        'h1': { fontSize: theme('fontSize.2xl') },
        'h2': { fontSize: theme('fontSize.xl') },
      });
      
      // 添加组件类
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          boxShadow: theme('boxShadow.md'),
        },
      });
      
      // 添加工具类
      addUtilities({
        '.transition-colors-fast': {
          transition: 'color 0.1s, background-color 0.1s, border-color 0.1s',
        },
        '.scrollbar-hide': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      });
    }),
  ],
};

@apply 指令

将工具类提取为可复用的 CSS 类：

/* 将常用工具类组合提取为组件类 */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  }
  
  .btn-outline {
    @apply border-2 border-gray-300 hover:bg-gray-100 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  }
  
  /* 卡片组件 */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-md dark:shadow-gray-900/50 overflow-hidden;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
  }
  
  .card-body {
    @apply px-6 py-4;
  }
  
  .card-footer {
    @apply px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700;
  }
  
  /* 输入框 */
  .input {
    @apply w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  /* 链接 */
  .link {
    @apply text-blue-600 dark:text-blue-400 hover:underline;
  }
}

层叠系统

Tailwind 的 @layer 指令控制 CSS 的优先级：

/* CSS 优先级：base < components < utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* 自定义基础样式 */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }
  
  /* 自定义 selection 样式 */
  ::selection {
    @apply bg-blue-500 text-white;
  }
}
 
/* 自定义组件 */
@layer components {
  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }
}
 
/* 自定义工具类 */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500;
  }
}

容器查询

Tailwind 支持容器查询（Container Queries）：

/* 使用 @tailwindcss/container-queries 插件 */
@tailwind components;
 
.card-container {
  @apply bg-gray-100 p-4;
}
 
/* 基于父容器宽度的样式 */
@container (min-width: 400px) {
  .card {
    @apply flex-row;
  }
}
 
@container (min-width: 600px) {
  .card {
    @apply p-6;
  }
}

// 在 JSX 中使用
function ContainerQueryDemo() {
  return (
    <div className="@container">
      <div className="@sm:block @md:flex @lg:p-8">
        响应容器尺寸变化
      </div>
    </div>
  );
}

性能优化技巧

1. 减少 CSS 体积

// tailwind.config.js
module.exports = {
  // 精确指定内容路径
  content: [
    './src/**/*.{js,jsx,ts,tsx,vue,svelte}',
    './public/index.html',
    // 避免扫描 node_modules
    // '!node_modules/**',
  ],
};

2. 关键 CSS 提取

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import critters from 'critters';
 
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    // 提取关键 CSS
    critters({
      // 预加载关键 CSS
      preload: 'swap',
      // 内联字体
      fonts: false,
    }),
  ],
});

3. 懒加载路由

// 使用 React.lazy 进行代码分割
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
 
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

与同类技术对比

Tailwind vs Styled Components

维度	Tailwind CSS	Styled Components
样式定义位置	HTML class 属性	JavaScript 模板字符串
运行时开销	零	有（CSS-in-JS 运行时）
CSS 文件	构建时生成	动态注入
主题系统	配置 + CSS 变量	JavaScript 对象
动态样式	字符串拼接	模板字符串直接使用 props
调试体验	直接对应 HTML	需映射回组件
学习曲线	需要记忆工具类	需要理解模板语法
IDE 支持	优秀（IntelliSense）	优秀（类型提示）
SSR 友好	完美	需要额外配置

代码对比：

// Styled Components
import styled from 'styled-components';
 
const Button = styled.button`
  padding: ${props => props.size === 'large' ? '1rem 2rem' : '0.5rem 1rem'};
  background-color: ${props => props.variant === 'primary' ? '#3b82f6' : '#e5e7eb'};
  color: white;
  border-radius: 0.5rem;
  transition: all 0.2s;
  
  &:hover {
    background-color: ${props => props.variant === 'primary' ? '#2563eb' : '#d1d5db'};
  }
`;
 
// Tailwind CSS
function Button({ size = 'md', variant = 'primary' }) {
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };
  
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300'
  };
  
  return (
    <button className={`
      ${sizes[size]}
      ${variants[variant]}
      rounded-lg
      transition-colors
    `}>
      按钮
    </button>
  );
}

Tailwind vs CSS Modules

维度	Tailwind CSS	CSS Modules
作用域	原子类自动作用域	唯一类名哈希
样式复用	工具类组合	导入样式对象
文件数量	单一 CSS 文件	每个组件一个 CSS 文件
维护成本	低（无需维护独立 CSS）	中等（需要维护映射关系）
Bundle 大小	极小（仅使用部分）	取决于实际使用
热更新	优秀	良好

Tailwind vs UnoCSS

维度	Tailwind CSS	UnoCSS
配置方式	JavaScript 配置文件	TypeScript 配置文件
默认预设	完整工具类	需要手动引入
性能	优秀	极快（基于 Attotify）
灵活性	中等	极高
社区	成熟庞大	快速增长
插件生态	丰富	新兴
学习资源	极多	相对较少

常见问题与解决方案

问题一：类名过长难以阅读

问题描述：

// 大量工具类导致 HTML 难以阅读
<button className="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200">
  按钮
</button>

解决方案：

提取为组件

// components/Button.tsx
function Button({ 
  children, 
  variant = 'primary', 
  size = 'md',
  disabled = false,
  className = '',
  ...props 
}) {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
  
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
    outline: 'border-2 border-gray-300 hover:bg-gray-100 focus:ring-gray-500',
    ghost: 'hover:bg-gray-100 focus:ring-gray-500'
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };
  
  return (
    <button
      className={`
        ${baseStyles}
        ${variants[variant]}
        ${sizes[size]}
        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
        ${className}
      `}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
}
 
// 使用
<Button variant="primary" size="lg">主要按钮</Button>
<Button variant="outline">描边按钮</Button>

使用 @apply 提取

@layer components {
  .btn {
    @apply inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  }
}

问题二：响应式设计复杂

问题描述：

多个断点导致类名爆炸。

解决方案：

拆分组件变体

function ProductCard({ product }) {
  return (
    <div className="group">
      {/* 移动端布局 */}
      <div className="md:hidden">
        <MobileProductCard product={product} />
      </div>
      
      {/* 桌面端布局 */}
      <div className="hidden md:block">
        <DesktopProductCard product={product} />
      </div>
    </div>
  );
}
 
function MobileProductCard({ product }) {
  return (
    <div className="flex gap-4">
      <img src={product.image} className="w-20 h-20 object-cover rounded" />
      <div>
        <h3 className="font-medium">{product.name}</h3>
        <p className="text-gray-500">${product.price}</p>
      </div>
    </div>
  );
}
 
function DesktopProductCard({ product }) {
  return (
    <div className="text-center">
      <img src={product.image} className="w-full aspect-square object-cover rounded-lg group-hover:scale-105 transition-transform" />
      <h3 className="mt-4 font-medium">{product.name}</h3>
      <p className="text-gray-500">${product.price}</p>
    </div>
  );
}

使用模板字符串

function ResponsiveComponent() {
  const [isLarge, setIsLarge] = useState(false);
  
  const baseClasses = 'p-4 rounded-lg transition-colors';
  const colorClasses = isLarge ? 'bg-blue-600' : 'bg-blue-500';
  const sizeClasses = isLarge ? 'text-lg' : 'text-sm';
  
  return (
    <div className={`${baseClasses} ${colorClasses} ${sizeClasses}`}>
      内容
    </div>
  );
}

问题三：深色模式切换闪烁

问题描述：

页面加载时会出现主题闪烁。

解决方案：

在 HTML head 中添加脚本

<!-- 在 <head> 最开始添加 -->
<script>
  (function() {
    const theme = localStorage.theme;
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (theme === 'dark' || (!theme && prefersDark)) {
      document.documentElement.classList.add('dark');
    }
  })();
</script>

使用 CSS 自定义属性

/* 在 Tailwind 入口文件中 */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --bg-primary: #ffffff;
    --text-primary: #111827;
  }
  
  .dark {
    --bg-primary: #111827;
    --text-primary: #f9fafb;
  }
  
  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
}

问题四：与其他 CSS 冲突

问题描述：

Tailwind 与其他框架或全局样式冲突。

解决方案：

使用 Tailwind 的 layer 系统隔离

/* 确保 Tailwind 的 utilities 优先级最高 */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* 使用 !important 强制优先级（谨慎使用） */
.my-critical-style {
  color: red !important;
}

使用 @layer 控制优先级

@tailwind components;
 
@layer components {
  /* 这会比普通组件类优先级高 */
  .my-component {
    @apply flex items-center gap-4;
  }
}
 
@tailwind utilities;
 
@layer utilities {
  /* 这会比所有其他类优先级高 */
  .absolute-z-top {
    position: absolute;
    z-index: 9999;
  }
}

实战项目示例

示例一：完整电商产品卡片

// components/ProductCard.tsx
interface Product {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  image: string;
  rating: number;
  reviewCount: number;
  tags?: string[];
  isNew?: boolean;
  isHot?: boolean;
}
 
function ProductCard({ product }: { product: Product }) {
  const discount = product.originalPrice
    ? Math.round((1 - product.price / product.originalPrice) * 100)
    : null;
 
  return (
    <div className="
      group
      bg-white dark:bg-gray-800
      rounded-2xl
      overflow-hidden
      shadow-sm hover:shadow-xl
      transition-all duration-300
      border border-gray-200 dark:border-gray-700
    ">
      {/* 图片区域 */}
      <div className="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-700">
        <img
          src={product.image}
          alt={product.name}
          className="
            w-full h-full
            object-cover
            group-hover:scale-110
            transition-transform duration-500
          "
        />
        
        {/* 标签 */}
        <div className="absolute top-3 left-3 flex flex-col gap-2">
          {product.isNew && (
            <span className="px-2 py-1 text-xs font-medium bg-green-500 text-white rounded-full">
              新品
            </span>
          )}
          {product.isHot && (
            <span className="px-2 py-1 text-xs font-medium bg-red-500 text-white rounded-full">
              热销
            </span>
          )}
          {discount && (
            <span className="px-2 py-1 text-xs font-medium bg-orange-500 text-white rounded-full">
              -{discount}%
            </span>
          )}
        </div>
        
        {/* 操作按钮 */}
        <div className="
          absolute inset-x-0 bottom-0
          p-4
          bg-gradient-to-t from-black/60 to-transparent
          translate-y-full group-hover:translate-y-0
          transition-transform duration-300
        ">
          <div className="flex gap-2">
            <button className="flex-1 px-3 py-2 bg-white text-gray-900 rounded-lg text-sm font-medium hover:bg-gray-100 transition-colors">
              加入购物车
            </button>
            <button className="px-3 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors">
              ❤️
            </button>
          </div>
        </div>
      </div>
      
      {/* 内容区域 */}
      <div className="p-4">
        {/* 评分 */}
        <div className="flex items-center gap-2 mb-2">
          <div className="flex items-center">
            {[1, 2, 3, 4, 5].map((star) => (
              <svg
                key={star}
                className={`w-4 h-4 ${
                  star <= product.rating
                    ? 'text-yellow-400'
                    : 'text-gray-300 dark:text-gray-600'
                }`}
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            ))}
          </div>
          <span className="text-sm text-gray-500 dark:text-gray-400">
            ({product.reviewCount})
          </span>
        </div>
        
        {/* 产品名称 */}
        <h3 className="
          text-lg font-medium
          text-gray-900 dark:text-white
          line-clamp-2
          mb-2
        ">
          {product.name}
        </h3>
        
        {/* 价格 */}
        <div className="flex items-center gap-2">
          <span className="text-xl font-bold text-red-500">
            ¥{product.price}
          </span>
          {product.originalPrice && (
            <span className="text-sm text-gray-400 line-through">
              ¥{product.originalPrice}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}
 
export default ProductCard;

示例二：AI 对话界面

// components/AIChat.tsx
import { useState, useRef, useEffect } from 'react';
 
interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}
 
function AIChat() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      role: 'assistant',
      content: '你好！我是 AI 助手，有什么我可以帮助你的吗？',
      timestamp: new Date(),
    },
  ]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
 
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };
 
  useEffect(() => {
    scrollToBottom();
  }, [messages]);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || isLoading) return;
 
    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: input.trim(),
      timestamp: new Date(),
    };
 
    setMessages((prev) => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);
 
    // 模拟 AI 响应
    setTimeout(() => {
      const assistantMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: '这是一个模拟的 AI 响应。在实际应用中，这里会调用 AI API。',
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, assistantMessage]);
      setIsLoading(false);
    }, 1000);
  };
 
  return (
    <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-900">
      {/* 头部 */}
      <header className="
        px-6 py-4
        bg-white dark:bg-gray-800
        border-b border-gray-200 dark:border-gray-700
        shadow-sm
      ">
        <div className="flex items-center justify-between max-w-4xl mx-auto">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
              <span className="text-white font-bold text-lg">AI</span>
            </div>
            <div>
              <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
                AI 助手
              </h1>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                在线
              </p>
            </div>
          </div>
          
          <div className="flex items-center gap-2">
            <button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
              <svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
              </svg>
            </button>
          </div>
        </div>
      </header>
 
      {/* 消息列表 */}
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-4xl mx-auto p-6 space-y-6">
          {messages.map((message) => (
            <div
              key={message.id}
              className={`
                flex gap-4
                ${message.role === 'user' ? 'justify-end' : 'justify-start'}
              `}
            >
              {/* AI 头像 */}
              {message.role === 'assistant' && (
                <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex-shrink-0 flex items-center justify-center">
                  <span className="text-white text-xs font-bold">AI</span>
                </div>
              )}
              
              {/* 消息气泡 */}
              <div
                className={`
                  max-w-[70%]
                  rounded-2xl
                  px-4 py-3
                  ${
                    message.role === 'user'
                      ? 'bg-blue-600 text-white rounded-br-md'
                      : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-md shadow-sm'
                  }
                `}
              >
                <p className="whitespace-pre-wrap leading-relaxed">
                  {message.content}
                </p>
                <p
                  className={`
                    text-xs mt-2
                    ${message.role === 'user' ? 'text-blue-200' : 'text-gray-400'}
                  `}
                >
                  {message.timestamp.toLocaleTimeString('zh-CN', {
                    hour: '2-digit',
                    minute: '2-digit',
                  })}
                </p>
              </div>
              
              {/* 用户头像 */}
              {message.role === 'user' && (
                <div className="w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded-full flex-shrink-0 flex items-center justify-center">
                  <span className="text-gray-600 dark:text-gray-300 text-xs font-bold">U</span>
                </div>
              )}
            </div>
          ))}
          
          {/* 加载指示器 */}
          {isLoading && (
            <div className="flex gap-4">
              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex-shrink-0 flex items-center justify-center">
                <span className="text-white text-xs font-bold">AI</span>
              </div>
              <div className="bg-white dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm">
                <div className="flex gap-1">
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
                </div>
              </div>
            </div>
          )}
          
          <div ref={messagesEndRef} />
        </div>
      </div>
 
      {/* 输入区域 */}
      <div className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <div className="max-w-4xl mx-auto p-4">
          <form onSubmit={handleSubmit} className="flex gap-3">
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="输入消息..."
              className="
                flex-1
                px-4 py-3
                bg-gray-100 dark:bg-gray-700
                border border-transparent
                rounded-xl
                text-gray-900 dark:text-white
                placeholder-gray-400 dark:placeholder-gray-500
                focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                transition-all
              "
            />
            <button
              type="submit"
              disabled={!input.trim() || isLoading}
              className="
                px-6 py-3
                bg-blue-600 text-white
                rounded-xl
                font-medium
                hover:bg-blue-700
                disabled:opacity-50 disabled:cursor-not-allowed
                transition-colors
                flex items-center gap-2
              "
            >
              <span>发送</span>
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
              </svg>
            </button>
          </form>
          
          <p className="text-center text-xs text-gray-400 mt-3">
            AI 助手可能会产生不准确的信息，请斟酌参考。
          </p>
        </div>
      </div>
    </div>
  );
}
 
export default AIChat;

SUCCESS

本文档涵盖了 Tailwind CSS 的完整知识体系，从基础概念到高级配置，从响应式设计到性能优化。希望这份详尽的指南能帮助你全面掌握 Tailwind CSS，在实际项目中发挥其最大价值。记住，最好的工具是能够帮助你更高效工作的工具，而 Tailwind CSS 正是为此而生。

Tailwind 与前端框架的深度集成

Tailwind CSS 在前端生态中的定位

在现代前端开发的版图中，Tailwind CSS 已经成为原子化 CSS 阵营的代表性框架。它与各种前端框架的集成方式各有特点，理解这些差异对于选择正确的技术方案至关重要。Tailwind 在前端元框架中的定位不仅仅是样式解决方案，更是一种开发范式的选择——它代表了一种「约束即自由」的设计哲学，通过预定义的工具类来确保样式的一致性和开发效率。

当我们谈论 Tailwind 与前端框架的集成时，需要从两个维度来理解：开发体验（DX）和生产性能。开发体验包括热更新速度、类型提示完整性、IDE 支持程度等；生产性能则关注最终产物的体积、加载时间、Core Web Vitals 指标等。不同的框架与 Tailwind 的集成方式会在这两个维度上产生不同的权衡。

Tailwind 与 Next.js 的集成

Next.js 是目前最流行的 React 元框架，其 App Router 和 Pages Router 两种模式与 Tailwind 的集成方式略有不同。Next.js 本身对 CSS 有着良好的支持，包括 CSS Modules、CSS-in-JS、以及 Tailwind 这样的原子化 CSS 方案。在 Next.js 项目中使用 Tailwind，可以获得极佳的开发体验和优秀的生产性能。

App Router 模式下的集成方式：

Next.js 13 引入的 App Router 采用了React Server Components 范式，这要求 Tailwind 的配置需要考虑服务端渲染的特性。在 App Router 模式下，Tailwind 的配置与传统的 Pages Router 基本一致，但由于服务端组件的特殊性，某些客户端特有的功能（如 CSS 变量的动态切换）需要额外注意。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Tailwind 会自动处理 PostCSS 配置
  // 这里主要配置 Next.js 相关的优化选项
  
  // 启用实验性的编译时优化
  experimental: {
    // 可以启用 serverActions 等新特性
  },
  
  // 图片优化配置
  images: {
    domains: ['images.unsplash.com'],
    formats: ['image/avif', 'image/webp'],
  },
};
 
module.exports = nextConfig;

/* app/globals.css */
@import "tailwindcss";
 
/* 在 App Router 中定义主题变量 */
@theme {
  --color-primary: oklch(55% 0.2 250);
  --color-secondary: oklch(60% 0.18 180);
  
  /* 暗色模式变量 */
  --color-background: #ffffff;
  --color-foreground: #0f172a;
}
 
/* 暗色模式样式 */
.dark {
  --color-background: #0f172a;
  --color-foreground: #f8fafc;
}
 
/* 基础样式 */
@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
}

/* app/layout.tsx */
import type { Metadata } from 'next';
import './globals.css';
 
export const metadata: Metadata = {
  title: 'Tailwind + Next.js App',
  description: '使用 Tailwind CSS 和 Next.js App Router 构建的现代应用',
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <body className="antialiased min-h-screen bg-white dark:bg-slate-900">
        {children}
      </body>
    </html>
  );
}

Pages Router 模式下的集成：

// tailwind.config.ts
import type { Config } from 'tailwindcss';
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class', // 使用类名方式控制暗色模式
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'oklch(97% 0.01 250)',
          500: 'oklch(55% 0.2 250)',
          900: 'oklch(40% 0.15 250)',
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
};
 
export default config;

Next.js 中的性能优化注意事项：

Next.js 项目中使用 Tailwind 时，需要注意服务端渲染带来的特殊考量。Tailwind 生成的 CSS 在服务端和客户端是一致的，这保证了样式不会出现闪烁。但某些动态功能（如主题切换）需要在客户端执行 JavaScript 来完成。

/* components/ThemeProvider.tsx */
'use client';
 
import { createContext, useContext, useEffect, useState } from 'react';
 
type Theme = 'light' | 'dark';
 
const ThemeContext = createContext<{
  theme: Theme;
  toggleTheme: () => void;
}>({
  theme: 'light',
  toggleTheme: () => {},
});
 
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');
 
  useEffect(() => {
    // 从 localStorage 读取保存的主题
    const savedTheme = localStorage.getItem('theme') as Theme;
    if (savedTheme) {
      setTheme(savedTheme);
      document.documentElement.classList.toggle('dark', savedTheme === 'dark');
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      setTheme('dark');
      document.documentElement.classList.add('dark');
    }
  }, []);
 
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
    document.documentElement.classList.toggle('dark', newTheme === 'dark');
  };
 
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
export const useTheme = () => useContext(ThemeContext);

Tailwind 与 Nuxt 的集成

Nuxt 是 Vue 生态中最流行的元框架，其文件路由、自动导入、SSR 支持等特性与 Tailwind 的集成需要特别注意配置方式。Nuxt 3 使用的是 Vite 作为默认构建工具，这使得 Tailwind 的集成变得相当直接。

Nuxt 3 项目配置：

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  
  // CSS 配置
  css: ['~/assets/css/main.css'],
  
  // PostCSS 配置
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  
  // 应用配置
  app: {
    head: {
      title: 'Tailwind + Nuxt',
      meta: [
        { name: 'description', content: '使用 Tailwind CSS 和 Nuxt 3 构建' },
      ],
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap' },
      ],
    },
  },
  
  // 模块扩展
  modules: [],
  
  // TypeScript 配置
  typescript: {
    strict: true,
  },
});

/* assets/css/main.css */
@import "tailwindcss";
 
/* Nuxt 中使用 @theme 定义设计系统 */
@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
  
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-900: #1e3a8a;
  
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
}
 
/* Nuxt 的 CSS 层叠顺序 */
@layer base {
  html {
    font-family: var(--font-sans);
  }
}

Vue 组件中的使用方式：

<!-- components/Button.vue -->
<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
  disabled: false,
  loading: false,
});
 
const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
 
const variants = {
  primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 disabled:bg-blue-300',
  secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100',
  outline: 'border-2 border-gray-300 hover:bg-gray-100 focus:ring-gray-500 dark:border-gray-600 dark:hover:bg-gray-800',
  ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-gray-500',
};
 
const sizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};
</script>
 
<template>
  <button
    :class="[
      baseStyles,
      variants[props.variant],
      sizes[props.size],
      { 'opacity-50 cursor-not-allowed': props.disabled || props.loading }
    ]"
    :disabled="props.disabled || props.loading"
  >
    <svg
      v-if="props.loading"
      class="animate-spin -ml-1 mr-2 h-4 w-4"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
    </svg>
    <slot />
  </button>
</template>

Tailwind 与 SvelteKit 的集成

SvelteKit 是 Svelte 框架的官方元框架，其编译器优先的设计理念与 Tailwind 的原子化 CSS 在理念上有一定的相似性——两者都强调编译时优化和最小运行时开销。SvelteKit 使用 Vite 作为构建工具，这使得 Tailwind 的集成相对简单。

SvelteKit 项目配置：

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      $components: 'src/lib/components',
      $utils: 'src/lib/utils',
    },
  },
};
 
export default config;

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
 
export default defineConfig({
  plugins: [tailwindcss(), sveltekit()],
});

/* src/app.css */
@import "tailwindcss";
 
/* SvelteKit 中的 Tailwind 配置 */
@theme {
  --color-svelte: #ff3e00;
  --color-brand: oklch(55% 0.2 250);
  
  /* Svelte 主题变量 */
  --color-surface: #ffffff;
  --color-surface-dark: #1a1a1a;
}
 
/* 全局样式 */
@layer base {
  body {
    font-family: system-ui, sans-serif;
  }
}

Svelte 组件中的使用：

<!-- src/lib/components/Card.svelte -->
<script lang="ts">
  export let variant: 'default' | 'elevated' | 'outlined' = 'default';
  export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md';
  
  const variantStyles = {
    default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
    elevated: 'bg-white dark:bg-gray-800 shadow-lg dark:shadow-gray-900/50',
    outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600',
  };
  
  const paddingStyles = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
  };
</script>
 
<div class="rounded-xl transition-shadow {variantStyles[variant]} {paddingStyles[padding]}">
  <slot />
</div>

Tailwind 与 Astro 的集成

Astro 是近年来快速崛起的静态站点生成器，其「群岛架构」（Islands Architecture）使其在内容密集型网站中表现出色。Astro 支持多种 UI 框架作为组件使用，同时也支持纯 HTML/CSS 组件。Tailwind 与 Astro 的集成充分利用了 Astro 的零 JavaScript 哲学——Tailwind 生成的 CSS 完全静态，无需任何运行时。

Astro 项目配置：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
 
export default defineConfig({
  integrations: [tailwind()],
  // Astro 的输出模式
  output: 'static', // 或 'server' 用于 SSR
  // 图片优化
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp',
    },
  },
});

/* src/styles/global.css */
@import "tailwindcss";
 
@theme {
  /* Astro 项目通常有更明确的品牌要求 */
  --color-brand: #6366f1;
  --color-brand-dark: #4f46e5;
  
  /* 内容类网站的排版系统 */
  --font-serif: 'Georgia', serif;
  --font-sans: system-ui, sans-serif;
  
  /* 内容宽度约束 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}
 
@layer base {
  body {
    font-family: var(--font-sans);
  }
  
  /* 文章内容样式 */
  .prose {
    max-width: 65ch;
  }
}

Astro 组件中的使用：

---
// src/components/Header.astro
const navigation = [
  { name: '首页', href: '/' },
  { name: '关于', href: '/about' },
  { name: '文章', href: '/blog' },
  { name: '联系', href: '/contact' },
];
---
 
<header class="border-b border-gray-200 dark:border-gray-800">
  <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-gray-900 dark:text-white">
      我的网站
    </a>
    
    <ul class="flex items-center gap-6">
      {navigation.map((item) => (
        <li>
          <a
            href={item.href}
            class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors"
          >
            {item.name}
          </a>
        </li>
      ))}
    </ul>
  </nav>
</header>

Tailwind 与 Remix 的集成

Remix 是一个全栈 Web 框架，强调渐进增强和优秀的性能。Remix 使用 Vite 作为构建工具（新版），与 Tailwind 的集成遵循标准的 Vite + Tailwind 配置模式。Remix 的Loader/Action 模式使得数据获取和表单处理变得优雅，而 Tailwind 则负责呈现这些数据的样式。

Remix 项目配置：

// vite.config.ts
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [
    remix(),
    tailwindcss(),
  ],
});

/* app/tailwind.css */
@import "tailwindcss";
 
@theme {
  --color-primary: oklch(50% 0.2 250);
  --color-secondary: oklch(60% 0.15 180);
  
  /* Remix 应用特有的间距系统 */
  --spacing-gutter: 1rem;
}
 
/* 表单样式（Remix 大量使用表单） */
@layer components {
  .form-input {
    @apply w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
  }
  
  .form-error {
    @apply text-sm text-red-600 dark:text-red-400 mt-1;
  }
}

/* app/routes/_index.tsx */
import type { MetaFunction } from '@remix-run/node';
import { Form, useActionData, useNavigation } from '@remix-run/react';
 
export const meta: MetaFunction = () => {
  return [
    { title: 'Remix + Tailwind 应用' },
    { name: 'description', content: '使用 Remix 和 Tailwind CSS 构建' },
  ];
};
 
export default function Index() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
      <div className="container mx-auto px-4 max-w-md">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">
          欢迎使用 Remix + Tailwind
        </h1>
        
        <Form method="post" className="space-y-6">
          <div>
            <label htmlFor="email" className="form-label">
              邮箱地址
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              className="form-input"
              placeholder="your@email.com"
            />
          </div>
          
          <div>
            <label htmlFor="password" className="form-label">
              密码
            </label>
            <input
              type="password"
              id="password"
              name="password"
              required
              className="form-input"
            />
          </div>
          
          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {isSubmitting ? '提交中...' : '登录'}
          </button>
        </Form>
      </div>
    </div>
  );
}

Tailwind 独立使用 vs 配合组件库

在实际项目中，一个常见的决策点是：是否在 Tailwind 之外引入组件库。这个决策取决于多个因素，包括项目规模、定制需求、团队经验等。

仅使用 Tailwind 的场景：

当你的项目需要高度定制化的设计系统，或者团队已经熟悉 Tailwind 的开发模式时，单独使用 Tailwind 可以获得最大的灵活性和最小的依赖。使用 Tailwind 构建组件库需要更多的前期投入，但换来的是完全可控的代码和样式。

/* 自己构建的组件库示例 */
/* components/ui/Button.tsx */
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'destructive' | 'ghost';
  size?: 'sm' | 'md' | 'lg' | 'icon';
  isLoading?: boolean;
}
 
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', isLoading, children, disabled, ...props }, ref) => {
    const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
    
    const variants = {
      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-100',
      destructive: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
      ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-gray-500',
    };
    
    const sizes = {
      sm: 'h-9 px-3 text-sm',
      md: 'h-10 px-4',
      lg: 'h-11 px-8 text-lg',
      icon: 'h-10 w-10',
    };
    
    return (
      <button
        ref={ref}
        className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className || ''}`}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading && (
          <svg className="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
        )}
        {children}
      </button>
    );
  }
);
 
Button.displayName = 'Button';
 
export { Button };

配合 shadcn/ui 的场景：

shadcn/ui 是一个特殊的「组件库」——它不是传统的 npm 包形式发布，而是以源代码片段的形式提供，你可以直接复制、修改、拥有这些组件的代码。shadcn/ui 配合 Tailwind 使用，提供了一套高质量的设计系统组件，同时保持了完全的定制能力。

# 初始化 shadcn/ui
npx shadcn@latest init
 
# 添加组件
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

/* 使用 shadcn/ui 组件 */
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
 
function SignUpForm() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>创建账户</CardTitle>
        <CardDescription>
          输入您的邮箱地址开始使用
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">邮箱</Label>
            <Input id="email" type="email" placeholder="your@email.com" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password">密码</Label>
            <Input id="password" type="password" />
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">取消</Button>
        <Button>注册</Button>
      </CardFooter>
    </Card>
  );
}

选择建议：

小型项目或原型开发，使用纯 Tailwind 即可快速构建；中型项目且需要一致性，shadcn/ui 是绝佳选择；大型项目或有特殊设计要求，在 Tailwind 基础上构建自己的组件库。需要注意的是，shadcn/ui 的组件使用 Radix UI 作为无障碍底层，这意味着你获得了开箱即用的无障碍支持，同时保持了样式的完全可控性。

Tailwind + Vite 的开发与生产优化

Vite 是目前与 Tailwind 配合最佳的构建工具，两者的集成非常顺畅。在开发阶段，Vite 的快速热更新使得 Tailwind 的样式修改能够即时反映在浏览器中；在生产构建时，两者都能生成极小的产物。

开发环境配置：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import path from 'path';
 
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  // 开发服务器配置
  server: {
    port: 3000,
    open: true,
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  // CSS 配置
  css: {
    // 启用 CSS source maps
    devSourcemap: true,
  },
});

生产环境配置：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
import { compression } from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';
 
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    // gzip 压缩
    compression({
      algorithm: 'gzip',
      ext: '.gz',
    }),
    // 打包分析
    visualizer({
      open: true,
      gzipSize: true,
    }),
  ],
  build: {
    // CSS 代码分割
    cssCodeSplit: true,
    // 启用 CSS tree shaking
    cssMinify: 'lightningcss',
    // 目标浏览器
    target: 'esnext',
    // 输出目录
    outDir: 'dist',
    // 静态资源内联阈值
    assetsInlineLimit: 4096,
    // 分块策略
    rollupOptions: {
      output: {
        // 手动分包
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
        // 输出文件名哈希
        entryFileNames: 'assets/js/[name]-[hash].js',
        chunkFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
  },
});

Tailwind 文档体系的层级划分

在整个知识库中，Tailwind 相关的文档分布在不同的章节，它们各自承担不同的职责，共同构成了完整的 Tailwind 学习路径。理解这些文档之间的关系，可以帮助我们更好地规划学习路线和查找所需信息。

03-前端元框架/Tailwind-CSS.md 是 Tailwind 的入门和框架集成文档，它从宏观的角度介绍 Tailwind 的核心概念、与各种前端框架的集成方式、以及何时选择 Tailwind 配合组件库。这份文档的目标读者是想要了解 Tailwind 生态全景的开发者，以及需要在特定框架中使用 Tailwind 的实践者。

09-CSS与设计体系/CSS性能优化.md 中的 Tailwind 优化部分是 Tailwind 生产环境优化的专项文档，它详细讲解了如何配置 Tailwind 以获得最佳的构建产物，如何减少 CSS 体积，如何实现关键 CSS 内联等性能相关的主题。这份文档适合已经掌握 Tailwind 基础，想要在生产环境中优化性能的开发者。

09-CSS与设计体系/Tailwind-CSS深度指南.md 是 Tailwind 的深度专题文档，它深入探讨 Tailwind 的高级特性，包括自定义工具类、插件开发、复杂配置等主题。这份文档适合想要精通 Tailwind，能够为团队定制 Tailwind 配置的开发者。

这三个层次的文档相互补充，形成了一个从入门到精通的完整学习路径。初学者可以从 03 的概述开始，了解 Tailwind 的基本概念和框架集成；有一定经验的开发者可以参考 09 的性能优化专题，将 Tailwind 应用到生产项目中；想要深入定制的开发者则可以阅读深度指南，掌握 Tailwind 的高级用法。

人工智能知识库

探索

Tailwind-CSS

Tailwind CSS 完全指南

目录

Tailwind CSS 概述

什么是 Tailwind CSS

Tailwind CSS 发展历程

核心理念

Tailwind CSS 4.0 新特性

Lightning CSS 集成

原子化 CSS API

CSS-first 配置

改进的暗色模式

改进的伪类支持

Tailwind vs CSS Modules vs Styled Components 对比

样式方案对比

代码风格对比

性能对比

核心配置

基础配置

PostCSS 配置

Vite 配置

常用工具类速查表

布局类

弹性盒（Flexbox）工具类

网格（Grid）工具类

间距（Spacing）工具类

间距数值表（rem）

排版（Typography）工具类

字号数值表

背景与边框

交互状态

响应式设计

断点前缀

响应式示例

移动优先设计

暗色模式

模式选择

class 模式使用

暗色模式样式

Tailwind v3.4+ 暗色模式增强

自定义设计系统

@theme 指令（Tailwind 4.0）

设计令牌

组件化最佳实践

组件模式

常见组件模式

性能优化

JIT 模式

关键 CSS 提取

减少工具类数量

AI 应用实战

AI 聊天界面

图像生成界面

技术概述与定位

Tailwind CSS 在前端生态中的位置

Tailwind CSS 的核心价值主张

Tailwind CSS vs 竞品深度对比

Tailwind CSS 的适用场景

完整安装与配置

环境要求

使用 Vite 安装（推荐）

使用 Next.js 安装

使用 Webpack 配置

Vue 项目配置

独立 CSS 项目

核心概念详解

概念一：JIT 引擎与原子化 CSS

JIT 引擎工作原理

任意值语法

原子化 CSS 的本质

概念二：设计令牌与主题系统

设计令牌的定义

Tailwind 4.0 @theme 指令

Tailwind 3.x 配置文件形式

概念三：响应式设计系统

移动优先的设计哲学

响应式断点详解

响应式设计模式