Tailwind CSS - 填充

Tailwind CSS 现代指南：使用 Fill 样式化 SVG

本指南提供了一种在 Tailwind CSS 中样式化 SVG 的现代方法，重点关注 fill 工具类。你将学习如何为 SVG 着色、创建主题感知图标以及在悬停时应用样式。

理解 SVG 填充（Fill）

SVG 中的 fill 属性作用类似于其他 HTML 元素的 background-color。它设置 SVG 形状内部的颜色。Tailwind 的 fill-* 工具类提供了一种强大且一致的方式，将项目调色板应用于图标和其他矢量图形。

关键的填充工具类

虽然 Tailwind 为其整个调色板提供了填充工具类，但以下几个特殊类特别有用：

类名	CSS 属性	描述
`fill-current`	`fill: currentColor;`	最重要。用其父元素的当前 `color`（即文本颜色）填充 SVG。对于可主题化的图标至关重要。
`fill-none`	`fill: none;`	使 SVG 填充透明。对于仅描边着色的轮廓图标很有用。
`fill-transparent`	`fill: transparent;`	用透明颜色填充 SVG。
`fill-{color}-{shade}`	`fill: #...;`	用主题中的特定颜色填充 SVG（例如 `fill-blue-500`）。

实用示例：创建可主题化的按钮图标

fill-current 工具类是一个游戏规则改变者。通过使用它，SVG 图标会自动继承其父按钮的文本颜色。当你更改按钮的文本颜色（例如，在悬停时），图标的颜色也会随之更新，无需额外的 CSS。

<!DOCTYPE html>
<html lang="en">
<body>

    <h2 class="text-2xl font-bold">Themeable Icon with `fill-current`</h2>
    <button class="bg-indigo-600 text-white hover:bg-indigo-700 hover:text-yellow-300 px-6 py-3 rounded-lg flex items-center space-x-2 transition-colors duration-300">
        <!-- SVG 使用 fill-current 继承按钮的文本颜色 -->
        <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
        </svg>
        <span>Rate this Feature</span>
    </button>

    <h2 class="text-2xl font-bold">Direct Color Styling</h2>
    <div class="flex items-center space-x-6">
        <!-- 静态着色的 SVG -->
        <div>
            <p class="text-center mb-2 text-slate-600">`fill-green-500`</p>
            <svg class="h-12 w-12 fill-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        </div>

        <!-- 带有悬停效果的静态着色 SVG -->
        <div>
            <p class="text-center mb-2 text-slate-600">`hover:fill-rose-500`</p>
            <svg class="h-12 w-12 fill-rose-300 hover:fill-rose-500 transition-colors cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
    </div>
</body>
</html>

SVG 样式化的最佳实践

优先使用 fill-current：对于按钮、链接或其他组件中使用的图标，fill-current 几乎总是实现灵活性和可维护性的最佳选择。
清理你的 SVG：从设计工具（如 Figma 或 Illustrator）导出 SVG 时，它们通常会包含硬编码的 fill 或 stroke 属性。你必须从 <svg> 或 <path> 标签中删除这些属性，以确保 Tailwind 的类能正确生效。
可访问性 (A11y)：确保填充颜色与其背景之间有足够的对比度，特别是对于有意义的图标。fill-current 模式有助于实现这一点，因为你通常是在父元素文本级别控制对比度。
深色模式：将填充工具类与 dark: 前缀（dark:fill-gray-300）结合使用，以使你的图标适应深色主题。