Tailwindcss: [Feature Request] Access variables from tailwind.config.js with CSS function

[AeonFr]

Hello!

I just ran into the following scenario: I want to add a very specific gradient in my CSS, yet I also want to use the variables defined in my tailwind.config.js file.

The current workaround would be to use a plug-in to make CSS variables out of the contents of the config file, but what if...?

.selector {
    background: linear-gradient(to right, tailwind-colors('brand-700'), transparent);
}

So, let's say my config looks like this (currently using Tailwind 1.0 beta)

module.exports = {
    theme: {
        // ...
        extend: {
            colors: {
                "brand-700": "#000077",
                // ...
            },
        }
    }
}

The idea is to make possible for Tailwind to, somehow, detect that I want to access the contents of colors when I use something like tailwind-colors() or another type of CSS function.

In the same fashion, tailwind-fontFamily() could access the font-family array and output the CSS content, and so on...

What do you think about this idea?

Could you think of any other situation where you would find this useful?

[adamwathan]

Is this already solved by the theme function or is there something you want to do that that doesn't handle?

[AeonFr]

Sorry! I should have checked the documentation better. It's awesome that this feature is already built-in, in fact, it's more powerful than my original feature!!!

Let me explain: I refactored the code and right now I needed to have opacity in the gradient I was creating, while still using the variable from config.

I created in my config.theme object the following key:

{
    // RGB values of grey-900. To allow usage with opacity (rgba())
    gray900Rgb: "26, 32, 44",
}

And voilà, I can use it by calling:

   background: rgba(theme('gray900Rgb'), 0.5);

While still maintaining all my color variables in one file (:

Thanks for the reply, and I'm really enjoying using Tailwind.

Will check twice before posting another issue …!

[adamwathan]

Haha no problem, glad the feature does what you need!

[noook]

Isn't it possible to use hexadecimal values to achieve this ?

I'm trying this way but obviously I can't succeed. Maybe have I missed something ?

Edit: I just noticed that rgb values don't work either, and realized the problem was because I am using SCSS

[pana1990]

@noook same isse