opdavies/lab
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tailwind CSS and data attributes

Browse source
This commit is contained in:
Oliver Davies 2025-08-05 15:41:31 +01:00
parent 32cc453505
commit dfee30e5e9
5 changed files with 139 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tailwindcss/data-attributes.html Normal file
View file

@ -0,0 +1,13 @@
<link href="/tailwind.css" rel="stylesheet" />
<div class="p-10 flex gap-4">
<div class="size-30 bg-red-500"></div>
<!-- Styling based on a data attribute on the element. -->
<div class="size-30 bg-red-500 data-[theme=blue]:bg-blue-500" data-theme="blue"></div>
<!-- Styling based on a data attribute on a parent element. -->
<div class="group" data-theme="banana">
<div class="size-30 bg-red-500 group-data-[theme=banana]:bg-yellow-500"></div>
</div>
</div>