2025-08-04 01:09:00 +01:00
|
|
|
---
|
|
|
|
|
title: Using data attributes with Tailwind CSS
|
|
|
|
|
date: 2024-08-27 23:39:23
|
|
|
|
|
tags: [HTML, CSS, Tailwind CSS]
|
2025-09-10 08:00:00 +01:00
|
|
|
note: true
|
|
|
|
|
permalink: /notes/18-using-data-attributes-with-tailwind-css
|
2025-08-04 01:09:00 +01:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
```
|
