🎨 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…