tailwind

Name: tailwind
Author: thongdn-it

github.com/thongdn-it设计与 UI5136 次安装40 周前更新

代码仓库

关于 tailwind

tailwind 是 Tailwind Labs 维护的 Tailwind CSS v4 性能指南，面向配置、迁移或优化 v4 应用的开发者。指南按优先级组织 42 条规则，涵盖构建、CSS 生成、样式、主题、自适应设计与动画。

主要功能

0142 条按优先级排列的 Tailwind CSS v4 规则
02八类性能与样式主题
03构建工具和 CSS 生成建议
04资源包与工具类优化
05自适应设计和动画建议

适用场景

01配置 Tailwind CSS v4 构建工具
02将样式迁移到 CSS 优先方案
03优化 CSS 资源包大小和构建性能
04设置主题、断点或容器查询

安装

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

$npx skills add https://github.com/thongdn-it/react-agent-skills --skill tailwind

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

包含的文件

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

AGENTS.md

references/

anim-3d-transforms.md

anim-gpu-accelerated.md

anim-gradient-interpolation.md

anim-starting-style.md

build-cli-package.md

build-content-detection.md

build-css-import.md

build-node-version.md

build-postcss-simplify.md

build-vite-plugin.md

bundle-avoid-cdn-production.md

bundle-avoid-preprocessors.md

bundle-css-minification.md

bundle-remove-unused-plugins.md

bundle-split-critical-css.md

comp-avoid-apply-overuse.md

comp-container-customize.md

comp-reference-directive.md

comp-smart-sorting.md

comp-utility-file-scope.md

gen-avoid-theme-bloat.md

gen-css-first-config.md

gen-css-variable-syntax.md

gen-dynamic-utilities.md

gen-oklch-colors.md

gen-utility-directive.md

resp-container-queries.md

resp-custom-breakpoints.md

resp-hover-capability.md

详细介绍

Tailwind Labs Tailwind CSS v4 最佳实践

面向 Tailwind CSS v4 应用的全面性能优化指南，由 Tailwind Labs 维护。包含 8 个类别中的 42 条规则，并按影响优先级排序，用于指导自动重构和代码生成。

适用场景

在以下情况下，请参考这些指南：

配置 Tailwind CSS v4 构建工具（Vite 插件、PostCSS、CLI）
使用 v4 的 CSS 优先方式编写或迁移样式
优化 CSS 包大小和构建性能
使用断点或容器查询实现响应式设计
使用 @theme 指令和设计令牌设置主题

按优先级划分的规则类别

优先级	类别	影响	前缀
1	构建配置	严重	`build-`
2	CSS 生成	严重	`gen-`
3	包优化	高	`bundle-`
4	工具类模式	高	`util-`
5	组件架构	中高	`comp-`
6	主题与设计令牌	中	`theme-`
7	响应式与自适应	中	`resp-`
8	动画与过渡	低至中	`anim-`

快速参考

1. 构建配置（严重）

build-vite-plugin - 使用 Vite 插件，而非 PostCSS
build-css-import - 使用 CSS 导入，而非 @tailwind 指令
build-content-detection - 利用自动内容检测
build-node-version - 使用 Node.js 20+ 以获得最佳性能
build-postcss-simplify - 移除冗余的 PostCSS 插件
build-cli-package - 使用正确的 CLI 包

2. CSS 生成（严重）

gen-css-first-config - 使用 CSS 优先配置，而非 JavaScript
gen-avoid-theme-bloat - 避免主题变量过多
gen-oklch-colors - 使用 OKLCH 色彩空间获得鲜艳色彩
gen-utility-directive - 使用 @utility 定义自定义工具类
gen-dynamic-utilities - 使用动态工具类值
gen-css-variable-syntax - 使用括号引用 CSS 变量

3. 包优化（高）

bundle-remove-unused-plugins - 移除内置插件
bundle-avoid-preprocessors - 避免使用 Sass/Less 预处理器
bundle-css-minification - 在生产环境启用 CSS 压缩
bundle-avoid-cdn-production - 避免在生产环境使用 Play CDN
bundle-split-critical-css - 提取关键 CSS，用于初始渲染

4. 工具类模式（高）

util-renamed-utilities - 使用更名后的工具类
util-important-modifier - 使用尾随的重要性修饰符
util-variant-stacking - 使用从左到右的变体堆叠
util-explicit-colors - 显式指定边框和环形颜色
util-opacity-modifier - 使用斜杠透明度修饰符
util-gradient-via-none - 使用 via-none 重置渐变色标

5. 组件架构（中等偏高）

comp-avoid-apply-overuse - 避免过度使用 @apply
comp-reference-directive - 使用 @reference 集成 CSS Module
comp-utility-file-scope - 了解工具类文件作用域
comp-smart-sorting - 利用智能工具类排序
comp-container-customize - 使用 @utility 自定义容器

6. 主题与设计令牌（中等）

theme-semantic-tokens - 使用语义化设计令牌名称
theme-dark-mode-class - 使用基于类的暗色模式进行控制
theme-prefix-variables - 使用前缀对变量名称进行命名空间划分
theme-runtime-variables - 利用运行时 CSS 变量
theme-color-scheme - 设置 color-scheme 以支持原生暗色模式

7. 响应式与自适应（中等）

resp-mobile-first - 使用移动优先的响应式设计
resp-container-queries - 使用容器查询实现组件级响应式布局
resp-custom-breakpoints - 在 @theme 中定义自定义断点
resp-hover-capability - 了解触控设备上的悬停行为
resp-logical-properties - 使用逻辑属性支持 RTL

8. 动画与过渡（低至中等）

anim-gpu-accelerated - 使用 GPU 加速的 transform 属性
anim-starting-style - 使用 @starting-style 实现入场动画
anim-gradient-interpolation - 使用 OKLCH 渐变插值
anim-3d-transforms - 使用内置的 3D 变换工具类

使用方法

阅读各个参考文件，了解详细说明和代码示例：

章节定义 - 类别结构和影响级别
规则模板 - 添加新规则的模板

完整编译文档

如需查看包含所有展开规则的完整指南，请参阅 AGENTS.md。

参考文件

文件	说明
AGENTS.md	包含所有规则的完整编译指南
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息

支持 Markdown

登录后评论