opdavies/zet.oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Using data attributes with Tailwind CSS

Browse source
This commit is contained in:
Oliver Davies 2024-08-27 23:39:23 +01:00
parent d553c825d9
commit a302d2e891
1 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
source/_notes/18.md Normal file
View file

@ -0,0 +1,27 @@
---
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>
```