fill-current on the body is really clever #2110

jenstornell · 2020-08-02T15:13:03Z

jenstornell
Aug 2, 2020

To let SVG icons use the text color, you can set fill-current on the SVG element. Then it will inherit the text color from its parent.

https://tailwindcss.com/docs/fill/

`fill-current` on the body

I noticed that I could set fill-current not on the SVG itself but on the parent element, because its inherited up the DOM.

Taking it one step futher, we can set fill-current on the body element. This allows for coloring all SVG files with the text color from the parent.

<body class="fill-current">
  <div>
    <div class="text-red-500">
      <div>
        <svg></svg><!-- Red -->
      </div>
    </div>
    <div class="bg-blue-500">
      <svg></svg><!-- Blue -->
    </div>
  <div>
</body>

In the example above the SVG file is lower down the DOM. The fill-current and text-red-500 does not need to be direct parents to the SVG file.

What do you think?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fill-current on the body is really clever #2110

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

fill-current on the body is really clever #2110

Uh oh!

Uh oh!

jenstornell Aug 2, 2020

fill-current on the body

Replies: 0 comments

jenstornell
Aug 2, 2020

`fill-current` on the body