28. 列表样式与生成内容

本节目标：掌握列表样式控制、表单控件强调色、文本选择样式等辅助性但实用的工具类，完善对页面细节的控制能力。

列表和装饰元素虽然不常用，但用到的时候 Tailwind 都有对应的工具类。

list-style-type：列表标记类型

控制 <ul> 和 <ol> 的标记样式：

类名	效果
`list-none`	无标记
`list-disc`	实心圆点（ul 默认）
`list-decimal`	数字编号（ol 默认）
`list-square`	实心方块

<ul class="list-disc pl-5">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<ol class="list-decimal pl-5">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<!-- 导航菜单：去掉列表标记 -->
<ul class="list-none flex space-x-4">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

Tip

导航菜单几乎总是用 list-none 去掉默认标记，然后用 flex 做水平排列。

list-style-position：标记位置

控制列表标记在列表项内容区域的内/外侧：

类名	效果
`list-inside`	标记在内容内侧（缩进进内容区）
`list-outside`	标记在内容外侧（默认）

<ul class="list-disc list-inside">
  <li>标记在文字内侧，文字会环绕标记</li>
  <li>第二项</li>
</ul>

accent-color：表单强调色

accent-color 控制表单控件（checkbox、radio、range）的强调色：

类名	效果
`accent-blue-500`	蓝色
`accent-red-500`	红色
`accent-green-500`	绿色
`accent-gray-500`	灰色
`accent-auto`	浏览器默认

<label class="flex items-center gap-2">
  <input type="checkbox" class="accent-blue-500" checked>
  <span>同意条款</span>
</label>

<input type="range" class="accent-purple-500 w-full">

Note

accent-color 是 CSS 原生属性，v4 直接映射成工具类。它只影响 checkbox、radio、range 和 progress 元素的颜色。

caret-color：光标颜色

caret-color 控制输入框光标的颜色：

类名	效果
`caret-blue-500`	蓝色光标
`caret-red-500`	红色光标
`caret-transparent`	隐藏光标
`caret-auto`	默认

<input type="text" class="caret-blue-500 border rounded px-3 py-2">

text-decoration-thickness：装饰线粗细

控制下划线、删除线的粗细：

类名	效果
`decoration-auto`	自动（默认）
`decoration-from-font`	字体建议的粗细
`decoration-1`	1px
`decoration-2`	2px
`decoration-4`	4px
`decoration-8`	8px

<p class="underline decoration-2">2px 下划线</p>
<p class="line-through decoration-1">1px 删除线</p>

text-underline-offset：下划线偏移

控制下划线离文字的距离：

类名	效果
`underline-offset-auto`	自动
`underline-offset-0`	0px
`underline-offset-1`	1px
`underline-offset-2`	2px
`underline-offset-4`	4px
`underline-offset-8`	8px

<p class="underline underline-offset-4 decoration-2 decoration-blue-500">
  蓝色、2px 粗、偏移 4px 的下划线
</p>

text-indent：首行缩进

控制段落首行缩进：

类名	效果
`indent-0`	无缩进
`indent-4`	1rem
`indent-8`	2rem
`indent-12`	3rem

<p class="indent-8">
  中文文章的首行缩进两个字符是传统排版规范...
</p>

text-decoration-color：装饰线颜色

单独设置装饰线的颜色：

<p class="underline decoration-red-500">红色下划线</p>
<p class="line-through decoration-blue-300">蓝色删除线</p>

placeholder：占位符样式

控制 input/textarea 的 placeholder 文字样式：

<input 
  type="text" 
  placeholder="请输入..."
  class="placeholder-gray-400 placeholder:text-sm placeholder:italic"
>

类名	效果
`placeholder:text-{color}`	占位符文字颜色
`placeholder:text-{size}`	占位符字号
`placeholder:italic`	占位符斜体
`placeholder:font-bold`	占位符加粗

selection：选中文本样式

控制用户选中文本时的样式：

<p class="selection:bg-blue-200 selection:text-blue-900">
  选中我看看效果
</p>

类名	效果
`selection:bg-{color}`	选中文本的背景色
`selection:text-{color}`	选中文字的颜色
`selection:no-underline`	选中文字去掉下划线

Tip

选中文本的颜色搭配很重要。一般选中的背景色用品牌色浅色版，文字颜色用深色版，确保对比度。

marker：列表标记颜色

单独设置列表标记的颜色（不影响文字）：

<ul class="list-disc marker:text-blue-500 pl-5">
  <li>蓝色圆点，黑色文字</li>
  <li>第二项</li>
</ul>

实际应用：自定义复选框

<label class="flex items-center gap-3 cursor-pointer">
  <input 
    type="checkbox" 
    class="size-5 accent-blue-500 rounded border-gray-300"
  >
  <span class="text-gray-700">我已阅读并同意服务条款</span>
</label>

实际应用：文章排版

<article class="prose max-w-2xl mx-auto">
  <h1 class="text-3xl font-bold">文章标题</h1>
  
  <p class="indent-8 text-gray-700 leading-relaxed mt-4">
    中文文章的首行缩进是传统排版规范，两个字符的缩进让段落起始更清晰...
  </p>
  
  <ul class="list-disc marker:text-blue-500 pl-5 mt-4 space-y-2 text-gray-700">
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
  </ul>
  
  <p class="text-gray-700 leading-relaxed mt-4">
    更多内容...
  </p>
</article>

本节小结

list-none / list-disc / list-decimal → 列表标记类型
list-inside / list-outside → 标记位置
accent-{color} → 表单控件强调色
caret-{color} → 输入框光标颜色
decoration-{thickness} → 装饰线粗细
underline-offset-{n} → 下划线偏移
selection:bg-{color} → 选中文本样式
marker:text-{color} → 列表标记颜色