Request for translucent backgrounds

[iaseth]

I often add the following to my projects to easily set translucent backgrounds in my app. Is there a better way to achieve this in tailwind? And would it be possible to ship similar classes with tailwind by default?

.black-glass-10 { background-color: rgba(0, 0, 0, 0.1); }
.black-glass-20 { background-color: rgba(0, 0, 0, 0.2); }
.black-glass-30 { background-color: rgba(0, 0, 0, 0.3); }
.black-glass-40 { background-color: rgba(0, 0, 0, 0.4); }
.black-glass-50 { background-color: rgba(0, 0, 0, 0.5); }
.black-glass-60 { background-color: rgba(0, 0, 0, 0.6); }
.black-glass-70 { background-color: rgba(0, 0, 0, 0.7); }
.black-glass-80 { background-color: rgba(0, 0, 0, 0.8); }
.black-glass-90 { background-color: rgba(0, 0, 0, 0.9); }

.white-glass-10 { background-color: rgba(255, 255, 255, 0.1); }
.white-glass-20 { background-color: rgba(255, 255, 255, 0.2); }
.white-glass-30 { background-color: rgba(255, 255, 255, 0.3); }
.white-glass-40 { background-color: rgba(255, 255, 255, 0.4); }
.white-glass-50 { background-color: rgba(255, 255, 255, 0.5); }
.white-glass-60 { background-color: rgba(255, 255, 255, 0.6); }
.white-glass-70 { background-color: rgba(255, 255, 255, 0.7); }
.white-glass-80 { background-color: rgba(255, 255, 255, 0.8); }
.white-glass-90 { background-color: rgba(255, 255, 255, 0.9); }

[wongjn]

There is a way to apply these rules in Tailwind with default configuration. Use bg-black or bg-white with the opacity modifier syntax:

Rule	Tailwind equivalent
black-glass-10	bg-black/10
…	…
black-glass-90	bg-black/90
white-glass-10	bg-white/10
…	…
white-glass-90	bg-white/90

[iaseth]

Thanks for answering! This is exactly what I was looking for.

[apoorvpathak]

helpful

[steventete]

To achieve this effect more idiomatically in Tailwind CSS, you can leverage opacity classes and customize colors in your tailwind.config.js. Here are two approaches:

1. Using Tailwind's Built-in Opacity Classes

Tailwind natively supports managing opacities combined with colors. For example:

<div class="bg-black bg-opacity-10"></div> 
<div class="bg-white bg-opacity-20"></div>

This approach achieves the same results as your custom CSS classes while reducing the need for additional custom styles.

2. Customizing Colors in tailwind.config.js

If you prefer specific names like black-glass and white-glass, you can extend the Tailwind configuration to include them as custom colors:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'black-glass': {
          10: 'rgba(0, 0, 0, 0.1)',
          20: 'rgba(0, 0, 0, 0.2)',
          30: 'rgba(0, 0, 0, 0.3)',
          40: 'rgba(0, 0, 0, 0.4)',
          50: 'rgba(0, 0, 0, 0.5)',
          60: 'rgba(0, 0, 0, 0.6)',
          70: 'rgba(0, 0, 0, 0.7)',
          80: 'rgba(0, 0, 0, 0.8)',
          90: 'rgba(0, 0, 0, 0.9)',
        },
        'white-glass': {
          10: 'rgba(255, 255, 255, 0.1)',
          20: 'rgba(255, 255, 255, 0.2)',
          30: 'rgba(255, 255, 255, 0.3)',
          40: 'rgba(255, 255, 255, 0.4)',
          50: 'rgba(255, 255, 255, 0.5)',
          60: 'rgba(255, 255, 255, 0.6)',
          70: 'rgba(255, 255, 255, 0.7)',
          80: 'rgba(255, 255, 255, 0.8)',
          90: 'rgba(255, 255, 255, 0.9)',
        },
      },
    },
  },
};

This allows you to use classes like:

<div class="bg-black-glass-10"></div>
<div class="bg-white-glass-50"></div>