Tailwind 默认不生成 .clearfix 类，因其不鼓励 float 布局；需启用 content 变体并在 @layer utilities 中正确定义伪元素规则，或改用内置的 flow-root。
为什么直接写 .clearfix 不生效
Tailwind 默认不生成 .clearfix 类，不是漏配，是设计使然——它不鼓励用 float 布局。如果你在 HTML 里写了 class="clearfix" 却没效果，大概率是因为：tailwind.config.js 没启用 content 变体，或没在 @layer utilities 中正确定义伪元素规则。
必须启用 content 变体才能用 ::before/::after
Tailwind 默认禁用所有依赖 content 的工具类（比如清除浮动需要的 content: ""），否则编译时直接跳过。要让它工作，得手动打开开关：
- 确认
tailwind.config.js的content字段包含你写@layer utilities的文件路径，例如./src/styles/*.css - 不能只靠
purge或旧版whitelist配置，v3.0+ 必须走content扫描 - 如果自定义类写在 Vue/JSX 文件的
块里，也要确保该文件路径被content匹配到
手写 .clearfix 的最小安全写法
别抄 Bootstrap 的老版本，也别省略关键属性。以下是最小可用且兼容现代浏览器的写法：
@layer utilities {
.clearfix::before,
.clearfix::after {
content: "";
}
.clearfix::after {
display: table;
clear: both;
}
}
注意三点：
-
content: ""必须是空字符串，content: none或content: " "（带空格）都无效 -
display: table比display: block更稳，尤其在 Safari 和缩放场景下 - 只写
::after通常够用；加::before主要是防父容器顶部外边距合并，非必需但推荐保留
用 flow-root 替代 .clearfix 更简单
如果你只是想让父容器包裹浮动子项，flow-root 是 Tailwind 内置的零配置方案：
- 给父容器加
class="flow-root"，它会触发 BFC，天然包含浮动子项 - 不需要额外 CSS、不依赖
content变体、无兼容性风险 - 但注意：
flow-root会改变渲染上下文，和position: relative或transform同时使用时可能影响层叠顺序
真正难的不是写清楚浮动，而是判断要不要继续用浮动——多数情况下，flex 或 grid 才是更干净的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
