marker:* 对 list-disc 无效，因原生圆点是操作系统级“黑盒符号”；需用 list-none + ::marker 或 ::before 自定义，且 ::marker 不支持 background、padding 等属性。
marker 类不能直接自定义圆点样式——Tailwind 的 marker:* 工具类只作用于浏览器原生 ::marker 伪元素，而原生圆点（list-style-type: disc）本身不可样式化，marker:text-red-500 对 list-disc 完全无效。
为什么 marker:* 对 list-disc 没反应
根本原因是：list-disc 底层是 list-style-type: disc，它渲染的是操作系统级的、不可 CSS 控制的符号；::marker 伪元素虽能接管样式，但仅对显式启用它的列表项生效（比如 ol li 或手动加 list-none 后再用 ::marker），而 list-disc 默认不触发可样式化的 ::marker 生命周期。
常见错误现象：list-disc marker:text-blue-500 写了没颜色变化，marker:text-lg 也不放大圆点——不是 Tailwind 漏了类，是底层规范不允许。
-
list-disc是“黑盒符号”，marker:*无法穿透 -
marker:*只在list-style-type为none且你主动用::marker插入内容时才真正起效 - Tailwind v3.3+ 的
marker:*类本质是生成::marker { color: … }，它不改变list-disc的存在逻辑
真正可控：用 list-none + ::marker + content
要改颜色、大小、甚至换符号，必须绕过原生圆点，走标准路径：list-none 清除默认，再用 ::marker 显式声明内容和样式。
实操要点：
- HTML 中
<ul class="list-none"></ul>，每个<li>需单独加 class（如class="marker-blue"）才能应用::marker样式 - CSS 中必须写
content: "• "（注意末尾空格，避免文字粘连） -
color和font-size在::marker里才生效，但font-size在 Safari 16.4 之前不支持，稳妥做法是用 Unicode 字符配合基础字号 - 别用
transform: scale()——会破坏基线对齐，font-size是唯一推荐缩放方式
示例（放入 @layer components）：
@layer components {
.marker-blue::marker {
content: "• ";
color: #3b82f6;
font-size: 1.1em;
}
}
对应 HTML：<ul class="list-none"><li class="marker-blue">第一项</li></ul>
想用 SVG 或图标？必须走 list-none + ::before
::marker 不支持 background-image、url() 或内联 SVG，content 也只接受字符串或 counter()，不能插图片。
所以 SVG 圆点、箭头、勾选等复杂符号，只能用 ::before：
- 先加
list-none，否则 Safari 会叠出两个符号 -
::before设display: inline-block+vertical-align: text-bottom（比flex items-end更轻量，不干扰行高） - 用
bg-[url("data:image/svg+xml,...")] w-4 h-4填充 SVG，fill="currentColor"让颜色随文字自动变 - 补
pl-6或pl-8避免图标贴边——list-none会取消默认缩进
例如：
.svg-dot::before {
content: "";
display: inline-block;
width: 0.75em;
height: 0.75em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='currentColor'/%3E%3C/svg%3E");
vertical-align: text-bottom;
margin-right: 0.5em;
}
兼容性与容易被忽略的细节
最常被跳过的三件事：
- 忘了给
<ul></ul>加list-none——导致双符号（尤其 Safari 下默认圆点 + 自定义 marker/::before 并存） - 在
::marker里写background: red或padding: 2px——这些属性规范明确禁止，永远无效 - 用
text-[#xxx]动态拼接颜色值（如class="marker:text-[${color}]）——JIT 编译器看不到变量，不会生成对应 CSS
如果你的项目需支持 Safari 15.3 或旧 Android WebView，::marker 不可用，只能退回到 list-none + ::before 方案，且 SVG data URL 必须严格转义、不用单引号包裹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
