/ Gists / Tailwind CSS

Gists - Tailwind CSS

On gists

TW: Responsive css var

Tailwind CSS

index.html #

<!--
  https://play.tailwindcss.com/V4B6tDWkg1
-->



<div class="[--color:red] md:[--color:green]">
  <div class="aspect-square w-20 bg-[var(--color)]">1</div>
  <div class="aspect-square w-20 bg-[--color]">2</div>
</div>
On gists

Tailwind advanced

Popular ⭐ Tailwind CSS

index.html #

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS - Advanced Triky</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
  <h1 class="text-3xl font-bold mb-8">Tailwind CSS - Advanced Triky 🚀</h1>

  <!-- ============================================ -->
  <!-- #2 PEER SELEKTORY -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-blue-200">
    <h2 class="text-2xl font-bold mb-4 text-blue-700">#2 Peer selektory</h2>
    <p class="text-gray-600 mb-4">Sourozenec ovlivňuje sourozence</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">peer + peer-checked:class</code>
    </div>
    
    <div class="mb-6">
      <h3 class="font-semibold mb-3">Checkbox ovládá label</h3>
      <div class="flex items-center gap-3">
        <input type="checkbox" id="check1" class="peer w-5 h-5" />
        <label for="check1" class="peer-checked:text-blue-600 peer-checked:font-bold cursor-pointer">
          Zaškrtni checkbox → label se změní
        </label>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Named peers (více peer prvků)</h3>
      <div class="space-y-3">
        <div>
          <input type="radio" name="opt" id="opt1" class="peer/opt1 hidden" />
          <label for="opt1" class="block p-3 border-2 border-gray-300 rounded cursor-pointer peer-checked/opt1:border-green-500 peer-checked/opt1:bg-green-50">
            Varianta 1
          </label>
          <div class="hidden peer-checked/opt1:block mt-2 p-3 bg-green-100 rounded">
            ✅ Obsah pro variantu 1
          </div>
        </div>
        <div>
          <input type="radio" name="opt" id="opt2" class="peer/opt2 hidden" />
          <label for="opt2" class="block p-3 border-2 border-gray-300 rounded cursor-pointer peer-checked/opt2:border-purple-500 peer-checked/opt2:bg-purple-50">
            Varianta 2
          </label>
          <div class="hidden peer-checked/opt2:block mt-2 p-3 bg-purple-100 rounded">
            ✅ Obsah pro variantu 2
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- #4 MULTIPLE CONDITIONS -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-green-200">
    <h2 class="text-2xl font-bold mb-4 text-green-700">#4 Multiple conditions (AND)</h2>
    <p class="text-gray-600 mb-4">Několik podmínek musí platit zároveň</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">data-[active]:data-[type=premium]:bg-gold</code>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Obě podmínky musí platit</h3>
      <div data-active data-type="premium" class="p-4 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500 data-[active]:data-[type=premium]:font-bold">
        ✅ data-active + data-type="premium" → žluté pozadí
      </div>
      <div data-active class="p-4 mt-2 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500">
        ❌ Jen data-active (chybí premium) → normální
      </div>
      <div data-type="premium" class="p-4 mt-2 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500">
        ❌ Jen data-type="premium" (chybí active) → normální
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Kombinace s hover a data atributem</h3>
      <button data-variant="danger" class="p-3 bg-red-500 text-white rounded hover:data-[variant=danger]:bg-red-700 hover:data-[variant=danger]:scale-105 transition">
        Hover + data-variant="danger" → tmavší a větší
      </button>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- #5 NTH-CHILD SELEKTORY -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-purple-200">
    <h2 class="text-2xl font-bold mb-4 text-purple-700">#5 Nth-child selektory</h2>
    <p class="text-gray-600 mb-4">Stylování podle pozice v DOM</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">[&>*:nth-child(odd)]:bg-gray-100</code>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Liché/sudé řádky (zebra pattern)</h3>
      <div class="[&>*:nth-child(odd)]:bg-gray-100 [&>*:nth-child(even)]:bg-white border-2 border-gray-300 rounded overflow-hidden">
        <div class="p-3">Řádek 1 (lichý) - šedé pozadí</div>
        <div class="p-3">Řádek 2 (sudý) - bílé pozadí</div>
        <div class="p-3">Řádek 3 (lichý) - šedé pozadí</div>
        <div class="p-3">Řádek 4 (sudý) - bílé pozadí</div>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">První a poslední prvek</h3>
      <div class="[&>*:first-child]:font-bold [&>*:first-child]:text-green-600 [&>*:last-child]:font-bold [&>*:last-child]:text-red-600 space-y-2">
        <div class="p-3 border rounded">První prvek - zelený tučný</div>
        <div class="p-3 border rounded">Prostřední prvek - normální</div>
        <div class="p-3 border rounded">Poslední prvek - červený tučný</div>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Každý třetí prvek</h3>
      <div class="[&>*:nth-child(3n)]:bg-blue-100 [&>*:nth-child(3n)]:border-blue-500 space-y-2">
        <div class="p-2 border-2 rounded">Prvek 1</div>
        <div class="p-2 border-2 rounded">Prvek 2</div>
        <div class="p-2 border-2 rounded">Prvek 3 - modrý (3n)</div>
        <div class="p-2 border-2 rounded">Prvek 4</div>
        <div class="p-2 border-2 rounded">Prvek 5</div>
        <div class="p-2 border-2 rounded">Prvek 6 - modrý (3n)</div>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Not last-child (margin mezi prvky)</h3>
      <div class="[&>*:not(:last-child)]:mb-4">
        <div class="p-3 bg-gray-100 rounded">Prvek s marginem dole</div>
        <div class="p-3 bg-gray-100 rounded">Prvek s marginem dole</div>
        <div class="p-3 bg-gray-100 rounded">Poslední prvek BEZ marginu</div>
      </div>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- #6 BEFORE/AFTER -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-orange-200">
    <h2 class="text-2xl font-bold mb-4 text-orange-700">#6 Before/After pseudo-elementy</h2>
    <p class="text-gray-600 mb-4">Přidání obsahu bez HTML</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">before:content-['→'] after:content-['✓']</code>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Ikony před/za textem</h3>
      <div class="before:content-['→'] before:mr-2 before:text-blue-500 p-3 border rounded">
        Text se šipkou před
      </div>
      <div class="after:content-['✓'] after:ml-2 after:text-green-500 p-3 border rounded mt-2">
        Text se zaškrtávátkem za
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Dekorativní čára</h3>
      <h2 class="text-xl font-bold before:content-[''] before:inline-block before:w-12 before:h-1 before:bg-purple-500 before:mr-3 before:align-middle">
        Nadpis s čárou
      </h2>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Badge/štítek</h3>
      <div class="relative inline-block">
        <button class="px-4 py-2 bg-blue-500 text-white rounded after:content-['3'] after:absolute after:-top-2 after:-right-2 after:bg-red-500 after:text-white after:rounded-full after:w-6 after:h-6 after:flex after:items-center after:justify-center after:text-xs after:font-bold">
          Notifikace
        </button>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Citace s úvozovkami</h3>
      <blockquote class="before:content-['"'] after:content-['"'] before:text-4xl after:text-4xl before:text-gray-400 after:text-gray-400 p-4 bg-gray-50 rounded italic">
        <span class="text-lg">Toto je citace s automatickými úvozovkami</span>
      </blockquote>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Tooltip (hover efekt)</h3>
      <span class="relative inline-block cursor-help underline decoration-dotted hover:after:content-['Tohle_je_tooltip'] hover:after:absolute hover:after:left-1/2 hover:after:-translate-x-1/2 hover:after:top-full hover:after:mt-2 hover:after:bg-gray-800 hover:after:text-white hover:after:px-3 hover:after:py-1 hover:after:rounded hover:after:text-sm hover:after:whitespace-nowrap">
        Najeď myší
      </span>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- #7 SUPPORTS QUERIES -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-pink-200">
    <h2 class="text-2xl font-bold mb-4 text-pink-700">#7 Supports queries (detekce CSS features)</h2>
    <p class="text-gray-600 mb-4">Aplikuj styly jen když prohlížeč podporuje feature</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">supports-[backdrop-filter]:backdrop-blur-lg</code>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Backdrop blur (fallback)</h3>
      <div class="relative h-40 bg-gradient-to-r from-blue-400 to-purple-500 rounded overflow-hidden">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400" class="w-full h-full object-cover" alt="pozadí" />
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white/30 supports-[backdrop-filter]:backdrop-blur-md supports-[backdrop-filter]:bg-white/20 p-6 rounded-lg">
            <p class="font-bold text-white">
              S podporou: blur efekt<br/>
              Bez podpory: silnější opacity
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Grid layout (fallback na flex)</h3>
      <div class="flex flex-wrap gap-4 supports-[display:grid]:grid supports-[display:grid]:grid-cols-3">
        <div class="p-4 bg-blue-100 rounded">Box 1</div>
        <div class="p-4 bg-blue-100 rounded">Box 2</div>
        <div class="p-4 bg-blue-100 rounded">Box 3</div>
      </div>
      <p class="text-sm text-gray-600 mt-2">S podporou Grid: 3 sloupce | Bez: flex wrap</p>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- #10 ARBITRARY PROPERTIES -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-indigo-200">
    <h2 class="text-2xl font-bold mb-4 text-indigo-700">#10 Arbitrary properties (vlastní CSS)</h2>
    <p class="text-gray-600 mb-4">Použij libovolnou CSS property</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">[property:value]</code>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Mask image (gradient fade)</h3>
      <div class="[mask-image:linear-gradient(to_bottom,black_50%,transparent)] bg-gradient-to-r from-purple-400 to-pink-400 h-32 flex items-center justify-center text-white font-bold">
        Fade efekt dole
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Text stroke</h3>
      <h2 class="text-5xl font-bold text-transparent [-webkit-text-stroke:2px_black]">
        OUTLINED TEXT
      </h2>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Custom scrollbar</h3>
      <div class="h-32 overflow-y-scroll border-2 border-gray-300 rounded p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-blue-500 [&::-webkit-scrollbar-thumb]:rounded">
        <p>Scrolluj dolů a uvidíš vlastní scrollbar.</p>
        <p class="mt-4">Lorem ipsum dolor sit amet.</p>
        <p class="mt-4">Lorem ipsum dolor sit amet.</p>
        <p class="mt-4">Lorem ipsum dolor sit amet.</p>
        <p class="mt-4">Lorem ipsum dolor sit amet.</p>
        <p class="mt-4">Konec obsahu.</p>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Aspect ratio nestandardní</h3>
      <div class="[aspect-ratio:21/9] bg-gradient-to-r from-orange-400 to-red-400 rounded flex items-center justify-center text-white font-bold">
        21:9 Ultrawide poměr
      </div>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- #13 ARBITRARY VARIANTS S MODIFIERS -->
  <!-- ============================================ -->
  <section class="mb-12 bg-white p-6 rounded-lg border-2 border-teal-200">
    <h2 class="text-2xl font-bold mb-4 text-teal-700">#13 Arbitrary variants s media queries</h2>
    <p class="text-gray-600 mb-4">Vlastní podmínky a media queries</p>
    <div class="bg-gray-50 p-4 rounded mb-4">
      <code class="text-sm">[@media(hover:hover)]:hover:scale-110</code>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Hover jen na zařízeních s hover (ne mobil)</h3>
      <button class="px-6 py-3 bg-blue-500 text-white rounded transition [@media(hover:hover)]:hover:scale-110 [@media(hover:hover)]:hover:bg-blue-600">
        Hover efekt jen na PC/notebooku
      </button>
      <p class="text-sm text-gray-600 mt-2">Na mobilu (touch) se škálování neaplikuje</p>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Dark mode s prefers-color-scheme</h3>
      <div class="p-4 border-2 rounded bg-white [@media(prefers-color-scheme:dark)]:bg-gray-800 [@media(prefers-color-scheme:dark)]:text-white [@media(prefers-color-scheme:dark)]:border-gray-600">
        Tento box reaguje na systémové nastavení dark mode
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Orientace zařízení</h3>
      <div class="p-4 border-2 rounded bg-blue-100 [@media(orientation:portrait)]:bg-green-100 [@media(orientation:landscape)]:bg-orange-100">
        <p class="font-semibold">Otoč zařízení:</p>
        <p class="text-sm">Portrait (na výšku) = zelená</p>
        <p class="text-sm">Landscape (na šířku) = oranžová</p>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="font-semibold mb-3">Vlastní breakpoint</h3>
      <div class="p-4 border-2 rounded bg-gray-100 [@media(min-width:800px)]:bg-purple-100 [@media(min-width:800px)]:text-purple-800">
        Pod 800px: šedá | Nad 800px: fialová
      </div>
    </div>
  </section>

  <!-- ============================================ -->
  <!-- SHRNUTÍ -->
  <!-- ============================================ -->
  <section class="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg border-2 border-blue-300">
    <h2 class="text-2xl font-bold mb-6">📚 Rychlé shrnutí</h2>
    
    <div class="grid md:grid-cols-2 gap-4">
      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-blue-600 mb-2">#2 Peer</h3>
        <code class="text-xs">peer-checked:text-blue-500</code>
        <p class="text-sm text-gray-600 mt-1">Sourozenec ovlivňuje sourozence</p>
      </div>

      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-green-600 mb-2">#4 Multiple conditions</h3>
        <code class="text-xs">data-[a]:data-[b]:class</code>
        <p class="text-sm text-gray-600 mt-1">Obě podmínky musí platit (AND)</p>
      </div>

      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-purple-600 mb-2">#5 Nth-child</h3>
        <code class="text-xs">[&>*:nth-child(odd)]:bg-gray</code>
        <p class="text-sm text-gray-600 mt-1">Stylování podle pozice</p>
      </div>

      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-orange-600 mb-2">#6 Before/After</h3>
        <code class="text-xs">before:content-['→']</code>
        <p class="text-sm text-gray-600 mt-1">Pseudo-elementy s obsahem</p>
      </div>

      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-pink-600 mb-2">#7 Supports</h3>
        <code class="text-xs">supports-[backdrop-filter]:blur</code>
        <p class="text-sm text-gray-600 mt-1">Feature detection + fallback</p>
      </div>

      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-indigo-600 mb-2">#10 Arbitrary properties</h3>
        <code class="text-xs">[mask-image:gradient]</code>
        <p class="text-sm text-gray-600 mt-1">Libovolné CSS properties</p>
      </div>

      <div class="bg-white p-4 rounded">
        <h3 class="font-bold text-teal-600 mb-2">#13 Arbitrary variants</h3>
        <code class="text-xs">[@media(hover:hover)]:hover</code>
        <p class="text-sm text-gray-600 mt-1">Vlastní media queries</p>
      </div>
    </div>
  </section>

</body>
</html>
On gists

Tailwind super selectors (&, data-*, group ...)

Popular ⭐ Tailwind CSS

index.html #

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind Selektory - Kompletní průvodce</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 p-8">
    <h1 class="mb-8 text-3xl font-bold">Tailwind CSS - Kompletní průvodce selektory</h1>

    <!-- ============================================ -->
    <!-- ČÁST 1: STYLOVÁNÍ SAMOTNÉHO ELEMENTU -->
    <!-- ============================================ -->
    <section class="mb-16 rounded-lg border-2 border-blue-200 bg-white p-6">
      <h2 class="mb-6 text-2xl font-bold text-blue-700">ČÁST 1: Stylování samotného elementu</h2>

      <!-- #1 Data atribut bez hodnoty -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#1 Data atribut BEZ hodnoty na elementu</h3>
        <div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-[active]:class</code> nebo <code class="text-sm">data-active:class</code></div>
        <div data-active class="border-2 border-gray-300 p-4 data-[active]:border-purple-500 data-[active]:bg-purple-50">✅ Mám data-active → fialový</div>
        <div class="mt-2 border-2 border-gray-300 p-4 data-[active]:border-purple-500 data-[active]:bg-purple-50">❌ Nemám data-active → šedý</div>
      </div>

      <!-- #2 Data atribut S hodnotou -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#2 Data atribut S konkrétní hodnotou na elementu</h3>
        <div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-[state=open]:class</code> - kontroluje přesnou hodnotu</div>
        <div data-state="open" class="border-2 border-gray-300 p-4 data-[state=open]:border-green-500 data-[state=open]:bg-green-50">✅ data-state="open" → zelený</div>
        <div data-state="closed" class="mt-2 border-2 border-gray-300 p-4 data-[state=open]:border-green-500 data-[state=open]:bg-green-50">❌ data-state="closed" → šedý</div>
      </div>

      <!-- #3 Data atribut - jen přítomnost -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#3 Data atribut - kontrola jen PŘÍTOMNOSTI (ignoruje hodnotu)</h3>
        <div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-state:class</code> - stačí, že atribut existuje</div>
        <div data-state="open" class="border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">✅ data-state="open" → oranžový</div>
        <div data-state="closed" class="mt-2 border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">✅ data-state="closed" → také oranžový (hodnota se ignoruje)</div>
        <div class="mt-2 border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">❌ bez data-state → šedý</div>
      </div>

      <!-- #4 CSS třída -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#4 CSS třída na elementu</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[&.active]:class</code>
        </div>
        <div class="active border-2 border-gray-300 p-4 [&.active]:border-blue-500 [&.active]:bg-blue-50">✅ Mám třídu .active → modrý</div>
        <div class="mt-2 border-2 border-gray-300 p-4 [&.active]:border-blue-500 [&.active]:bg-blue-50">❌ Nemám třídu .active → šedý</div>
      </div>
    </section>

    <!-- ============================================ -->
    <!-- ČÁST 2: STYLOVÁNÍ PODLE RODIČE (GROUP) -->
    <!-- ============================================ -->
    <section class="mb-16 rounded-lg border-2 border-green-200 bg-white p-6">
      <h2 class="mb-6 text-2xl font-bold text-green-700">ČÁST 2: Stylování podle rodiče s GROUP (čistší syntaxe)</h2>
      <p class="mb-6 text-gray-600">Rodič musí mít třídu <code class="rounded bg-gray-100 px-2 py-1">group</code></p>

      <!-- #5 Group + data atribut bez hodnoty -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#5 Group + data atribut BEZ hodnoty</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">group-data-[active]:class</code>
        </div>
        <div data-active class="group border-2 border-gray-300 bg-gray-100 p-4">
          <p class="group-data-[active]:font-bold group-data-[active]:text-purple-600">✅ Rodič (group) má data-active → fialový text</p>
        </div>
        <div class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
          <p class="group-data-[active]:font-bold group-data-[active]:text-purple-600">❌ Rodič nemá data-active → normální</p>
        </div>
      </div>

      <!-- #6 Group + data atribut s hodnotou -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#6 Group + data atribut S hodnotou</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">group-data-[state=danger]:class</code>
        </div>
        <div data-state="danger" class="group border-2 border-gray-300 bg-gray-100 p-4">
          <p class="group-data-[state=danger]:font-bold group-data-[state=danger]:text-red-600">✅ Rodič má data-state="danger" → červený</p>
        </div>
        <div data-state="success" class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
          <p class="group-data-[state=danger]:font-bold group-data-[state=danger]:text-red-600">❌ Rodič má data-state="success" → normální</p>
        </div>
      </div>

      <!-- #7 Group + CSS třída -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#7 Group + CSS třída</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">group-[.card--danger]:class</code>
        </div>
        <div class="group card--danger border-2 border-gray-300 bg-orange-600 p-4">
          <a href="#" class="text-black group-[.card--danger]:font-bold group-[.card--danger]:text-white"> ✅ Rodič má .card--danger → bílý text </a>
        </div>
        <div class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
          <a href="#" class="text-black group-[.card--danger]:font-bold group-[.card--danger]:text-white"> ❌ Rodič nemá .card--danger → černý text </a>
        </div>
      </div>
    </section>

    <!-- ============================================ -->
    <!-- ČÁST 3: STYLOVÁNÍ PODLE PŘEDKA (ARBITRARY) -->
    <!-- ============================================ -->
    <section class="mb-16 rounded-lg border-2 border-purple-200 bg-white p-6">
      <h2 class="mb-6 text-2xl font-bold text-purple-700">ČÁST 3: Stylování podle předka bez GROUP (flexibilnější)</h2>
      <p class="mb-6 text-gray-600">Rodič/předek <strong>nemusí</strong> mít třídu <code class="rounded bg-gray-100 px-2 py-1">group</code></p>

      <!-- #8 Arbitrary + data atribut bez hodnoty -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#8 Arbitrary selektor + data atribut BEZ hodnoty</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[[data-expanded]_&]:class</code>
        </div>
        <div data-expanded class="border-2 border-gray-300 bg-gray-100 p-4">
          <p class="[[data-expanded]_&]:font-bold [[data-expanded]_&]:text-purple-600">✅ Předek má data-expanded → fialový</p>
        </div>
        <div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
          <p class="[[data-expanded]_&]:font-bold [[data-expanded]_&]:text-purple-600">❌ Předek nemá data-expanded → normální</p>
        </div>
      </div>

      <!-- #9 Arbitrary + data atribut s hodnotou -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#9 Arbitrary selektor + data atribut S hodnotou</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[[data-theme='dark']_&]:class</code>
        </div>
        <div data-theme="dark" class="border-2 border-gray-300 bg-gray-800 p-4">
          <p class="text-gray-400 [[data-theme='dark']_&]:font-bold [[data-theme='dark']_&]:text-orange-400">✅ Předek má data-theme="dark" → oranžový</p>
        </div>
        <div data-theme="light" class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
          <p class="text-gray-400 [[data-theme='dark']_&]:font-bold [[data-theme='dark']_&]:text-orange-400">❌ Předek má data-theme="light" → šedý</p>
        </div>
      </div>

      <!-- #10 Arbitrary + CSS třída -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#10 Arbitrary selektor + CSS třída</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[.is-open_&]:class</code>
        </div>
        <div class="is-open border-2 border-gray-300 bg-gray-100 p-4">
          <p class="[.is-open_&]:font-bold [.is-open_&]:text-blue-600">✅ Předek má .is-open → modrý</p>
        </div>
        <div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
          <p class="[.is-open_&]:font-bold [.is-open_&]:text-blue-600">❌ Předek nemá .is-open → normální</p>
        </div>
      </div>
    </section>

    <!-- ============================================ -->
    <!-- ČÁST 4: STYLOVÁNÍ POTOMKA PODLE RODIČE -->
    <!-- ============================================ -->
    <section class="mb-16 rounded-lg border-2 border-orange-200 bg-white p-6">
      <h2 class="mb-6 text-2xl font-bold text-orange-700">ČÁST 4: Stylování POTOMKA podle stavu RODIČE</h2>
      <p class="mb-6 text-gray-600">Rodič má atribut/třídu a stylujeme jeho potomka (dítě, vnuka...)</p>

      <!-- #11 Potomek podle data atributu rodiče -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#11 Stylování SVG podle data atributu rodiče</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[&[data-collapsed=true]_svg]:rotate-180</code>
          <p class="mt-1 text-xs text-gray-600">Čteš to: "Když <strong>tento element</strong> má data-collapsed=true, otoč jeho <strong>svg potomka</strong>"</p>
        </div>
        <div data-collapsed="true" class="border-2 border-gray-300 bg-gray-100 p-4 [&[data-collapsed=true]_svg]:rotate-180 [&[data-collapsed=true]_svg]:text-red-500">
          <svg class="h-6 w-6 transition-transform" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
          </svg>
          <span class="ml-2">✅ Rodič má data-collapsed="true" → SVG je otočené a červené</span>
        </div>
        <div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&[data-collapsed=true]_svg]:rotate-180 [&[data-collapsed=true]_svg]:text-red-500">
          <svg class="h-6 w-6 transition-transform" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
          </svg>
          <span class="ml-2">❌ Rodič nemá data-collapsed → SVG normální</span>
        </div>
      </div>

      <!-- #12 Potomek podle CSS třídy rodiče -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#12 Stylování potomka podle CSS třídy rodiče</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[&.card--premium_span]:text-yellow-500</code>
          <p class="mt-1 text-xs text-gray-600">Čteš to: "Když <strong>tento element</strong> má třídu .card--premium, nastyl jeho <strong>span potomka</strong>"</p>
        </div>
        <div class="card--premium border-2 border-gray-300 bg-gradient-to-r from-yellow-50 to-orange-50 p-4 [&.card--premium_span]:font-bold [&.card--premium_span]:text-yellow-600">
          <span>⭐</span>
          <span class="ml-2">✅ Rodič má .card--premium → span je žlutý a tučný</span>
        </div>
        <div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&.card--premium_span]:font-bold [&.card--premium_span]:text-yellow-600">
          <span>⭐</span>
          <span class="ml-2">❌ Rodič nemá .card--premium → span normální</span>
        </div>
      </div>

      <!-- #13 Složitější příklad - více úrovní -->
      <div class="mb-8">
        <h3 class="mb-3 text-lg font-semibold">#13 Komplexnější příklad - vnořené elementy</h3>
        <div class="mb-2 rounded bg-gray-50 p-4">
          <code class="text-sm">[&[data-state=error]_.icon]:text-red-500</code>
          <p class="mt-1 text-xs text-gray-600">Styluje <strong>jakéhokoliv potomka</strong> s třídou .icon</p>
        </div>
        <div data-state="error" class="border-2 border-red-300 bg-red-50 p-4 [&[data-state=error]_.icon]:scale-125 [&[data-state=error]_.icon]:text-red-600">
          <div class="flex items-center gap-2">
            <span class="icon transition-transform">⚠️</span>
            <span>✅ Rodič má data-state="error" → ikona je větší a červená</span>
          </div>
          <div class="mt-2 ml-8">
            <span class="icon transition-transform">❌</span>
            <span class="ml-2">Vnořená ikona je také stylovaná</span>
          </div>
        </div>
        <div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&[data-state=error]_.icon]:scale-125 [&[data-state=error]_.icon]:text-red-600">
          <div class="flex items-center gap-2">
            <span class="icon transition-transform">⚠️</span>
            <span>❌ Rodič nemá data-state="error" → ikona normální</span>
          </div>
        </div>
      </div>

      <div class="rounded border-l-4 border-orange-400 bg-orange-50 p-4">
        <p class="mb-2 font-semibold text-orange-800">🔑 Klíčový rozdíl:</p>
        <div class="space-y-2 text-sm">
          <div>
            <code class="rounded bg-white px-2 py-1">[[data-collapsed=true]_&]:class</code>
            <p class="ml-4 text-gray-700">→ Styluje <strong>tento element</strong>, když <strong>předek</strong> má atribut</p>
          </div>
          <div>
            <code class="rounded bg-white px-2 py-1">[&[data-collapsed=true]_svg]:class</code>
            <p class="ml-4 text-gray-700">→ Styluje <strong>potomka</strong>, když <strong>tento element</strong> má atribut</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================ -->
    <!-- KDY CO POUŽÍT -->
    <!-- ============================================ -->
    <section class="mb-8 rounded-lg border-2 border-blue-300 bg-gradient-to-r from-blue-50 to-purple-50 p-6">
      <h2 class="mb-6 text-2xl font-bold">🎯 Kdy co použít?</h2>

      <div class="space-y-4">
        <div class="rounded-lg bg-white p-4">
          <h3 class="mb-2 font-bold text-green-700">✅ Použij GROUP syntaxe když:</h3>
          <ul class="ml-6 list-disc space-y-1 text-gray-700">
            <li>Máš jasný rodič-dítě vztah v komponentě</li>
            <li>Chceš čitelnější a kratší kód</li>
            <li>Používáš to opakovaně v jedné komponentě</li>
          </ul>
          <div class="mt-3 rounded bg-green-50 p-3 text-sm">
            <code>group-data-[active]:text-purple-500</code>
          </div>
        </div>

        <div class="rounded-lg bg-white p-4">
          <h3 class="mb-2 font-bold text-purple-700">✅ Použij ARBITRARY selektory když:</h3>
          <ul class="ml-6 list-disc space-y-1 text-gray-700">
            <li>Nechceš přidávat třídu <code class="rounded bg-gray-100 px-1">group</code> na rodiče</li>
            <li>Předek je vzdálenější (ne přímý rodič)</li>
            <li>Potřebuješ flexibilnější podmínky</li>
          </ul>
          <div class="mt-3 rounded bg-purple-50 p-3 text-sm">
            <code>[[data-theme='dark']_&]:text-white</code>
          </div>
        </div>

        <div class="rounded-lg bg-white p-4">
          <h3 class="mb-2 font-bold text-orange-700">✅ Stylování potomka podle rodiče:</h3>
          <ul class="ml-6 list-disc space-y-1 text-gray-700">
            <li>Když chceš stylovat dítě/vnuka podle stavu rodiče</li>
            <li>Rodič má atribut/třídu a potomek se podle toho mění</li>
            <li>Užitečné pro ikony, SVG, nested elementy</li>
          </ul>
          <div class="mt-3 rounded bg-orange-50 p-3 text-sm">
            <code>[&[data-collapsed=true]_svg]:rotate-180</code>
          </div>
        </div>

        <div class="rounded-lg bg-white p-4">
          <h3 class="mb-2 font-bold text-blue-700">✅ Přímé selektory na elementu:</h3>
          <ul class="ml-6 list-disc space-y-1 text-gray-700">
            <li>Když stylování závisí jen na vlastním stavu elementu</li>
            <li>Nejjednodušší a nejrychlejší varianta</li>
          </ul>
          <div class="mt-3 rounded bg-blue-50 p-3 text-sm">
            <code>data-[active]:bg-blue-500</code>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================ -->
    <!-- RYCHLÁ REFERENČNÍ TABULKA -->
    <!-- ============================================ -->
    <section class="rounded-lg border-2 border-gray-300 bg-white p-6">
      <h2 class="mb-6 text-2xl font-bold">📋 Rychlá referenční tabulka</h2>

      <div class="overflow-x-auto">
        <table class="w-full border-collapse text-sm">
          <thead>
            <tr class="bg-gray-100">
              <th class="border p-3 text-left">Situace</th>
              <th class="border p-3 text-left">Syntaxe</th>
              <th class="border p-3 text-left">Příklad</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="border p-3 font-semibold" colspan="3">NA ELEMENTU:</td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut bez hodnoty</td>
              <td class="border p-3"><code>data-[active]:class</code></td>
              <td class="border p-3"><code>data-[active]:bg-blue-500</code></td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut s hodnotou</td>
              <td class="border p-3"><code>data-[state=open]:class</code></td>
              <td class="border p-3"><code>data-[state=open]:text-green-500</code></td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut - jen přítomnost</td>
              <td class="border p-3"><code>data-state:class</code></td>
              <td class="border p-3"><code>data-state:border-orange-500</code></td>
            </tr>
            <tr>
              <td class="border p-3">CSS třída</td>
              <td class="border p-3"><code>[&.active]:class</code></td>
              <td class="border p-3"><code>[&.active]:font-bold</code></td>
            </tr>

            <tr>
              <td class="border p-3 font-semibold" colspan="3">NA RODIČI (s GROUP):</td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut bez hodnoty</td>
              <td class="border p-3"><code>group-data-[active]:class</code></td>
              <td class="border p-3"><code>group-data-[active]:text-purple-500</code></td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut s hodnotou</td>
              <td class="border p-3"><code>group-data-[state=open]:class</code></td>
              <td class="border p-3"><code>group-data-[state=open]:block</code></td>
            </tr>
            <tr>
              <td class="border p-3">CSS třída</td>
              <td class="border p-3"><code>group-[.danger]:class</code></td>
              <td class="border p-3"><code>group-[.danger]:text-red-500</code></td>
            </tr>

            <tr>
              <td class="border p-3 font-semibold" colspan="3">NA PŘEDKOVI (bez GROUP):</td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut bez hodnoty</td>
              <td class="border p-3"><code>[[data-expanded]_&]:class</code></td>
              <td class="border p-3"><code>[[data-expanded]_&]:block</code></td>
            </tr>
            <tr>
              <td class="border p-3">Data atribut s hodnotou</td>
              <td class="border p-3"><code>[[data-theme='dark']_&]:class</code></td>
              <td class="border p-3"><code>[[data-theme='dark']_&]:text-white</code></td>
            </tr>
            <tr>
              <td class="border p-3">CSS třída</td>
              <td class="border p-3"><code>[.parent_&]:class</code></td>
              <td class="border p-3"><code>[.is-open_&]:opacity-100</code></td>
            </tr>

            <tr>
              <td class="border p-3 font-semibold" colspan="3">POTOMEK PODLE RODIČE:</td>
            </tr>
            <tr>
              <td class="border p-3">Potomek podle data atributu</td>
              <td class="border p-3"><code>[&[data-collapsed=true]_svg]:class</code></td>
              <td class="border p-3"><code>[&[data-collapsed=true]_svg]:rotate-180</code></td>
            </tr>
            <tr>
              <td class="border p-3">Potomek podle CSS třídy</td>
              <td class="border p-3"><code>[&.premium_span]:class</code></td>
              <td class="border p-3"><code>[&.premium_span]:text-yellow-500</code></td>
            </tr>
            <tr>
              <td class="border p-3">Potomek s třídou</td>
              <td class="border p-3"><code>[&[data-state=error]_.icon]:class</code></td>
              <td class="border p-3"><code>[&[data-state=error]_.icon]:text-red-500</code></td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </body>
</html>
On gists

Advanced tailwind tricks by shadcn

Tailwind CSS Vue.js

examples.js #

// https://www.reddit.com/r/tailwindcss/comments/1icfwbo/here_are_10_tailwind_tricks_shared_by_shadcn_they/
// https://x.com/shadcn/status/1842329158879420864


// 1. Dynamic CSS Variables in Tailwind
<div style={{ "--width": isCollapsed ? "8rem" : "14rem" }} className="w-[--width] transition-all" />

// 2. Data Attribute State Management
<div 
  data-state={isOpen ? "open" : "closed"}
  className="data-[state=open]:bg-blue-500"
/>


// 3. Nested SVG Controll
<div 
  data-collapsed={isCollapsed}
  className="[&[data-collapsed=true]_svg]:rotate-180"
>
  <svg>...</svg>
</div>


// 4. Parent-Child Style Inheritance
<section :data-collapsed="isCollapsed"
  <div className="[[data-collapsed=true]_&]:rotate-180">
    {/* Child inherits rotation when parent has data-collapsed=true */}
  </div>
</section>


// 5. Group Data States
<div className="group" data-collapsed={isCollapsed}>
  <div className="group-data-[collapsed=true]:rotate-180"/>
</div>


// 6. Data Slots
<div className="data-[slot=action]:*:hover:mr-0">
  <div data-slot="action" class="-mr-10">...</div>
</div>


// 7. Peer Element Control
<button className="peer" :data-active="isActive">Menu</button>
<div className="peer-data-[active=true]:bg-blue-500"/>


// 8. Named Group Focus
<div className="group/menu">
  <button className="group-focus-within/menu:bg-blue-500"/>
</div>


// 9. Group Has Selectors
<div className="group/menu">
  <div className="group-has-[[data-active=true]]/menu:bg-blue-500"/>
</div>


// 10. Variant Props
<button 
  data-variant={variant}
  className="data-[variant=ghost]:border-blue-500"
/>
On gists

Arbitrary props / variants / styling by parent

•
Popular ⭐ Tailwind CSS

demo.html #

<!-- https://play.tailwindcss.com/yyRSjWdDIv -->
<!--
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
-->
<section class="m-5 *:mb-2 *:border *:text-red-400 [&_p]:text-blue-500">
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <p>Para 1</p>
  <p>Para 2</p>
  <div>text 6</div>
</section>


<div class="[&:nth-child(3)]:py-0">
  <!-- ... -->
</div>








<ul role="list" class="space-y-4 [&>*]:rounded-lg [&>*]:bg-white [&>*]:p-4 [&>*]:shadow">
  <li class="flex"> <!-- ... -->
</ul>


<ul
  role="list"
  class="space-y-4 [&>*]:rounded-lg [&>*]:bg-white [&>*]:p-4 [&>*]:shadow hover:[&>li:nth-child(2)>div>p:first-child]:text-indigo-500"
>
    
    
    
<ul class="m-5 [&>*:not(:last-child)]:text-green-500">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul


<ul class="m-5 [&>*:not(:last-child)]:after:content-[':)']">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
</ul>


<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  
<div class="bg-[url('/what_a_rush.png')]">
  
  
  
When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:

<!-- Will generate a font-size utility -->
<div class="text-[22px]">...</div>

<!-- Will generate a color utility -->
<div class="text-[#bada55]">...</div>
Sometimes it really is ambiguous though, for example when using CSS variables:

<div class="text-[var(--my-var)]">...</div>
In these situations, you can “hint” the underlying type to Tailwind by adding a CSS data type before the value:

<!-- Will generate a font-size utility -->
<div class="text-[length:var(--my-var)]">...</div>

<!-- Will generate a color utility -->
<div class="text-[color:var(--my-var)]">...</div>





<!--
  https://play.tailwindcss.com/sLrFGm1VtG
--


<!-- Via class, ale muze to chytnout i vyssi tridu, takze radsi jeste dat #ID na ten element a pres nej ve smyslu [#nejakeId.theme-light_&] -->
<section class="theme-light">
  <article>
    <div class="[.theme-light_&]:bg-red-200 [.theme-dark_&]:bg-gray-800">
      Obsah
    </div>
  </article>
</section>



<!-- Přes data atribut -->
<div data-theme="dark" class="[&[data-theme='light']]:bg-red-200 [&[data-theme='dark']]:bg-gray-800">
  Obsah
</div>

<!-- Nebo pro parent selector -->
<section data-theme="light">
  <div class="[[data-theme='light']_&]:bg-red-200 [[data-theme='dark']_&]:bg-gray-800">
    Obsah
  </div>
</section>


<!--

:root {
  --x: pink;
}
-->
<div class="hover:bg-[--x]"> kuku</div>

<!-- group + class -->
<div class="card border flex justify-center items-center group card--danger bg-orange-600">
  <a href="#" class="text-black group-[.card--danger]:text-white">Danger Card</a>
</div>
On gists

CSS Colors: color opacity (tailwind)

•
Tailwind CSS CSS CSS trick

index.html #

<!--
https://ishadeed.com/article/css-relative-colors/#adjust-the-opacity-with-color-mix
-->

<!-- works only for color from config not defined like css variables -->

<!--v2 -->
<div class="ring-msp-red-default/30"></div>

<!--v3 -->
<div class="ring-msp-red-default ring-opacity-30"></div>

<!-- Hack if color is defined like css variable in config -->
'my-red': 'var(--primary-color)', // '#ba0c2f',

<!--v2 hack -->
does not exist

<!--v3 hack -->
ring-[color-mix(in_srgb,theme(colors.my-red)_50%,transparent)]

<!--v4 -->
no hack needed, v4 is functional (read doc)
On gists

Dropdown without JS

Tailwind CSS CSS HTML

code.html #

<!-- https://codepen.io/xqbuilds/pen/LYwvOer  -->

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black text-white flex items-center justify-center min-h-screen space-x-6">
    <!-- Hover Dropdown -->
    <div class="relative group">
        <button class="bg-amber-900 hover:bg-amber-800 px-6 py-3 rounded-lg transition">
            Hover Dropdown
        </button>
        <div class="absolute left-0 hidden w-40 bg-gray-800 rounded-lg group-hover:block">
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 1</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 2</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 3</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 4</a>
        </div>
    </div>
    <!-- Click Dropdown -->
    <div class="relative">
        <details>
            <summary class="bg-teal-800 hover:bg-teal-700 px-6 py-3 rounded-lg cursor-pointer transition">
                Click to Open
            </summary>
            <div class="absolute left-0 w-40 bg-gray-800 rounded-lg">
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option A</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option B</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option C</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option D</a>
            </div>
        </details>
    </div>
</body>
</html>
On gists

Sandbox skeleton (demo code) tailwind, alpine

•
Popular ⭐ Tailwind CSS Alpine.js

index.html #

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Sandbox - RJ</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>
  <body>
  
   <!-- Code here ... -->
   
   
    
  </body>
</html>
On gists

Grid instead of wrapper containers (edges)

•
Tailwind CSS CSS CSS trick

grid.css #

/* Kevin Powell 
https://codepen.io/kevinpowell/pen/ExrZrrw
(https://ryanmulligan.dev/blog/layout-breakouts/)
*/

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

img.full-width {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
}

:root {
  --color-scheme: dark;

  --font-family: system-ui;

  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  --clr-primary-300: hsl(219, 76%, 55%);
  --clr-primary-400: hsl(219, 76%, 40%);
  --clr-primary-500: hsl(219, 76%, 25%);
  --clr-secondary-300: hsl(269, 75%, 55%);
  --clr-secondary-400: hsl(269, 75%, 40%);
  --clr-secondary-500: hsl(269, 75%, 25%);
  --clr-accent-200: hsl(358, 85%, 80%);
  --clr-accent-300: hsl(358, 72%, 65%);
  --clr-accent-400: hsl(358, 72%, 50%);
  --clr-accent-500: hsl(358, 72%, 35%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: var(--color-scheme);
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-400);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

.site-title {
  font-size: var(--fs-900);
  line-height: 1.05;
  text-transform: uppercase;
}

.section-title {
  font-size: var(--fs-800);
  line-height: 1.1;
}

.bg-primary {
  background: var(--clr-primary-500);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.call-to-action {
  padding: 1rem;
  background: hsl(0 0% 100% / 0.15);
}

.wrapper {
  width: calc(100% - 3rem);
  max-width: 900px;
  margin-inline: auto;
}

.flow > * + * {
  margin-top: var(--flow-spacing, 1em);
}

.section-padding {
  padding-block: 2.5rem;
}

.primary-header {
  padding-block: 1rem;
  margin-block-end: 3rem;
  background: var(--clr-accent-200);
  color: var(--clr-primary-500);
}

.primary-header__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  max-width: 250px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: max(5vw, 1rem);
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  color: var(--clr-accent-500);
  text-decoration: underline;
}

.even-columns {
  display: flex;
  gap: 1rem;
}
On gists

SVG Circle + TW + animation

•
Tailwind CSS HTML SVG

index.html #


<!--
https://play.tailwindcss.com/B8YFBxQAJO
-->

<div class="group relative flex h-[10em] w-[10em] items-center justify-center rounded-[1.5em] px-[0.5rem] pt-[1rem]">
  <svg class="absolute left-1/2 top-[calc(50%+8px)] h-[9rem] w-[9rem] -translate-x-1/2 -translate-y-1/2" viewBox="0 0 160 160" fill="none" height="160" width="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M130.912 130.912a71.997 71.997 0 0 0-10.911-110.778A71.999 71.999 0 0 0 9.383 94.046a72.004 72.004 0 0 0 19.705 36.866" stroke-width="16" stroke-linecap="round" stroke="#EEDC82"></path>
    <path d="M146.65 52.764A72.004 72.004 0 0 0 69.647 8.748a71.998 71.998 0 0 0-40.559 122.164" class="duration-[1s] [stroke-dasharray:100] [stroke-dashoffset:-99] group-hover:[stroke-dashoffset:0]" pathLength="100" stroke-width="16" stroke-linecap="round" stroke="#B49A18"></path>
  </svg>
  <p class="text-[0.75rem] font-semibold">1729/2500 Steps</p>
</div>