From a302d2e8915094da74876f5d2e5d51c18d45ea1f Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.dev>
Date: Tue, 27 Aug 2024 23:39:23 +0100
Subject: [PATCH] Using data attributes with Tailwind CSS

---
 source/_notes/18.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 source/_notes/18.md

diff --git a/source/_notes/18.md b/source/_notes/18.md
new file mode 100644
index 0000000..ce03fb2
--- /dev/null
+++ b/source/_notes/18.md
@@ -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>
+```