用途：解决在 Turbopack 环境下使用 Tailwind CSS 时遇到的样式生成问题，例如 CSS 类未出现在产物中、需要动态样式，或遇到 Turbopack 的 CSS 相关限制。
主要能力与约定：
- 避免内联样式：不要使用 style={} 内联属性，应始终使用 Tailwind 类或样式表中的 CSS。
- 动态值处理：对于无法用 Tailwind 类表达的动态值，可在样式表中用 data 属性定义 CSS 类。例如在样式表写 .collapsible[data-expanded="false"] { grid-template-rows: 0fr; } 与 .collapsible[data-expanded="true"] { grid-template-rows: 1fr; }，在组件中写 <div className="collapsible" data-expanded={isExpanded}>。
已知问题：Turbopack 可能无法为部分 Tailwind 工具类生成 CSS，尤其是响应式变体中的任意值，如 max-md:grid-rows-[0fr]。这些类会出现在 HTML 中，但对应的 CSS 规则缺失于打包产物。
变通方式：开发时改用 Webpack，或将复杂样式定义在 CSS 文件中，命令为 pnpm dev:webpack。
适用场景：使用 Tailwind CSS 与 Turbopack 的前端项目，特别是需要动态样式或响应式任意值时。
限制：资料未提供更多平台、版本或收费信息；上述内容仅为该技能给出的约定与变通方案。