Style elements on data attributes in Tailwind

Using Tailwind you can apply custom styling to an element based on it's data attribute.

For example, given these elements:

<div data-state="checked" class="data-[state=checked]:bg-black bg:white">
  <!-- Html that could change the data-state goes here -->
</div>

<div data-state="unchecked" class="data-[state=checked]:bg-black bg:white">
  <!-- Html that could change the data-state goes here -->
</div>

Of these two elements, the first one would be given a black background, while the second one would have a white background, unless it's data-state changes to checked.

Tweet