# Generate theme.json colors

**URL:** https://discourse.roots.io/t/generate-theme-json-colors/30008
**Category:** sage
**Tags:** tailwind, sage11
**Created:** 2025-10-17T09:28:05Z
**Posts:** 5

## Post 1 by @kjvdven — 2025-10-17T09:28:05Z

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?

---

## Post 2 by @dsturm — 2025-10-17T09:49:00Z

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](https://github.com/roots/vite-plugin?tab=readme-ov-file#themejson-generation))

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

---

## Post 3 by @kjvdven — 2025-10-17T13:07:53Z

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.

---

## Post 4 by @csorrentino — 2025-10-17T13:33:43Z

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.

---

## Post 5 by @kjvdven — 2025-10-17T13:47:40Z

Pff, that’s it!

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