Using utilities to style elements on hover, focus and more.

Every utility class in Sprig can be applied conditionally by adding a variant to the beginning of the class name that describes the condition you want to target.

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

Pseudo-classes

Styling based on parent state

When you need to style an element based on the state of some parent element, mark the parent with the group class and use group-* variants:

<a href="#" class="group block rounded-lg p-6 hover:bg-teal-500">
  <h3 class="text-gray-900 group-hover:text-white">New project</h3>
  <p class="text-gray-500 group-hover:text-white">Create a new project from a variety of starting templates.</p>
</a>

Styling based on sibling state

Mark the sibling with the peer class and use peer-* variants like peer-invalid to style the target element:

<input type="email" class="peer ..." />
<p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p>

Pseudo-elements

Style the ::before and ::after pseudo-elements using the before and after variants. Sprig adds content: '' automatically.