Component variants (add example to docs?)

[silveltman]

I came up with a usecase for this plugin I absolutely love.

<div class="bg-base p-12">
  <button class="bg-cta-bg text-cta-fg p-4 rounded-lg">Click me</button>
</div>

<!-- We can apply the primary theme to just the button -->
<div class="bg-base p-12">
  <button class="primary bg-cta-bg text-cta-fg p-4 rounded-lg">Click me</button>
</div>

<!-- What I didn't realize at first, but something that is very powerfull in component libraries/design system in my opition is the following -->
<div class="bg-base p-12 [&_.button]:primary">
  <button class="button bg-cta-bg text-cta-fg p-4 rounded-lg">Click me</button>
</div>

This last usecase is especially powerfull when dealing with large components with multiple sub-components. For example, a hero-component containing child button-components

Tailwindplay: https://play.tailwindcss.com/ur5mHHSCg0

[RyanClementsHax]

Thanks for pointing this out! I'm always interested in learning about how this plugin is used.

Is the use case using something like [&_.button]:primary to force styles on certain sections of the dom? I just wanna make sure I understand you properly.