Remove CSS variables for color opacity

[icaliman]

Hi everyone,

Is it possible to remove CSS variables for color opacity?

In the CSS file there are many --tw-bg-opacity, --tw-text-opacity, --tw-placeholder-opacity, etc...

For example

.bg-base-300 {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}

The CSS file size will be smaller if all colors are set like this one:

.bg-base-300\/90 {
  background-color: hsl(var(--b3) / 0.9);
}

[saadeghi]

Those CSS variables are not from daisyUI. It's from Tailwind CSS.

The reason Tailwind CSS using CSS variables for that:
There are utility classes like bg-opacity-50.

For example people can use bg-red-500 bg-opacity-20

It creates these style:

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}

There's no other way to control the color value and opacity using 2 separate class names.

There are PostCSS plugins that can remove unnecessary CSS variables but I don't guarantee that they won't break some styles.

My advice: don't worry about these small optimizations. Best case you may save only a few bytes in exchange of losing some Tailwind CSS customizability.
Nowadays, even a huge CSS file with 2MB size, gets compressed on CDN and delivered to browsers with Brotli compression and the file browser receives on the network would be ~95% smaller (about 100KB)

Let me know if you have a question.