Generate theme.json colors

sage
,
1

For my Sage 11 theme

I created my own theme for TailWind 4, disabling all the default colours and adding my own in (theme.json). I import the theme file in app.css.

File structure:

- base
  - theme.css
  - typography.css
app.css
editor.css

How do I make sure my colors and font sizes end up in the theme.json?

2

Hej @kjvdven ,

in app.css add this:

@import "tailwindcss";
@import './base/typography.css';
@import './base/theme.css';

/* ... */

When running npm run build (or whatever package manager you use), the colors should be available in the generated public/build/assets/theme.json, as the defaults in the vite.config.js should be already set to include them:

    // ...
    // Generate the theme.json file in the public/build/assets directory
    // based on the Tailwind config and the theme.json file from base theme folder
    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
    }),
    // ...

I think, you’re issue right now is, that Tailwind won’t discover the colors, as they might not be in your theme source files. Therefor you need to check your base/theme.css for the static them option (via roots/vite-plugin docs)

@theme static {
  --color-white: #fff;
  --color-purple: #3f3cbb;
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}
2 Likes
3

Maybe I miss something, but it looks similar to my current setup.

app.css

@import "tailwindcss" theme(static);

@import "./base/";
@import "./components/";
@import "./templates/";
@import "./utilities/";

@source "../views/";
@source "../../app/";

base/index.css

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

base/theme.css

@theme static {
  /* COLORS */
  --color-*: initial;

  /* Base */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-transparent: transparent;
  --color-current: currentColor;

  /* Violet */
  --color-violet-50: #f0effe;
  --color-violet-100: #dad9ff;
  --color-violet-200: #bbb9fd;
  --color-violet-300: #9e9afb;

  /* ... */


  /* FONTS */
  --font-hafnia: "Hafnia", serif;
  --font-inter: "Inter", sans-serif;
}

I have left the wordpressThemeJson as is, but i keep getting the default tailwind colours instead of my own color pallet.

4

Are your other css imports working as expected? I have been importing the full file name like @import “./base/theme.css”; since switching to vite.

1 Like
5

Pff, that’s it!

I was importing without extension when using Postcss, but default Vite @import needs the “.css” extension to work.