tailwind中first-line需手动启用且仅支持字体、颜色等有限样式：v3+须在plugins中addvariant('first-line','&::first-line')，不支持宽高定位边框等布局属性。
first-line在Tailwind中不直接可用
Tailwind CSS 默认不提供 first-line 工具类，也不像 hover: 或 first: 那样通过变体（variant）自动支持。你写 first-line:text-red-500 会完全无效——编译器压根不识别这个前缀，也不会生成对应 CSS 规则。
必须手动启用 first-line 变体（v3+）
从 Tailwind v3.0 开始，first-line 属于「需显式启用的变体」，和 before/after 类似，它不会默认开启：
- 在
tailwind.config.js的theme.extend.variants（v2）或plugins（v3+）中配置 - v3.3+ 推荐用插件方式：安装并注册
@tailwindcss/typography，它内部启用了first-line；或者手写插件 - 最简方案（无额外依赖）：在
tailwind.config.js中添加
module.exports = {
content: [...],
theme: {
extend: {},
},
plugins: [
function ({ addVariant }) {
addVariant('first-line', '&::first-line')
}
]
}
注意：&::first-line 中的双冒号 :: 是必须的，单冒号 : 在现代标准下不被识别为伪元素。
first-line 工具类组合有严格限制
即使启用了变体，first-line: 只能配合部分工具类生效，因为 CSS 对 ::first-line 的样式属性有天然约束：
- ✅ 支持：字体相关（
first-line:text-lg、first-line:font-bold）、颜色（first-line:text-blue-600）、背景（first-line:bg-yellow-100）、行高（first-line:leading-relaxed） - ❌ 不支持：尺寸（
first-line:w-4无效）、定位（first-line:absolute无意义）、边框（first-line:border多数浏览器忽略）、padding/margin（first-line:mt-2不起作用） - ⚠️ 行为差异：Safari 对
::first-line的继承控制更严格，某些字体设置可能 fallback 到父级值
示例有效写法：
<p class="text-base first-line:text-xl first-line:font-semibold first-line:text-indigo-700"> 这是一段文字。首行会被加粗放大并染成靛蓝色，其余行保持原样。 </p>
替代方案：用真实元素更可控
如果你需要首行具备宽高、边框、内边距或响应式行为，::first-line 就不是合适选择——它本质是渲染层修饰，不是布局节点：
- 把首行内容单独包一层
<span></span>，用block+mb-2控制间距 - 用
grid或flex拆分段落结构，首行作为独立子项 - 服务端或 JS 动态截取首行文本插入 DOM，避免依赖伪元素限制
真正容易被忽略的一点：很多开发者试了 first-line:mt-4 发现没效果，第一反应是“Tailwind坏了”，其实只是误用了伪元素的能力边界——它从来就不管布局，只管文字渲染样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
