On gists

Advanced tailwind tricks by shadcn

Tailwind CSS Vue.js

examples.js Raw #

// 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"
/>