The parent selector — style a parent by its children.
Example#
<label class="has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50 border rounded-lg p-4">
<input type="checkbox" /> Selectable card
</label>Stacking#
Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.
Best practices#
- Selectable cards without JS
- has-[.error] for form validation styling
Related#
variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities