Using data attributes with Tailwind CSS

Adam Wathan mentioned this in his "Tailwind CSS: It looks awful, and it works" at Rails World 2023.

This is the link to the video: https://www.youtube.com/watch?v=TNXM4bqGqek.

The data attribute example starts at 21:00, which shows using arbitrary classes for data attributes.

Examples

With the attribute on the same element:

<button class="data-[loading]:text-transparent" data-loading>

With the attribute on a parent element (group):

<button class="group data-[loading]:text-transparent" data-loading>
  <span class="hidden group-data-[loading]:flex">...</span>
</button>

Tags