v4's @theme layer and WordPress' theme.json

[sntran]

Hi,

If you work with WordPress' Full Site Editing and integrate Tailwind v4 with it, welcome!

I'd like to discuss a challenge I'm facing and to see some ideas come out of this.

As we all know, with Tailwind, we define our theme in @theme { ... }, with --color-*, --spacing-* CSS custom variables. These variables are then used for utility classes like text-*, bg-*, border-*, my-*, etc...

For WordPress with its new Full Site Editing, a theme.json with settings for colors, spacing, ... is used:

{
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#FFFFFF",
          "name": "Base",
          "slug": "base"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "name": "Auto",
          "size": "auto",
          "slug": "auto"
        }
      ]
    }
  }
}

For each of those settings, WordPress generates a CSS variable, i.e. --wp--preset--color--base: #FFFFFF, --wp--preset--spacing--auto: auto, ...

The challenge I have is to figure out where I should actually define my theme. Should the colors be in "theme.json" or "theme.css"?

If I define the colors in @theme, then I would need to set settings.color.palette[0].color = "var(--color-base)". Otherwise, I would need to define --color-base: var(--wp--preset--color--base); in @theme.

Another challenge is that while Tailwind uses text-base, bg-base for setting colors, WordPress generates has-base-color and has-base-background-color.

Is there a way to unify them?