Lazy loaded color variables is not defined in Chrome DevTools

[hosseinitabar]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

vite 4.4.9, qwik 1.2.11

What browser are you using?

Chrome

What operating system are you using?

Ubuntu, Debian

Reproduction URL

Minimal reproducible example

Describe your issue

I'm trying to lazily load some CSS variables (mostly colors) to be used by Tailwind CSS.

This is part of my tailwind.config.js file:

    theme: {
        extend: {
            colors: {
                custom: {
                    color1: 'var(--color-1)'
                }
            },

And this is the colors.css file that is loaded when page loads in production. It's not part of the build:

:root {
    --color-1: #ff0000;
}

And when I run my project, I can see that colors.css is loaded, and I can see that the HTML element has these styles applied to them (via Tailwind's compiled styles):

#some-element {
    background-color: var(--color-1) !important;
}

Yet when I hover over var(--color-1) the Chrome DevTools tells me that the variable is not defined.

[thecrypticace]

Given that the HTML element has the styles applied and everything else is otherwise working this is not a Tailwind problem but one with Chrome DevTools. I'd file a browser bug for this but I can't reproduce this one myself. Do you have any kind of reproduction?

[hosseinitabar]

I created a Minimal reproducible example
add a simple CSS style file in route-head.tsx (/src/components/router-head/route-head.tsx)
add a custom color in tailwind.config.js that used a color variable
use this color text-custom-color1 in index.tsx

[pedromenezes1]

@hosseinitabar did you ever find a solution for this? any news?