Tailwind 4 config to generate additional classes based off theme variables? #16077

joezappie · 2025-01-30T17:01:28Z

joezappie
Jan 30, 2025

The tailwind 4 docs state:

The following directives and functions exist solely for compatibility with Tailwind CSS v3.x.

This includes the @plugin directive, so it sounds like I should not make a new javascript plugin if I'm targeting tailwind 4?

What I'm failing to understand is how would I in tailwind 4 generate additional classes based off my theme variables. For example, I want to create hover states for my colors. I'm using material 3 as my design guideline and interaction states use 8% of the on-color for a hover state, 12% for focus, and 16% for dragging.

@theme {
  --color-surface-container: #eeefe3
  --color-on-surface-container: #1a1c16;
 }


/* Generated classes for every color with an on-color variable */

.interactive-bg-surface-container {
 background-color: var(--color-surface-container);
 color: var(--color-on-surface-container);
}

.interactive-bg-surface-container:hover {
 background-color: color-mix(in oklch, var(--color-surface-container) 100%, var(--color-on-surface-container) 8%);
}

.interactive-bg-surface-container:focus {
 background-color: color-mix(in oklch, var(--color-surface-container) 100%, var(--color-on-surface-container) 12%);
}

.dragged-bg-surface-container {
  background-color: color-mix(in oklch, var(--color-surface-container) 100%, var(--color-on-surface-container) 16%);
}

Material 3 has like ~15ish standard colors that would have an interaction state, that's a lot of copy and paste to manually create these. I don't see how to use the @Utility directive for something like this and how to do this without javascript and all with css variables.

I usually use tailwind-material-colors so trying to imitate the styles it generates.