tailwindcss

Name: tailwindcss
Author: mengto

github.com/mengto设计与 UI7.1k1.7k 次安装4 天前更新

代码仓库

关于 tailwindcss

tailwindcss 是一项使用 Tailwind CSS 工具类构建界面的技能，面向组件化应用和网页开发。它涵盖响应式状态、暗色模式及 CSS 生成等用法，帮助保持样式的一致性。

主要功能

01组合工具类
02响应式与状态变体
03任意值写法
04暗色模式样式
05CSS 生成与类名提取指导

适用场景

01构建响应式组件界面
02用工具类统一页面样式
03避免生产构建时遗漏类名

安装

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

$npx skills add https://github.com/mengto/skills --skill tailwindcss

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

包含的文件

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

REFERENCES.md

demo/

index.html

PROMPT.md

详细介绍

Tailwind CSS — 实用工具优先的样式技能

适用场景

快速构建 UI，并保持间距和排版比例一致
组合优先于定制 CSS 的设计系统
组件驱动的应用（React/Vue/Svelte）、营销页面、从原型到生产环境

核心概念与模式

在 HTML/JSX 中组合实用工具类：class="flex gap-4 p-6 bg-zinc-950 text-white"
响应式变体：sm: md: lg: xl: 等
状态变体：hover:, focus:, active:, disabled:, group-hover:, peer-checked:
任意值（谨慎使用）：w-[42rem], bg-[#0b1220], translate-y-[3px]
暗色模式模式：使用基于类的策略搭配 dark:
提取重复模式：
- 优先使用组件（JSX/Vue 组件）
- 然后使用 @apply 实现小型可复用模式（避免过度使用）
构建流程：
- Tailwind 扫描“content”文件中的类名并生成 CSS（零运行时）

常见问题

生产环境中未生成类
- 确保 content 路径包含所有模板/组件。
- 避免动态构建类名（例如 "text-" + color），除非已加入安全列表。
过度使用 @apply，失去实用工具优先的优势
因为对类名顺序的假设而导致样式冲突
HTML 类名列表过长且缺乏结构
- 使用组件组合；拆分为子组件；必要时使用 clsx/cva。

快速示例

1) 简洁的 CTA 按钮

<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
               bg-indigo-600 text-white font-medium
               hover:bg-indigo-500 active:bg-indigo-700
               focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
  Get started
</button>

2) 响应式 Hero 布局

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-2 lg:items-center">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
        Ship a beautiful site fast.
      </h1>
      <p class="mt-4 text-zinc-600">
        Tailwind helps you move quickly without fighting CSS.
      </p>
    </div>
    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
      
    </div>
  </div>
</section>

3) 安全处理动态类名

优先使用映射：

const toneClass = {
  success: "bg-emerald-600",
  danger: "bg-rose-600",
  info: "bg-sky-600",
}[tone];

需要询问用户的问题

使用什么框架/构建工具（Next/Vite/Remix/Webflow export）？
是否需要设计系统（设计令牌、组件库），还是只做单页？
是否需要暗色模式？RTL？有无无障碍约束？

支持 Markdown

登录后评论