# Theme.json not generated using tailwind-v4 branch

**URL:** https://discourse.roots.io/t/theme-json-not-generated-using-tailwind-v4-branch/29192
**Category:** sage
**Tags:** vite, sage11
**Created:** 2025-02-01T21:49:51Z
**Posts:** 6

## Post 1 by @stuart_james — 2025-02-01T21:49:51Z

I was having trouble with `theme.json` was not being generated during build. It looks like the theme layer generated by tailwind wraps the variables in :root _and_ :host, which causes the function `wordpressThemeJson` to return without generating the theme.json. I was using an essentially a fresh build, and I did not extend the default tailwind theme. The fix is to change this line in `resources/js/wordpress.js`:

```
if (!themeContent.startsWith(':root{')) {
        return;
      }
```

to:

```
if (!themeContent.trim().startsWith(":root")) {
        return;
      }
```

Not sure what this is actually checking for, so i have no idea if this will cause issues.

---

## Post 2 by @ben — 2025-02-01T23:50:54Z

Thanks for testing! Want to submit a PR to the Tailwind v4 branch with that change?

---

## Post 3 by @stuart_james — 2025-02-02T05:37:12Z

Yeah of course! Was excited to see ya’ll were working on supporting v4. I just submitted a PR.

---

## Post 4 by @drbroad — 2025-02-11T18:31:52Z

I am having issues with the theme.json not being generated when using the latest code on main. Is there a way to get access to the tailwind v4 branch for testing?

---

## Post 5 by @csorrentino — 2025-02-11T18:50:34Z

The tailwind v4 branch was merged into main. Are you running the build script?

---

## Post 6 by @drbroad — 2025-02-11T19:48:08Z

@csorrentino Thats what I thought, but thats why I was confused when running build, that none of my custom colors are being put into the theme.json

Just so I am clear, anything in my @theme, such as:

```
@theme {
    --color-primary: oklch(0.809 0.105 251.813);
}
```

should be making it’s way into the theme.json file, correct?  
I have been referencing:

> <https://github.com/roots/sage/commit/464e977d5a22e62951189e59c0935ad29aa3fce8#diff-a89f02c0b5a0b487de9239edb22fe4b15362629e65728eab8bbc00b657b4eb78>

and  
[https://github.com/roots/sage/issues/3220](https://github.com/roots/sage/issues/3220)

But no matter what I do, how how many times i run the build script (im on a fresh checkout of main). my theme.json never changes.

\*\*Turns out i had a merge conflict from my previous vite config file that was using a build declaration in the file: \*\*

```
...
  build: {
    rollupOptions: {
      input: entryFiles,
    },
  },
plugins: [
    tailwindcss(),
    vue(),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
    }),
    wordpressPlugin(),
    wordpressRollupPlugin(),
    ...
```

Easy enough fix - will just move that logic into a plugin file. False alarm!