Tailwind CSS
Tailwind CSS 的工具类生成、主题约束与组件化边界；区分 v3 配置与 v4 CSS-first 方式。
#growing
#concept
#frontend
#tailwind
#tailwindcss
[!info] related notes
Tailwind CSS
Tailwind CSS 是以工具类表达样式的 CSS 框架。构建工具检测源文件中的完整类名，并生成对应规则；这不是浏览器在每次渲染时解释类名。
工具类、任意值与变体
<button type="button" class="w-[123px] bg-blue-500 hover:bg-blue-700 md:w-1/2 dark:text-white">
查看详情
</button>w-[123px]生成任意宽度规则，不必先增加自定义类。hover:、md:、dark:表达状态或条件；具体行为取决于版本和配置。v4 的dark:默认跟随系统偏好，类名切换需显式定义变体，见 暗色模式。- 按需生成依据扫描到的类名，不等于识别最终运行时真正使用的全部样式，也不保证产物总是很小。
主题作为设计约束
共享颜色、间距、圆角等 token 可以降低视觉漂移，但任意值和普通 CSS 仍可绕过约束，团队需要自行维护使用约定。
- v3：常在
tailwind.config.*中定义theme.extend。 - v4：主要使用 CSS
@theme，如--color-primary对应text-primary、bg-primary等工具类。
修改 token 会影响使用它的规则；硬编码颜色与不相关的主题变量不会自动同步改变。
与 CSS 类及组件的关系
工具类减少了仅为局部视觉样式命名的工作，例如 flex p-4。语义类、BEM、CSS Modules 和内联样式仍各有用途，不是所有命名或抽象都应被移除。稳定 UI 单元可提取为组件，具体取舍见 样式复用策略。
shadcn/ui 的组件源码常用 Tailwind 类及主题变量；项目仍需配置对应样式入口、token 和组件依赖。复制组件代码本身不保证样式生效。
开发工具
- VS Code：Tailwind Labs 发布的 Tailwind CSS IntelliSense，提供类名补全、预览与检查。
- Tailwind 官方文档
Digital Biome