css var does not apply color

[emmanuel-franc]

Hello,

First of all, thank you for this plugin. It is nice and easy to use 👍

I though about creating an issue about this but since I can't reproduce on a side repo I tought it might be better to open a discussion.

As I said, I tried creating another project but couldn't reproduce and, obviously, I can't share my project.

I'm trying to apply a color on a button.
In my repro project, I have this:

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--colors-primary) / var(--tw-bg-opacity));
}

In my real project in the devtool I have this:

.bg-primary {
    background-color: var(--colors-primary);
}

If a manually add rgb(var(--colors-primary)); then the color is displayed and I have no troubles changing a theme.

Maybe my problem is well known but I can't find anything and I am really struggling to understand why it doesn't work.

Note that this issue isn't on all colors. i.e:

// only -50, -100 and -200 work
"primary": {
    "50": "#eaf3ff",
    "100": "#d5e6fa",
    "200": "#bed8f6",
    "lightest": "#99c1f0",
    "lighter": "#6a9cec",
    "light": "#3072dd",
    "DEFAULT": "#2159d4",
    "dark": "#1a46c3",
    "darker": "#1b3a9e",
    "darkest": "#1b347c"
  },

// all of these work
"error": {
    "lightest": "#fef2f2",
    "lighter": "#fecaca",
    "light": "#fca5a5",
    "DEFAULT": "#ef4444",
    "dark": "#dc2626",
    "darker": "#7f1d1d"
  },

I found this issue 115 which is somehow similar to mine.

Anyway, if you have any idea I would be grateful. Otherwise, if I finally find the issue I'll update this post.

Many thanks 👋

[RyanClementsHax]

Hiya!

Thanks for opening this and your kind words.

Unfortunately, without a reproduction repo, I won't be able to help.

I'd be happy to take a look at your private repo if you provide access but the only thing I can suggest right now is to ensure your color values are all valid colors.

Sorry I can't be of more help than that :/

[emmanuel-franc]

Hi,

yeah I knew while writing that I might get this answer but well, maybe you already encountered this kind of behaviour.
Unfortunately I can't provide an access to this project.

I will keep searching what causes the colors to break and will keep you updated in case it happens to others.
Feel free to close this discussion :)

[RyanClementsHax]

If you ever find anything, I'd be happy to help :)

[emmanuel-franc]

So after some research in my node_modules I sorta found out where the problem lies.

For a bit of context, I am using externals configs from a specific internal repository which is used to generate configs for tailwind.
I have four themes in use but I'll cut off some parts to make it clear:

// tailwind.config.js

const colors = require('tailwindcss/colors');
const master = require('myRepo/tailwind/master.json');
const brandOne = require('myRepo/tailwind/brandOne.json');
const brandTwo = require('myRepo/tailwind/brandTwo.json');

module.exports = {
  content: [
    './lib/**/*.{vue,js,ts,jsx,tsx,md,html}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('tailwindcss-themer')({
      defaultTheme: {
        extend: {
          colors: {
            ...colors,
            ...masterPreset.theme.colors,
          },
        },
      },
      themes: [
        {
          name: 'brandOne',
          extend: {
            colors: { ...masterPreset.theme.colors },
          },
        },
        {
          name: 'brandTwo',
          extend: {
            colors: { ...brandTwoPreset.theme.colors },
          },
        },
      ],
    }),
  ],
};

This is the conf of brandOne:

 "primary": {
  "50": "#eef2ff",
  "100": "#e0e7ff",
  "200": "#c7d2fe",
  "light": "#0069cc",
  "DEFAULT": "#005aad",
  "dark": "#004a8f",
  "darker": "#003a70",
  "lightest": "#3da1ff",
  "lighter": "#0586ff",
  "darkest": "#002a52"
},

This is the conf of brandTwo:

"primary": {
  "50": "#eef2ff",
  "100": "#e0e7ff",
  "200": "#c7d2fe",
  "lightest": "$orange.300",
  "lighter": "$orange.400",
  "light": "$orange.500",
  "DEFAULT": "$orange.600",
  "dark": "$orange.700",
  "darker": "$orange.800",
  "darkest": "$orange.900"
},

Removing the values $orange.300, $orange.400, etc which refers to tailwind's colors did the trick.

Anyway, thank you for your input which helped me to resolve this issue and sorry for the loss of time.

(if for any reason you want a reproductible repo I could now do it since I understand what went wrong).

[RyanClementsHax]

Thanks. That makes sense. The plugin doesn't support values like $orange.500

Do you have a reference to documentation that $orange.500 is supposed to be resolvable by tailwind? I'm not familiar with that feature.

Also no need for a reproduction repo, thanks for tracking it down.

[emmanuel-franc]

Do you have a reference to documentation that $orange.500 is supposed to be resolvable by tailwind? I'm not familiar with that feature.

I do not really know if tailwind is supposed to understand $orange.500. My presets are generated by a side project which I didn't work on and seems old enough to me to be error prone 🤷
I'll try to ask around me about this but can't promise anything, it might just be a coding issue in the first place.