Let AI write emails and messages for you šŸ”„

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: [],
};

Note: It'll disable the feature where you could use theĀ slash notation to change the opacityĀ of background, text color, etc., e.g.Ā bg-red-500/10Ā for a red-500 background color with 10% alpha.

That's all, folks!

Gourav Goyal

Gourav Goyal