Tailwind CSS - 列表样式图片

使用 `list-style-image` 自定义列表标记

Tailwind CSS 提供了工具来定制列表项的标记，让你能够超越默认的实心圆点和数字。虽然 list-style-image 属性提供了一种直接使用图像作为标记的方法，但现代 CSS 技术通常能提供更强的控制力和灵活性。

`list-image-none` 工具类

Tailwind 开箱即用，内置了一个核心 list-style-image 工具类。

类名	CSS 属性
`list-image-none`	`list-style-image: none;`

使用任意值（Arbitrary Values）设置自定义图片

借助 Tailwind 的 JIT（即时）编译器，你可以在 HTML 中直接使用任意值来设置自定义列表图像。对于自包含的示例，SVG data URI 是一个绝佳选择，因为它不需要单独的图像文件。

示例：使用任意值（Arbitrary Value）的自定义 SVG 标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS List Style Image Demo</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-50 p-8">

    <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow">
        <h2 class="text-xl font-bold text-slate-800 mb-4">Recipe Ingredients</h2>

        <!--
            我们使用任意值将 `list-style-image` 设置为勾选标记 SVG。
            该 SVG 已进行 URL 编码，以便安全地在 `data URI` 中使用。
            `pl-5` 用于为自定义标记提供空间。
        -->
        <ul class="list-inside pl-5 list-image-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%2322c55e%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2018a8%208%200%20100-16%208%208%200%20000%2016zm3.707-9.293a1%201%200%2000-1.414-1.414L9%2010.586%207.707%209.293a1%201%200%2000-1.414%201.414l2%202a1%201%200%20001.414%200l4-4z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E')]">
            <li class="mb-2 text-slate-700">1 cup strawberries</li>
            <li class="mb-2 text-slate-700">1/2 cup blueberries</li>
            <li class="mb-2 text-slate-700">1 banana, sliced</li>
            <li class="text-slate-700">1/4 cup almond milk</li>
        </ul>
    </div>

</body>
</html>

最佳实践：扩展你的主题

在 HTML 中硬编码 data URI 可能会导致重复。一种更简洁、更易于维护的方法是在 tailwind.config.js 中定义你的自定义列表图像。这允许你创建可重用的工具类。

// tailwind.config.js
const checkmarkSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2322c55e'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E")`;

module.exports = {
  theme: {
    extend: {
      listStyleImage: {
        checkmark: checkmarkSvg,
      }
    }
  }
}

// 现在在你的 HTML 中，你可以简单地使用：
// <ul class="list-inside pl-5 list-image-checkmark">...</ul>

局限性与现代替代方案

list-style-image 属性存在显著的局限性：你对标记的大小、位置或对齐方式几乎没有控制。因此，一种更常见且更灵活的现代方法是隐藏默认列表标记，并使用带有背景图像的 ::before 伪元素。这可以通过 CSS 提供完全的控制。

高级技巧：使用伪元素（Pseudo-elements）

尽管这需要一些自定义 CSS 或一个简单的 Tailwind 插件，但理解这个概念对于高级样式设计很重要。

/* 在你的自定义 CSS 文件中 */
.list-custom-marker li::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    background-image: url('path/to/your/icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* 在你的 HTML 中 */
<ul class="list-none list-custom-marker">
    <li>List item with full control over its marker.</li>
</ul>