名称: tailwindcss 描述: Tailwind CSS实施指南 - 一个实用优先的CSS框架，用于快速用户界面开发。在需要响应式设计、暗黑模式、自定义主题或使用Tailwind的实用类构建设计系统时使用。许可证: MIT 版本: 1.0.0

Tailwind CSS 技能

Tailwind CSS 是一个实用优先的CSS框架，通过提供预构建的实用类实现快速用户界面开发。它在构建时通过扫描项目文件生成优化的CSS，从而实现零运行时开销和最小的生产包。

何时使用此技能

使用此技能时：

构建具有移动优先设计的响应式布局
实现暗黑模式和主题自定义
创建具有一致间距、颜色和排印的自定义设计系统
使用React、Vue、Svelte或任何Web框架组件进行样式设计
通过快速视觉反馈原型化界面
构建具有优化CSS包的生产应用
处理基于状态的样式（悬停、焦点、禁用等）
使用网格和Flexbox实用程序创建复杂布局

核心概念

实用优先方法

Tailwind 提供低级别的实用类，直接应用于HTML元素，而不是编写自定义CSS：

<!-- 传统CSS方法 -->
<div class="card">
  <h2 class="card-title">标题</h2>
</div>

<!-- Tailwind实用优先方法 -->
<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-2xl font-bold text-gray-900">标题</h2>
</div>

好处：

无需切换CSS文件 - 样式与标记共存
无需命名约定
自动死代码消除
团队间一致的设计标记
快速迭代，无CSS膨胀

构建时处理

Tailwind 在构建时扫描源文件，仅生成实际使用的CSS类：

// Tailwind分析这些文件
内容: [
  "./src/**/*.{js,jsx,ts,tsx}",
  "./app/**/*.{js,jsx,ts,tsx}",
  "./components/**/*.{js,jsx,ts,tsx}"
]

结果：优化的生产包，零运行时开销。

安装与设置

使用Vite的现代设置

步骤1: 安装依赖

npm install -D tailwindcss @tailwindcss/vite
# 或
pnpm add -D tailwindcss @tailwindcss/vite
# 或
yarn add -D tailwindcss @tailwindcss/vite

步骤2: 配置Vite

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

export default defineConfig({
  plugins: [tailwindcss()]
})

步骤3: 在CSS中导入

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

步骤4: 在HTML中引用样式表

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./src/index.css">
  </head>
  <body>
    <div class="bg-blue-500 text-white p-4">Hello Tailwind!</div>
  </body>
</html>

框架特定设置

Next.js（应用路由器）：

npx create-next-app@latest --tailwind

Next.js（手动）：

// tailwind.config.js
module.exports = {
  内容: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ]
}

使用Vite的React：

npm create vite@latest my-app -- --template react
npm install -D tailwindcss @tailwindcss/vite

Vue：

npm install -D tailwindcss @tailwindcss/vite

Svelte：

npm install -D tailwindcss @tailwindcss/vite

Astro：

npx astro add tailwind

PostCSS设置（替代方案）

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

设计系统与标记

默认设计系统

Tailwind 包含一个全面的默认设计系统：

颜色：18个调色板，每个11个色调（50-950）
间距：从0.25rem到96rem的一致比例
排印：字体大小、重量、行高
断点：移动优先的响应系统
阴影：用于深度的海拔系统
边框半径：不同比例的圆角

自定义主题

在CSS中使用 @theme 指令：

@import "tailwindcss";

@theme {
  /* 自定义颜色 */
  --color-brand-50: oklch(0.97 0.02 264);
  --color-brand-500: oklch(0.55 0.22 264);
  --color-brand-900: oklch(0.25 0.15 264);

  /* 自定义字体 */
  --font-display: "Satoshi", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* 自定义间距 */
  --spacing-18: calc(var(--spacing) * 18);
  --spacing-navbar: 4.5rem;

  /* 自定义断点 */
  --breakpoint-3xl: 120rem;
  --breakpoint-4xl: 160rem;

  /* 自定义阴影 */
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}

用法：

<div class="bg-brand-500 font-display shadow-glow">
  自定义主题元素
</div>

颜色系统

使用默认颜色：

<div class="bg-blue-500">背景</div>
<p class="text-red-600">文本</p>
<div class="border-green-400">边框</div>

颜色比例：

50: 最浅
100-400: 浅变体
500: 基础颜色
600-800: 深变体
950: 最深

颜色不透明度修饰符：

<div class="bg-black/75">75%不透明度</div>
<div class="text-blue-500/30">30%不透明度</div>
<div class="bg-purple-500/[0.87]">87%不透明度</div>

实用类

布局

显示：

<div class="block">块</div>
<div class="inline-block">内联块</div>
<div class="flex">Flex</div>
<div class="inline-flex">内联Flex</div>
<div class="grid">网格</div>
<div class="hidden">隐藏</div>

Flexbox：

<div class="flex items-center justify-between gap-4">
  <div>项目1</div>
  <div>项目2</div>
</div>

<div class="flex flex-col items-start">
  <div>垂直堆栈</div>
</div>

网格：

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

<div class="grid grid-cols-[1fr_500px_2fr] gap-6">
  <div>灵活</div>
  <div>固定500px</div>
  <div>更灵活</div>
</div>

定位：

<div class="relative">
  <div class="absolute top-0 right-0">定位</div>
</div>

<div class="fixed bottom-4 right-4">固定</div>
<div class="sticky top-0">粘性标题</div>

间距

填充与边距：

<div class="p-4">所有边填充</div>
<div class="px-6 py-3">X和Y填充</div>
<div class="pt-8 pb-4">顶部/底部填充</div>
<div class="m-4">所有边边距</div>
<div class="mx-auto">水平居中</div>
<div class="-mt-4">负边距</div>

间隙（Flexbox/网格）：

<div class="flex gap-4">带间隙的Flex</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-4">带X/Y间隙的网格</div>

排印

字体大小：

<p class="text-xs">特小</p>
<p class="text-sm">小</p>
<p class="text-base">基础（16px）</p>
<p class="text-lg">大</p>
<p class="text-xl">特大</p>
<p class="text-2xl">2XL</p>
<h1 class="text-4xl font-bold">标题</h1>

字体重量：

<p class="font-light">轻（300）</p>
<p class="font-normal">正常（400）</p>
<p class="font-medium">中（500）</p>
<p class="font-semibold">半粗（600）</p>
<p class="font-bold">粗（700）</p>

文本对齐：

<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>

行高：

<p class="leading-tight">紧行高</p>
<p class="leading-normal">正常行高</p>
<p class="leading-relaxed">松行高</p>

组合字体实用程序：

<h1 class="text-4xl/tight font-bold">
  字体大小4xl，紧行高
</h1>

颜色与背景

背景颜色：

<div class="bg-white">白色背景</div>
<div class="bg-gray-100">灰色背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  渐变背景
</div>

文本颜色：

<p class="text-gray-900">深色文本</p>
<p class="text-blue-600">蓝色文本</p>
<a class="text-blue-500 hover:text-blue-700">链接</a>

边框

<div class="border">默认边框</div>
<div class="border-2 border-gray-300">2px边框</div>
<div class="border-t border-b-2">顶部和底部边框</div>
<div class="rounded">圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">完全圆角</div>
<div class="border border-red-500 rounded-md">组合</div>

阴影

<div class="shadow">小阴影</div>
<div class="shadow-md">中阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">特大阴影</div>
<div class="shadow-none">无阴影</div>

响应式设计

移动优先断点

Tailwind 使用移动优先方法。基础样式适用于所有屏幕尺寸，然后在较大尺寸使用断点前缀覆盖：

断点：

sm: - 640px及以上
md: - 768px及以上
lg: - 1024px及以上
xl: - 1280px及以上
2xl: - 1536px及以上

示例：

<!-- 移动：1列，平板：2列，桌面：4列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
  <div>项目4</div>
</div>

<!-- 移动隐藏，桌面显示 -->
<div class="hidden lg:block">仅桌面内容</div>

<!-- 移动显示，桌面隐藏 -->
<div class="block lg:hidden">仅移动内容</div>

<!-- 响应式文本大小 -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
  响应式标题
</h1>

自定义断点

@theme {
  --breakpoint-3xl: 120rem;
  --breakpoint-tablet: 48rem;
}

<div class="tablet:grid-cols-2 3xl:grid-cols-6">
  自定义断点
</div>

最大宽度查询

<!-- 仅应用于768px以下 -->
<div class="flex max-md:hidden">移动隐藏</div>

<!-- 断点之间 -->
<div class="md:block lg:hidden">仅平板可见</div>

容器查询

基于父容器宽度样式元素：

<div class="@container">
  <div class="@md:grid-cols-2 @lg:grid-cols-3">
    响应父宽度
  </div>
</div>

交互状态

悬停状态

<button class="bg-blue-500 hover:bg-blue-700 text-white">
  悬停我
</button>

<a class="text-blue-600 hover:underline">
  悬停链接
</a>

<div class="scale-100 hover:scale-105 transition-transform">
  悬停缩放
</div>

焦点状态

<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />

<button class="bg-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-300">
  可访问按钮
</button>

活动状态

<button class="bg-blue-500 active:bg-blue-800">
  点击我
</button>

禁用状态

<button class="bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
  禁用按钮
</button>

<input class="disabled:bg-gray-100" disabled />

表单状态

<input class="invalid:border-red-500 focus:invalid:ring-red-200" required />

<input class="placeholder:text-gray-400 placeholder:italic" placeholder="搜索..." />

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

组悬停（父状态）

<div class="group hover:bg-gray-100">
  <p class="group-hover:text-blue-600">
    父悬停时文本变化
  </p>
  <img class="group-hover:opacity-50" src="..." />
</div>

对等状态（兄弟状态）

<input type="checkbox" class="peer" id="terms" />
<label for="terms" class="peer-checked:text-blue-600">
  我接受条款
</label>

<input type="email" class="peer" required />
<p class="hidden peer-invalid:block text-red-600">
  无效邮箱
</p>

暗黑模式

设置暗黑模式

媒体查询方法（自动）：

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  基于系统偏好自动切换
</div>

基于类的方法（手动切换）：

// 向<html>元素添加.dark类
document.documentElement.classList.toggle('dark')

暗黑模式实用程序

<!-- 颜色 -->
<div class="bg-white dark:bg-slate-900">背景</div>
<p class="text-gray-900 dark:text-gray-100">文本</p>

<!-- 边框 -->
<div class="border-gray-200 dark:border-gray-700">边框</div>

<!-- 完整示例 -->
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
    暗黑模式卡片
  </h2>
  <p class="text-gray-600 dark:text-gray-300">
    内容适应主题
  </p>
</div>

暗黑模式切换实现

// 存储偏好
function toggleDarkMode() {
  const isDark = document.documentElement.classList.toggle('dark')
  localStorage.setItem('theme', isDark ? 'dark' : 'light')
}

// 加载时初始化
if (localStorage.theme === 'dark' ||
    (!('theme' in localStorage) &&
     window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
}

任意值

使用方括号处理一次性自定义值：

像素值：

<div class="top-[117px]">自定义位置</div>
<p class="text-[22px]">自定义字体大小</p>
<div class="w-[500px]">自定义宽度</div>

颜色：

<div class="bg-[#bada55]">自定义十六进制颜色</div>
<div class="text-[rgb(123,45,67)]">RGB颜色</div>
<div class="bg-[oklch(0.55_0.22_264)]">OKLCH颜色</div>

CSS变量：

<div class="bg-[var(--my-brand-color)]">CSS变量</div>
<div class="text-[length:var(--my-font-size)]">类型提示</div>

复杂值：

<div class="grid-cols-[1fr_500px_2fr]">自定义网格</div>
<div class="content-['>']">自定义内容</div>
<div class="[mask-type:luminance]">自定义属性</div>

过渡与动画

过渡

<button class="bg-blue-500 transition-colors hover:bg-blue-700">
  平滑颜色过渡
</button>

<div class="transform transition-transform hover:scale-110">
  缩放过渡
</div>

<div class="transition-all duration-300 ease-in-out hover:shadow-lg">
  多个过渡
</div>

<!-- 持续时间选项 -->
<div class="transition duration-150">快</div>
<div class="transition duration-300">正常</div>
<div class="transition duration-500">慢</div>

变换

<!-- 缩放 -->
<div class="scale-95 hover:scale-100">缩放</div>

<!-- 旋转 -->
<div class="rotate-45">旋转45度</div>
<div class="hover:rotate-6">轻微旋转</div>

<!-- 平移 -->
<div class="translate-x-4 translate-y-2">移动</div>

<!-- 倾斜 -->
<div class="skew-x-12">倾斜</div>

<!-- 组合 -->
<div class="transform scale-110 rotate-3 translate-x-2">
  多个变换
</div>

动画

<div class="animate-spin">旋转</div>
<div class="animate-ping">跳动</div>
<div class="animate-pulse">脉动</div>
<div class="animate-bounce">弹跳</div>

自定义动画

@theme {
  --animate-slide-in: slide-in 0.5s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

<div class="animate-slide-in">自定义动画</div>

高级模式

自定义实用程序

创建可重用的实用类：

@utility content-auto {
  content-visibility: auto;
}

@utility tab-* {
  tab-size: var(--tab-size-*);
}

<div class="content-auto">自定义实用程序</div>
<pre class="tab-4">自定义制表符大小</pre>

自定义变体

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
@custom-variant aria-checked (&[aria-checked="true"]);

<div theme-midnight:bg-navy-900>
  当data-theme="midnight"时应用
</div>

层组织

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }

  body {
    @apply bg-white text-gray-900;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-700;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

应用指令

将重复的实用程序提取到CSS类中：

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.input-field {
  @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

组件示例

按钮组件

<!-- 主要按钮 -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed">
  点击我
</button>

<!-- 次要按钮 -->
<button class="bg-white hover:bg-gray-50 border-2 border-gray-300 text-gray-700 font-semibold px-6 py-3 rounded-lg">
  次要
</button>

<!-- 图标按钮 -->
<button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
  <svg class="w-6 h-6">...</svg>
</button>

卡片组件

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow overflow-hidden">
  <img class="w-full h-48 object-cover" src="..." alt="卡片图像" />
  <div class="p-6">
    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
      卡片标题
    </h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4">
      卡片描述文本在这里
    </p>
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg">
      了解更多
    </button>
  </div>
</div>

表单组件

<form class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
  <div class="mb-6">
    <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">
      邮箱
    </label>
    <input
      type="email"
      id="email"
      class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
      placeholder="you@example.com"
    />
  </div>

  <div class="mb-6">
    <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">
      密码
    </label>
    <input
      type="password"
      id="password"
      class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 invalid:border-red-500 dark:bg-gray-700 dark:text-white"
    />
  </div>

  <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors">
    登录
  </button>
</form>

导航组件

<nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center gap-8">
        <a href="/" class="text-2xl font-bold text-blue-600">Logo</a>
        <div class="hidden md:flex gap-6">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors">首页</a>
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors">关于</a>
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors">服务</a>
        </div>
      </div>
      <button class="md:hidden p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
        <svg class="w-6 h-6">...</svg>
      </button>
    </div>
  </div>
</nav>

网格布局

<div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <div class="bg-white rounded-lg shadow-md p-6">项目1</div>
    <div class="bg-white rounded-lg shadow-md p-6">项目2</div>
    <div class="bg-white rounded-lg shadow-md p-6">项目3</div>
    <div class="bg-white rounded-lg shadow-md p-6">项目4</div>
  </div>
</div>

最佳实践

1. 使用一致的间距比例

<!-- 好：使用间距比例 -->
<div class="p-4 mb-6">

<!-- 避免：除非必要，否则避免任意值 -->
<div class="p-[17px] mb-[23px]">

2. 利用设计标记

<!-- 好：使用语义颜色名称 -->
<button class="bg-blue-600 hover:bg-blue-700">

<!-- 避免：一次性颜色 -->
<button class="bg-[#3B82F6] hover:bg-[#2563EB]">

3. 移动优先响应式设计

<!-- 好：移动优先，然后放大 -->
<div class="text-base md:text-lg lg:text-xl">

<!-- 避免：桌面优先 -->
<div class="text-xl lg:text-base">

4. 组件提取

// 使用Tailwind的React组件
function Button({ children, variant = 'primary' }) {
  const baseClasses = "font-semibold px-6 py-3 rounded-lg transition-colors"
  const variants = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900"
  }

  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  )
}

5. 对重复模式使用@apply

/* 仅对真正重复的模式使用@apply */
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
  }
}

6. 可访问性优先

<button class="focus:outline-none focus:ring-4 focus:ring-blue-300">
  可访问按钮
</button>

<a class="text-blue-600 hover:underline focus:outline-2 focus:outline-offset-2">
  可访问链接
</a>

7. 性能优化

在生产中使用PurgeCSS（现代设置中自动）
避免动态类名：class={text-${color}-500} 不会工作
如果需要，为动态类使用安全列表

8. 暗黑模式一致性

<!-- 确保所有元素都有暗黑模式变体 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700">
  完整的暗黑模式支持
</div>

常见模式

居中内容

<!-- 水平居中 -->
<div class="flex justify-center">内容</div>
<div class="mx-auto w-fit">内容</div>

<!-- 垂直居中 -->
<div class="flex items-center h-screen">内容</div>

<!-- 两轴居中 -->
<div class="flex items-center justify-center h-screen">
  居中内容
</div>

全宽度容器与最大宽度

<div class="container mx-auto px-4 max-w-7xl">
  具有一致最大宽度的内容
</div>

宽高比盒子

<div class="aspect-square">正方形</div>
<div class="aspect-video">16:9视频</div>
<div class="aspect-[4/3]">4:3比例</div>

截断文本

<p class="truncate">将被截断的长文本...</p>

<p class="line-clamp-3">
  将在3行后被截断的长文本...
</p>

平滑滚动

<html class="scroll-smooth">
  <a href="#section">平滑滚动到部分</a>
</html>

故障排除

类不工作

检查内容配置：

// tailwind.config.js
内容: [
  "./src/**/*.{js,jsx,ts,tsx}",
  // 添加所有使用Tailwind的文件路径
]

动态类不会工作：

// ❌ 不会工作
const color = 'blue'
<div className={`text-${color}-500`} />

// ✅ 工作
<div className={color === 'blue' ? 'text-blue-500' : 'text-red-500'} />

特异性问题：

/* 谨慎使用!important */
<div class="!text-red-500">覆盖其他样式</div>

构建问题

# 清除缓存并重建
rm -rf .next node_modules/.cache
npm run dev

IntelliSense不工作

安装官方扩展：

VS Code: “Tailwind CSS IntelliSense”
在 .vscode/settings.json 中配置：

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

资源

官方文档: https://tailwindcss.com/docs
Tailwind UI组件: https://tailwindui.com
Headless UI（无样式组件）: https://headlessui.com
Tailwind Play（在线游乐场）: https://play.tailwindcss.com
颜色调色板生成器: https://uicolors.app
社区组件: https://tailwindcomponents.com

框架集成示例

React

export function Card({ title, description }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h3 className="text-2xl font-bold mb-2">{title}</h3>
      <p className="text-gray-600">{description}</p>
    </div>
  )
}

Vue

<template>
  <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
    <h3 class="text-2xl font-bold mb-2">{{ title }}</h3>
    <p class="text-gray-600">{{ description }}</p>
  </div>
</template>

<script setup>
defineProps(['title', 'description'])
</script>

Svelte

<script>
  export let title
  export let description
</script>

<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h3 class="text-2xl font-bold mb-2">{title}</h3>
  <p class="text-gray-600">{description}</p>
</div>

实施清单

实施Tailwind CSS时：

[ ] 安装 tailwindcss 和框架特定插件
[ ] 配置构建工具（Vite/PostCSS/CLI）
[ ] 在配置中设置内容路径
[ ] 在CSS文件中导入Tailwind
[ ] 配置自定义主题标记（如果需要）
[ ] 设置暗黑模式策略
[ ] 安装VS Code IntelliSense扩展
[ ] 创建可重用的组件模式
[ ] 实现响应式断点
[ ] 添加可访问性焦点状态
[ ] 测试所有组件的暗黑模式
[ ] 为生产构建优化
[ ] 记录自定义实用程序和组件

名称: tailwindcss 描述: Tailwind CSS实施指南 - 一个实用优先的CSS框架，用于快速用户界面开发。在需要响应式设计、暗黑模式、自定义主题或使用Tailwind的实用类构建设计系统时使用。 许可证: MIT 版本: 1.0.0