Redefined Tailwind colors not added to theme.json in Radicle

radicle
1

On a new Radicle install, I disable all Tailwind colors and black, white and blue variants. However, only some of these colors are added to theme.json when running npm run build

// theme.css
@import "./fonts.css";

@theme {
  --font-sans: "Public Sans", system-ui, -apple-system, sans-serif;

  --color-*: initial;

  --color-blue-50: #effaff;
  --color-blue-100: #def4ff;
  --color-blue-200: #b6ebff;
  --color-blue-300: #76dbff;
  --color-blue-400: #2eccff;
  --color-blue-500: #02ace4;
  --color-blue-600: #0098d2;
  --color-blue-700: #0078aa;
  --color-blue-800: #00648c;
  --color-blue-900: #075273;
  --color-blue-950: #04344d;

  --color-black: #000;
  --color-white: #fff;
}

// theme.json
...
"palette": [
        {
          "name": "Blue (500)",
          "slug": "blue-500",
          "color": "#02ace4"
        },
        {
          "name": "Blue (600)",
          "slug": "blue-600",
          "color": "#0098d2"
        },
        {
          "name": "Blue (800)",
          "slug": "blue-800",
          "color": "#00648c"
        },
        {
          "name": "Black",
          "slug": "black",
          "color": "#000"
        },
        {
          "name": "White",
          "slug": "white",
          "color": "#fff"
        }
      ]
    },
...

Am I missing a step?

2

:thinking: I’m AFK most of the day so won’t be able to directly try to reproduce yet, but maybe our new v1.3 is breaking something?

Can you try downgrading the vite plugin to v1.2.5? You’ll also need to remove disableTailwindBorderRadius: false, in your Vite config when doing so

If that doesn’t fix it, I’ll try to repro and push a fix soon

1 Like
3

I haven’t tried to reproduce this, but you might need to add “static” to the theme directive to make sure tailwind generates all of the custom properties:

@theme static {
 ...
}
2 Likes
4

Yep, this solved it.

@theme static {
 ...
}

Downgrading roots/vite-plugindidn’t change the behavior.

Edit: this solution is documented in the README file of vite-plugin’s.