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

fill-current on the body is really clever #2110

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

fill-current on the body is really clever #2110

jenstornell Aug 2, 2020

fill-current on the body

Replies: 0 comments

jenstornell
Aug 2, 2020

`fill-current` on the body