Show Tailwind CSS color values in HEX format in dev tools

Gourav Goyal

Gourav Goyal

May 29, 2022

This post is for all devs working on Tailwind CSS.

If you inspect an element with Tailwind CSS color class, you will find an opacity CSS variable and a rgba color format. Few issues with this:

  • no color preview, unlike the HEX format
  • you can't use dev tools' built-in color picker to change the value, unlike the HEX format
  • when copy-pasting, there's a dependency of a CSS variable (i.e. --tw-text-opacity), unlike the HEX format

That's how Tailwind CSS color values look in dev tools ๐Ÿ‘Ž:

so, what's the actual color value?
so, what's the actual color value?

Let's fix this, so Tailwind always uses HEX format colors and avoids using CSS variables.

That's how it'd look ๐Ÿ‘:

Easy to read and debug color value
Easy to read and debug color value

Open tailwind.config.css file, create one if it doesn't exist:

Add corePlugins:{...} like below to it:

module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  corePlugins: {
    textOpacity: false,
    backgroundOpacity: false,
    borderOpacity: false,
    divideOpacity: false,
    placeholderOpacity: false,
    ringOpacity: false,
  },
  plugins: [],
};
That's all, folks!
โœ๏ธ Improve this article
Share

Gourav Goyal

Gourav Goyal