.fill-current to set the fill color of an SVG to the current text color. This makes it easy to set an element's fill color by combining this class with an existing text color utility.
Useful for styling icon sets like Zondicons that are drawn entirely with fills.
<svg class="fill-current text-teal-500 inline-block h-12 w-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/> </svg>
Control which fill utilities Tailwind generates by customizing the
theme.fill section of your
Responsive and State Variants
By default, no responsive, hover, focus, active, or group-hover variants are generated for fill utilities.
You can control which variants are generated for the fill utilities by modifying the
fill property in the
variants section of your
For example, this config will generate responsive and hover variants:
If you don't plan to use the fill utilities in your project, you can disable them entirely by setting the
fill property to
false in the
corePlugins section of your config file: