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>
+```