#优质博文 #前端 #tailwind #css #最佳实践

研究三天，我找到了 tailwindcss 的正确打开姿势

【这个基本上就是我们现在团队的tailwind 使用方案，确实是很舒服的一套实践~】

AI 摘要：
1. 痛点再审视：冗长的 class 名可通过提取变量来简化，减少代码重复。
2. 无 CSS 方向：虽可用 @apply 聚合样式，但正式项目中不推荐，以避免失去体积优势。
3. 封装思维转变：借鉴 Unocss，将组件属性设计为布尔值，简化传参。

<Button primary sm>Primary SM</Button>

4. 实用工具：
- clsx 合并 class 名。
- twMerge 处理优先级问题。
- cva 管理多值属性。（补充：也可 tailwind-variants，是cva的套件）

const cls = twMerge(clsx('base', {'bg-blue-500': primary, 'bg-red-500': danger}));

5. 智能提示配置：配置编辑器正则表达式，使智能提示在变量和函数中生效。

6. 总结：TailwindCSS 提升开发效率，特别适合快速编写响应式页面。

via 微信公众号 这波能反杀