mcpField
T
tailwind-best-practices

tailwind-best-practices

github.com/gopherguides设计与 UI2137 次安装1 周前更新
代码仓库

关于 tailwind-best-practices

tailwind-best-practices 是面向 Tailwind CSS v4 使用者的开发技能，提供当前文档查询和实用指导，重点涵盖 v4 语法、最佳实践与常见反模式。

主要功能

  1. 01查询 Tailwind 文档
  2. 02查找 CSS 属性对应的工具类
  3. 03CSS 转换为 Tailwind 工具类
  4. 04生成 Tailwind 组件模板
  5. 05提供 v4 语法与实践参考

适用场景

  1. 01确认 Tailwind 功能或概念的用法
  2. 02将现有 CSS 转换为工具类
  3. 03生成带 Tailwind 样式的组件
  4. 04检查 v4 迁移中的常见错误

MCP 相关

该技能通过 MCP 工具搜索 Tailwind 文档、查找工具类与颜色、转换 CSS，并生成组件模板。

安装

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

$npx skills add https://github.com/gopherguides/gopher-ai --skill tailwind-best-practices

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

包含的文件

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

anti-patterns.md
best-practices.md
docs-urls.md
quick-reference.md
v4-syntax.md

详细介绍

Tailwind CSS v4 最佳实践

你可以通过 MCP 工具访问最新的 Tailwind CSS 文档。请使用这些工具提供准确、最新的信息。

可用的 MCP 工具

mcp__tailwindcss__search_tailwind_docs

当用户询问任何 Tailwind 功能、工具类或概念时使用。

mcp__tailwindcss__get_tailwind_utilities

当用户需要特定 CSS 属性对应的工具类时使用。

mcp__tailwindcss__get_tailwind_colors

当用户询问颜色、调色板或颜色相关工具类时使用。

mcp__tailwindcss__convert_css_to_tailwind

当用户希望将 CSS 转换为 Tailwind 工具类时使用。

mcp__tailwindcss__generate_component_template

当用户需要使用 Tailwind 样式的组件模板时使用。

参考文件

请阅读相关文件，了解详细模式、代码示例和文档 URL：

docs-urls.md — 官方文档 URL

按类别整理的 URL 表格（入门、核心概念、布局、间距、尺寸、排版、背景与边框、效果、变换与动画、交互）。MCP 工具不可用时，请搭配 WebFetch 使用。

v4-syntax.md — Tailwind CSS v4 核心语法

重要：v4 相较于 v3 有重大变化。涵盖 @import "tailwindcss"、用于基于 CSS 配置的 @theme 指令（颜色、字体、间距）、用于检测的 @source、用于深色模式的 @variant dark、用于提取的 @layer components、用于插件的 @plugin。

best-practices.md — 最佳实践

类名排序约定（布局 → 间距 → 尺寸 → 排版 → 颜色 → 效果 → 交互）、响应式设计（移动优先、断点参考）、组件提取规则（使用 3 次及以上时）、优先使用主题变量而非硬编码值、无障碍功能（focus-visible、sr-only、对比度）。

anti-patterns.md — 反模式

v3 → v4 迁移表（tailwind.config.js → @theme、@tailwind → @import 等）、常见错误（内联样式、px 值、重复或冲突的工具类）。

quick-reference.md — 快速参考

Tailwind 使用指南、示例响应流程、间距比例表、常见工具类模式（内容居中、卡片、响应式网格、文本截断、渐变、固定页眉）。

如需最新文档，请始终参阅 https://tailwindcss.com/docs

评论

支持 Markdown