Theme colors not all rendering

[maxweld]

I have a component which renders a simple button, with the background color being determined programmatically.
The colors are set up in the @theme. One of the buttons appears as expected, the other does not, appearing to have no color or be transparent.

Relevant parts of the theme:

@theme static {
  --color-wmb-btn-cancel: #d97706; 
  --color-wmb-btn-submit: #15803d; 
  --color-wmb-btn-action: #0d3b66; 
  --color-wmb-btn-delete: #dc2626; 

  --color-wmb-btn-event: #0d3b66; 
  --color-wmb-text-link: #0d3b66; 
}

The HTML elements as rendered:

<div class="flex justify-between mt-8">
  <button class="bg-wmb-btn-submit text-white hover:text-gray-300 px-4 py-2 text-base rounded-md font-medium hover:opacity-80 transition-opacity" fdprocessedid="a4s4hb">Save</button>
  <button class="bg-wmb-btn-cancel text-white hover:text-gray-300 px-4 py-2 text-base rounded-md font-medium hover:opacity-80 transition-opacity" fdprocessedid="31mmo">Cancel</button>
</div>

The second of these buttons, the 'Cancel' button, displays correctly. However the first, the 'Submit' button displays incorrectly with no color, appearing transparent.
In the devtools, style, I can see that the Cancel button gets its color defined in the Layer Utilities, but this is not happening for the Submit button.

Why? What is going on?

Tailwind CSS V4.1.3
Nuxt 3.16.0 running in V4 Compatibility

[wongjn]

The CSS comments are unclosed, causing some of your color definitions to actually be comment content. Try changing as per below:

 @theme static {
---color-wmb-btn-cancel: #d97706; /* dark amber /
---color-wmb-btn-submit: #15803d; / dark green /
---color-wmb-btn-action: #0d3b66; / dark blue /
---color-wmb-btn-delete: #dc2626; / red */
+  --color-wmb-btn-cancel: #d97706; /* dark amber */
+  --color-wmb-btn-submit: #15803d; /* dark green */
+  --color-wmb-btn-action: #0d3b66; /* dark blue */
+  --color-wmb-btn-delete: #dc2626; /* red */

---color-wmb-btn-event: #0d3b66; /* dark blue /
---color-wmb-text-link: #0d3b66; / dark blue */
+  --color-wmb-btn-event: #0d3b66; /* dark blue */
+  --color-wmb-text-link: #0d3b66; /* dark blue */
 }

See this working in this Tailwind Play.

[wongjn]

Seems to be working in this Tailwind Play which would suggest there is something in your particular project causing the unexpected behavior. Consider providing a git repo that reproduces the issue if you'd like us to help debug further.

It seems that the pasted code renders in the git discussion with some of the asterisks missing for some reason, but they are correctly there when I edit the discussion, but not when I preview it. Weird.

That's probably because you haven't formatted the code as a code block, and the asterisks are then used for italic text.

[maxweld]

Thanks - will try to set up a simple repo to replicate.

[maxweld]

Hi @wongjn I have set up a public repo at https://github.com/maxweld/tailwind-issue.
Now both buttons appear transparent. You will find them if you hover over the very top left of the browser window.
Many thanks for your assistance.

[wongjn]

You are constructing the class names dynamically which is not supported by Tailwind. See the documentation for details.

[maxweld]

@wongjn Many thanks. It makes total sense once you are aware of this.

[maxweld]

main.txt

I have added the full css file (extension saved as .txt so I could upload it)