list-disc 无法直接改颜色或大小，因其依赖不可样式化的原生 disc 符号；需用 list-none + ::marker 伪元素自定义，且必须作用于 li 元素并显式设置 content。
list-disc 为什么不能直接改颜色或大小
list-disc 是 Tailwind 提供的预设类，它底层调用的是 CSS 的 list-style-type: disc，而原生 disc 符号属于「不可样式化」的伪元素——你无法用 color、font-size 或 transform 直接控制它。很多开发者试了 text-red-500 或 text-lg 发现无效，就是卡在这一步。
真正可控的方式是绕过 list-style，改用 ::marker 伪元素，这是现代浏览器（Chrome 89+、Firefox 81+、Safari 15.4+）支持的标准方案。
用 ::marker 自定义符号颜色和大小
必须配合 list-none 清除默认符号，再手动用 ::marker 插入并样式化。关键点：
- 要写在
<li>上，不是<ul></ul> - 必须用
content显式指定符号，比如"• "（注意空格）或"→ " -
color和font-size在::marker里才生效
.custom-li::marker {
content: "• ";
color: #3b82f6; /* tailwind 的 blue-500 */
font-size: 1.2em;
}
对应 HTML：
- 第一项
- 第二项
在 Tailwind 中不写 CSS 的替代方案
如果你不想额外写 CSS，可以用 @layer components 把 ::marker 封装成可复用的类：
@layer components {
.marker-blue::marker {
content: "• ";
color: theme('colors.blue.500');
font-size: 1.1em;
}
.marker-arrow::marker {
content: "→ ";
color: theme('colors.emerald.600');
}
}
然后直接用：
- 蓝色圆点
- 绿色箭头
注意：Tailwind 默认不处理 ::marker，所以必须放进 @layer，且需开启 content 支持（v3.3+ 默认开启；老版本要确认 content 在 safelist 里）。
兼容性与 fallback 处理
IE 完全不支持 ::marker，旧版 Safari 对 content 值限制较严（比如不支持 Unicode emoji 作符号）。稳妥做法：
- 用
list-disc+text-[#xxx]作为降级：至少符号可见，只是颜色/大小不可控 - 避免在
content里用复杂字符，优先选"• "、"◦ "、"– "这类 ASCII 兼容符号 - 如果项目必须支持 Safari 14 或更早，只能用绝对定位 +
before模拟，但会破坏语义和屏幕阅读器识别
真正需要精细控制符号样式的场景，::marker 是目前最干净的解法，但得接受它是个“现代 CSS 特性”——不是所有环境都开箱即用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
