告别 Tailwind 配置和响应式设计的困扰。此技能提供 CSS 优先模式、容器查询精通以及现代设计令牌架构，助您使用 Tailwind CSS v4 构建可扩展的 UI。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“tailwind-patterns”。 Create a dark mode card component with container queries
预期结果:
- .card { @container; background: white; padding: var(--spacing-lg); }
- .dark .card { background: zinc-900; }
- @sm { .card-content { grid-template-columns: 1fr 1fr; } }
正在使用“tailwind-patterns”。 Set up design tokens with OKLCH colors
预期结果:
- @theme {
- --color-primary: oklch(0.7 0.15 250);
- --color-surface: oklch(0.98 0 0);
- --spacing-md: 1rem;
- }
安全审计
安全Static analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.
质量评分
你能构建什么
将 Tailwind v3 迁移到 v4
从 Tailwind v3 升级到 v4 的开发者需要用 CSS 优先的 @theme 指令替换 JavaScript 配置
构建响应式组件库
创建可重用组件的 UI 工程师，这些组件适应其容器大小而非视口断点
实现设计令牌系统
使用 OKLCH 和 CSS 变量建立语义化颜色、间距和排版比例的团队
试试这些提示
为 [项目类型] 创建具有主品牌色、间距比例和字体堆栈的 Tailwind v4 @theme 配置
使用容器查询设计一个响应式的 [组件类型]，使其适应从窄到宽的容器
使用 [class/media/selector] 策略为 [页面类型] 实现深色模式，并使用正确的颜色令牌
使用 [flexbox/grid] 创建 [布局类型]，具有响应式断点和不对称的 Bento 风格部分
最佳实践
- 在 Tailwind v4 中使用 CSS 优先的 @theme 指令而非 tailwind.config.js，以获得更好的性能和原生 CSS 变量支持
- 优先使用容器查询（@container）进行组件级响应式设计而非视口断点，以实现可重用、上下文独立的组件
- 将设计令牌组织为三层：原始颜色（原始值）、语义令牌（primary、surface）和组件令牌（button-bg）
- 使用移动优先方法，通过编写不带前缀的基础样式，然后为更大的屏幕添加 sm:、md:、lg: 覆盖
- 当类组合重复 3 次以上或需要复杂状态变体时提取组件
避免
- 避免到处使用任意值 - 使用设计系统比例值以保持一致性，而非像 w-[327px] 这样的硬编���数字
- 不要使用 !important 覆盖样式 - 通过正确的组件结构和 CSS 分层解决特异性问题
- 避免内联样式属性 - 使用 Tailwind 实用类以保持设计系统一致性
- 不要将 v3 JavaScript 配置与 v4 CSS 优先模式混合 - 完全迁移到 @theme 指令和基于 CSS 的配置
- 避免大量使用 @apply 指令 - 对于动态行为首选 React/Vue 组件，对于静态模式使用纯 CSS 组件