[V4] Custom classes not applying based on data attribute value

[mikeploythai]

I've created custom button variant classes:

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 border border-indigo-950 text-sm font-medium uppercase no-underline ring-indigo-300 transition hover:cursor-pointer focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:focus-visible:ring-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 px-4 py-2;

    &.btn--primary {
      @apply bg-indigo-950 text-violet-200 hover:bg-indigo-900;
    }

    &.btn--secondary {
      @apply bg-violet-200 text-indigo-950 hover:bg-white;
    }
  }
}

and in one scenario, I want to choose which variant to apply depending on the value of a data attribute:

<ul className="grid gap-2 pb-4">
    {list.map((cta, i) => (
      <li key={cta.id}>
        <CMSLink
          cta={cta}
          data-primary={i === 0}
          className="data-[primary=true]:btn--primary data-[primary=false]:btn--secondary btn w-full"
        />
      </li>
    ))}
</ul>

CMSLink for context:

interface CMSLinkProps extends Omit<React.ComponentProps<'a'>, 'href' | 'target' | 'children'> {
  cta: NonNullable<PageCollection['layout']['hero']['ctaList']>[number]
}

const CMSLink = ({ cta, ...props }: CMSLinkProps) => {
  // random logic here

  return (
    <Link href={href} target={cta.newTab ? '_blank' : undefined} {...props}>
      {cta.label}
    </Link>
  )
}

however, the variants are not being applied, and do not show up under the components layer in devtools:

would appreciate any help on this 🙏 it's more than likely I'm not handling my selectors properly lol

[wongjn]

You'd need to use @utility so that Tailwind "knows" about the class names, like:

@utility btn {
  @layer components {
    @apply …;
  }
}

@utility btn-primary {
  @layer components {
    @apply …;
  }
}

@utility btn-seconday {
  @layer components {
    @apply …;
  }
}

[mikeploythai]

This makes sense for the variant classes. Thanks!