用途
Tailwind Patterns 是一个面向 Tailwind CSS 的快速参考，帮助使用者在编写界面时快速查阅实用类（utility classes）的常见组合与配置方式。资料描述其触发场景包括：tailwind、utility classes、responsive design 等关键词。
主要能力
该参考内容涵盖以下方面：
响应式断点
列出各前缀对应的最小宽度：sm: 640px、md: 768px、lg: 1024px、xl: 1280px、2xl: 1536px。并给出示例：<div class="w-full md:w-1/2 lg:w-1/3">，注释说明其效果为移动端全宽、平板半宽、桌面三分之一宽。
常见布局模式
提供多种布局代码片段：
- 居中容器：
<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">Title</h3>与内容<p class="text-gray-600">Content</p>。 - 按钮：
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">Button</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="Enter text">。
深色模式
示例：<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，其中包含 Navbar、卡片、表单、警报、加载状态等内容。
使用方式
该内容以技能形式提供，当出现 tailwind、utility classes、responsive design 等触发词时可被调用作快速查阅。具体安装或调用方式暂未提供。
适用场景
适用于编写或查阅 Tailwind CSS 样式时快速获取常见类组合、响应式断点、深色模式配置与组件结构参考。
限制
资料仅提供上述参考内容与代码片段，未说明平台支持范围、版本兼容性、安装步骤或收费情况，这些信息暂未提供。