mcpField
T
tailwind-patterns

tailwind-patterns

github.com/srbhr设计与 UI29.0k170 次安装1 天前更新
代码仓库

关于 tailwind-patterns

面向界面开发者的 Tailwind CSS 组件模式技能，介绍响应式布局及可复用样式约定。内容涵盖布局、表单、导航和主题，并提供可复制的组件模板。

主要功能

  1. 01响应式布局与间距模式
  2. 02卡片、网格和按钮样式
  3. 03表单与导航示例
  4. 04适用于深色模式的语义颜色令牌
  5. 05可复用组件模板

适用场景

  1. 01构建响应式页面布局
  2. 02统一卡片和按钮样式
  3. 03设计表单与导航
  4. 04应用浅色和深色主题配色

安装

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

$npx skills add https://github.com/srbhr/resume-matcher --skill tailwind-patterns

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

详细介绍

Tailwind CSS 组件模式

状态: 可用于生产环境 ✅ 最后更新: 2026-01-14 Tailwind 兼容性: v3.x 和 v4.x 来源: 生产项目、shadcn/ui 模式

快速开始

基础模式
// Section Container
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
  {/* content */}
</section>

// Card Base
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  {/* content */}
</div>

// Button Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Click me
</button>

// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>

间距规范

统一的间距可以避免设计偏差：

用途类名输出
紧凑间距gap-2 p-2 space-y-20.5rem (8px)
标准间距gap-4 p-4 space-y-41rem (16px)
舒适间距gap-6 p-6 space-y-61.5rem (24px)
宽松间距gap-8 p-8 space-y-82rem (32px)
区块间距py-16 sm:py-244rem/6rem (64px/96px)

标准模式: 使用 4 的倍数递增（4、6、8、12、16、24）

响应式断点

采用移动优先的方式（基础样式即移动端样式，再逐级添加更大的断点）：

断点最小宽度模式示例
基础0px无前缀text-base
sm640pxsm:sm:text-lg
md768pxmd:md:grid-cols-2
lg1024pxlg:lg:px-8
xl1280pxxl:xl:max-w-7xl
2xl1536px2xl:2xl:text-6xl
// Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

容器模式

标准页面容器
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* content */}
</div>

变体:

  • max-w-4xl - 窄内容（博客文章）
  • max-w-5xl - 中等内容
  • max-w-6xl - 宽内容
  • max-w-7xl - 全宽（默认）
区块间距
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {/* content */}
  </div>
</section>

卡片模式

基础卡片
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  <h3 className="text-lg font-semibold mb-2">Card Title</h3>
  <p className="text-muted-foreground">Card description goes here.</p>
</div>
带图标的功能卡片
<div className="bg-card text-card-foreground rounded-lg border border-border p-6 hover:shadow-lg transition-shadow">
  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
    {/* Icon */}
  </div>
  <h3 className="text-lg font-semibold mb-2">Feature Title</h3>
  <p className="text-muted-foreground">Feature description.</p>
</div>
定价卡片
<div className="bg-card text-card-foreground rounded-lg border-2 border-border p-8 relative">
  <div className="text-sm font-semibold text-primary mb-2">Pro Plan</div>
  <div className="text-4xl font-bold mb-1">$29<span className="text-lg text-muted-foreground">/mo</span></div>
  <p className="text-muted-foreground mb-6">For growing teams</p>
  <button className="w-full bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90">
    Get Started
  </button>
</div>

更多变体请参阅 references/card-patterns.md。

网格布局

自动响应式网格
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>
自动填充网格（动态列数）
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {/* Automatically adjusts columns based on available space */}
</div>
瀑布流式网格
<div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
  {items.map(item => (
    <div key={item.id} className="break-inside-avoid">
      <Card {...item} />
    </div>
  ))}
</div>

按钮模式

// Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Primary
</button>

// Secondary
<button className="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">
  Secondary
</button>

// Outline
<button className="border border-border bg-transparent px-4 py-2 rounded-md hover:bg-accent">
  Outline
</button>

// Ghost
<button className="bg-transparent px-4 py-2 rounded-md hover:bg-accent hover:text-accent-foreground">
  Ghost
</button>

// Destructive
<button className="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:bg-destructive/90">
  Delete
</button>

尺寸变体:

  • 小号: px-3 py-1.5 text-sm
  • 默认: px-4 py-2
  • 大号: px-6 py-3 text-lg

完整参考请参阅 references/button-patterns.md。

表单模式

输入框
<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    Email
  </label>
  <input
    id="email"
    type="email"
    className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
    placeholder="[email protected]"
  />
</div>
下拉选择框
<select className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
复选框
<div className="flex items-center space-x-2">
  <input
    id="terms"
    type="checkbox"
    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
  />
  <label htmlFor="terms" className="text-sm">
    I agree to the terms
  </label>
</div>
错误状态
<div className="space-y-2">
  <label htmlFor="password" className="text-sm font-medium">
    Password
  </label>
  <input
    id="password"
    type="password"
    className="w-full px-3 py-2 bg-background border border-destructive rounded-md focus:outline-none focus:ring-2 focus:ring-destructive"
  />
  <p className="text-sm text-destructive">Password must be at least 8 characters</p>
</div>

完整模式请参阅 references/form-patterns.md。

排版模式

标题
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold">
  Page Title
</h1>

<h2 className="text-3xl sm:text-4xl font-bold">
  Section Title
</h2>

<h3 className="text-2xl sm:text-3xl font-semibold">
  Subsection
</h3>

<h4 className="text-xl font-semibold">
  Card Title
</h4>
正文
<p className="text-base text-muted-foreground">
  Regular paragraph text.
</p>

<p className="text-lg text-muted-foreground leading-relaxed">
  Larger body text with comfortable line height.
</p>

<p className="text-sm text-muted-foreground">
  Small supporting text or captions.
</p>
列表
<ul className="space-y-2 text-muted-foreground">
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature one</span>
  </li>
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature two</span>
  </li>
</ul>

完整指南请参阅 references/typography-patterns.md。

导航模式

带 Logo 的页头
<header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="flex h-16 items-center justify-between">
      <div className="flex items-center gap-8">
        {/* Logo */}
        <a href="/" className="font-bold text-xl">Brand</a>

        {/* Desktop Nav */}
        <nav className="hidden md:flex gap-6">
          <a href="#" className="text-sm hover:text-primary transition-colors">Features</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">Pricing</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">About</a>
        </nav>
      </div>

      {/* CTA */}
      <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
        Sign Up
      </button>
    </div>
  </div>
</header>
页脚
<footer className="border-t border-border bg-muted/50">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div>
        <h4 className="font-semibold mb-4">Product</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li><a href="#" className="hover:text-primary">Features</a></li>
          <li><a href="#" className="hover:text-primary">Pricing</a></li>
        </ul>
      </div>
      {/* More columns */}
    </div>
  </div>
</footer>

移动端菜单和下拉菜单请参阅 references/navigation-patterns.md。

深色模式支持

所有模式都使用会自动适配的语义化颜色 token：

Token浅色模式深色模式
bg-background白色深灰色
text-foreground深灰色白色
bg-card白色稍浅的灰色
text-muted-foreground灰色浅灰色
border-border浅灰色深灰色
bg-primary品牌色更浅的品牌色

切勿使用原始颜色，例如 bg-blue-500，请始终使用语义化 token。

主题切换的实现请参阅 references/dark-mode-patterns.md。

常用类名组合

带标题的区块
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 className="text-3xl sm:text-4xl font-bold text-center mb-12">
      Section Title
    </h2>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* content */}
    </div>
  </div>
</section>
居中内容
<div className="flex flex-col items-center justify-center text-center">
  <h1 className="text-4xl font-bold mb-4">Centered Title</h1>
  <p className="text-muted-foreground max-w-2xl">Centered description</p>
</div>
悬停效果
// Lift on hover
<div className="transition-transform hover:scale-105">

// Shadow on hover
<div className="transition-shadow hover:shadow-lg">

// Color change on hover
<button className="transition-colors hover:bg-primary/90">

关键规则

✅ 必须遵守
  1. 使用语义化颜色 token（bg-card、text-foreground）
  2. 应用移动优先的响应式设计（base → sm: → md:）
  3. 使用统一的间距规范（4、6、8、12、16、24）
  4. 为交互效果添加 transition-* 类名，使过渡更平滑
  5. 在浅色和深色模式下都进行测试
❌ 禁止事项
  1. 使用原始 Tailwind 颜色（bg-blue-500 会破坏主题）
  2. 省略响应式前缀（移动端用户体验会变差）
  3. 随意混用间距规范（会造成视觉混乱）
  4. 忘记为可交互元素添加悬停状态
  5. 为文字使用固定的 px 值（使用 text-base 而非 text-[16px]）

模板组件

templates/components/ 中的开箱即用组件：

  • hero-section.tsx - 带 CTA 的响应式 Hero 区块
  • feature-grid.tsx - 带图标的三列功能网格
  • contact-form.tsx - 带校验样式的完整表单
  • footer.tsx - 带链接的多列页脚

复制后根据项目需要进行自定义。

参考文档

Resume Matcher 设计系统（瑞士国际主义风格）

本项目采用 瑞士国际主义风格（粗野主义） 设计。项目相关的具体模式请参考：

瑞士风格关键覆盖项：

// NO rounded corners - use rounded-none
<button className="rounded-none border-2 border-black">

// Hard shadows instead of soft
<div className="shadow-[4px_4px_0px_0px_#000000]">

// Hover: translate into shadow space
<button className="hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

瑞士配色板：

颜色十六进制用途
Canvas#F0F0E8背景
Ink#000000文字、边框
Hyper Blue#1D4ED8主要操作
Signal Green#15803D成功
Alert Orange#F97316警告
Alert Red#DC2626危险

官方文档

最后更新：2026-01-14 Skill 版本：1.0.0 生产环境：已在 10 多个项目中测试

评论

支持 Markdown