Using slots with tailwind

[staticshock]

I'm toying around with the tailwind starter kit and loving the tw() pattern. One thing that's native to tw is the idea of slots, which is similar to but distinct from React Aria's slots (or this).

tw's slots are useful for defining class names for a component's different sub-components. However, I've yet to stumble upon a good pattern for overriding styles for a specific slot from the outside. That is, I'd like to generalize this pattern, where the component's root node's class names are augmented via className by whoever is instantiating it:

export const buttonStyles = tv({
  ...
})

export function Button(props: ButtonProps) {
  return (
    <RACButton
      {...props}
      className={composeRenderProps(props.className, (className, renderProps) =>
        buttonStyles({ ...renderProps, variant: props.variant, className })
      )}
    />
  )
}

See this for full example.

React Aria defines className on its components as string | (values) => string, and I'm wondering if maybe I should add a | Record<slot, styles> to that definition. Is anybody else doing this?

[staticshock]

I realized that I'm overthinking this; this is exactly where I should be leaning into variants: <Button variant="foo" />