fill-current is not defined if I overwrite theme color in tailwind

opensas 0
Viewed 14

In tailwind, if I redefine the palette color, instead of extending it, the fill-current utilites is lost.

For example, I have the following code:

<p class="text-custom-red">
Hi
<svg
    class="fill-current"
    width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
>
    <path
        d="M12.0016 ..."
    />
</svg>
</p>

With the following config it works as expected (the svg icon is red)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-red': '#fa364a',
      },
    },
  },
  plugins: [],
}

But if I overwrite the them color instead of extending it the fill-current utility is gone, and the icon is left black:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      'custom-red': '#fa364a',
    },
  },
  plugins: [],
}

note: check this tailwind playground

tailwind-css
2 Answers

You need to add current as a custom color to your config.

module.exports = {
  theme: {
    colors: {
      'custom-red': '#fa364a',
      current: 'currentColor',
    },
  },
  plugins: [],
}
stickyuser0

I just realized that if I overwrite the whole palette I have to define the 'current' and also 'transparent' color, like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'custom-red': '#fa364a',
    },
  },
  plugins: [],
}
opensas0
Related