name: tailwind-patterns
description: “Tailwind CSS 实用模式、响应式设计和配置的快速参考。触发条件：tailwind、实用类、响应式设计、tailwind 配置、深色模式 CSS、tw 类。”
compatibility: “适用于使用 Tailwind CSS v3+ 的项目。”
allowed-tools: “Read Write”
Tailwind 实用模式
Tailwind CSS 实用模式的快速参考。
响应式断点
| 前缀 |
最小宽度 |
sm: |
640px |
md: |
768px |
lg: |
1024px |
xl: |
1280px |
2xl: |
1536px |
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- 移动端全宽，平板端一半宽，桌面端三分之一宽 -->
</div>
常见布局模式
<!-- 居中容器 -->
<div class="container mx-auto px-4">
<!-- Flexbox 行布局 -->
<div class="flex items-center justify-between gap-4">
<!-- 网格布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 堆叠布局 -->
<div class="flex flex-col gap-4">
卡片组件
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold mb-2">标题</h3>
<p class="text-gray-600">内容</p>
</div>
按钮组件
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
按钮
</button>
表单输入框
<input type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="请输入文本">
深色模式
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
// tailwind.config.js
module.exports = { darkMode: 'class' }
状态修饰符
| 修饰符 |
触发条件 |
hover: |
鼠标悬停 |
focus: |
元素获得焦点 |
active: |
被点击时 |
disabled: |
禁用状态 |
group-hover: |
父元素悬停时 |
间距尺度
| 类名 |
尺寸 |
p-1 |
4px |
p-2 |
8px |
p-4 |
16px |
p-6 |
24px |
p-8 |
32px |
任意值
<div class="w-[137px] h-[calc(100vh-64px)]">
额外资源
如需详细模式，请加载：
./references/component-patterns.md - 导航栏、卡片、表单、警告框、加载状态