CSS variables for stuff like colors

[ghost]

Hello

:root {
  --cool-gray-100: #F9FAFB;
  --cool-gray-100-rgb: 249, 250, 251; // because of the rgba support
}

// we can also do stuff like
.my-component: {
  background: var(--cool-gray-100)
}

This feature 100% needed right now.

Please upvote. We, developers, deserve full-featured tools.

[jenstornell]

In the developer tools we can see that what's generated is something like below:

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

It means that for opacity you already have a value but it's set directly to1 in this case.

I've also run into this from time to time, wanting to just get a color by its name. For me it's edge cases like when I test something with inline style or using arbitrary values. I hope they find a solution for it in the future.

[ghost]

It's necessary to have a HEX and an RGB type color value.

We don't need opacity variables directly in CSS.

[VicGUTT]

Hey !
I believe you can simply do the following in your tailwind.config.js file:

{
    theme: {
        colors: {
            white: 'var(--color-white)',
            primary: {
                50: 'var(--color-primary-50)',
                // ...
            },
        },
    },
}

/* Some CSS somewhere */
:root {
    --color-white: #fff;
    --color-primary-50: #123456;
}

You may be inspired by this solution or you might find it useful to use a plugin like this one.

Side note: In the future I'd advise you to be a bit more detailed and explicit as to what your issue is, what you need help with, and how can anyone help you. Also, try to be a bit less We, developers, deserve aka entitled.

Hope it helps.

[ghost]

What is the benefit of doing this? More work? This isn't what I'm talking about. I'm just saying that tailwind renders the color values as CSS variables in the stylesheet. That's all. I don't know how someone can be more explicit.

Tailwind doesn't even provide such a simple thing. People going to need to use a CSS variable and there are not going to find any, so they are going to write it by them selfs. It will take 2 mins to Tailwind do the same and don't waste over time. So we deserve more than just writing CSS with classes :)

[michahell]

@bluefirepro c'mon now, let's stay nice :) Your idea is great, I have upvoted it! It would entirely remove the need to write custom theme extensions.
However, for those looking to do this NOW, @VicGUTT 's solution is a solution 👍
And I think it should actually be documented as a solution, in general, if it is not already.