web-tailwind

web-tailwind

用途

此技能可帮助 AI 使用 Tailwind CSS 4 构建响应式、实用优先的 Web 界面，重点介绍实用类、配置、JIT 编译、任意值、深色模式、插件以及与 shadcn/ui 的集成等功能。

适用场景

在开发需要通过可复用类快速设置样式的 Web 项目时使用此技能，例如创建响应式布局、使用深色模式设置主题，或集成 shadcn/ui 的预构建组件。适用于 React/Vue 应用或静态网站的前端开发等场景，尤其是在需要尽量减少 CSS 冗余时。

主要功能

• 用于直接设置样式的实用类（例如，'flex'、'p-4'、'hover:bg-blue-700'）。
• JIT 模式可按需生成 CSS，减小打包体积。
• 任意值可用于自定义样式（例如，使用 'w-[14rem]' 设置宽度）。
• 通过 'dark:' 前缀或媒体查询支持深色模式。
• 可通过插件扩展功能，例如添加自定义实用类。
• 集成 shadcn/ui 组件式 UI 工具包。
• 通过断点实现响应式设计（例如，'md:flex' 适用于中等及更大屏幕）。

使用模式

要应用 Tailwind 类，请在标记中将它们直接添加到 HTML 元素。要进行配置，请编辑 tailwind.config.js 文件以自定义主题、扩展实用类或启用 JIT。务必在 CSS 入口文件中导入 Tailwind 的基础样式、组件和实用类。对于 shadcn/ui，请克隆代码库，并通过 Tailwind 类集成组件。要启用深色模式，请在配置中设置相关选项，并使用 'dark:' 变体。

示例 1：创建一个响应式按钮。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded md:px-6">
  Click me
</button>

示例 2：在 tailwind.config.js 中配置深色模式。

module.exports = {
  darkMode: 'class',  // Use 'media' for OS-level or 'class' for manual toggle
  theme: { extend: {} },
};

常用命令/API

使用 Tailwind CLI 构建和初始化项目。运行 npx tailwindcss init 可生成 tailwind.config.js。使用 npx tailwindcss -i ./input.css -o ./output.css --jit 构建 CSS，以启用 JIT 模式。要清除未使用的样式，请在配置中添加内容路径：content: ['./src/**/*.{html,js}']。在 API 方面，Tailwind 不提供直接端点，但可以通过 JavaScript 模块访问配置。要添加插件，请在配置中引入它们：plugins: [require('tailwindcss/plugin')(function({ addUtilities }) { ... })]。

集成说明

通过 npm 安装 Tailwind：npm install -D tailwindcss。在 React 项目中，在 index.js 中导入输出的 CSS：import './output.css';。对于 shadcn/ui，运行 npx shadcn-ui@latest init，并选择 Tailwind 作为框架，然后使用 Tailwind 类添加按钮等组件。如果使用 Vite 或 Webpack，请配置 PostCSS 来处理 Tailwind。无需设置环境变量；但如果使用任何基于 API 的工具（例如，扩展外部服务），请在脚本中使用 $TAILWIND_API_KEY。

错误处理

如果 JIT 未启用，请检查 tailwind.config.js 中是否存在配置错误（例如，确认已设置 mode: 'jit'）。如果出现清除样式错误，请确认内容路径包含所有相关文件；添加 --watch 标志以启用调试模式。常见问题：缺少实用类可能表示尚未安装插件；请通过 npm 安装插件并重新启动构建。如果深色模式无效，请确认已将 'dark' 类添加到 HTML 元素，并检查是否存在 CSS 冲突。出现任意值错误时，请验证 CSS 单位（例如，使用 'px' 或 'rem'）。务必运行 npx tailwindcss build --config tailwind.config.js 来测试输出。

图谱关系

• 关联集群：web-dev（共享 Web 开发工具）。
• 关联标签：tailwind（核心框架）、css（样式语言）、utility（基于类的方式）、web（领域重点）。
• 链接到其他技能：web-react（用于与 React 组件集成）、web-vue（适用于 Vue.js 项目）。