返回技术能力
Frontend

Tailwind CSS

Utility-first CSS——在 HTML 里直接写样式,不用想类名,不用跳文件。


它是什么

Tailwind CSS 是一个 utility-first 的 CSS 框架,用预定义的类名(如 `flex`, `text-lg`, `bg-violet-500`)直接在 HTML 中构建样式,配合 PostCSS 按需生成最小 CSS。

为什么重要

传统 CSS 的最大问题是「context switching」——在 HTML 和 CSS 文件之间来回切,还要想类名。Tailwind 把样式放在标记旁边,修改更快,而且生成的文件极小。

核心概念

Utility ClassesResponsive PrefixDark ModeCSS VariablesTailwind Mergeclsx

我的使用体验

默认 CSS 方案。以前排斥 inline style,现在觉得 utility-first 真香——尤其在组件化开发中。搭配 `tailwind-merge` + `clsx` 做条件样式合并。v4 版本用 CSS-first 配置,更简洁了。

学习资源