[v4] Modifiers on custom classes

[kieranm]

Hey all,

In Tailwind V4, if I have some custom classes defined like this...

  .neutral {
    --chroma-multiplier: 1;
  }

  .brand {
    --hue: 280;
    --chroma-multiplier: 1.1;
  }

  .state {
    --chroma-multiplier: 1.25;
  }

  .adaptive {
    --chroma-multiplier: 1;
  }

How can I have tailwind pick these up for modifiers such as aria-selected:brand?

I've tried wrapping these in an @layer block but don't seem to be having much luck.

Thanks

[adamwathan]

Hey! In v4 you'll want to define those classes using @utility:

#14044

[sunilgithubstar]

"I'm working on a colorful section and want to add a rainbow gradient background in Tailwind. Do you know how to extend the backgroundImage in the config for that?"

[sunilgithubstar]

Hey all,

In Tailwind V4, if I have some custom classes defined like this...

  .neutral {
    --chroma-multiplier: 1;
  }

  .brand {
    --hue: 280;
    --chroma-multiplier: 1.1;
  }

  .state {
    --chroma-multiplier: 1.25;
  }

  .adaptive {
    --chroma-multiplier: 1;
  }

How can I have tailwind pick these up for modifiers such as aria-selected:brand?

I've tried wrapping these in an @layer block but don't seem to be having much luck.

Thanks

"I'm working on a colorful section and want to add a rainbow gradient background in Tailwind. Do you know how to extend the backgroundImage in the config for that?"