用途：为使用 Tailwind CSS 实用优先框架构建现代响应式界面提供可操作的样式模式，覆盖 v4.1+ 特性，包括 CSS 优先配置、自定义工具与暗色模式。
主要能力：
- 响应式断点：sm: 640px、md: 768px、lg: 1024px、xl: 1280px、2xl: 1536px。
- 布局与组件模式：居中容器、响应式网格、卡片、表单、导航、模态框等。
- 暗色模式：支持 class 或 media 策略，用 dark:bg-gray-900、dark:text-white 等实现。
- 设计令牌：使用 Tailwind 的间距、颜色、排版尺度；可在 tailwind.config.js 或 @theme 中定制主题。
使用方式（移动优先）：先写移动端基础样式，再加响应式前缀。常见写法如 flex items-center justify-center min-h-screen、grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4。优先组合工具类，重复模式抽取为组件类。表单可加 focus:ring-2 focus:ring-blue-500。暗色切换可用 document.documentElement.classList.toggle('dark')。
适用场景：React/Vue/Svelte 组件样式、响应式布局与网格、设计系统、暗色模式、CSS 工作流优化。
限制与注意：避免类名过长，应抽取组件；确保 content 路径包含所有模板文件以防生产环境清除样式；谨慎使用任意值；避免 @apply 搭配复杂选择器；暗色模式需正确配置；响应式前缀须置于非响应式类之前；提交前在 DevTools 各断点验证并检查可访问性。