28 lines
724 B
Markdown
28 lines
724 B
Markdown
---
|
|
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>
|
|
```
|