mcpField
T
tailwind

tailwind

github.com/hjewkes设计与 UI443 次安装35 周前更新
代码仓库

关于 tailwind

tailwind 是面向开发者的 Tailwind CSS v4 技能，涵盖主题配置和界面构建，并包括 shadcn 相关设置。内容涉及四步 CSS 架构、常见问题修复、组件模式、暗色模式及迁移指南。

主要功能

  1. 01Tailwind CSS v4 设置指南
  2. 02四步 CSS 主题架构
  3. 03语义令牌与响应式规则
  4. 04常见错误修复
  5. 05组件与暗色模式模式
  6. 06v3 到 v4 迁移指南

适用场景

  1. 01使用 Vite 配置 Tailwind CSS v4
  2. 02设置语义颜色和暗色模式
  3. 03排查 CSS 与构建错误
  4. 04将项目从 v3 迁移到 v4

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hjewkes/agent-skills --skill tailwind

安装后在 Claude Code 中输入/tailwind确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
common-errors.md
dark-mode.md
migration.md
patterns.md
setup.md
templates/
components.json
index.css
utils.ts
vite.config.ts

详细介绍

Tailwind CSS v4

整合自 jezweb/claude-skills（tailwind-v4-shadcn + tailwind-patterns）。经过生产环境测试。

快速开始

pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node tw-animate-css
pnpm dlx shadcn@latest init
rm tailwind.config.ts  # v4 doesn't use this

使用 @tailwindcss/vite 插件（不要使用 PostCSS）。在 components.json 中设置 "config": ""。

四步 CSS 架构

跳过任何一步都会导致主题出错。完整详情请参阅 references/setup.md。

  1. 在 :root 中定义 CSS 变量 — 使用 hsl() 封装颜色，不要将其放在 @layer base 中
  2. @theme inline — 将 CSS 变量映射到 Tailwind 工具类（--color-background: var(--background)）
  3. @layer base — 使用未封装的变量应用基础样式
  4. 结果 — bg-background 会在深色模式下自动切换，无需 dark: 前缀

关键规则

始终：使用语义化令牌（bg-primary，而不是 bg-blue-500）、移动优先（base → sm: → md:）、在 :root/.dark 中使用 hsl()、保持间距一致（4/6/8/12/16/24 刻度）

切勿：使用 tailwind.config.ts（v4 会忽略它）、对 @layer 类使用 @apply（改用 @utility）、重复封装 hsl(var(--color))、使用原始颜色、使用 .dark { @theme {} }、对语义化颜色使用 dark: 变体

常见错误速查

现象解决方法
bg-primary 不起作用添加 @theme inline 块
颜色显示为黑色/白色移除重复的 hsl() 封装
深色模式卡住添加 ThemeProvider，检查 <html> 上的 .dark
构建失败删除 tailwind.config.ts
动画报错将 tailwindcss-animate 替换为 tw-animate-css
@apply 出错改用 @utility 指令
基础样式被忽略不要封装在 @layer base 中，在根级别定义

完整错误详情及解决方案：references/common-errors.md

组件模式

这些模式使用语义化令牌实现自动深色模式。完整组件库请参阅 references/patterns.md。

// Container
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

// Card
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">

// Button
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">

参考文件

  • references/setup.md — 完整的四步架构 + Vite 配置 + components.json
  • references/common-errors.md — 记录了 8 个 v4 错误及其解决方案
  • references/patterns.md — 布局、卡片、按钮、表单、导航、排版
  • references/dark-mode.md — ThemeProvider、切换控件、OKLCH 颜色
  • references/migration.md — v3 → v4 检查清单和注意事项
  • templates/ — index.css、components.json、theme-provider.tsx、vite.config.ts、utils.ts

评论

支持 Markdown