tailwind-css

Tailwind CSS - 工具优先框架

全面掌握 Tailwind CSS 的技能：这款工具优先的 CSS 框架可用于快速构建自定义用户界面。本技能涵盖核心概念、响应式设计模式、组件提取、深色模式实现、主题自定义和生产环境优化。

何时使用此技能

在以下情况下使用此技能：

• 使用工具优先的 CSS 方法构建现代 Web 应用
• 创建适配各种设备尺寸的响应式设计
• 在应用中实现深色模式和主题切换
• 开发样式一致的可复用组件库
• 优化生产部署的 CSS 性能
• 使用品牌专属设计令牌自定义设计系统
• 构建易于访问、移动优先的用户界面
• 与 React、Vue、Svelte 或 Next.js 等框架集成
• 快速制作 UI 设计原型并迭代
• 在大型代码库中保持设计一致性

核心概念

工具优先理念

Tailwind CSS 与传统 CSS 框架采用了不同的方法：

• 工具类优先于组件：不使用预构建组件，而是使用单一用途的工具类
• 在 HTML 中组合：直接在标记中组合工具类，构建复杂设计
• 无需切换上下文：留在 HTML/JSX 中，无需切换到 CSS 文件
• 内置设计系统：开箱即用，提供一致的间距、颜色和排版
• 默认支持响应式设计：每个工具类都内置响应式变体
• JIT 编译：即时编译模式只生成实际使用的 CSS

核心原则

1. 单一职责：每个类都专注做好一件事
2. 可组合性：组合工具类以创建复杂设计
3. 约束：设计系统的约束有助于打造更出色、更一致的 UI
4. 灵活性：需要时可使用任意值进行一次性自定义
5. 性能：通过智能清除机制减少 CSS 输出

核心工具类参考

布局工具类

显示方式

<div class="block">Block element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline-block</div>


<div class="flex items-center justify-between">
  <div>Left</div>
  <div>Right</div>
</div>


<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>


<div class="hidden md:block">Visible on medium screens and up</div>

定位

<div class="relative">
  <div class="absolute top-0 right-0">Top-right corner</div>
</div>

<div class="fixed bottom-4 right-4">Fixed bottom-right</div>
<div class="sticky top-0">Sticky header</div>

尺寸

<div class="w-full h-screen">Full width, viewport height</div>
<div class="w-1/2 h-64">Half width, 16rem height</div>
<div class="w-[750px] h-[500px]">Arbitrary values</div>


<div class="min-w-0 max-w-md">Constrained width</div>
<div class="min-h-screen max-h-full">Constrained height</div>

间距工具类

内边距和外边距

<div class="p-4 m-2">Padding 1rem, margin 0.5rem</div>


<div class="pt-8 pb-4 pl-6 pr-2">Individual padding</div>
<div class="mt-4 mb-8 ml-auto mr-auto">Individual margin</div>


<div class="px-4 py-2">Horizontal and vertical</div>
<div class="ps-4 pe-2">Inline start/end (RTL-aware)</div>


<div class="-mt-4 -ml-2">Negative margins for overlap</div>


<div class="flex space-x-4">Horizontal spacing between children</div>
<div class="flex flex-col space-y-2">Vertical spacing between children</div>

排版工具类

字体系列、大小和粗细

<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>


<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<h1 class="text-4xl">4XL heading (2.25rem)</h1>


<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>

文本样式

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>


<p class="text-gray-900">Dark gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500/75">Red text with 75% opacity</p>


<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<a class="no-underline hover:underline">Hover underline</a>


<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>


<p class="leading-tight">Tight line height</p>
<p class="leading-relaxed">Relaxed line height</p>
<p class="tracking-wide">Wide letter spacing</p>

颜色工具类

背景颜色

<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-red-600/50">Red background at 50% opacity</div>


<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  Purple to pink gradient
</div>
<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-600">
  Three-color gradient
</div>

文本和边框颜色

<p class="text-gray-900 dark:text-white">Adaptive text color</p>
<p class="text-blue-600 hover:text-blue-800">Interactive text color</p>


<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<div class="divide-y divide-gray-200">Divided children</div>

边框和圆角工具类

<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-t-4">4px top border only</div>


<div class="rounded">0.25rem radius</div>
<div class="rounded-lg">0.5rem radius</div>
<div class="rounded-full">Full circle/pill</div>
<div class="rounded-t-lg">Round top only</div>


<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>

阴影和效果

<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none hover:shadow-lg">Interactive shadow</div>


<h1 class="text-shadow-lg">Large text shadow</h1>
<p class="text-shadow-sm text-shadow-gray-300">Colored text shadow</p>


<div class="opacity-50">50% opacity</div>
<div class="opacity-0 hover:opacity-100">Fade in on hover</div>

响应式设计

断点系统

Tailwind 使用移动优先的断点系统：

/* Breakpoint reference */
sm: 640px   /* @media (min-width: 640px) */
md: 768px   /* @media (min-width: 768px) */
lg: 1024px  /* @media (min-width: 1024px) */
xl: 1280px  /* @media (min-width: 1280px) */
2xl: 1536px /* @media (min-width: 1536px) */

响应式工具类

<div class="w-full md:w-1/2 lg:w-1/3">
  Full width on mobile, half on tablet, third on desktop
</div>


<div class="flex flex-col md:flex-row gap-4">
  Vertical on mobile, horizontal on tablet+
</div>


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  1 column mobile, 2 tablet, 4 desktop
</div>


<h1 class="text-2xl md:text-4xl lg:text-6xl">
  Scales with screen size
</h1>


<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>
<div class="hidden md:block lg:hidden">Tablet only</div>

自定义断点

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

@theme {
  --breakpoint-xs: 30rem;    /* 480px */
  --breakpoint-3xl: 120rem;  /* 1920px */
}

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  Uses custom xs and 3xl breakpoints
</div>

按断点范围设置样式

<div class="md:max-xl:flex">
  Flex layout only on tablets
</div>


<div class="flex max-md:hidden">
  Hidden below medium breakpoint
</div>

容器查询

<div class="@container">
  <div class="@lg:grid-cols-3 grid grid-cols-1">
    Responds to container size, not viewport
  </div>
</div>


<div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
    Custom container breakpoint
  </div>
</div>


<div class="@container">
  <div class="w-[50cqw]">
    50% of container width
  </div>
</div>

深色模式实现

自动深色模式（媒体查询）

根据系统偏好设置的默认行为：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h3 class="text-gray-900 dark:text-white font-semibold">
      Card Title
    </h3>
    <p class="text-gray-500 dark:text-gray-400">
      Content automatically adapts to color scheme preference
    </p>
  </div>
</div>

手动深色模式（基于类）

配置自定义变体以进行手动控制：

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

@custom-variant dark (&:where(.dark, .dark *));

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      Controlled by .dark class on ancestor
    </div>
  </body>
</html>

深色模式切换逻辑

// Dark mode toggle with localStorage persistence
// Add inline in <head> to avoid FOUC (Flash of Unstyled Content)
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) &&
     window.matchMedia("(prefers-color-scheme: dark)").matches)
);

// User explicitly chooses light mode
function setLightMode() {
  localStorage.theme = "light";
  document.documentElement.classList.remove("dark");
}

// User explicitly chooses dark mode
function setDarkMode() {
  localStorage.theme = "dark";
  document.documentElement.classList.add("dark");
}

// User chooses to respect OS preference
function setSystemMode() {
  localStorage.removeItem("theme");
  document.documentElement.classList.toggle(
    "dark",
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );
}

基于数据属性的深色模式

使用数据属性的替代方法：

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

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      Uses data-theme attribute
    </div>
  </body>
</html>

状态变体

交互状态

<button class="
  bg-blue-500
  hover:bg-blue-600
  focus:bg-blue-700
  active:bg-blue-800
  focus:outline-2
  focus:outline-offset-2
  focus:outline-blue-500
">
  Interactive button
</button>


<button class="
  bg-blue-500
  disabled:opacity-50
  disabled:cursor-not-allowed
" disabled>
  Disabled button
</button>


<div class="border-2 border-transparent focus-within:border-blue-500">
  <input class="outline-none" placeholder="Focus container changes" />
</div>

表单状态

<input class="
  border
  border-gray-300
  focus:border-blue-500
  focus:ring-2
  focus:ring-blue-200
  invalid:border-red-500
  placeholder:text-gray-400
" />


<input type="checkbox" class="
  checked:bg-blue-500
  indeterminate:bg-gray-500
" />


<input type="file" class="
  file:mr-4
  file:rounded-full
  file:border-0
  file:bg-violet-50
  file:px-4
  file:py-2
  file:text-sm
  file:font-semibold
  hover:file:bg-violet-100
" />

伪类和伪元素

<ul>
  <li class="first:font-bold">First item is bold</li>
  <li class="even:bg-gray-100">Even items have background</li>
  <li class="last:border-b-0">Last item has no border</li>
</ul>


<div class="
  before:content-['→']
  before:mr-2
  after:content-['←']
  after:ml-2
">
  Content with decorations
</div>


<div class="group">
  <img class="group-hover:opacity-75" src="..." />
  <p class="group-hover:text-blue-600">Hover parent to affect children</p>
</div>


<input type="checkbox" class="peer" id="toggle" />
<label class="peer-checked:text-blue-600" for="toggle">
  Changes when checkbox is checked
</label>

媒体查询变体

<button class="
  transition
  hover:-translate-y-1
  motion-reduce:transition-none
  motion-reduce:hover:translate-y-0
">
  Respects user motion preference
</button>


<label>
  <input class="contrast-more:border-gray-400" />
  <p class="opacity-75 contrast-more:opacity-100">
    Adjusts for contrast needs
  </p>
</label>


<article class="print:hidden">Not shown when printing</article>
<div class="hidden print:block">Only visible in print</div>


<div class="portrait:hidden">Hidden in portrait mode</div>
<div class="landscape:grid-cols-2">Adapts to orientation</div>

组件提取模式

何时提取组件

在以下情况下提取组件：

1. 重复模式：多次使用相同的工具类组合
2. 语义含义：该模式代表特定的 UI 元素（按钮、卡片）
3. 团队沟通：需要共享一致的组件
4. 维护：更改应应用于所有实例

框架组件提取

React 组件

// Button.jsx - Reusable component with variants
export function Button({ size = 'md', variant = 'primary', children, ...props }) {
  const baseStyles = "font-bold rounded transition focus:outline-2 focus:outline-offset-2";

  const sizeStyles = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-5 py-3 text-lg"
  };

  const variantStyles = {
    primary: "bg-blue-500 text-white hover:bg-blue-600 focus:outline-blue-500",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-gray-500",
    danger: "bg-red-500 text-white hover:bg-red-600 focus:outline-red-500"
  };

  return (
    <button
      className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

// Usage
<Button size="lg" variant="primary">Save Changes</Button>
<Button size="sm" variant="danger">Delete</Button>

Vue 组件

<template>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
      {{ title }}
    </h3>
    <p class="text-gray-600 dark:text-gray-400">
      <slot />
    </p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>


<Card title="Feature Title">
  This is the card content that adapts to dark mode.
</Card>

Svelte 组件

<script>
  export let type = 'info'; // info, success, warning, error

  const styles = {
    info: 'bg-blue-50 border-blue-200 text-blue-800',
    success: 'bg-green-50 border-green-200 text-green-800',
    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
    error: 'bg-red-50 border-red-200 text-red-800'
  };
</script>

<div class="border-l-4 p-4 {styles[type]}" role="alert">
  <slot />
</div>


<Alert type="success">
  Your changes have been saved successfully!
</Alert>

CSS 组件类

适用于非组件框架或共享样式：

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

/* Component layer for reusable patterns */
@layer components {
  .btn {
    @apply font-bold py-2 px-4 rounded transition;
  }

  .btn-primary {
    @apply bg-blue-500 text-white;
    @apply hover:bg-blue-600;
    @apply focus:outline-2 focus:outline-offset-2 focus:outline-blue-500;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-900;
    @apply hover:bg-gray-300;
  }

  .card {
    @apply bg-white rounded-lg shadow-xl p-6;
    @apply dark:bg-gray-800;
  }

  .input-field {
    @apply border border-gray-300 rounded px-3 py-2;
    @apply focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
    @apply dark:bg-gray-700 dark:border-gray-600;
  }
}

<button class="btn btn-primary">Primary Action</button>
<div class="card">
  <h3>Card Title</h3>
  <p>Card content</p>
</div>
<input class="input-field" placeholder="Enter text..." />

主题自定义

扩展主题

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

@theme {
  /* Custom colors */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-brand-blue: #3b82f6;
  --color-brand-purple: #a855f7;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-72: 18rem;

  /* Custom breakpoints */
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;

  /* Custom fonts */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Custom shadows */
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.5);

  /* Custom border radius */
  --radius-4xl: 2rem;

  /* Custom z-index */
  --z-index-dropdown: 1000;
  --z-index-modal: 2000;
}

<div class="bg-primary text-white">Primary color</div>
<div class="font-display text-4xl">Display font</div>
<div class="shadow-glow rounded-4xl">Custom shadow and radius</div>
<div class="xs:grid-cols-2 3xl:grid-cols-6">Custom breakpoints</div>

使用 CSS 变量

/* Dynamic theming with CSS variables */
@import "tailwindcss";

@theme {
  --color-primary-50: oklch(0.95 0.02 250);
  --color-primary-100: oklch(0.90 0.04 250);
  --color-primary-200: oklch(0.85 0.08 250);
  --color-primary-500: oklch(0.55 0.22 250);
  --color-primary-900: oklch(0.25 0.15 250);
}

<div class="bg-[var(--color-primary-500)]">
  Using CSS variable
</div>


<div class="[--spacing:1rem] lg:[--spacing:2rem]">
  <div class="p-[var(--spacing)]">
    Responsive custom property
  </div>
</div>

自定义工具类

简单自定义工具

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

/* Simple utility */
@utility content-auto {
  content-visibility: auto;
}

/* Complex utility with nesting */
@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
}

<div class="content-auto hover:content-auto">
  Supports all variants automatically
</div>

<div class="scrollbar-hidden">
  Hidden scrollbar
</div>

功能型自定义工具

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

/* Define theme values */
@theme {
  --tab-size-2: 2;
  --tab-size-4: 4;
  --tab-size-8: 8;
}

/* Functional utility accepting arguments */
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

/* Utility with modifiers */
@utility text-* {
  font-size: --value(--text-*, [length]);
  line-height: --modifier(--leading-*, [length], [*]);
}

/* Supporting arbitrary values */
@utility opacity-* {
  opacity: --value([percentage]);
  opacity: calc(--value(integer) * 1%);
  opacity: --value(--opacity-*);
}

<div class="tab-4">Tab size 4</div>
<div class="tab-[12]">Arbitrary tab size</div>

<p class="text-2xl/relaxed">Font size with line height modifier</p>

<div class="opacity-50">50% opacity from theme</div>
<div class="opacity-[0.35]">Arbitrary opacity</div>

生产环境优化

构建配置

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  build: {
    minify: 'terser',
    cssMinify: true,
  }
})

内容配置

确保 Tailwind 扫描所有文件：

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

@source "../../**/*.{html,js,jsx,ts,tsx,vue,svelte}";

性能最佳实践

1. 使用 JIT 模式（在 v4 中默认启用）

   • 仅为使用的类生成 CSS
   • 构建速度快
   • 文件体积更小

2. 尽量减少任意值

   • 尽可能使用主题值
   • 任意值会妨碍复用并增大 CSS 体积

3. 避免深层嵌套

   • 合理组合工具类
   • 对复杂模式提取组件

4. 优化图像

   <img
     class="w-full h-auto"
     src="/image.jpg"
     loading="lazy"
     decoding="async"
   />
   

5. 使用 CSS 封装

   <div class="content-auto">
     Browser can optimize rendering
   </div>
   

生产构建检查清单

• 启用 CSS 压缩
• 正确配置内容源
• 移除未使用的自定义工具
• 优化图像资源
• 测试深色模式变体
• 验证响应式断点
• 检查无障碍性（对比度、焦点状态）
• 测试性能（Lighthouse 评分）

插件和扩展

官方插件

Typography 插件

npm install @tailwindcss/typography

<article class="prose lg:prose-xl dark:prose-invert">
  <h1>Article Title</h1>
  <p>Automatically styled content with sensible defaults.</p>
</article>

Forms 插件

npm install @tailwindcss/forms

<form class="space-y-4">
  <input type="text" class="form-input rounded-md" />
  <select class="form-select rounded-md"></select>
  <textarea class="form-textarea rounded-md"></textarea>
</form>

Container Queries 插件

npm install @tailwindcss/container-queries

<div class="@container">
  <div class="@lg:grid-cols-3">
    Responds to container, not viewport
  </div>
</div>

框架集成

React / Next.js

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
} satisfies Config

// Component with Tailwind
export default function Hero() {
  return (
    <section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
      <div className="container mx-auto px-4">
        <h1 className="text-5xl font-bold mb-4">Welcome</h1>
        <p className="text-xl">Beautiful UI with Tailwind CSS</p>
      </div>
    </section>
  )
}

Vue / Nuxt

// nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

Svelte / SvelteKit

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';

export default {
  plugins: [tailwindcss(), sveltekit()],
};

最佳实践

命名和组织

1. 使用语义化 HTML

   
   <article class="bg-white rounded-lg p-6">
     <h2 class="text-2xl font-bold">Title</h2>
   </article>
   
   
   <div class="bg-white rounded-lg p-6">
     <div class="text-2xl font-bold">Title</div>
   </div>
   

2. 统一工具类顺序

   
   <div class="
     flex items-center justify-between
     p-4 mx-auto
     w-full max-w-4xl
     text-lg font-semibold
     bg-white rounded-lg shadow-md
     hover:shadow-lg transition
   ">
   

3. 提取重复模式

   // Don't repeat long class strings
   const cardClasses = "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6";
   
   <div className={cardClasses}>Card 1</div>
   <div className={cardClasses}>Card 2</div>
   

无障碍性

<button class="focus:outline-2 focus:outline-offset-2 focus:outline-blue-500">
  Accessible button
</button>


<span class="sr-only">Additional context for screen readers</span>


<div class="border border-gray-300 forced-colors:border-current">
  Adapts to forced colors mode
</div>


<div class="transition-transform motion-reduce:transition-none">
  Respects prefers-reduced-motion
</div>

性能

1. 避免为动态值使用内联样式

   // Good - use CSS variables
   <button
     style={{ backgroundColor: buttonColor }}
     className="rounded-md px-3 py-1.5"
   >
   
   // Avoid - generates unique CSS for each color
   <button className={`bg-[${buttonColor}]`}>
   

2. 善用清除机制

   • 确保内容路径正确
   • 移除未使用的自定义工具
   • 测试生产构建

3. 优化首次绘制

   
   <style>
     .hero { /* Critical above-fold styles */ }
   </style>
   

常见模式

导航栏

<nav class="bg-white dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      
      <div class="flex items-center">
        <img class="h-8 w-auto" src="/logo.svg" alt="Logo" />
      </div>

      
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">About</a>
        <a href="#" class="text-gray-900 dark:text-white hover:text-blue-600">Contact</a>
      </div>

      
      <button class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
</nav>

主视觉区域

<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20 lg:py-32">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto text-center">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
        Build Amazing Websites
      </h1>
      <p class="text-xl md:text-2xl mb-8 text-blue-100">
        Create beautiful, responsive designs with Tailwind CSS
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
          Get Started
        </button>
        <button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
          Learn More
        </button>
      </div>
    </div>
  </div>
</section>

功能网格

<section class="py-16 bg-gray-50 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">
      Our Features
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition">
        <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
          Lightning Fast
        </h3>
        <p class="text-gray-600 dark:text-gray-400">
          Build and ship faster with utility-first CSS approach.
        </p>
      </div>

      
    </div>
  </div>
</section>

故障排除

常见问题

样式未生效

• 检查 CSS 中的内容配置
• 确保类名书写正确（没有拼写错误）
• 确认构建流程正在运行
• 检查是否存在 CSS 优先级冲突

深色模式无法运行

• 验证深色变体配置
• 检查是否已将 dark 类应用于 HTML 元素
• 确保 localStorage 逻辑正确
• 测试系统偏好检测

响应式类无法运行

• 验证断点配置
• 检查移动端优先方式（基础 → 更大尺寸）
• 确保存在 viewport meta 标签
• 在实际设备或浏览器开发者工具中测试

构建速度慢

• 使用 JIT 模式（v4 中默认启用）
• 优化内容路径
• 移除不必要的依赖
• 检查循环导入

文件体积过大

• 正确配置内容路径
• 移除未使用的自定义工具
• 启用 CSS 压缩
• 审查第三方依赖

资源

• 官方文档：https://tailwindcss.com
• Tailwind UI 组件：https://tailwindui.com
• Headless UI：https://headlessui.com
• Tailwind Play（在线编辑器）：https://play.tailwindcss.com
• GitHub 仓库：https://github.com/tailwindlabs/tailwindcss
• 社区 Discord：https://tailwindcss.com/discord
• YouTube 频道：https://www.youtube.com/tailwindlabs

---

技能版本：1.0.0 最后更新：2025 年 10 月 技能类别：CSS 框架、UI 开发、设计系统 兼容对象：React、Vue、Svelte、Next.js、Nuxt、SvelteKit、Astro 和原生 HTML