Tailwind CSS 是 AI 生成代码中最流行的工具类优先 CSS 框架。在提示 AI 工具生成 Tailwind 代码时，具体指定类名、断点、间距值和组件模式能产生显著更好的结果。本合集提供使用 Tailwind 语言优化的提示词，帮助 AI 工具生成具备响应式设计、暗黑模式支持和可访问标记的生产就绪代码。
使用 Tailwind CSS 构建响应式导航栏。桌面端采用横向导航：logo 在左、链接居中、CTA 按钮在右，容器使用 'flex items-center justify-between max-w-7xl mx-auto px-6 h-16'。移动端提供汉堡菜单按钮，用它切换采用 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center gap-8' 的全屏 overlay 导航。以 'md' 为切换 breakpoint，使用 'transition-all duration-300' 完成平滑过渡，并通过 'dark:bg-zinc-950 dark:text-white' 支持 dark mode。使用 shadcn/ui 和 Tailwind 创建响应式卡片网格。网格使用 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'。每张卡使用 shadcn Card：CardHeader 放置 aspect-video 图片占位，CardContent 包含 font-semibold 标题与 text-sm text-muted-foreground 说明，CardFooter 放置价格 badge 和操作按钮。卡片加入 'hover:shadow-lg transition-shadow' 与 'group' class，图片在 hover 时使用 scale-105。使用 shadcn Skeleton 组件提供加载状态。在 Next.js 中使用 Tailwind CSS 构建多步骤表单。容器使用 'max-w-2xl mx-auto py-12 px-6'。步骤指示器由横向圆点和连接线组成，当前步骤需要明确高亮。每一步的字段组使用 'space-y-6'，label 使用 'text-sm font-medium'，input 使用 'w-full px-3 py-2 border border-zinc-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-zinc-900 dark:border-zinc-700'。底部导航使用 'flex justify-between mt-8'，提供返回和下一步按钮。步骤切换使用 'transition-opacity duration-200'。生成一份包含完整 design token system 的 Tailwind CSS 配置。定义 primary、secondary、accent、success、warning、danger 自定义色板，每组包含 50-950 色阶；扩展默认 spacing scale，加入 18、22、30；定义 sans、serif、mono font family stack；提供 none、sm、md、lg、xl、full border-radius tokens，sm、md、lg、xl、glow box-shadow tokens，以及 fade-in、slide-up、scale-in animation tokens。另行创建与这些 tokens 对应的 CSS custom properties，供非 Tailwind 场景使用。输出为 tailwind.config.ts。使用 CSS-first 配置建立 Tailwind CSS v4 项目主题，不创建 tailwind.config.js。在 globals.css 中先写 '@import "tailwindcss";'，随后添加 @theme block，定义 --color-brand-50 到 --color-brand-950（基准色 #4f46e5）、--font-sans: 'Inter', system-ui、--radius-card: 1rem 和 --spacing-section: 6rem。使用 '@custom-variant dark (&:where(.dark, .dark *))' 添加自定义 dark variant。演示一个使用 bg-brand-600 text-white 的 hero、使用 rounded-[--radius-card] 的卡片，以及使用 py-[--spacing-section] 的 section padding。再提供一个用于 text balance 的 @utility 定义。所有交互元素都需要 focus-visible:ring-2 ring-brand-500。使用 shadcn/ui 和 Tailwind 创建响应式 dashboard shell。桌面端使用 CSS grid 'grid-cols-[240px_1fr]'，侧边栏采用 border-zinc-200 dark:border-zinc-800；导航项使用 'flex items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800'，当前项使用 bg-zinc-100 font-medium。移动端将侧边栏改为由顶部栏触发的 shadcn Sheet。顶部栏高度为 h-14，包含 breadcrumbs、搜索 input（w-64、pl-9，图标绝对定位）和头像 dropdown。内容区使用 'p-6 lg:p-8 space-y-6'，四张统计卡排列为 'grid gap-4 sm:grid-cols-2 lg:grid-cols-4'。侧边栏当前链接必须设置 aria-current。在 Next.js 和 Tailwind 中构建三个可复用的营销区块。hero 使用 'py-24 lg:py-32'，标题使用 'text-5xl lg:text-6xl font-bold tracking-tight text-balance'，辅助文字使用 'mt-6 text-lg text-zinc-600 max-w-2xl mx-auto'；提供两个 CTA，primary 使用 bg-zinc-900 text-white，secondary 使用 ring-1 ring-zinc-300。logo cloud 使用 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8 items-center'，logo 默认灰度，hover 时恢复彩色。feature bento 使用 'grid lg:grid-cols-3 gap-4'，第一张卡使用 lg:col-span-2，每张卡使用 'rounded-2xl bg-zinc-50 p-8 ring-1 ring-zinc-200'。全程通过 dark: variants 支持 dark mode，两个主题中的标题都必须达到 4.5:1 对比度。生成一个完全使用 Tailwind 样式的可复用 TypeScript DataTable 组件。wrapper 使用 'overflow-x-auto rounded-lg ring-1 ring-zinc-200 dark:ring-zinc-800'；table 使用 'w-full text-sm'；表头使用 'bg-zinc-50 dark:bg-zinc-900 text-left text-xs font-medium uppercase tracking-wide text-zinc-500'；单元格使用 'px-4 py-3 border border-zinc-100 dark:border-zinc-800'。功能包括：可排序列，在 th 上配合 chevron icon 与 aria-sort；带 checkbox 列的行选择；通过 odd:bg-zinc-50/50 实现斑马纹；使用 'sticky top-0' 固定表头；数字列右对齐并使用 tabular-nums；分页 footer 使用 'flex items-center justify-between px-4 py-3'。提供加载 skeleton rows 和 empty state。表头设置 scope="col"，供屏幕阅读器识别。具体指定 Tailwind 类名：提到精确的断点（sm、md、lg、xl）、间距值（p-4、gap-6、my-8）、颜色（zinc-900、blue-500）和布局工具类（flex、grid、grid-cols-3）。适用时引用 shadcn/ui 组件名称。指定暗黑模式需求（dark: 前缀）。明确包含响应式行为。UI Library 的提示词已预先用这些 Tailwind 特定细节优化。
在 tailwind.config 中使用 design tokens（自定义颜色、间距、阴影），仅在组件 CSS 模块中（非全局）用 @apply 创建可复用组件类，使用 CSS 自定义属性处理会变化的主题值（暗黑模式、用户偏好），用一致的命名组织组件，利用 shadcn/ui 作为组件基础。通过将重复模式提取为组件来避免过长的 className 字符串。
UI Library 提供 143 种视觉风格，每种都有 Tailwind 兼容的 design tokens（颜色、间距、圆角、阴影、排版）。你可以把这些 tokens 用于 Tailwind 工作流、AI 代码生成提示词，或复制带有 Tailwind 类名的组件配方。UI Library 连接了设计意图与 Tailwind 实现之间的桥梁。
Tailwind v4 把配置从 tailwind.config.js 移进了 CSS：通过 '@import "tailwindcss"' 引入，在 @theme 块中以 CSS 变量定义 tokens（--color-brand-500、--font-display、--breakpoint-3xl）。自定义工具类用 @utility，自定义变体用 @custom-variant，且每个 design token 都自动暴露为原生 CSS 变量，可用 var() 读取。新引擎（Oxide）显著更快，内容检测自动完成（不再需要 content 数组），任意值和容器查询均为内置。大多数 v3 工具类无需改动；迁移主要涉及配置、插件和 @apply 的用法。
要克制。Tailwind 团队的指导意见：把重复模式提取为框架组件（比如 React 的 Button），而不是 @apply 类——组件让标记、逻辑和样式聚合在一起，而 @apply 会重新制造工具类 CSS 本来要避免的命名和缓存失效问题。正当用途：给无法编辑的第三方标记设置样式（渲染后的 markdown、CMS 输出），以及共享焦点环这类小型全局基元。v4 中，独立文件里的 @apply 需要 '@reference "../app.css"' 才能读到主题。如果一个类名字符串重复三次以上，优先考虑组件或 cva() 变体映射。