一、官方插件
官方插件由 Tailwind 团队维护，质量稳定、与核心版本同步。
1. typography
作用说明：@tailwindcss/typography提供prose系列类，一键排版富文本（文章、博客、文档），自动处理好标题、段落、列表、代码等的间距和字号。
@import"tailwindcss";@plugin"@tailwindcss/typography";<!-- 用 prose 包裹长文本，自动排版 --><articleclass="prose"><h1>文章标题</h1><p>这里是正文内容，段落会自动获得合适的行高和间距。</p><ul><li>列表项</li></ul></article>使用指南：可通过prose-lg、prose-xl调整整体字号，prose-invert用于深色背景。
2. forms
作用说明：@tailwindcss/forms提供表单元素的基础重置样式，让 input、select、checkbox 等在工具类下更一致、更好看。
@import"tailwindcss";@plugin"@tailwindcss/forms";<inputtype="text"class="rounded border-gray-300 focus:border-blue-500"/><selectclass="rounded border-gray-300"><option>选项</option></select><inputtype="checkbox"class="rounded text-blue-500"/>3. 其他插件简介
作用说明：v4 把一些 v3 插件的能力并入了核心，官方独立插件相应减少。
| 插件 | 状态 / 说明 |
|---|---|
@tailwindcss/aspect-ratio | v4 已内置为aspect-*工具类 |
@tailwindcss/line-clamp | v4 已内置为line-clamp-*工具类 |
@tailwindcss/container-queries | v4 已内置为@container能力 |
@tailwindcss/upgrade | 从 v3 迁移到 v4 的命令行工具 |
二、官方开发工具
1. IntelliSense
作用说明：Tailwind CSS IntelliSense 是 VS Code 插件，提供自动补全、悬停预览、语法高亮、错误提示等，是提升开发效率的核心工具。
| 能力 | 作用 |
|---|---|
| 自动补全 | 输入类名时给出候选 |
| 悬停预览 | 查看类名对应的 CSS |
| 语法高亮 | 类名与错误高亮 |
| 代码提示 | 提示拼写错误或未知类 |
使用指南：在 VS Code 扩展市场搜索 “Tailwind CSS IntelliSense” 安装即可，v4 项目通常会自动识别。
2. Prettier 插件
作用说明：prettier-plugin-tailwindcss让 Prettier 自动整理类名顺序，让团队代码风格一致。
{"plugins":["prettier-plugin-tailwindcss"]}<!-- 保存后自动排序 --><divclass="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"></div>三、官方组件库
1. Tailwind UI
作用说明：Tailwind UI 是官方出品的付费组件模板库，包含大量高质量、可直接复制使用的页面和组件代码，适合快速搭建产品界面。
适用场景：商业项目、需要快速交付、追求官方风格统一。
2. Headless UI
作用说明：Headless UI 是官方出品的免费、无样式、可访问的交互组件库（React / Vue），把下拉菜单、弹窗、标签页等逻辑封装好，样式完全用 Tailwind 控制。
import { Menu } from "@headlessui/react"; <Menu> <Menu.Button>更多</Menu.Button> <Menu.Items className="rounded-md bg-white shadow-lg"> <Menu.Item> {({ active }) => <a className={active ? "bg-blue-500" : ""}>编辑</a>} </Menu.Item> </Menu.Items> </Menu>;四、第三方组件库
1. shadcn/ui
作用说明：shadcn/ui 不是传统的 npm 包，而是把组件源码“复制”进你的项目，基于 Radix UI + Tailwind 构建，可完全掌控和修改样式。
import { Button } from "@/components/ui/button"; <Button variant="outline">点击</Button>;适用场景：React 项目、需要高度定制、希望组件代码可读可改。
2. daisyUI / Flowbite 等
作用说明：daisyUI 是 Tailwind 插件，提供btn、card、badge等语义化组件类；Flowbite 是一套基于 Tailwind 的组件库，可直接引入现成组件。
| 库 | 类型 | 特点 |
|---|---|---|
| daisyUI | 插件 | 语义化类名、主题切换方便 |
| Flowbite | 组件库 | 组件丰富、有官方设计 |
| Preline UI | 组件库 | 大量交互组件 |
| Mamba UI | 组件库 | 免费模板组件 |
/* 使用 daisyUI 作为插件 */@import"tailwindcss";@plugin"daisyui";<buttonclass="btn btn-primary">daisyUI 按钮</button>五、类名合并工具
当类名由多个条件动态拼合时，容易出现冲突或重复，需要专门的合并工具。
1. clsx
作用说明：clsx用于按条件拼接类名，自动忽略空值和假值。
importclsxfrom"clsx";constclassName=clsx("btn",isActive&&"active",isPrimary?"primary":"secondary");// 结果：'btn active primary'（假设 isActive、isPrimary 为真）2. tailwind-merge
作用说明：tailwind-merge解决 Tailwind 类名冲突，例如同时出现px-2和p-4时，保留后出现的、语义更具体的类。
import{twMerge}from"tailwind-merge";twMerge("px-2 py-1 p-4");// 结果：'p-4 px-2 py-1'3. 两者结合使用（cn 函数）
作用说明：把clsx的条件拼接和tailwind-merge的冲突合并结合起来，封装成常用的cn函数，是 React 项目的标准做法。
import{clsx}from"clsx";import{twMerge}from"tailwind-merge";exportfunctioncn(...inputs){returntwMerge(clsx(inputs));}import { cn } from "@/lib/utils"; <button className={cn("px-4 py-2", primary && "bg-blue-500", className)}> 按钮 </button>;最佳实践：在组件对外暴露className时，用cn合并默认样式和外部传入样式，既能覆盖默认值，又不会产生冲突类名。
