tailwind

Name: tailwind
Author: pproenca

github.com/pproenca设计与 UI220648 次安装11 周前更新

代码仓库

关于 tailwind

面向 Tailwind CSS v4 开发者的最佳实践指南，包含 44 条分级规则，涵盖构建配置、CSS 生成、主题和响应式设计等方面。

主要功能

01涵盖 8 类的 44 条规则
02按优先级排列优化建议
03CSS 优先配置实践
04构建与资源包优化
05响应式设计与主题指导

适用场景

01配置 Tailwind CSS v4 构建工具
02将样式迁移到 CSS 优先方案
03缩减 CSS 资源包体积
04设置响应式布局与设计令牌

安装

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

$npx skills add https://github.com/pproenca/dot-skills --skill tailwind

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

包含的文件

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

AGENTS.md

metadata.json

README.md

assets/templates/

_template.md

references/

_sections.md

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-custom-variant.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

详细介绍

社区 Tailwind CSS v4 最佳实践

Tailwind CSS v4 应用的全面性能优化指南。包含 8 个类别中的 44 条规则，按影响程度排序，用于指导自动重构和代码生成。

适用场景

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

配置 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 - 使用后置的 Important 修饰符
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 模块
comp-utility-file-scope - 了解工具文件作用域
comp-smart-sorting - 利用智能工具排序
comp-container-customize - 使用 @utility 自定义容器
comp-custom-variant - 使用 @custom-variant 定义自定义变体

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

theme-semantic-tokens - 使用语义化设计令牌名称
theme-dark-mode-class - 使用基于类的深色模式，以便进行控制
theme-prefix-variables - 使用前缀为变量命名空间划分
theme-runtime-variables - 利用运行时 CSS 变量
theme-color-scheme - 设置 color-scheme 以启用原生深色模式
theme-inline-static - 使用 @theme inline 和 @theme static 控制变量

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

resp-mobile-first - 使用移动优先的响应式设计
resp-container-queries - 使用容器查询实现组件级响应式布局
resp-custom-breakpoints - 在 @theme 中定义自定义断点
resp-hover-capability - 将悬停与激活状态配合使用，让交互更适合触控
resp-logical-properties - 使用逻辑属性支持 RTL

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

anim-gpu-accelerated - 使用 GPU 加速的变换属性
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

登录后评论