Color palette incorrect when using custom properties

[maxsalven]

My colors are all defined using css custom properties, which means the color palette preview is incorrect.

It would be great if we could point the extension at a .css file where these properties are defined.

in tailwind.config.js:

    colors: {
      red: {
        "50": "var(--color-red-50)",
        "100": "var(--color-red-100)",
        "200": "var(--color-red-200)",
        "300": "var(--color-red-300)",
        "400": "var(--color-red-400)",
        "500": "var(--color-red-500)",
        "600": "var(--color-red-600)",
        "700": "var(--color-red-700)",
        "800": "var(--color-red-800)",
        "900": "var(--color-red-900)",
      },
    }

in app.css:

:root {
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
}

[marcoSven]

It would be great if we could point the extension at a .css file

I don't think this is necessary, what I do is use fallback values

colors: {
      red: {
        "50": "var(--color-red-50, #fef2f2)",
      },
    }

[bradlc]

Hey @maxsalven. It's out of scope for the extension to attempt to resolve the actual values, but the issue with your variables all resolving to "red" is fixed in 0.6.15 👍