`on-bg` utility for Tailwind CSS emulating Material 3 state layers.

README.md

<button class="
  rounded-lg border-outline-subtle bg-container state-button p-4 text-start
  hover:on-bg-on-surface/hover active:on-bg-on-surface/active
">

on-bg.css

@utility on-bg-* {
  --tw-gradient-to: --value(--on-bg-color-*, --color-*, [*]);
  --tw-gradient-to: color-mix(
    in srgb,
    --modifier(--on-bg-opacity-*, [*]) --value(--on-bg-color-*, --color-*, [*]),
    transparent
  );
  --tw-gradient-to: color-mix(
    in srgb,
    calc(--modifier(integer) * 1%) --value(--on-bg-color-*, --color-*, [*]),
    transparent
  );
  background-image: linear-gradient(var(--tw-gradient-to) 0 0);
}

@utility state-button {
  @apply on-bg-transparent transition-colors active:duration-75 active:ease-out;
}