---
title: Using data attributes with Tailwind CSS
date: 2024-08-27 23:39:23
tags: [HTML, CSS, 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:

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

With the attribute on a parent element (group):

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