🎨 Tailwind CSS Trick: Managing Opacity with Alpha Values 🎨

How to define custom color names with alpha/opacity which also supporting dark & light mode in Tailwind CSS

If you're a UI designer working with Tailwind CSS, you'll love this handy trick for controlling background opacity. Tailwind's alpha value feature makes it super easy to manage different button states (hover, clicked, disabled, etc.) without the hassle of multiple color palettes. Take a look at this demo that I created,

demo for changing the alpha value in the tailwind

As you can see, you don’t need to scratch your head and any of the whole color pallets to solve one button’s different state, on the contrary, the Tailwind alpha value comes in handy. Here's a quick rundown of how it works:

CSS file,

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 27 80 13;
  }

  .dark {
    --color-primary: 217 50 50;
  }
}  

This is the config,

export default {
  darkMode:'class',
  theme: {
    extend: {
      colors: {
        myCustomizeColor: 'rgb(var(--color-primary) / <alpha-value>)',
      },
    },
  },
  plugins: [],
}  

This is the HTML,

<div class="mb-4">
  <button class="h-12 w-24 bg-myCustomizeColor/50 text-black">Light Button</button>
</div>

<div class="dark">
  <button class="h-12 w-24 bg-myCustomizeColor/50 text-black">Dark Button</button>
  <button class="h-12 w-auto bg-myCustomizeColor/50">This is another button</button>
</div>

Note: When specifying the color, remember NO commas are needed between the RGB values. I spent some time figuring this out, so hopefully, this saves you some hassle!

Tailwind also supports dark mode through a simple class="dark". Just add this class to toggle between light and dark themes.

I hope this small trick helps streamline your UI design workflow! 💡