Style React Aria Slots with Tailwind.

[brenotx]

Hi, I wonder if it is possible to style React Slots with Tailwind.

The following approach is very common the React Aria docs, but I'd like to use Tailwind instead.

.react-aria-ListBoxItem {
  [slot=label] {
    font-weight: bold;
  }

  [slot=description] {
    font-size: small;
  }
}

Perhaps something like className="[slot=description]:text-sm"

[snowystinger]

Have you had a look through our Tailwind examples? https://react-spectrum.adobe.com/react-aria/examples/contact-list.html
You could avoid the need for the slot selector by doing it this way and just place the classes directly on the element. If you want to generalize it a bit more, you could use a context to pass classnames from a parent to a child, we do this in our React Spectrum implementation using the precursor to RAC's slots https://github.com/adobe/react-spectrum/blob/main/rfcs/2019-v3-slots.md

The RAC one is type safe and an iteration on that RFC. You can also make use of it by creating your own Contexts for your own components.

@reidbarber I know you have some more experience with Tailwind if you have anything to add

almost forgot, we have a starter kit for Tailwind as well https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits

[reidbarber]

Agreed, I don't think you gain much from the slot attributes if you're using Tailwind since you won't have the global class name collision.