Tailwind CSS 开发技能为使用 Tailwind CSS 为应用添加样式提供指导，重点在于始终使用最新版本和现代模式。
理念 采用 CSS 优先的配置方式，使用 @theme 指令。使用 OKLCH 颜色以获得感知均匀性。在合适场景优先使用 @container 容器查询而非媒体查询。
快速参考 技能提供现代做法与应避免的旧做法对照：配置方面，现代做法为 CSS @theme 指令，旧做法为 tailwind.config.js；颜色方面，现代做法为 OKLCH 色彩空间，旧做法为 RGB/HSL 颜色；容器查询方面，现代做法为 @container，旧做法为仅用媒体查询；内容检测方面，现代做法为自动，旧做法为手动 content: [] 配置；PostCSS 插件方面，现代做法为 @tailwindcss/postcss，旧做法为 tailwindcss 包。
安装（Next.js） 安装命令为：npm install tailwindcss @tailwindcss/postcss postcss。postcss.config.mjs 中导出 plugins 配置 '@tailwindcss/postcss': {}。在 app/globals.css 中通过 @import "tailwindcss"; 引入。
CSS 优先配置：@theme 指令 可直接在 CSS 中定义设计系统，包括颜色、字体、间距、圆角、阴影和动画等变量，例如 --color-brand、--font-display、--spacing-18、--radius-xl、--shadow-soft、--animate-fade-in，并可配合 @keyframes 定义动画。定义后可在 HTML 中通过 bg-brand、font-display、p-18、rounded-xl、shadow-soft、animate-fade-in 等类名使用。
OKLCH 颜色系统 OKLCH 提供感知均匀的颜色。格式为 oklch(lightness chroma hue)：亮度从 0（黑）到 1（白）；色度从 0（灰）到约 0.4（鲜艳）；色相为 0-360 度（红=25，黄=85，绿=145，蓝=250）。技能给出从 50 到 950 的完整主色调色板示例，以及 success、warning、error 等语义色。
容器查询 基于容器尺寸而非视口进行样式设置。使用 @container 定义容器，内部元素可用 @md:flex-row、@lg:grid、@lg:grid-cols-3、@sm:p-6 等响应容器宽度。支持命名容器，如 @container/sidebar 与 @md/sidebar:flex。容器断点包括 @xs（20rem/320px）、@sm（24rem/384px）、@md（28rem/448px）、@lg（32rem/512px）、@xl（36rem/576px）、@2xl（42rem/672px）。
深色模式 可通过 CSS 变量实现：在 @theme 中定义浅色模式变量，并在 @variant dark 中覆盖为深色值，元素使用 bg-surface text-text 即可自动适配。也可使用基于类的深色模式，在 html 上添加 class="dark"，并使用 dark:bg-gray-900、dark:text-white 等变体。
响应式设计 采用移动优先断点：sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px），对应 @media (min-width: ...)。示例中元素在移动端为 w-full，sm 为 w-1/2，md 为 w-1/3，lg 为 w-1/4，xl 为 w-1/5。
排版 提供标题（text-4xl font-bold tracking-tight 等）、正文（text-base leading-relaxed、text-sm text-gray-600）以及加粗、斜体、下划线、删除线等文本样式示例。
Flexbox 与 Grid Flexbox 示例包括水平布局（flex items-center justify-between gap-4）、居中内容（flex items-center justify-center min-h-screen）、换行（flex flex-wrap gap-4）。Grid 示例包括基础网格（grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6）、复杂布局（grid grid-cols-12，配合 col-span-12 md:col-span-3 等）以及自动填充（grid-cols-[repeat(auto-fill,minmax(250px,1fr))]）。
状态与变体 涵盖 hover、focus、active 状态，group-hover 分组悬停，peer 与 peer-checked 同级状态，以及 first、last、odd、even 等结构变体。
动画 内置动画包括 animate-pulse、animate-spin、animate-bounce、animate-ping。过渡示例包括 transition-colors duration-200 ease-in-out 与 transition-all duration-300 hover:scale-105 hover:shadow-lg。还提供 motion-safe 与 motion-reduce 以尊重用户动效偏好。
常见模式 提供卡片（rounded-lg border bg-white p-6 shadow-sm）、按钮（inline-flex 布局配合 hover、focus、disabled 状态）、输入框（w-full rounded-md border，配合 placeholder、focus、disabled 状态）等常见组件模式。
附加资源 技能提到可参考 references/theme-directive.md（完整 @theme 配置）与 references/colors.md（OKLCH 颜色系统深入讲解）等参考文件。
限制 资料未提供该技能的收费、价格、支持平台、效果数据或具体使用步骤之外的额外信息，这些内容暂未提供。