Theme.json not generated using tailwind-v4 branch

sage
,
1

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.

2

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

3

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

1 Like
4

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?

1 Like
5

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

6

@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:

and
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!