Search code examples
csstailwind-cssshadcnui

What does slash doing in css class as "group/indicator"

I'm working on Shadcn-vue and TailwindCSS.

What does class group/indicator doing in this case? 

<CheckboxIndicator class="group/indicator flex h-full w-full items-center justify-center text-current" >
  <slot>
    <Check class="h-4 w-4 group-[[data-state=indeterminate]]/indicator:hidden" />
    <Minus class="text-primary h-4 w-4 group-[[data-state=checked]]/indicator:hidden" />
  </slot>
</CheckboxIndicator>

If I remove from class of <CheckboxIndicator>, then group-[[data-state=indeterminate]]/indicator:hidden in <Check> will not work.

Where can I get more information about this?

Solution

  • in simple words, the slash / like group/indicator is a special way to apply styles to elements based on the state of a parent element in Tailwind CSS. This makes it easy to change styles of a child element based on the state of the parent: Styling based on parent state