PageSourceSearch

https://tailwindcss.com/docs/installation/using-vite

html tailwindcss.com collected 2026-10-01 06:33:15 UTC 329,738 bytes, 49 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="inter_6a166f28-module__775SPq__variable plexmono_ffb312b5-module__CmrMxG__variable source_91931b22-module__FtvGhG__variable ubuntumono_2a4826b0-module__yzkUma__variable antialiased dark:bg-gray-950"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/IBMPlexMono_Italic-s.p.15oe4fv9c-bbx.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_Medium-s.p.1415hm2grr_xe.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_MediumItalic-s.p.0i6~4uf_-vfrr.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_Regular-s.p.182ynbf68e-7x.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_SemiBold-s.p.0ruh16q_m63mu.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_SemiBoldItalic-s.p.0.skgl0kdzuzk.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/InterVariable-s.p.0r27kd5h06n72.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/InterVariable_Italic-s.p.0lyls.rsx6v21.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/SourceSansPro_Regular_ttf-s.p.0~_u57fu-gtq..woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/Ubuntu_Mono_bold-s.p.0_c25cd9jck4l.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/017r-ibrf-le-.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/0n9_1tq74i09x.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/08gyl.us_fmj7.js"/>
1<script src="/_next/static/chunks/0srs2cqqpk188.js" async=""></script>
1<script src="/_next/static/chunks/0aqjr575~-kiw.js" async=""></script>
1<script src="/_next/static/chunks/0z_50l.zjgt03.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-00669_q1z8o3u.js" async=""></script>
1<script src="/_next/static/chunks/0y97be86sc~2s.js" async=""></script>
1<script src="/_next/static/chunks/17o076c4jq00a.js" async=""></script>
1<script src="/_next/static/chunks/0wixf9kntow24.js" async=""></script>
1<script src="/_next/static/chunks/14npz~h5j0o4o.js" async=""></script>
1<script src="/_next/static/chunks/03qg92y~mksg7.js" async=""></script>
1<script src="/_next/static/chunks/0eift~.g6ajk7.js" async=""></script>
1<script src="/_next/static/chunks/0qdme1q3zt0a3.js" async=""></script>
1<script src="/_next/static/chunks/122cqq07nrvzt.js" async=""></script>
1<link rel="preload" href="data:text/javascript;base64,CiAgaWYgKCEoJ191cGRhdGVUaGVtZScgaW4gd2luZG93KSkgewogICAgd2luZG93Ll91cGRhdGVUaGVtZSA9IGZ1bmN0aW9uIHVwZGF0ZVRoZW1lKHRoZW1lKSB7CiAgICAgIGxldCBjbGFzc0xpc3QgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0OwoKICAgICAgY2xhc3NMaXN0LnJlbW92ZSgibGlnaHQiLCAiZGFyayIsICJzeXN0ZW0iKTsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnbWV0YVtuYW1lPSJ0aGVtZS1jb2xvciJdJykuZm9yRWFjaChlbCA9PiBlbC5yZW1vdmUoKSkKICAgICAgaWYgKHRoZW1lID09PSAnZGFyaycpIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdkYXJrJykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ29rbGNoKC4xMyAuMDI4IDI2MS42OTIpJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIGlmICh0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgIGNsYXNzTGlzdC5hZGQoJ2xpZ2h0JykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ3doaXRlJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdzeXN0ZW0nKQoKICAgICAgICBsZXQgbWV0YTEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMS5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGExLmNvbnRlbnQgPSAnb2tsY2goLjEzIC4wMjggMjYxLjY5MiknCiAgICAgICAgbWV0YTEubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScKICAgICAgICBkb2
1N1bWVudC5oZWFkLmFwcGVuZENoaWxkKG1ldGExKQoKICAgICAgICBsZXQgbWV0YTIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMi5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGEyLmNvbnRlbnQgPSAnd2hpdGUnCiAgICAgICAgbWV0YTIubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCknCiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChtZXRhMikKICAgICAgfQogICAgfQoKICAgIHRyeSB7CiAgICAgIF91cGRhdGVUaGVtZShsb2NhbFN0b3JhZ2UuY3VycmVudFRoZW1lKQogICAgfSBjYXRjaCAoXykge30KCiAgICB0cnkgewogICAgICBpZiAoLyhNYWN8aVBob25lfGlQb2R8aVBhZCkvaS50ZXN0KG5hdmlnYXRvci5wbGF0Zm9ybSkpIHsKICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnb3MtbWFjb3MnKQogICAgICB9CiAgICB9IGNhdGNoIChfKSB7fQogIH0K" as="script"/><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-TMR96VNVMT" as="script"/><meta name="next-size-adjust" content=""/><link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=4"/><link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=4"/><link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=4"/><link rel="manifest" href="/favicons/site.webmanifest?v=4"/><link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=4" color="#38bdf8"/><link rel="shortcut icon" href="/favicons/favicon.ico?v=4"/><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feeds/feed.xml"/><link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/feeds/atom.xml"/><link rel="alternate" type="application/json" title="JSON Feed" href="/feeds/feed.json"/><meta name="apple-mobile-web-app-title" content="Tailwind CSS"/><meta name="application-name" content="Tailwind CSS"/><meta name="msapplication-TileColor" content="#38bdf8"/><meta name="msapplication-config" content="/favicons/browserconfig.xml?v=4"/><link rel="preconnect" href="https://KNPXZI5B0M-dsn.algolia.net" crossorigin="anonymous"/><title>Installing Tailwind CSS with Vite - Tailwind CSS</title><meta name="description" content="Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS."/><meta property="og:title" content="Installing with Vite - Installation"/><meta property="og:description" content="Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS."/><meta property="og:url" content="https://tailwindcss.com/docs/installation/using-vite"/><meta property="og:image" content="https://tailwindcss.com/api/og?path=/docs/installation/using-vite"/><meta property="og:type" content="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Installing with Vite - Installation"/><meta name="twitter:description" content="Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS."/><meta name="twitter:image" content="https://tailwindcss.com/api/og?path=/docs/installation/using-vite"/><link rel="icon" href="/favicon.ico?favicon.0cgjfh1m3jfig.ico" sizes="48x48" type="image/x-icon"/>
1<script type="text/javascript">
2  if (!('_updateTheme' in window)) {
3    window._updateTheme = function updateTheme(theme) {
4      let classList = document.documentElement.classList;
5
6      classList.remove("light", "dark", "system");
7      document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove())
8      if (theme === 'dark') {
9        classList.add('dark')
10
11        let meta = document.createElement('meta')
12        meta.name = 'theme-color'
13        meta.content = 'oklch(.13 .028 261.692)'
14        document.head.appendChild(meta)
15      } else if (theme === 'light') {
16        classList.add('light')
17
18        let meta = document.createElement('meta')
19        meta.name = 'theme-color'
20        meta.content = 'white'
21        document.head.appendChild(meta)
22      } else {
23        classList.add('system')
24
25        let meta1 = document.createElement('meta')
26        meta1.name = 'theme-color'
27        meta1.content = 'oklch(.13 .028 261.692)'
28        meta1.media = '(prefers-color-scheme: dark)'
29        document.head.appendChild(meta1)
30
31        let meta2 = document.createElement('meta')
32        meta2.name = 'theme-color'
33        meta2.content = 'white'
34        meta2.media = '(prefers-color-scheme: light)'
35        document.head.appendChild(meta2)
36      }
37    }
38
39    try {
40      _updateTheme(localStorage.currentTheme)
41    } catch (_) {}
42
43    try {
44      if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
45        document.documentElement.classList.add('os-macos')
46      }
47    } catch (_) {}
48  }
49</script>
49<script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script>
49</head><body><div hidden=""><!--$--><!--/$--></div><div class="isolate"><div><div class="fixed inset-x-0 top-0 z-10 border-b border-gray-950/5 dark:border-white/10"><div class="bg-white dark:bg-gray-950"><div class="flex h-14 items-center justify-between gap-8 px-4 sm:px-6"><div class="flex items-center gap-4"><a class="shrink-0" aria-label="Home" href="/"><svg viewBox="0 0 167 21" fill="none" class="h-5 text-black dark:text-white"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path><path fill="currentColor" d="M51.547 8.688h-3v5.803c0 1.548 1.016 1.524 3 1.427v2.346c-4.015.483-5.611-.629-5.611-3.773V8.688H43.71V6.172h2.225V2.925l2.612-.774v4.021h2.998v2.516Zm11.43-2.516h2.61v12.092h-2.61v-1.741c-.92 1.28-2.346 2.055-4.233 2.055-3.288 0-6.021-2.78-6.021-6.36 0-3.603 2.733-6.36 6.021-6.36 1.886 0 3.313.774 4.233 2.032V6.172Zm-3.821 9.915c2.176 0 3.82-1.62 3.82-3.87 0-2.248-1.644-3.868-3.82-3.868-2.177 0-3.821 1.62-3.821 3.869s1.644 3.87 3.82 3.87ZM69.94 4.36a1.687 1.687 0 0 1-1.668-1.669c.002-.443.179-.868.491-1.18a1.662 1.662 0 0 1 2.354 0c.312.312.49.737.491 1.18 0 .895-.75 1.669-1.668 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612Zm5.635 0V.609h2.611v17.654H74.27ZM93.834 6.172h2.757l-3.797 12.092h-2.563l-2.516-8.15-2.539 8.15h-2.563L78.816 6.172h2.757l2.346 8.343 2.54-8.343h2.49l2.514 8.343 2.37-8.343ZM99.83 4.36c-.92 0-1.669-.774-1.669-1.669.002-.443.18-.868.492-1.18a1.661 1.661 0 0 1 2.354 0c.313.312.49.737.492 1.18 0 .895-.75 1.669-1.669 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612ZM110.52 5.858c2.708 0 4.643 1.838 4.643 4.982v7.423h-2.612v-7.158c0-1.838-1.064-2.804-2.708-2.804-1.717 0-3.071 1.015-3.071 3.482v6.48h-2.612V6.174h2.612V7.72c.798-1.257 2.103-1.862 3.748-1.862Zm17.024-4.522h2.612v16.927h-2.612v-1.741c-.918 1.282-2.345 2.055-4.231 2.055-3.289 0-6.022-2.78-6.022-6.36 0-3.603 2.733-6.36 6.022-6.36 1.886 0 3.313.774 4.231 2.032V1.336Zm-3.821 14.751c2.177 0 3.821-1.62 3.821-3.87 0-2.248-1.644-3.868-3.821-3.868-2.176 0-3.82 1.62-3.82 3.869s1.644 3.87 3.82 3.87Zm15.187 2.49c-3.651 0-6.384-2.78-6.384-6.36 0-3.602 2.733-6.359 6.384-6.359 2.37 0 4.426 1.233 5.393 3.12l-2.249 1.306c-.532-1.137-1.717-1.863-3.168-1.863-2.128 0-3.748 1.62-3.748 3.797 0 2.176 1.62 3.797 3.748 3.797 1.451 0 2.636-.75 3.216-1.863l2.249 1.282c-1.015 1.91-3.071 3.144-5.441 3.144Zm9.746-9.068c0 2.201 6.505.87 6.505 5.345 0 2.419-2.104 3.724-4.716 3.724-2.418 0-4.159-1.089-4.933-2.83l2.249-1.305c.387 1.088 1.355 1.74 2.684 1.74 1.161 0 2.056-.386 2.056-1.354 0-2.151-6.505-.942-6.505-5.27 0-2.274 1.959-3.701 4.425-3.701 1.983 0 3.628.92 4.474 2.515l-2.2 1.233c-.436-.943-1.283-1.378-2.274-1.378-.943 0-1.765.41-1.765 1.281Zm11.148 0c0 2.201 6.505.87 6.505 5.345 0 2.419-2.104 3.724-4.716 3.724-2.418 0-4.158-1.089-4.933-2.83l2.249-1.305c.387 1.088 1.354 1.74 2.684 1.74 1.161 0 2.056-.386 2.056-1.354 0-2.151-6.505-.942-6.505-5.27 0-2.274 1.959-3.701 4.426-3.701 1.982 0 3.627.92 4.473 2.515l-2.2 1.233c-.435-.943-1.282-1.378-2.273-1.378-.944 0-1.766.41-1.766 1.281Z"></path></svg></a><button class="flex items-center gap-0.5 rounded-2xl bg-gray-950/5 py-0.5 pr-1.5 pl-2.5 text-xs/5 font-medium text-gray-950 tabular-nums hover:bg-gray-950/7.5 data-active:bg-gray-950/7.5 dark:bg-white/10 dark:text-white dark:hover:bg-white/12.5 dark:data-active:bg-white/12.5" aria-label="Select version of library" id="headlessui-menu-button-_R_3pb5udb_" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="">v<!-- -->4.3<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4 fill-gray-400"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></div><div class="flex items-center gap-6 max-md:hidden"><button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 in-[.os-macos]:block dark:text-gray-400">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&amp;]:block dark:text-gray-400">Ctrl K</kbd></button><a class="text-sm/6 text-gray-950 dark:text-white" href="/docs">Docs</a><a class="text-sm/6 text-gray-950 dark:text-white" href="https://play.tailwindcss.com/">Play</a><a class="text-sm/6 text-gray-950 dark:text-white" href="/blog">Blog</a><a class="text-sm/6 text-gray-950 dark:text-white" href="/showcase">Showcase</a><a class="text-sm/6 text-gray-950 dark:text-white" href="/partners">Partners</a><a href="/plus?ref=top" class="group relative px-1.5 text-sm/6 text-sky-800 dark:text-sky-300"><span class="absolute inset-0 border border-dashed border-sky-300/60 bg-sky-4
4900/10 group-hover:bg-sky-400/15 dark:border-sky-300/30"></span>Plus<svg width="5" height="5" viewBox="0 0 5 5" class="absolute top-[-2px] left-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg><svg width="5" height="5" viewBox="0 0 5 5" class="absolute top-[-2px] right-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg><svg width="5" height="5" viewBox="0 0 5 5" class="absolute bottom-[-2px] left-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg><svg width="5" height="5" viewBox="0 0 5 5" class="absolute right-[-2px] bottom-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg></a><a aria-label="GitHub repository" href="https://github.com/tailwindlabs/tailwindcss"><svg viewBox="0 0 20 20" class="size-5 fill-black/40 dark:fill-gray-400"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg></a></div><div class="flex items-center gap-2.5 md:hidden"><button type="button" aria-label="Search" class="inline-grid size-7 place-items-center rounded-md"><svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg></button><button type="button" class="relative inline-grid size-7 place-items-center rounded-md text-gray-950 hover:bg-gray-950/5 dark:text-white dark:hover:bg-white/10 undefined" aria-label="Navigation"><span class="absolute top-1/2 left-1/2 size-11 -translate-1/2 pointer-fine:hidden"></span><svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg></button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></div></div><div class="flex h-14 items-center border-t border-gray-950/5 bg-white px-4 sm:px-6 lg:hidden dark:border-white/10 dark:bg-gray-950"><button type="button" class="relative inline-grid size-7 place-items-center rounded-md text-gray-950 hover:bg-gray-950/5 dark:text-white dark:hover:bg-white/10 -ml-1.5" aria-label="Open navigation menu"><span class="absolute top-1/2 left-1/2 size-11 -translate-1/2 pointer-fine:hidden"></span><svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 6.5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg></button><ol class="sticky ml-4 flex min-w-0 items-center gap-2 text-sm/6 whitespace-nowrap"><li class="flex items-center gap-2"><span class="text-gray-500 dark:text-gray-400">Getting Started</span><svg viewBox="0 0 16 16" class="size-4 fill-gray-950 dark:fill-gray-500"><path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></li><li class="truncate text-gray-950 dark:text-white">Using Vite</li></ol><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></div><div class="grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] pt-26.25 lg:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem] lg:pt-14.25 xl:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem]"><div class="relative col-start-1 row-span-full row-start-1 max-lg:hidden"><div class="absolute inset-0"><div class="sticky top-14.25 bottom-0 left-0 h-full max-h-[calc(100dvh-(var(--spacing)*14.25))] w-2xs overflow-y-auto p-6"><div><nav class="flex flex-col gap-8"><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Getting started</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" aria-current="page" type="button" data-headlessui-state="" href="/docs/installation">Installation</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/editor-setup">Editor setup</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/compatibility">Compatibility</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/upgrade-guide">Upgrade guide</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Core concepts</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/styling-with-utility-classe
49s">Styling with utility classes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/hover-focus-and-other-states">Hover, focus, and other states</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/responsive-design">Responsive design</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/dark-mode">Dark mode</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/theme">Theme variables</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/colors">Colors</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/adding-custom-styles">Adding custom styles</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/detecting-classes-in-source-files">Detecting classes in source files</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/functions-and-directives">Functions and directives</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Base styles</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/preflight">Preflight</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Layout</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/aspect-ratio">aspect-ratio</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/columns">columns</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/break-after">break-after</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/break-before">break-before</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/break-inside">break-inside</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/box-decoration-break">box-decoration-break</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/box-sizing">box-sizing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/display">display</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/float">float</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/clear">clear</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/isolation">isolation</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/object-fit">object-fit</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/object-position">object-position</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/overflow">overflow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/overscroll-behavior">overscroll-behavior</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/position">position</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/top-right-bottom-left">top / right / bottom / left</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/visibility">visibility</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/z-index">z-index</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Flexbox &amp; Grid</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/flex-basis">flex-basis</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/flex-d
49irection">flex-direction</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/flex-wrap">flex-wrap</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/flex">flex</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/flex-grow">flex-grow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/flex-shrink">flex-shrink</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/order">order</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-template-columns">grid-template-columns</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-column">grid-column</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-template-rows">grid-template-rows</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-row">grid-row</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-auto-flow">grid-auto-flow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-auto-columns">grid-auto-columns</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/grid-auto-rows">grid-auto-rows</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/gap">gap</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/justify-content">justify-content</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/justify-items">justify-items</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/justify-self">justify-self</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/align-content">align-content</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/align-items">align-items</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/align-self">align-self</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/place-content">place-content</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/place-items">place-items</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/place-self">place-self</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Spacing</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/padding">padding</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/margin">margin</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Sizing</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/width">width</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/min-width">min-width</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/max-width">max-width</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/height">height</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/min-height">min-height</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/max-height">max-height</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/inline-size">inline-size</a></li><li
49 class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/min-inline-size">min-inline-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/max-inline-size">max-inline-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/block-size">block-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/min-block-size">min-block-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/max-block-size">max-block-size</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Typography</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-family">font-family</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-size">font-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-smoothing">font-smoothing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-style">font-style</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-we
49ight">font-weight</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-stretch">font-stretch</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-variant-numeric">font-variant-numeric</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/font-feature-settings">font-feature-settings</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/letter-spacing">letter-spacing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/line-clamp">line-clamp</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/line-height">line-height</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/list-style-image">list-style-image</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/list-style-position">list-style-position</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/list-style-type">list-style-type</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-align">text-align</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/color">color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-decoration-line">text-decoration-line</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-decoration-color">text-decoration-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-decoration-style">text-decoration-style</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-decoration-thickness">text-decoration-thickness</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-underline-offset">text-underline-offset</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-transform">text-transform</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-overflow">text-overflow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-wrap">text-wrap</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-indent">text-indent</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/tab-size">tab-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/vertical-align">vertical-align</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/white-space">white-space</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/word-break">word-break</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/overflow-wrap">overflow-wrap</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/hyphens">hyphens</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/content">content</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">
49Backgrounds</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-attachment">background-attachment</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-clip">background-clip</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-color">background-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-image">background-image</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-origin">background-origin</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-position">background-position</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-repeat">background-repeat</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-size">background-size</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Borders</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/border-radius">border-radius</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/border-width">border-width</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/border-color">border-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/border-style">border-style</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/outline-width">outline-width</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/outline-color">outline-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/outline-style">outline-style</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/outline-offset">outline-offset</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Effects</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/box-shadow">
49box-shadow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/text-shadow">text-shadow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/opacity">opacity</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mix-blend-mode">mix-blend-mode</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/background-blend-mode">background-blend-mode</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-clip">mask-clip</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-composite">mask-composite</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-image">mask-image</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-mode">mask-mode</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-origin">mask-origin</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-position">mask-position</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-repeat">mask-repeat</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-size">mask-size</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/mask-type">mask-type</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Filters</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/filter">filter</a><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-transparent"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-blur">blur</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-brightness">brightness</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-contrast">contrast</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-drop-shadow">drop-shadow</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-grayscale">grayscale</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-hue-rotate">hue-rotate</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-invert">invert</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-saturate">saturate</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/filter-sepia">sepia</a></li></ul></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/backdrop-filter">backdrop-filter</a><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-transparent"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-blur">blur</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-brightness">brightness</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-contrast">contrast</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-grayscale">grayscale</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-hue-rotate">hue-rotate</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-invert">invert</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-opacity
49">opacity</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-saturate">saturate</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-8 sm:pl-7.5" type="button" data-headlessui-state="" href="/docs/backdrop-filter-sepia">sepia</a></li></ul></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Tables</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/border-collapse">border-collapse</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/border-spacing">border-spacing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/table-layout">table-layout</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/caption-side">caption-side</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Transitions &amp; Animation</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transition-property">transition-property</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transition-behavior">transition-behavior</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transition-duration">transition-duration</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transition-timing-function">transition-timing-function</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transition-delay">transition-delay</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/animation">animation</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Transforms</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/backface-visibility">backface-visibility</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/perspective">perspective</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/perspective-origin">perspective-origin</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/rotate">rotate</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scale">scale</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/skew">skew</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transform">transform</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transform-origin">transform-origin</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/transform-style">transform-style</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/translate">translate</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/zoom">zoom</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Interactivity</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/accent-color">accent-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/appearance">appearance</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/caret-color">caret-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/color-scheme">color-scheme</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/cursor">cursor</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/field-sizing">field-sizing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600
49 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/pointer-events">pointer-events</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/resize">resize</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scroll-behavior">scroll-behavior</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scrollbar-color">scrollbar-color</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scrollbar-width">scrollbar-width</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scrollbar-gutter">scrollbar-gutter</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scroll-margin">scroll-margin</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scroll-padding">scroll-padding</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scroll-snap-align">scroll-snap-align</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scroll-snap-stop">scroll-snap-stop</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/scroll-snap-type">scroll-snap-type</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/touch-action">touch-action</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/user-select">user-select</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/will-change">will-change</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">SVG</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/fill">fill</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/stroke">stroke</a></li><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/stroke-width">stroke-width</a></li></ul></div><div class="flex flex-col gap-3" data-autoscroll="true"><h3 class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">Accessibility</h3><ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]"><li class="-ml-px flex flex-col items-start gap-2"><a class="inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4" type="button" data-headlessui-state="" href="/docs/forced-color-adjust">
49forced-color-adjust</a></li></ul></div></nav></div></div></div></div><div class="col-start-2 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div><div class="relative row-start-1 grid grid-cols-subgrid bg-white lg:col-start-3 dark:bg-gray-950"><div hidden=""></div><div class="isolate mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 pt-10 md:pb-24 xl:max-w-5xl"><div class="px-4 sm:px-6"><p data-section="true" class="font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400">Installation</p><h1 class="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">Get started with Tailwind CSS</h1><p data-description="true" class="mt-6 text-base/7 text-gray-700 dark:text-gray-300">Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.</p><p class="mt-4 text-base/7 text-gray-700 dark:text-gray-300">It&#x27;s fast, flexible, and reliable — with zero-runtime.</p><div class="mt-10" data-content="true"><section class="relative mb-16"><div class="relative z-10"><h2 data-docsearch-ignore="true" class="mb-6 text-lg font-semibold tracking-tight text-gray-950 dark:text-white">Installation</h2><div class="-mx-4 mb-6 flex overflow-auto sm:-mx-6"><div class="min-w-full flex-none px-4 sm:px-6"><ul class="mb-px flex gap-x-6 border-b border-gray-950/5 whitespace-nowrap dark:border-white/10"><li><h2><a class="-mb-px flex border-b pb-2 text-sm/7 font-medium border-current text-gray-950 dark:text-white" href="/docs/installation/using-vite">Using Vite</a></h2></li><li><h2><a class="-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent text-gray-700 hover:border-gray-950/25 dark:text-gray-200 dark:hover:border-white/25" href="/docs/installation/using-postcss">Using PostCSS</a></h2></li><li><h2><a class="-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent text-gray-700 hover:border-gray-950/25 dark:text-gray-200 dark:hover:border-white/25" href="/docs/installation/tailwind-cli">Tailwind CLI</a></h2></li><li><h2><a class="-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent text-gray-700 hover:border-gray-950/25 dark:text-gray-200 dark:hover:border-white/25" href="/docs/installation/framework-guides">Framework Guides</a></h2></li><li><h2><a class="-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent text-gray-700 hover:border-gray-950/25 dark:text-gray-200 dark:hover:border-white/25" href="/docs/installation/play-cdn">Play CDN</a></h2></li></ul></div></div></div><div id="content-wrapper" class="prose relative z-10 mb-10 max-w-3xl" data-content="true"><h3 data-title="true" class="sr-only">Installing Tailwind CSS as a Vite plugin</h3><p>Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS.</p></div><div class="grid grid-cols-[auto_repeat(5,minmax(0,1fr))] gap-x-6 xl:gap-y-10"><div><div class="grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white"><div class="col-start-1 row-start-1 grid place-content-center"><div class="h-7 w-5 bg-white dark:bg-gray-950"></div></div><div class="col-start-1 row-start-1 grid place-content-center tracking-widest">01</div></div></div><div class="col-span-5 xl:col-span-2"><h4 class="mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200">Create your project</h4><div class="prose"><p>Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use<!-- --> <a href="https://vite.dev/guide/#scaffolding-your-first-vite-project">Create Vite</a>.</p></div></div><div class="col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0"><div class="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child&gt;&amp;]:rounded-t-xl in-data-stack:[:first-child&gt;&amp;]:*:rounded-t-xl in-data-stack:[:last-child&gt;&amp;]:rounded-b-xl in-data-stack:[:last-child&gt;&amp;]:*:rounded-b-xl"><div class="rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">Terminal</div><button class="flex size-8 items-center justify-center absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75" title="Copy to clipboard"><div class="grid size-4"><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current text-sky-400 transition-opacity duration-300 ease-in-out opacity-0"><path stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5L7.5 12.5L12.5 3.5"></path></svg><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current transition-opacity duration-300 ease-in-out"><path d="M5.5 2.5V2.5C5.5 3.05228 5.94772 3.5 6.5 3.5H9.5C10.0523 3.5 10.5 3.05228 10.5 2.5V2.5M5.5 2.5V2.5C5.5 1.94772 5.94772 1.5 6.5 1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V2.5M5.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V12.5C2.5 13.6046 3.39543 14.5 4.5 14.5H11.5C12.6046 14.5 13.5 13.6046 13.5 12.5V4.5C13.5 3.39543 12.6046 2.5 11.5 2.5H10.5"></path></svg></div></button></div><div class="*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-pink-400)">npm</span><span style="color:var(--color-sky-300)"> create</span><span style="color:var(--color-sky-300)"> vite@latest</span><span style="color:var(--color-sky-300)"> my-project</span></span><span class="line"><span style="color:var(--color-violet-300)">cd</span><span style="color:var(--color-sky-300)"> my-project</span></span></code></pre></div></div></div></div><div><div class="grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white"><div class="col-start-1 row-start-1 grid place-content-center"><div class="h-7 w-5 bg-white dark:bg-gray-950"></div></div><div class="col-start-1 row-start-1 grid place-content-center tracking-widest">02</div></div></div><div class="col-span-5 xl:col-span-2"><h4 class="mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200">Install Tailwind CSS</h4><div class="prose"><p>Install <code>tailwindcss</code> and <code>@tailwindcss/vite</code> via npm.</p></div></div><div class="col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0"><div class="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child&gt;&amp;]:rounded-t-xl in-data-stack:[:first-child&gt;&amp;]:*:rounded-t-xl in-data-stack:[:last-child&gt;&amp;]:rounded-b-xl in-data-stack:[:last-child&gt;&amp;]:*:rounded-b-xl"><div class="rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">Terminal</div><button class="flex size-8 items-center justify-center absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75" title="Copy to clipboard"><div class="grid size-4"><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current text-sky-400 transition-opacity duration-300 ease-in-out opacity-0"><path stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5L7.5 12.5L12.5 3.5"></path></svg><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current transition-opacity duration-300 ease-in-out"><path d="M5.5 2.5V2.5C5.5 3.05228 5.94772 3.5 6.5 3.5H9.5C10.0523 3.5 10.5 3.05228 10.5 2.5V2.5M5.5 2.5V2.5C5.5 1.94772 5.94772 1.5 6.5 1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V2.5M5.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V12.5C2.5 13.6046 3.39543 14.5 4.5 14.5H11.5C12.6046 14.5 13.5 13.6046 13.5 12.5V4.5C13.5 3.39543 12.6046 2.5 11.5 2.5H10.5"></path></svg></div></button></div><div class="*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-pink-400)">npm</span><span style="color:var(--color-sky-300)"> install</span><span style="color:var(--color-sky-300)"> tailwindcss</span><span style="color:var(--color-sky-300)"> @tailwindcss/vite</span></span></code></pre></div></div></div></div><div><div class="grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white"><div class="col-start-1 row-start-1 grid place-content-center"><div class="h-7 w-5 bg-white dark:bg-gray-950"></div></div><div class="col-start-1 row-start-1 grid place-content-center tracking-widest">03</div></div></div><div class="col-span-5 xl:col-span-2"><h4 class="mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200">Configure the Vite plugin</h4><div class="prose"><p>Add the <code>@tailwindcss/vite</code> plugin to your Vite configuration.</p></div></div><div class="col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0"><div class="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child&gt;&amp;]:rounded-t-xl in-data-stack:[:first-child&gt;&amp;]:*:rounded-t-xl in-data-stack:[:last-child&gt;&amp;]:rounded-b-xl in-data-stack:[:last-child&gt;&amp;]:*:rounded-b-xl"><div class="rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">vite.config.ts</div><button class="flex size-8 items-center justify-center absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75" title="Copy to clipboard"><div class="grid size-4"><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current text-sky-400 transition-opacity duration-300 ease-in-out opacity-0"><path stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5L7.5 12.5L12.5 3.5"></path></svg><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current transition-opacity duration-300 ease-in-out"><path d="M5.5 2.5V2.5C5.5 3.05228 5.94772 3.5 6.5 3.5H9.5C10.0523 3.5 10.5 3.05228 10.5 2.5V2.5M5.5 2.5V2.5C5.5 1.94772 5.94772 1.5 6.5 1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V2.5M5.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V12.5C2.5 13.6046 3.39543 14.5 4.5 14.5H11.5C12.6046 14.5 13.5 13.6046 13.5 12.5V4.5C13.5 3.39543 12.6046 2.5 11.5 2.5H10.5"></path></svg></div></button></div><div class="*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme has-highlighted" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-slate-300)">
49import</span><span style="color:var(--color-slate-300)"> {</span><span style="color:var(--color-sky-300)"> defineConfig</span><span style="color:var(--color-slate-300)"> }</span><span style="color:var(--color-slate-300)"> from</span><span style="color:var(--color-slate-200)"> 'vite'</span></span><span class="line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15"><span style="color:var(--color-slate-300)">import</span><span style="color:var(--color-sky-300)"> tailwindcss</span><span style="color:var(--color-slate-300)"> from</span><span style="color:var(--color-slate-200)"> '@tailwindcss/vite'</span></span><span class="line"></span><span class="line"><span style="color:var(--color-violet-300)">export</span><span style="color:var(--color-violet-300)"> default</span><span style="color:var(--color-teal-200)"> defineConfig</span><span style="color:var(--color-slate-50)">(</span><span style="color:var(--color-slate-400)">{</span></span><span class="line"><span style="color:var(--color-slate-50)">  plugins</span><span style="color:var(--color-slate-400)">:</span><span style="color:var(--color-slate-50)"> [</span></span><span class="line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15"><span style="color:var(--color-teal-200)">    tailwindcss</span><span style="color:var(--color-slate-50)">()</span><span style="color:var(--color-slate-400)">,</span></span><span class="line"><span style="color:var(--color-slate-50)">  ]</span><span style="color:var(--color-slate-400)">,</span></span><span class="line"><span style="color:var(--color-slate-400)">}</span><span style="color:var(--color-slate-50)">)</span></span></code></pre></div></div></div></div><div><div class="grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white"><div class="col-start-1 row-start-1 grid place-content-center"><div class="h-7 w-5 bg-white dark:bg-gray-950"></div></div><div class="col-start-1 row-start-1 grid place-content-center tracking-widest">04</div></div></div><div class="col-span-5 xl:col-span-2"><h4 class="mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200">Import Tailwind CSS</h4><div class="prose"><p>Add an <code>@import</code> to your CSS file that imports Tailwind CSS.</p></div></div><div class="col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0"><div class="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child&gt;&amp;]:rounded-t-xl in-data-stack:[:first-child&gt;&amp;]:*:rounded-t-xl in-data-stack:[:last-child&gt;&amp;]:rounded-b-xl in-data-stack:[:last-child&gt;&amp;]:*:rounded-b-xl"><div class="rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">CSS</div><button class="flex size-8 items-center justify-center absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75" title="Copy to clipboard"><div class="grid size-4"><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current text-sky-400 transition-opacity duration-300 ease-in-out opacity-0"><path stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5L7.5 12.5L12.5 3.5"></path></svg><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current transition-opacity duration-300 ease-in-out"><path d="M5.5 2.5V2.5C5.5 3.05228 5.94772 3.5 6.5 3.5H9.5C10.0523 3.5 10.5 3.05228 10.5 2.5V2.5M5.5 2.5V2.5C5.5 1.94772 5.94772 1.5 6.5 1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V2.5M5.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V12.5C2.5 13.6046 3.39543 14.5 4.5 14.5H11.5C12.6046 14.5 13.5 13.6046 13.5 12.5V4.5C13.5 3.39543 12.6046 2.5 11.5 2.5H10.5"></path></svg></div></button></div><div class="*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-slate-300)">
49@import</span><span style="color:var(--color-sky-300)"> "tailwindcss"</span><span style="color:var(--color-slate-300)">;</span></span></code></pre></div></div></div></div><div><div class="grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white"><div class="col-start-1 row-start-1 grid place-content-center"><div class="h-7 w-5 bg-white dark:bg-gray-950"></div></div><div class="col-start-1 row-start-1 grid place-content-center tracking-widest">05</div></div></div><div class="col-span-5 xl:col-span-2"><h4 class="mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200">Start your build process</h4><div class="prose"><p>Run your build process with <code>npm run dev</code> or whatever command is configured in your<!-- --> <code>package.json</code> file.</p></div></div><div class="col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0"><div class="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child&gt;&amp;]:rounded-t-xl in-data-stack:[:first-child&gt;&amp;]:*:rounded-t-xl in-data-stack:[:last-child&gt;&amp;]:rounded-b-xl in-data-stack:[:last-child&gt;&amp;]:*:rounded-b-xl"><div class="rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">Terminal</div><button class="flex size-8 items-center justify-center absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75" title="Copy to clipboard"><div class="grid size-4"><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current text-sky-400 transition-opacity duration-300 ease-in-out opacity-0"><path stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5L7.5 12.5L12.5 3.5"></path></svg><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current transition-opacity duration-300 ease-in-out"><path d="M5.5 2.5V2.5C5.5 3.05228 5.94772 3.5 6.5 3.5H9.5C10.0523 3.5 10.5 3.05228 10.5 2.5V2.5M5.5 2.5V2.5C5.5 1.94772 5.94772 1.5 6.5 1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V2.5M5.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V12.5C2.5 13.6046 3.39543 14.5 4.5 14.5H11.5C12.6046 14.5 13.5 13.6046 13.5 12.5V4.5C13.5 3.39543 12.6046 2.5 11.5 2.5H10.5"></path></svg></div></button></div><div class="*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-pink-400)">npm</span><span style="color:var(--color-sky-300)"> run</span><span style="color:var(--color-sky-300)"> dev</span></span></code></pre></div></div></div></div><div><div class="grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white"><div class="col-start-1 row-start-1 grid place-content-center"><div class="h-7 w-5 bg-white dark:bg-gray-950"></div></div><div class="col-start-1 row-start-1 grid place-content-center tracking-widest">06</div></div></div><div class="col-span-5 xl:col-span-2"><h4 class="mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200">Start using Tailwind in your HTML</h4><div class="prose"><p>Make sure your compiled CSS is included in the <code>&lt;head&gt;</code> <em>(your framework might handle this for you)</em>, then start using Tailwind’s utility classes to style your content.</p></div></div><div class="col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0"><div class="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child&gt;&amp;]:rounded-t-xl in-data-stack:[:first-child&gt;&amp;]:*:rounded-t-xl in-data-stack:[:last-child&gt;&amp;]:rounded-b-xl in-data-stack:[:last-child&gt;&amp;]:*:rounded-b-xl"><div class="rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">HTML</div><button class="flex size-8 items-center justify-center absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75" title="Copy to clipboard"><div class="grid size-4"><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current text-sky-400 transition-opacity duration-300 ease-in-out opacity-0"><path stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5L7.5 12.5L12.5 3.5"></path></svg><svg viewBox="0 0 16 16" stroke-width="1" class="col-start-1 row-start-1 fill-none stroke-current transition-opacity duration-300 ease-in-out"><path d="M5.5 2.5V2.5C5.5 3.05228 5.94772 3.5 6.5 3.5H9.5C10.0523 3.5 10.5 3.05228 10.5 2.5V2.5M5.5 2.5V2.5C5.5 1.94772 5.94772 1.5 6.5 1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V2.5M5.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V12.5C2.5 13.6046 3.39543 14.5 4.5 14.5H11.5C12.6046 14.5 13.5 13.6046 13.5 12.5V4.5C13.5 3.39543 12.6046 2.5 11.5 2.5H10.5"></path></svg></div></button></div><div class="*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme has-highlighted" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-slate-400)">&#x3C;!</span><span style="color:var(--color-pink-400)">doctype</span><span style="color:var(--color-slate-300)"> html</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;</span><span style="color:var(--color-pink-400)">html</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;</span><span style="color:var(--color-pink-400)">head</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">  &#x3C;</span><span style="color:var(--color-pink-400)">meta</span><span style="color:var(--color-slate-300)"> charset</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"UTF-8"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">  &#x3C;</span><span style="color:var(--color-pink-400)">meta</span><span style="color:var(--color-slate-300)"> name</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"viewport"</span><span style="color:var(--color-slate-300)"> content</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"width=device-width, initial-scale=1.0"</span><span style="color:var(--color-slate-400)">></span></span><span class="line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15"><span style="color:var(--color-slate-400)">  &#x3C;</span><span style="color:var(--color-pink-400)">link</span><span style="color:var(--color-slate-300)"> href</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/src/style.css"</span><span style="color:var(--color-slate-300)"> rel</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"stylesheet"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">head</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;</span><span style="color:var(--color-pink-400)">body</span><span style="color:var(--color-slate-400)">></span></span><span class="line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15"><span style="color:var(--color-slate-400)">  &#x3C;</span><span style="color:var(--color-pink-400)">h1</span><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"text-3xl font-bold underline"</span><span style="color:var(--color-slate-400)">></span></span><span class="line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15"><span style="color:var(--color-slate-50)">    Hello world!</span></span><span class="line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15"><span style="color:var(--color-slate-400)">  &#x3C;/</span><span style="color:var(--color-pink-400)">h1</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">body</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">html</span><span style="color:var(--color-slate-400)">></span></span></code></pre></div></div></div></div></div><div class="my-4 md:my-16"><div class="grid grid-cols-[auto_1fr_auto] gap-3 gap-y-6 rounded-xl p-6 ring-1 ring-gray-950/10 dark:ring-white/10"><div><svg width="22" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="fill-gray-950/5 dark:fill-white/5" cx="11" cy="14" r="11"></circle><circle class="stroke-gray-950/25 dark:stroke-white/25" cx="11" cy="14" r="10.5"></circle><path class="stroke-gray-950 dark:stroke-white" d="m12.5 19-1.011.337a1 1 0 0 1-1.253-1.3l1.528-4.074a1 1 0 0 0-1.253-1.3L9.5 13" stroke-linecap="round"></path><path class="stroke-gray-950 dark:stroke-white" d="M12 9a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"></path></svg></div><div class="col-span-2 xl:col-span-1"><span class="prose"><strong class="font-semibold text-gray-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind with Vite can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup.</span></div>
49<div class="col-span-full place-self-center xl:col-span-1"><a class="rounded-full bg-gray-950/5 px-4 py-2 text-sm/7 font-semibold text-gray-700 dark:bg-white/10 dark:text-white/75" href="/docs/installation/framework-guides">Explore our framework guides</a></div></div></div><!--$--><!--/$--></section></div></div></div></div><div class="col-start-4 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div><div class="col-span-full col-start-2 row-start-2 h-px bg-gray-950/5 dark:bg-white/10"></div><div class="row-start-3 lg:col-start-3"><footer class="bg-white text-sm/loose text-gray-950 dark:bg-gray-950 dark:text-white"><div class="flex gap-4 p-4 md:hidden max-w-2xl lg:max-w-5xl"><div class="flex flex-1 flex-col gap-10"><div><h3 class="font-semibold">Tailwind CSS</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="/docs">Documentation</a></li><li><a class="hover:underline" href="https://play.tailwindcss.com/">Playground</a></li><li><a class="hover:underline" href="/blog">Blog</a></li><li><a class="hover:underline" href="/showcase">Showcase</a></li></ul></div><div><h3 class="font-semibold">Resources</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://www.refactoringui.com">Refactoring UI</a></li><li><a class="hover:underline" href="https://headlessui.com">Headless UI</a></li><li><a class="hover:underline" href="https://heroicons.com">Heroicons</a></li><li><a class="hover:underline" href="https://heropatterns.com">Hero Patterns</a></li></ul></div></div><div class="flex flex-1 flex-col gap-10"><div><h3 class="font-semibold">Community</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://github.com/tailwindlabs/tailwindcss">GitHub</a></li><li><a class="hover:underline" href="https://x.com/tailwindcss">X</a></li></ul></div></div></div><div class="mx-auto hidden w-full grid-cols-3 justify-between gap-y-0 md:grid md:grid-cols-3 md:gap-6 md:gap-x-4 lg:gap-8 max-w-2xl lg:max-w-5xl"><div class="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10"><h3 class="font-semibold">Tailwind CSS</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="/docs">Documentation</a></li><li><a class="hover:underline" href="https://play.tailwindcss.com/">Playground</a></li><li><a class="hover:underline" href="/blog">Blog</a></li><li><a class="hover:underline" href="/showcase">Showcase</a></li></ul></div><div class="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 sm:border-b-0 dark:border-white/10"><h3 class="font-semibold">Resources</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://www.refactoringui.com">Refactoring UI</a></li><li><a class="hover:underline" href="https://headlessui.com">Headless UI</a></li><li><a class="hover:underline" href="https://heroicons.com">Heroicons</a></li><li><a class="hover:underline" href="https://heropatterns.com">Hero Patterns</a></li></ul></div><div class="border-x border-gray-950/5 py-10 pl-2 not-md:border-0 dark:border-white/10"><h3 class="font-semibold">Community</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://github.com/tailwindlabs/tailwindcss">GitHub</a></li><li><a class="hover:underline" href="https://x.com/tailwindcss">X</a></li></ul></div></div></footer></div><div class="col-span-full col-start-2 row-start-4 h-px bg-gray-950/5 dark:bg-white/10"></div><div class="row-start-5 grid lg:col-start-3"><div class="px-2 pt-10 pb-24"><div class="mx-auto flex w-full flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between sm:gap-8 max-w-2xl lg:max-w-5xl"><div class="relative z-0 inline-grid grid-cols-3 gap-0.5 rounded-full bg-gray-950/5 p-0.75 text-gray-950 dark:bg-white/10 dark:text-white" id="headlessui-radiogroup-_R_655udb_" role="radiogroup"><span class="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent" aria-label="System theme" id="headlessui-radio-_R_6m55udb_" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state=""><svg viewBox="0 0 28 28" fill="none"><path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V16.5C20.5 17.0523 20.0523 17.5 19.5 17.5H8.5C7.94772 17.5 7.5 17.0523 7.5 16.5V8.5Z" stroke="currentColor"></path><path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H8.5C7.94772 15.5 7.5 15.0523 7.5 14.5V8.5Z" stroke="currentColor"></path>
49<path d="M16.5 20.5V17.5H11.5V20.5M16.5 20.5H11.5M16.5 20.5H17.5M11.5 20.5H10.5" stroke="currentColor" stroke-linecap="round"></path></svg></span><span class="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent" aria-label="Light theme" id="headlessui-radio-_R_am55udb_" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state=""><svg viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="3.5" stroke="currentColor"></circle><path d="M14 8.5V6.5" stroke="currentColor" stroke-linecap="round"></path><path d="M17.889 10.1115L19.3032 8.69727" stroke="currentColor" stroke-linecap="round"></path><path d="M19.5 14L21.5 14" stroke="currentColor" stroke-linecap="round"></path><path d="M17.889 17.8885L19.3032 19.3027" stroke="currentColor" stroke-linecap="round"></path><path d="M14 21.5V19.5" stroke="currentColor" stroke-linecap="round"></path><path d="M8.69663 19.3029L10.1108 17.8887" stroke="currentColor" stroke-linecap="round"></path><path d="M6.5 14L8.5 14" stroke="currentColor" stroke-linecap="round"></path><path d="M8.69663 8.69711L10.1108 10.1113" stroke="currentColor" stroke-linecap="round"></path></svg></span><span class="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent" aria-label="Dark theme" id="headlessui-radio-_R_em55udb_" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state=""><svg viewBox="0 0 28 28" fill="none"><path d="M10.5 9.99914C10.5 14.1413 13.8579 17.4991 18 17.4991C19.0332 17.4991 20.0176 17.2902 20.9132 16.9123C19.7761 19.6075 17.109 21.4991 14 21.4991C9.85786 21.4991 6.5 18.1413 6.5 13.9991C6.5 10.8902 8.39167 8.22304 11.0868 7.08594C10.7089 7.98159 10.5 8.96597 10.5 9.99914Z" stroke="currentColor" stroke-linejoin="round"></path><path d="M16.3561 6.50754L16.5 5.5L16.6439 6.50754C16.7068 6.94752 17.0525 7.29321 17.4925 7.35607L18.5 7.5L17.4925 7.64393C17.0525 7.70679 16.7068 8.05248 16.6439 8.49246L16.5 9.5L16.3561 8.49246C16.2932 8.05248 15.9475 7.70679 15.5075 7.64393L14.5 7.5L15.5075 7.35607C15.9475 7.29321 16.2932 6.94752 16.3561 6.50754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.3561 11.5075L20.5 10.5L20.6439 11.5075C20.7068 11.9475 21.0525 12.2932 21.4925 12.3561L22.5 12.5L21.4925 12.6439C21.0525 12.7068 20.7068 13.0525 20.6439 13.4925L20.5 14.5L20.3561 13.4925C20.2932 13.0525 19.9475 12.7068 19.5075 12.6439L18.5 12.5L19.5075 12.3561C19.9475 12.2932 20.2932 11.9475 20.3561 11.5075Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></div><div class="flex flex-col gap-4 text-sm/6 text-gray-700 sm:flex-row sm:gap-2 sm:pr-4 dark:text-gray-400"><span>Copyright © <!-- -->2026<!-- --> Tailwind Labs Inc.</span><span class="max-sm:hidden">·</span><a class="hover:underline" href="/brand">Trademark Policy</a></div></div></div></div></div></div></div>
49<script src="/_next/static/chunks/08gyl.us_fmj7.js" id="_R_" async=""></script>
49<script>(self.__next_f=self.__next_f||[]).push([0])</script>
49<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n4:I[709333,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"default\"]\n5:I[212204,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"default\"]\n6:I[345374,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\",\"/_next/static/chunks/0qdme1q3zt0a3.js\"],\"TabBar\"]\n12:I[997796,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/017r-ibrf-le-.css\",\"style\"]\n:HL[\"/_next/static/chunks/0n9_1tq74i09x.css\",\"style\"]\n:HL[\"/_next/static/media/IBMPlexMono_Italic-s.p.15oe4fv9
49c-bbx.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_Medium-s.p.1415hm2grr_xe.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_MediumItalic-s.p.0i6~4uf_-vfrr.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_Regular-s.p.182ynbf68e-7x.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_SemiBold-s.p.0ruh16q_m63mu.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_SemiBoldItalic-s.p.0.skgl0kdzuzk.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/InterVariable-s.p.0r27kd5h06n72.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/InterVariable_Italic-s.p.0lyls.rsx6v21.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/SourceSansPro_Regular_ttf-s.p.0~_u57fu-gtq..woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/Ubuntu_Mono_bold-s.p.0_c25cd9jck4l.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
49<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"docs\",\"installation\",\"using-vite\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(docs)\",{\"children\":[\"docs\",{\"children\":[\"installation\",{\"children\":[\"(tabs)\",{\"children\":[\"using-vite\",{\"children\":[\"__PAGE__\",{}]}]}]}]}],\"breadcrumb\":[\"(__SLOT__)\",{\"children\":[\"docs\",{\"children\":[\"installation\",{\"children\":[\"using-vite\",{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/017r-ibrf-le-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0n9_1tq74i09x.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0y97be86sc~2s.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/17o076c4jq00a.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0wixf9kntow24.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/14npz~h5j0o4o.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/03qg92y~mksg7.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0eift~.g6ajk7.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L3\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0qdme1q3zt0a3.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[[\"$\",\"div\",null,{\"hidden\":true}],[\"$\",\"div\",null,{\"className\":\"isolate mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 pt-10 md:pb-24 xl:max-w-5xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-4 sm:px-6\",\"children\":[[\"$\",\"p\",null,{\"data-section\":\"true\",\"className\":\"font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400\",\"children\":\"Installation\"}],[\"$\",\"h1\",null,{\"className\":\"mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white\",\"children\":\"Get started with Tailwind CSS\"}],[\"$\",\"p\",null,{\"data-description\":\"true\",\"className\":\"mt-6 text-base/7 text-gray-700 dark:text-gray-300\",\"children\":\"Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.\"}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-base/7 text-gray-700 dark:text-gray-300\",\"children\":\"It's fast, flexible, and reliable — with zero-runtime.\"}],[\"$\",\"div\",null,{\"className\":\"mt-10\",\"data-content\":\"true\",\"children\":[\"$\",\"section\",null,{\"className\":\"relative mb-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative z-10\",\"children\":[[\"$\",\"h2\",null,{\"data-docsearch-ignore\":true,\"className\":\"mb-6 text-lg font-semibold tracking-tight text-gray-950 dark:text-white\",\"children\":\"Installation\"}],[\"$\",\"$L6\",null,{\"tabs\":[{\"title\":\"Using Vite\",\"url\":\"/docs/installation/using-vite\"},{\"title\":\"Using PostCSS\",\"url\":\"/docs/installation/using-postcss\"},{\"title\":\"Tailwind CLI\",\"url\":\"/docs/installation/tailwind-cli\"},{\"title\":\"Framework Guides\",\"url\":\"/docs/installation/framework-guides\"}
49,{\"title\":\"Play CDN\",\"url\":\"/docs/installation/play-cdn\"}]}]]}],[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]]}]}]]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"div\",null,{\"id\":\"content-wrapper\",\"className\":\"prose relative z-10 mb-10 max-w-3xl\",\"data-content\":\"true\",\"children\":[[\"$\",\"h3\",null,{\"data-title\":\"true\",\"className\":\"sr-only\",\"children\":\"Installing Tailwind CSS as a Vite plugin\"}],[\"$\",\"p\",null,{\"children\":\"Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS.\"}]]}],\"$L7\",\"$L8\"],[\"$L9\"],\"$La\"]}],{},null,false,null]},null,false,\"$@b\"]},null,false,null]},null,false,\"$@b\"]},null,false,\"$@b\"],\"breadcrumb\":[\"$Lc\",{\"children\":[\"$Ld\",{\"children\":[\"$Le\",{\"children\":[\"$Lf\",{\"children\":[\"$L10\",{},null,false,null]},null,false,\"$@b\"]},null,false,\"$@b\"]},null,false,\"$@b\"]},null,false,\"$@b\"]},null,false,null]},null,false,null],\"$L11\",false]],\"m\":\"$undefined\",\"G\":[\"$12\",[\"$L13\",\"$L14\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"oreTmKGMJFJR50w-mKXTh\"}\n"])</script>
49<script>self.__next_f.push([1,"1c:I[192995,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\",\"/_next/static/chunks/0qdme1q3zt0a3.js\",\"/_next/static/chunks/122cqq07nrvzt.js\"],\"\"]\n1d:I[196078,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"OutletBoundary\"]\n1e:\"$Sreact.suspense\"\n21:I[196078,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"ViewportBoundary\"]\n23:I[196078,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"MetadataBoundary\"]\n26:I[591993,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"\"]\n29:I[8939
4963,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\"],\"Header\"]\n2a:I[530326,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\"],\"MobileNav\"]\n2b:I[120673,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\"],\"DocsSidebarLink\"]\n"])</script>
49<script>self.__next_f.push([1,"7:[\"$\",\"div\",null,{\"className\":\"grid grid-cols-[auto_repeat(5,minmax(0,1fr))] gap-x-6 xl:gap-y-10\",\"children\":[[\"$\",\"$1\",\"0\",{\"children\":[[\"$\",\"div\",null,{\"data-tabs\":null,\"children\":[\"$\",\"div\",null,{\"className\":\"grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-7 w-5 bg-white dark:bg-gray-950\"}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center tracking-widest\",\"children\":\"01\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-5 xl:col-span-2\",\"data-tabs\":null,\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200\",\"children\":\"Create your project\"}],[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use\",\" \",[\"$\",\"a\",null,{\"href\":\"https://vite.dev/guide/#scaffolding-your-first-vite-project\",\"children\":\"Create Vite\"}],\".\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0\",\"data-tabs\":null,\"children\":\"$L15\"}]]}],[\"$\",\"$1\",\"1\",{\"children\":[[\"$\",\"div\",null,{\"data-tabs\":null,\"children\":[\"$\",\"div\",null,{\"className\":\"grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-7 w-5 bg-white dark:bg-gray-950\"}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center tracking-widest\",\"children\":\"02\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-5 xl:col-span-2\",\"data-tabs\":null,\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200\",\"children\":\"Install Tailwind CSS\"}],[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Install \",[\"$\",\"code\",null,{\"children\":\"tailwindcss\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"@tailwindcss/vite\"}],\" via npm.\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0\",\"data-tabs\":null,\"children\":\"$L16\"}]]}],[\"$\",\"$1\",\"2\",{\"children\":[[\"$\",\"div\",null,{\"data-tabs\":null,\"children\":[\"$\",\"div\",null,{\"className\":\"grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-7 w-5 bg-white dark:bg-gray-950\"}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center tracking-widest\",\"children\":\"03\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-5 xl:col-span-2\",\"data-tabs\":null,\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200\",\"children\":\"Configure the Vite plugin\"}],[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Add the \",[\"$\",\"code\",null,{\"children\":\"@tailwindcss/vite\"}],\" plugin to your Vite configuration.\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0\",\"data-tabs\":null,\"children\":\"$L17\"}]]}],[\"$\",\"$1\",\"3\",{\"children\":[[\"$\",\"div\",null,{\"data-tabs\":null,\"children\":[\"$\",\"div\",null,{\"className\":\"grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-7 w-5 bg-white dark:bg-gray-950\"}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center tracking-widest\",\"children\":\"04\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-5 xl:col-span-2\",\"data-tabs\":null,\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200\",\"children\":\"Import Tailwind CSS\"}],\"$L18\"]}],\"$L19\"]}],\"$L1a\",\"$L1b\"]}]\n"])</script>
49<script>self.__next_f.push([1,"8:[\"$\",\"div\",null,{\"className\":\"my-4 md:my-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid grid-cols-[auto_1fr_auto] gap-3 gap-y-6 rounded-xl p-6 ring-1 ring-gray-950/10 dark:ring-white/10\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"svg\",null,{\"width\":22,\"height\":28,\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"circle\",null,{\"className\":\"fill-gray-950/5 dark:fill-white/5\",\"cx\":11,\"cy\":14,\"r\":11}],[\"$\",\"circle\",null,{\"className\":\"stroke-gray-950/25 dark:stroke-white/25\",\"cx\":11,\"cy\":14,\"r\":\"10.5\"}],[\"$\",\"path\",null,{\"className\":\"stroke-gray-950 dark:stroke-white\",\"d\":\"m12.5 19-1.011.337a1 1 0 0 1-1.253-1.3l1.528-4.074a1 1 0 0 0-1.253-1.3L9.5 13\",\"strokeLinecap\":\"round\"}],[\"$\",\"path\",null,{\"className\":\"stroke-gray-950 dark:stroke-white\",\"d\":\"M12 9a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-2 xl:col-span-1\",\"children\":[\"$\",\"span\",null,{\"className\":\"prose\",\"children\":[[\"$\",\"strong\",null,{\"className\":\"font-semibold text-gray-950 dark:text-white\",\"children\":\"Are you stuck?\"}],\" Setting up Tailwind with Vite can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup.\"]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-full place-self-center xl:col-span-1\",\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/docs/installation/framework-guides\",\"className\":\"rounded-full bg-gray-950/5 px-4 py-2 text-sm/7 font-semibold text-gray-700 dark:bg-white/10 dark:text-white/75\",\"children\":\"Explore our framework guides\"}]}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"9:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/122cqq07nrvzt.js\",\"async\":true,\"nonce\":\"$undefined\"}]\na:[\"$\",\"$L1d\",null,{\"children\":[\"$\",\"$1e\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@1f\"}]}]\n20:[]\nb:\"$W20\"\nc:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nd:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\ne:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nf:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n10:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"ol\",null,{\"className\":\"sticky ml-4 flex min-w-0 items-center gap-2 text-sm/6 whitespace-nowrap\",\"children\":[[\"$\",\"li\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400\",\"children\":\"Getting Started\"}],[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"className\":\"size-4 fill-gray-950 dark:fill-gray-500\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"li\",null,{\"className\":\"truncate text-gray-950 dark:text-white\",\"children\":\"Using Vite\"}]]}],null,null]}]\n11:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L21\",null,{\"children\":\"$L22\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L23\",null,{\"children\":[\"$\",\"$1e\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L24\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n13:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/017r-ibrf-le-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n14:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0n9_1tq74i09x.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n25:T5d9,"])</script>
49<script>self.__next_f.push([1,"\n  if (!('_updateTheme' in window)) {\n    window._updateTheme = function updateTheme(theme) {\n      let classList = document.documentElement.classList;\n\n      classList.remove(\"light\", \"dark\", \"system\");\n      document.querySelectorAll('meta[name=\"theme-color\"]').forEach(el =\u003e el.remove())\n      if (theme === 'dark') {\n        classList.add('dark')\n\n        let meta = document.createElement('meta')\n        meta.name = 'theme-color'\n        meta.content = 'oklch(.13 .028 261.692)'\n        document.head.appendChild(meta)\n      } else if (theme === 'light') {\n        classList.add('light')\n\n        let meta = document.createElement('meta')\n        meta.name = 'theme-color'\n        meta.content = 'white'\n        document.head.appendChild(meta)\n      } else {\n        classList.add('system')\n\n        let meta1 = document.createElement('meta')\n        meta1.name = 'theme-color'\n        meta1.content = 'oklch(.13 .028 261.692)'\n        meta1.media = '(prefers-color-scheme: dark)'\n        document.head.appendChild(meta1)\n\n        let meta2 = document.createElement('meta')\n        meta2.name = 'theme-color'\n        meta2.content = 'white'\n        meta2.media = '(prefers-color-scheme: light)'\n        document.head.appendChild(meta2)\n      }\n    }\n\n    try {\n      _updateTheme(localStorage.currentTheme)\n    } catch (_) {}\n\n    try {\n      if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n        document.documentElement.classList.add('os-macos')\n      }\n    } catch (_) {}\n  }\n"])</script>
49<script>self.__next_f.push([1,"27:T7e8,"])</script>
49<script>self.__next_f.push([1,"data:text/javascript;base64,CiAgaWYgKCEoJ191cGRhdGVUaGVtZScgaW4gd2luZG93KSkgewogICAgd2luZG93Ll91cGRhdGVUaGVtZSA9IGZ1bmN0aW9uIHVwZGF0ZVRoZW1lKHRoZW1lKSB7CiAgICAgIGxldCBjbGFzc0xpc3QgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0OwoKICAgICAgY2xhc3NMaXN0LnJlbW92ZSgibGlnaHQiLCAiZGFyayIsICJzeXN0ZW0iKTsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnbWV0YVtuYW1lPSJ0aGVtZS1jb2xvciJdJykuZm9yRWFjaChlbCA9PiBlbC5yZW1vdmUoKSkKICAgICAgaWYgKHRoZW1lID09PSAnZGFyaycpIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdkYXJrJykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ29rbGNoKC4xMyAuMDI4IDI2MS42OTIpJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIGlmICh0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgIGNsYXNzTGlzdC5hZGQoJ2xpZ2h0JykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ3doaXRlJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdzeXN0ZW0nKQoKICAgICAgICBsZXQgbWV0YTEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMS5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGExLmNvbnRlbnQgPSAnb2tsY2goLjEzIC4wMjggMjYxLjY5MiknCiAgICAgICAgbWV0YTEubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScKICAgICAgICBkb2
49N1bWVudC5oZWFkLmFwcGVuZENoaWxkKG1ldGExKQoKICAgICAgICBsZXQgbWV0YTIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMi5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGEyLmNvbnRlbnQgPSAnd2hpdGUnCiAgICAgICAgbWV0YTIubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCknCiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChtZXRhMikKICAgICAgfQogICAgfQoKICAgIHRyeSB7CiAgICAgIF91cGRhdGVUaGVtZShsb2NhbFN0b3JhZ2UuY3VycmVudFRoZW1lKQogICAgfSBjYXRjaCAoXykge30KCiAgICB0cnkgewogICAgICBpZiAoLyhNYWN8aVBob25lfGlQb2R8aVBhZCkvaS50ZXN0KG5hdmlnYXRvci5wbGF0Zm9ybSkpIHsKICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnb3MtbWFjb3MnKQogICAgICB9CiAgICB9IGNhdGNoIChfKSB7fQogIH0K"])</script>
49<script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"inter_6a166f28-module__775SPq__variable plexmono_ffb312b5-module__CmrMxG__variable source_91931b22-module__FtvGhG__variable ubuntumono_2a4826b0-module__yzkUma__variable antialiased dark:bg-gray-950\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"sizes\":\"180x180\",\"href\":\"/favicons/apple-touch-icon.png?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"32x32\",\"href\":\"/favicons/favicon-32x32.png?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"16x16\",\"href\":\"/favicons/favicon-16x16.png?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/favicons/site.webmanifest?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"mask-icon\",\"href\":\"/favicons/safari-pinned-tab.svg?v=4\",\"color\":\"#38bdf8\"}],[\"$\",\"link\",null,{\"rel\":\"shortcut icon\",\"href\":\"/favicons/favicon.ico?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"title\":\"RSS 2.0\",\"href\":\"/feeds/feed.xml\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/atom+xml\",\"title\":\"Atom 1.0\",\"href\":\"/feeds/atom.xml\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/json\",\"title\":\"JSON Feed\",\"href\":\"/feeds/feed.json\"}],[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Tailwind CSS\"}],[\"$\",\"meta\",null,{\"name\":\"application-name\",\"content\":\"Tailwind CSS\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#38bdf8\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-config\",\"content\":\"/favicons/browserconfig.xml?v=4\"}],[\"$\",\"script\",null,{\"type\":\"text/javascript\",\"dangerouslySetInnerHTML\":{\"__html\":\"$25\"}}],[\"$\",\"$L26\",null,{\"src\":\"$27\"}]]}],\"$L28\"]}]\n"])</script>
49<script>self.__next_f.push([1,"3:[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed inset-x-0 top-0 z-10 border-b border-gray-950/5 dark:border-white/10\",\"children\":[[\"$\",\"$L29\",null,{}],[\"$\",\"$L2a\",null,{\"header\":[\"$\",\"$L29\",null,{}],\"breadcrumb\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"breadcrumb\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"children\":[\"$\",\"nav\",null,{\"className\":\"flex flex-col gap-8\",\"children\":[[\"$\",\"div\",\"Getting started\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Getting started\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/installation\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Installation\",\"path\":\"/docs/installation\"}],false]}],[\"$\",\"li\",\"/docs/editor-setup\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Editor setup\",\"path\":\"/docs/editor-setup\"}],false]}],[\"$\",\"li\",\"/docs/compatibility\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Compatibility\",\"path\":\"/docs/compatibility\"}],false]}],[\"$\",\"li\",\"/docs/upgrade-guide\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Upgrade guide\",\"path\":\"/docs/upgrade-guide\"}],false]}]]}]]}],[\"$\",\"div\",\"Core concepts\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Core concepts\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/styling-with-utility-classes\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Styling with utility classes\",\"path\":\"/docs/styling-with-utility-classes\"}],false]}],[\"$\",\"li\",\"/docs/hover-focus-and-other-states\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Hover, focus, and other states\",\"path\":\"/docs/hover-focus-and-other-states\"}],false]}],[\"$\",\"li\",\"/docs/responsive-design\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Responsive design\",\"path\":\"/docs/responsive-design\"}],false]}],[\"$\",\"li\",\"/docs/dark-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Dark mode\",\"path\":\"/docs/dark-mode\"}],false]}],[\"$\",\"li\",\"/docs/theme\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Theme variables\",\"path\":\"/docs/theme\"}],false]}],[\"$\",\"li\",\"/docs/colors\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Colors\",\"path\":\"/docs/colors\"}],false]}],[\"$\",\"li\",\"/docs/adding-custom-styles\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Adding custom styles\",\"path\":\"/docs/adding-custom-styles\"}],false]}],[\"$\",\"li\",\"/docs/detecting-classes-in-source-files\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Detecting classes in source files\",\"path\":\"/docs/detecting-classes-in-source-files\"}],false]}],[\"$\",\"li\",\"/docs/functions-and-directives\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Functions and directives\",\"path\":\"/docs/functions-and-directives\"}],false]}]]}]]}],[\"$\",\"div\",\"Base styles\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Base styles\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[\"$L2c\"]}]]}],\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\"]}]}]]}],\"$L3c\"]}]\n"])</script>
49<script>self.__next_f.push([1,"40:I[104100,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"SearchProvider\"]\n41:I[894013,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\"],\"ThemeProvider\"]\n42:I[480121,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"GoogleAnalytics\"]\n51:I[671895,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\"],\"DocsSidebarAutoscroll\"]\n6a:I[778085,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\",\"/_next/static/chunks/0qdme1q3zt0a3.js\",\"/_next/static/chunks/122cqq07nrvzt.js\"],\"CopyButton\"]\n18:[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Add an \",[\"$\",\"code\",null,{\"children\":\"@import\"}],\" to your CSS file that imports Tailwind CSS.\"]}]}]\n19:[\"$\",\"div\",null,{\"className\":\"col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0\",\"data-tabs\":null,\"children\":\"$L3d\"}]\n1a:[\"$\",\"$1\",\"4\",{\"children\":[[\"$\",\"div\",null,{\"data-tabs\":null,\"children\":[\"$\",\"div\",null,{\"className\":\"grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-7 w-5 bg-white dark:bg-gray-950\"}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center tracking-widest\",\"children\":\"05\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-5 xl:col-span-2\",\"data-tabs\":null,\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200\",\"children\":\"Start your build process\"}],[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Run your build process with \",[\"$\",\"code\",null,{\"children\":\"npm run dev\"}],\" or whatever command is configured in your\",\" \",[\"$\",\"code\",null,{\"children\":\"package.json\"}],\" file.\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0\",\"data-tabs\":null,\"children\":\"$L3e\"}]]}]\n1b:[\"$\",\"$1\",\"5\",{\"children\":[[\"$\",\"div\",null,{\"data-tabs\":null,\"children\":[\"$\",\"div\",null,{\"className\":\"grid size-7 grid-cols-1 grid-rows-1 place-content-center border border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-7 w-5 bg-white dark:bg-gray-950\"}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-1 grid place-content-center tracking-widest\",\"children\":\"06\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-span-5 xl:col-span-2\",\"data-tabs\":null,\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm/6 font-semibold text-slate-900 dark:text-slate-200\",\"children\":\"Start using Tailwind in your HTML\"}],[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Make sure your compiled CSS is included in the \",[\"$\",\"code\",null,{\"children\":\"\u003chead\u003e\"}],\" \",[\"$\",\"em\",null,{\"children\":\"(your framework might handle this for you)\"}],\", then start using Tailwind’s utility classes to style your content.\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"col-span-full mt-6 mb-16 sm:ml-13 xl:col-span-3 xl:m-0\",\"data-tabs\":null,\"children\":\"$L3f\"}]]}]\n"])</script>
49<script>self.__next_f.push([1,"28:[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L40\",null,{\"children\":[\"$\",\"$L41\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"isolate\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"max-w-screen overflow-x-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed inset-x-0 top-0 z-10 border-b border-black/5 dark:border-white/10\",\"children\":[\"$\",\"$L29\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center pt-14.25 [--gutter-width:2.5rem] lg:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:block dark:[--pattern-fg:var(--color-white)]/10\"}],[\"$\",\"div\",null,{\"className\":\"text-gray-950 dark:text-white\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-[calc(100vh-3.5rem)] items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-auto flex-col items-center justify-center px-4 text-center sm:flex-row\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-2xl font-extrabold tracking-tight text-gray-900 sm:mr-6 sm:border-r sm:border-gray-900/10 sm:pr-6 sm:text-3xl dark:text-gray-200 sm:dark:border-gray-300/10\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-2 text-gray-700 sm:mt-0 dark:text-gray-400\",\"children\":\"This page could not be found.\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:col-start-3 lg:block dark:[--pattern-fg:var(--color-white)]/10\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}],[\"$\",\"$L42\",null,{\"gaId\":\"G-TMR96VNVMT\"}]]}]\n"])</script>
49<script>self.__next_f.push([1,"2c:[\"$\",\"li\",\"/docs/preflight\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Preflight\",\"path\":\"/docs/preflight\"}],false]}]\n"])</script>
49<script>self.__next_f.push([1,"2d:[\"$\",\"div\",\"Layout\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Layout\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/aspect-ratio\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"aspect-ratio\",\"path\":\"/docs/aspect-ratio\"}],false]}],[\"$\",\"li\",\"/docs/columns\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"columns\",\"path\":\"/docs/columns\"}],false]}],[\"$\",\"li\",\"/docs/break-after\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"break-after\",\"path\":\"/docs/break-after\"}],false]}],[\"$\",\"li\",\"/docs/break-before\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"break-before\",\"path\":\"/docs/break-before\"}],false]}],[\"$\",\"li\",\"/docs/break-inside\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"break-inside\",\"path\":\"/docs/break-inside\"}],false]}],[\"$\",\"li\",\"/docs/box-decoration-break\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"box-decoration-break\",\"path\":\"/docs/box-decoration-break\"}],false]}],[\"$\",\"li\",\"/docs/box-sizing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"box-sizing\",\"path\":\"/docs/box-sizing\"}],false]}],[\"$\",\"li\",\"/docs/display\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"display\",\"path\":\"/docs/display\"}],false]}],[\"$\",\"li\",\"/docs/float\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"float\",\"path\":\"/docs/float\"}],false]}],[\"$\",\"li\",\"/docs/clear\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"clear\",\"path\":\"/docs/clear\"}],false]}],[\"$\",\"li\",\"/docs/isolation\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"isolation\",\"path\":\"/docs/isolation\"}],false]}],[\"$\",\"li\",\"/docs/object-fit\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"object-fit\",\"path\":\"/docs/object-fit\"}],false]}],[\"$\",\"li\",\"/docs/object-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"object-position\",\"path\":\"/docs/object-position\"}],false]}],[\"$\",\"li\",\"/docs/overflow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"overflow\",\"path\":\"/docs/overflow\"}],false]}],[\"$\",\"li\",\"/docs/overscroll-behavior\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"overscroll-behavior\",\"path\":\"/docs/overscroll-behavior\"}],false]}],[\"$\",\"li\",\"/docs/position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"position\",\"path\":\"/docs/position\"}],false]}],[\"$\",\"li\",\"/docs/top-right-bottom-left\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"top / right / bottom / left\",\"path\":\"/docs/top-right-bottom-left\"}],false]}],[\"$\",\"li\",\"/docs/visibility\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"visibility\",\"path\":\"/docs/visibility\"}],false]}],[\"$\",\"li\",\"/docs/z-index\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"z-index\",\"path\":\"/docs/z-index\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"2e:[\"$\",\"div\",\"Flexbox \u0026 Grid\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Flexbox \u0026 Grid\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/flex-basis\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-basis\",\"path\":\"/docs/flex-basis\"}],false]}],[\"$\",\"li\",\"/docs/flex-direction\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-direction\",\"path\":\"/docs/flex-direction\"}],false]}],[\"$\",\"li\",\"/docs/flex-wrap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-wrap\",\"path\":\"/docs/flex-wrap\"}],false]}],[\"$\",\"li\",\"/docs/flex\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex\",\"path\":\"/docs/flex\"}],false]}],[\"$\",\"li\",\"/docs/flex-grow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-grow\",\"path\":\"/docs/flex-grow\"}],false]}],[\"$\",\"li\",\"/docs/flex-shrink\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-shrink\",\"path\":\"/docs/flex-shrink\"}],false]}],[\"$\",\"li\",\"/docs/order\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"order\",\"path\":\"/docs/order\"}],false]}],[\"$\",\"li\",\"/docs/grid-template-columns\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-template-columns\",\"path\":\"/docs/grid-template-columns\"}],false]}],[\"$\",\"li\",\"/docs/grid-column\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-column\",\"path\":\"/docs/grid-column\"}],false]}],[\"$\",\"li\",\"/docs/grid-template-rows\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-template-rows\",\"path\":\"/docs/grid-template-rows\"}],false]}],[\"$\",\"li\",\"/docs/grid-row\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-row\",\"path\":\"/docs/grid-row\"}],false]}],[\"$\",\"li\",\"/docs/grid-auto-flow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-auto-flow\",\"path\":\"/docs/grid-auto-flow\"}],false]}],[\"$\",\"li\",\"/docs/grid-auto-columns\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-auto-columns\",\"path\":\"/docs/grid-auto-columns\"}],false]}],[\"$\",\"li\",\"/docs/grid-auto-rows\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-auto-rows\",\"path\":\"/docs/grid-auto-rows\"}],false]}],[\"$\",\"li\",\"/docs/gap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"gap\",\"path\":\"/docs/gap\"}],false]}],[\"$\",\"li\",\"/docs/justify-content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"justify-content\",\"path\":\"/docs/justify-content\"}],false]}],[\"$\",\"li\",\"/docs/justify-items\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"justify-items\",\"path\":\"/docs/justify-items\"}],false]}],[\"$\",\"li\",\"/docs/justify-self\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"justify-self\",\"path\":\"/docs/justify-self\"}],false]}],[\"$\",\"li\",\"/docs/align-content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"align-content\",\"path\":\"/docs/align-content\"}],false]}],[\"$\",\"li\",\"/docs/align-items\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"align-items\",\"path\":\"/docs/align-items\"}],false]}],[\"$\",\"li\",\"/docs/align-self\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"align-self\",\"path\":\"/docs/align-self\"}],false]}],[\"$\",\"li\",\"/docs/place-content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"place-content\",\"path\":\"/docs/place-content\"}],false]}],[\"$\",\"li\",\"/docs/place-items\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$L43\",false]}],\"$L44\"]}
49]]}]\n"])</script>
49<script>self.__next_f.push([1,"2f:[\"$\",\"div\",\"Spacing\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Spacing\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/padding\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"padding\",\"path\":\"/docs/padding\"}],false]}],[\"$\",\"li\",\"/docs/margin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"margin\",\"path\":\"/docs/margin\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"30:[\"$\",\"div\",\"Sizing\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Sizing\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"width\",\"path\":\"/docs/width\"}],false]}],[\"$\",\"li\",\"/docs/min-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-width\",\"path\":\"/docs/min-width\"}],false]}],[\"$\",\"li\",\"/docs/max-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-width\",\"path\":\"/docs/max-width\"}],false]}],[\"$\",\"li\",\"/docs/height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"height\",\"path\":\"/docs/height\"}],false]}],[\"$\",\"li\",\"/docs/min-height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-height\",\"path\":\"/docs/min-height\"}],false]}],[\"$\",\"li\",\"/docs/max-height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-height\",\"path\":\"/docs/max-height\"}],false]}],[\"$\",\"li\",\"/docs/inline-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"inline-size\",\"path\":\"/docs/inline-size\"}],false]}],[\"$\",\"li\",\"/docs/min-inline-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-inline-size\",\"path\":\"/docs/min-inline-size\"}],false]}],[\"$\",\"li\",\"/docs/max-inline-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-inline-size\",\"path\":\"/docs/max-inline-size\"}],false]}],[\"$\",\"li\",\"/docs/block-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"block-size\",\"path\":\"/docs/block-size\"}],false]}],[\"$\",\"li\",\"/docs/min-block-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-block-size\",\"path\":\"/docs/min-block-size\"}],false]}],[\"$\",\"li\",\"/docs/max-block-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-block-size\",\"path\":\"/docs/max-block-size\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"31:[\"$\",\"div\",\"Typography\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Typography\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/font-family\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-family\",\"path\":\"/docs/font-family\"}],false]}],[\"$\",\"li\",\"/docs/font-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-size\",\"path\":\"/docs/font-size\"}],false]}],[\"$\",\"li\",\"/docs/font-smoothing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-smoothing\",\"path\":\"/docs/font-smoothing\"}],false]}],[\"$\",\"li\",\"/docs/font-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-style\",\"path\":\"/docs/font-style\"}],false]}],[\"$\",\"li\",\"/docs/font-weight\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-weight\",\"path\":\"/docs/font-weight\"}],false]}],[\"$\",\"li\",\"/docs/font-stretch\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-stretch\",\"path\":\"/docs/font-stretch\"}],false]}],[\"$\",\"li\",\"/docs/font-variant-numeric\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-variant-numeric\",\"path\":\"/docs/font-variant-numeric\"}],false]}],[\"$\",\"li\",\"/docs/font-feature-settings\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-feature-settings\",\"path\":\"/docs/font-feature-settings\"}],false]}],[\"$\",\"li\",\"/docs/letter-spacing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"letter-spacing\",\"path\":\"/docs/letter-spacing\"}],false]}],[\"$\",\"li\",\"/docs/line-clamp\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"line-clamp\",\"path\":\"/docs/line-clamp\"}],false]}],[\"$\",\"li\",\"/docs/line-height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"line-height\",\"path\":\"/docs/line-height\"}],false]}],[\"$\",\"li\",\"/docs/list-style-image\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"list-style-image\",\"path\":\"/docs/list-style-image\"}],false]}],[\"$\",\"li\",\"/docs/list-style-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"list-style-position\",\"path\":\"/docs/list-style-position\"}],false]}],[\"$\",\"li\",\"/docs/list-style-type\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"list-style-type\",\"path\":\"/docs/list-style-type\"}],false]}],[\"$\",\"li\",\"/docs/text-align\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-align\",\"path\":\"/docs/text-align\"}],false]}],[\"$\",\"li\",\"/docs/color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"color\",\"path\":\"/docs/color\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-line\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-line\",\"path\":\"/docs/text-decoration-line\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-color\",\"path\":\"/docs/text-decoration-color\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-style\",\"path\":\"/docs/text-decoration-style\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-thickness\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-thickness\",\"path\":\"/docs/text-decoration-thickness\"}],false]}],[\"$\",\"li\",\"/docs/text-underline-offset\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-underline-offset\",\"path\":\"/docs/text-underline-offset\"}],false]}],\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\",\"$L4e\",\"$L4f\"]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"32:[\"$\",\"div\",\"Backgrounds\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Backgrounds\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/background-attachment\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-attachment\",\"path\":\"/docs/background-attachment\"}],false]}],[\"$\",\"li\",\"/docs/background-clip\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-clip\",\"path\":\"/docs/background-clip\"}],false]}],[\"$\",\"li\",\"/docs/background-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-color\",\"path\":\"/docs/background-color\"}],false]}],[\"$\",\"li\",\"/docs/background-image\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-image\",\"path\":\"/docs/background-image\"}],false]}],[\"$\",\"li\",\"/docs/background-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-origin\",\"path\":\"/docs/background-origin\"}],false]}],[\"$\",\"li\",\"/docs/background-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-position\",\"path\":\"/docs/background-position\"}],false]}],[\"$\",\"li\",\"/docs/background-repeat\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-repeat\",\"path\":\"/docs/background-repeat\"}],false]}],[\"$\",\"li\",\"/docs/background-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-size\",\"path\":\"/docs/background-size\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"33:[\"$\",\"div\",\"Borders\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Borders\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/border-radius\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-radius\",\"path\":\"/docs/border-radius\"}],false]}],[\"$\",\"li\",\"/docs/border-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-width\",\"path\":\"/docs/border-width\"}],false]}],[\"$\",\"li\",\"/docs/border-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-color\",\"path\":\"/docs/border-color\"}],false]}],[\"$\",\"li\",\"/docs/border-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-style\",\"path\":\"/docs/border-style\"}],false]}],[\"$\",\"li\",\"/docs/outline-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-width\",\"path\":\"/docs/outline-width\"}],false]}],[\"$\",\"li\",\"/docs/outline-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-color\",\"path\":\"/docs/outline-color\"}],false]}],[\"$\",\"li\",\"/docs/outline-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-style\",\"path\":\"/docs/outline-style\"}],false]}],[\"$\",\"li\",\"/docs/outline-offset\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-offset\",\"path\":\"/docs/outline-offset\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"34:[\"$\",\"div\",\"Effects\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Effects\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/box-shadow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"box-shadow\",\"path\":\"/docs/box-shadow\"}],false]}],[\"$\",\"li\",\"/docs/text-shadow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-shadow\",\"path\":\"/docs/text-shadow\"}],false]}],[\"$\",\"li\",\"/docs/opacity\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"opacity\",\"path\":\"/docs/opacity\"}],false]}],[\"$\",\"li\",\"/docs/mix-blend-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mix-blend-mode\",\"path\":\"/docs/mix-blend-mode\"}],false]}],[\"$\",\"li\",\"/docs/background-blend-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-blend-mode\",\"path\":\"/docs/background-blend-mode\"}],false]}],[\"$\",\"li\",\"/docs/mask-clip\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-clip\",\"path\":\"/docs/mask-clip\"}],false]}],[\"$\",\"li\",\"/docs/mask-composite\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-composite\",\"path\":\"/docs/mask-composite\"}],false]}],[\"$\",\"li\",\"/docs/mask-image\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-image\",\"path\":\"/docs/mask-image\"}],false]}],[\"$\",\"li\",\"/docs/mask-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-mode\",\"path\":\"/docs/mask-mode\"}],false]}],[\"$\",\"li\",\"/docs/mask-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-origin\",\"path\":\"/docs/mask-origin\"}],false]}],[\"$\",\"li\",\"/docs/mask-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-position\",\"path\":\"/docs/mask-position\"}],false]}],[\"$\",\"li\",\"/docs/mask-repeat\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-repeat\",\"path\":\"/docs/mask-repeat\"}],false]}],[\"$\",\"li\",\"/docs/mask-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-size\",\"path\":\"/docs/mask-size\"}],false]}],[\"$\",\"li\",\"/docs/mask-type\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-type\",\"path\":\"/docs/mask-type\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"35:[\"$\",\"div\",\"Filters\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Filters\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/filter\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"filter\",\"path\":\"/docs/filter\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-transparent\",\"children\":[[\"$\",\"li\",\"/docs/filter-blur\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"blur\",\"path\":\"/docs/filter-blur\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-brightness\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"brightness\",\"path\":\"/docs/filter-brightness\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-contrast\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"contrast\",\"path\":\"/docs/filter-contrast\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-drop-shadow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"drop-shadow\",\"path\":\"/docs/filter-drop-shadow\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-grayscale\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"grayscale\",\"path\":\"/docs/filter-grayscale\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-hue-rotate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"hue-rotate\",\"path\":\"/docs/filter-hue-rotate\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-invert\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"invert\",\"path\":\"/docs/filter-invert\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-saturate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"saturate\",\"path\":\"/docs/filter-saturate\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-sepia\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"sepia\",\"path\":\"/docs/filter-sepia\",\"nested\":true}]}]]}]]}],[\"$\",\"li\",\"/docs/backdrop-filter\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"backdrop-filter\",\"path\":\"/docs/backdrop-filter\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-transparent\",\"children\":[[\"$\",\"li\",\"/docs/backdrop-filter-blur\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"blur\",\"path\":\"/docs/backdrop-filter-blur\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-brightness\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"brightness\",\"path\":\"/docs/backdrop-filter-brightness\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-contrast\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"contrast\",\"path\":\"/docs/backdrop-filter-contrast\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-grayscale\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"grayscale\",\"path\":\"/docs/backdrop-filter-grayscale\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-hue-rotate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"hue-rotate\",\"path\":\"/docs/backdrop-filter-hue-rotate\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-invert\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"invert\",\"path\":\"/docs/backdrop-filter-invert\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-opacity\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"opacity\",\"path\":\"/docs/backdrop-filter-opacity\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-saturate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"saturate\",\"path\":\"/docs/backdrop-filter-saturate\",\"nested\":true}]}],\"$L50\"]}]]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"36:[\"$\",\"div\",\"Tables\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Tables\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/border-collapse\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-collapse\",\"path\":\"/docs/border-collapse\"}],false]}],[\"$\",\"li\",\"/docs/border-spacing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-spacing\",\"path\":\"/docs/border-spacing\"}],false]}],[\"$\",\"li\",\"/docs/table-layout\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"table-layout\",\"path\":\"/docs/table-layout\"}],false]}],[\"$\",\"li\",\"/docs/caption-side\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"caption-side\",\"path\":\"/docs/caption-side\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"37:[\"$\",\"div\",\"Transitions \u0026 Animation\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Transitions \u0026 Animation\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/transition-property\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-property\",\"path\":\"/docs/transition-property\"}],false]}],[\"$\",\"li\",\"/docs/transition-behavior\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-behavior\",\"path\":\"/docs/transition-behavior\"}],false]}],[\"$\",\"li\",\"/docs/transition-duration\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-duration\",\"path\":\"/docs/transition-duration\"}],false]}],[\"$\",\"li\",\"/docs/transition-timing-function\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-timing-function\",\"path\":\"/docs/transition-timing-function\"}],false]}],[\"$\",\"li\",\"/docs/transition-delay\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-delay\",\"path\":\"/docs/transition-delay\"}],false]}],[\"$\",\"li\",\"/docs/animation\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"animation\",\"path\":\"/docs/animation\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"38:[\"$\",\"div\",\"Transforms\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Transforms\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/backface-visibility\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"backface-visibility\",\"path\":\"/docs/backface-visibility\"}],false]}],[\"$\",\"li\",\"/docs/perspective\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"perspective\",\"path\":\"/docs/perspective\"}],false]}],[\"$\",\"li\",\"/docs/perspective-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"perspective-origin\",\"path\":\"/docs/perspective-origin\"}],false]}],[\"$\",\"li\",\"/docs/rotate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"rotate\",\"path\":\"/docs/rotate\"}],false]}],[\"$\",\"li\",\"/docs/scale\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scale\",\"path\":\"/docs/scale\"}],false]}],[\"$\",\"li\",\"/docs/skew\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"skew\",\"path\":\"/docs/skew\"}],false]}],[\"$\",\"li\",\"/docs/transform\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transform\",\"path\":\"/docs/transform\"}],false]}],[\"$\",\"li\",\"/docs/transform-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transform-origin\",\"path\":\"/docs/transform-origin\"}],false]}],[\"$\",\"li\",\"/docs/transform-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transform-style\",\"path\":\"/docs/transform-style\"}],false]}],[\"$\",\"li\",\"/docs/translate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"translate\",\"path\":\"/docs/translate\"}],false]}],[\"$\",\"li\",\"/docs/zoom\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"zoom\",\"path\":\"/docs/zoom\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"39:[\"$\",\"div\",\"Interactivity\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Interactivity\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/accent-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"accent-color\",\"path\":\"/docs/accent-color\"}],false]}],[\"$\",\"li\",\"/docs/appearance\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"appearance\",\"path\":\"/docs/appearance\"}],false]}],[\"$\",\"li\",\"/docs/caret-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"caret-color\",\"path\":\"/docs/caret-color\"}],false]}],[\"$\",\"li\",\"/docs/color-scheme\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"color-scheme\",\"path\":\"/docs/color-scheme\"}],false]}],[\"$\",\"li\",\"/docs/cursor\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"cursor\",\"path\":\"/docs/cursor\"}],false]}],[\"$\",\"li\",\"/docs/field-sizing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"field-sizing\",\"path\":\"/docs/field-sizing\"}],false]}],[\"$\",\"li\",\"/docs/pointer-events\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"pointer-events\",\"path\":\"/docs/pointer-events\"}],false]}],[\"$\",\"li\",\"/docs/resize\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"resize\",\"path\":\"/docs/resize\"}],false]}],[\"$\",\"li\",\"/docs/scroll-behavior\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-behavior\",\"path\":\"/docs/scroll-behavior\"}],false]}],[\"$\",\"li\",\"/docs/scrollbar-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scrollbar-color\",\"path\":\"/docs/scrollbar-color\"}],false]}],[\"$\",\"li\",\"/docs/scrollbar-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scrollbar-width\",\"path\":\"/docs/scrollbar-width\"}],false]}],[\"$\",\"li\",\"/docs/scrollbar-gutter\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scrollbar-gutter\",\"path\":\"/docs/scrollbar-gutter\"}],false]}],[\"$\",\"li\",\"/docs/scroll-margin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-margin\",\"path\":\"/docs/scroll-margin\"}],false]}],[\"$\",\"li\",\"/docs/scroll-padding\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-padding\",\"path\":\"/docs/scroll-padding\"}],false]}],[\"$\",\"li\",\"/docs/scroll-snap-align\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-snap-align\",\"path\":\"/docs/scroll-snap-align\"}],false]}],[\"$\",\"li\",\"/docs/scroll-snap-stop\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-snap-stop\",\"path\":\"/docs/scroll-snap-stop\"}],false]}],[\"$\",\"li\",\"/docs/scroll-snap-type\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-snap-type\",\"path\":\"/docs/scroll-snap-type\"}],false]}],[\"$\",\"li\",\"/docs/touch-action\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"touch-action\",\"path\":\"/docs/touch-action\"}],false]}],[\"$\",\"li\",\"/docs/user-select\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"user-select\",\"path\":\"/docs/user-select\"}],false]}],[\"$\",\"li\",\"/docs/will-change\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"will-change\",\"path\":\"/docs/will-change\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"3a:[\"$\",\"div\",\"SVG\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"SVG\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/fill\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"fill\",\"path\":\"/docs/fill\"}],false]}],[\"$\",\"li\",\"/docs/stroke\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"stroke\",\"path\":\"/docs/stroke\"}],false]}],[\"$\",\"li\",\"/docs/stroke-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"stroke-width\",\"path\":\"/docs/stroke-width\"}],false]}]]}]]}]\n3b:[\"$\",\"div\",\"Accessibility\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Accessibility\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/forced-color-adjust\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"forced-color-adjust\",\"path\":\"/docs/forced-color-adjust\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"3c:[\"$\",\"div\",null,{\"className\":\"grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] pt-26.25 lg:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem] lg:pt-14.25 xl:grid-cols-[var(--container-2xs)_2.5rem_minmax(0,1fr)_2.5rem]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative col-start-1 row-span-full row-start-1 max-lg:hidden\",\"children\":[\"$\",\"div\",null,{\"className\":\"absolute inset-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"sticky top-14.25 bottom-0 left-0 h-full max-h-[calc(100dvh-(var(--spacing)*14.25))] w-2xs overflow-y-auto p-6\",\"children\":[\"$\",\"$L51\",null,{\"children\":[\"$\",\"nav\",null,{\"className\":\"flex flex-col gap-8\",\"children\":[[\"$\",\"div\",\"Getting started\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Getting started\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/installation\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Installation\",\"path\":\"/docs/installation\"}],false]}],[\"$\",\"li\",\"/docs/editor-setup\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Editor setup\",\"path\":\"/docs/editor-setup\"}],false]}],[\"$\",\"li\",\"/docs/compatibility\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Compatibility\",\"path\":\"/docs/compatibility\"}],false]}],[\"$\",\"li\",\"/docs/upgrade-guide\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Upgrade guide\",\"path\":\"/docs/upgrade-guide\"}],false]}]]}]]}],[\"$\",\"div\",\"Core concepts\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Core concepts\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/styling-with-utility-classes\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Styling with utility classes\",\"path\":\"/docs/styling-with-utility-classes\"}],false]}],[\"$\",\"li\",\"/docs/hover-focus-and-other-states\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Hover, focus, and other states\",\"path\":\"/docs/hover-focus-and-other-states\"}],false]}],[\"$\",\"li\",\"/docs/responsive-design\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Responsive design\",\"path\":\"/docs/responsive-design\"}],false]}],[\"$\",\"li\",\"/docs/dark-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Dark mode\",\"path\":\"/docs/dark-mode\"}],false]}],[\"$\",\"li\",\"/docs/theme\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Theme variables\",\"path\":\"/docs/theme\"}],false]}],[\"$\",\"li\",\"/docs/colors\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Colors\",\"path\":\"/docs/colors\"}],false]}],[\"$\",\"li\",\"/docs/adding-custom-styles\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Adding custom styles\",\"path\":\"/docs/adding-custom-styles\"}],false]}],[\"$\",\"li\",\"/docs/detecting-classes-in-source-files\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Detecting classes in source files\",\"path\":\"/docs/detecting-classes-in-source-files\"}],false]}],[\"$\",\"li\",\"/docs/functions-and-directives\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Functions and directives\",\"path\":\"/docs/functions-and-directives\"}],false]}]]}]]}],[\"$\",\"div\",\"Base styles\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[\"$L52\",\"$L53\"]}],\"$L54\",\"$L55\",\"$L56\",\"$L57\",\"$L58\",\"$L59\",\"$L5a\",\"$L5b\",\"$L5c\",\"$L5d\",\"$L5e\",\"$L5f\",\"$L60\",\"$L61\",\"$L62\"]}]}]}]}]}],\"$L63\",\"$L64\",\"$L65\",\"$L66\",\"$L67\",\"$L68\",\"$L69\"]}]\n"])</script>
49<script>self.__next_f.push([1,"15:[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child\u003e\u0026]:rounded-t-xl in-data-stack:[:first-child\u003e\u0026]:*:rounded-t-xl in-data-stack:[:last-child\u003e\u0026]:rounded-b-xl in-data-stack:[:last-child\u003e\u0026]:*:rounded-b-xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50\",\"children\":\"Terminal\"}],[\"$\",\"$L6a\",null,{\"className\":\"absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75\",\"value\":\"npm create vite@latest my-project\\ncd my-project\"}]]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpre class=\\\"shiki tailwindcss-theme\\\" style=\\\"background-color:transparent;color:var(--color-slate-50)\\\" tabindex=\\\"0\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003enpm\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e create\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e vite@latest\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e my-project\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-violet-300)\\\"\u003ecd\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e my-project\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child\u003e\u0026]:rounded-t-xl in-data-stack:[:first-child\u003e\u0026]:*:rounded-t-xl in-data-stack:[:last-child\u003e\u0026]:rounded-b-xl in-data-stack:[:last-child\u003e\u0026]:*:rounded-b-xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50\",\"children\":\"Terminal\"}],[\"$\",\"$L6a\",null,{\"className\":\"absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75\",\"value\":\"npm install tailwindcss @tailwindcss/vite\"}]]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpre class=\\\"shiki tailwindcss-theme\\\" style=\\\"background-color:transparent;color:var(--color-slate-50)\\\" tabindex=\\\"0\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003enpm\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e install\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e tailwindcss\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e @tailwindcss/vite\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"6b:T773,"])</script>
49<script>self.__next_f.push([1,"\u003cpre class=\"shiki tailwindcss-theme has-highlighted\" style=\"background-color:transparent;color:var(--color-slate-50)\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003eimport\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e defineConfig\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e from\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-200)\"\u003e 'vite'\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003eimport\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e tailwindcss\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e from\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-200)\"\u003e '@tailwindcss/vite'\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-violet-300)\"\u003eexport\u003c/span\u003e\u003cspan style=\"color:var(--color-violet-300)\"\u003e default\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e defineConfig\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e{\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e  plugins\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e:\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e [\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e    tailwindcss\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e()\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e,\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e  ]\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e,\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e}\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e)\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script>
49<script>self.__next_f.push([1,"17:[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child\u003e\u0026]:rounded-t-xl in-data-stack:[:first-child\u003e\u0026]:*:rounded-t-xl in-data-stack:[:last-child\u003e\u0026]:rounded-b-xl in-data-stack:[:last-child\u003e\u0026]:*:rounded-b-xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50\",\"children\":\"vite.config.ts\"}],[\"$\",\"$L6a\",null,{\"className\":\"absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75\",\"value\":\"import { defineConfig } from 'vite'\\nimport tailwindcss from '@tailwindcss/vite'\\n\\nexport default defineConfig({\\n  plugins: [\\n    tailwindcss(),\\n  ],\\n})\"}]]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$6b\"}}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"7a:I[894013,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\",\"/_next/static/chunks/03qg92y~mksg7.js\",\"/_next/static/chunks/0eift~.g6ajk7.js\"],\"default\"]\n43:[\"$\",\"$L2b\",null,{\"title\":\"place-items\",\"path\":\"/docs/place-items\"}]\n44:[\"$\",\"li\",\"/docs/place-self\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"place-self\",\"path\":\"/docs/place-self\"}],false]}]\n45:[\"$\",\"li\",\"/docs/text-transform\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-transform\",\"path\":\"/docs/text-transform\"}],false]}]\n46:[\"$\",\"li\",\"/docs/text-overflow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-overflow\",\"path\":\"/docs/text-overflow\"}],false]}]\n47:[\"$\",\"li\",\"/docs/text-wrap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-wrap\",\"path\":\"/docs/text-wrap\"}],false]}]\n48:[\"$\",\"li\",\"/docs/text-indent\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-indent\",\"path\":\"/docs/text-indent\"}],false]}]\n49:[\"$\",\"li\",\"/docs/tab-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"tab-size\",\"path\":\"/docs/tab-size\"}],false]}]\n4a:[\"$\",\"li\",\"/docs/vertical-align\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"vertical-align\",\"path\":\"/docs/vertical-align\"}],false]}]\n4b:[\"$\",\"li\",\"/docs/white-space\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"white-space\",\"path\":\"/docs/white-space\"}],false]}]\n4c:[\"$\",\"li\",\"/docs/word-break\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"word-break\",\"path\":\"/docs/word-break\"}],false]}]\n4d:[\"$\",\"li\",\"/docs/overflow-wrap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"overflow-wrap\",\"path\":\"/docs/overflow-wrap\"}],false]}]\n4e:[\"$\",\"li\",\"/docs/hyphens\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"hyphens\",\"path\":\"/docs/hyphens\"}],false]}]\n4f:[\"$\",\"li\",\"/docs/content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"content\",\"path\":\"/docs/content\"}],false]}]\n50:[\"$\",\"li\",\"/docs/backdrop-filter-sepia\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"sepia\",\"path\":\"/docs/backdrop-filter-sepia\",\"nested\":true}]}]\n52:[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Base styles\"}]\n53:[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/preflight\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"Preflight\",\"path\":\"/docs/preflight\"}],false]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"54:[\"$\",\"div\",\"Layout\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Layout\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/aspect-ratio\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"aspect-ratio\",\"path\":\"/docs/aspect-ratio\"}],false]}],[\"$\",\"li\",\"/docs/columns\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"columns\",\"path\":\"/docs/columns\"}],false]}],[\"$\",\"li\",\"/docs/break-after\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"break-after\",\"path\":\"/docs/break-after\"}],false]}],[\"$\",\"li\",\"/docs/break-before\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"break-before\",\"path\":\"/docs/break-before\"}],false]}],[\"$\",\"li\",\"/docs/break-inside\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"break-inside\",\"path\":\"/docs/break-inside\"}],false]}],[\"$\",\"li\",\"/docs/box-decoration-break\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"box-decoration-break\",\"path\":\"/docs/box-decoration-break\"}],false]}],[\"$\",\"li\",\"/docs/box-sizing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"box-sizing\",\"path\":\"/docs/box-sizing\"}],false]}],[\"$\",\"li\",\"/docs/display\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"display\",\"path\":\"/docs/display\"}],false]}],[\"$\",\"li\",\"/docs/float\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"float\",\"path\":\"/docs/float\"}],false]}],[\"$\",\"li\",\"/docs/clear\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"clear\",\"path\":\"/docs/clear\"}],false]}],[\"$\",\"li\",\"/docs/isolation\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"isolation\",\"path\":\"/docs/isolation\"}],false]}],[\"$\",\"li\",\"/docs/object-fit\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"object-fit\",\"path\":\"/docs/object-fit\"}],false]}],[\"$\",\"li\",\"/docs/object-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"object-position\",\"path\":\"/docs/object-position\"}],false]}],[\"$\",\"li\",\"/docs/overflow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"overflow\",\"path\":\"/docs/overflow\"}],false]}],[\"$\",\"li\",\"/docs/overscroll-behavior\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"overscroll-behavior\",\"path\":\"/docs/overscroll-behavior\"}],false]}],[\"$\",\"li\",\"/docs/position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"position\",\"path\":\"/docs/position\"}],false]}],[\"$\",\"li\",\"/docs/top-right-bottom-left\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"top / right / bottom / left\",\"path\":\"/docs/top-right-bottom-left\"}],false]}],[\"$\",\"li\",\"/docs/visibility\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"visibility\",\"path\":\"/docs/visibility\"}],false]}],[\"$\",\"li\",\"/docs/z-index\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"z-index\",\"path\":\"/docs/z-index\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"55:[\"$\",\"div\",\"Flexbox \u0026 Grid\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Flexbox \u0026 Grid\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/flex-basis\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-basis\",\"path\":\"/docs/flex-basis\"}],false]}],[\"$\",\"li\",\"/docs/flex-direction\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-direction\",\"path\":\"/docs/flex-direction\"}],false]}],[\"$\",\"li\",\"/docs/flex-wrap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-wrap\",\"path\":\"/docs/flex-wrap\"}],false]}],[\"$\",\"li\",\"/docs/flex\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex\",\"path\":\"/docs/flex\"}],false]}],[\"$\",\"li\",\"/docs/flex-grow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-grow\",\"path\":\"/docs/flex-grow\"}],false]}],[\"$\",\"li\",\"/docs/flex-shrink\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"flex-shrink\",\"path\":\"/docs/flex-shrink\"}],false]}],[\"$\",\"li\",\"/docs/order\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"order\",\"path\":\"/docs/order\"}],false]}],[\"$\",\"li\",\"/docs/grid-template-columns\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-template-columns\",\"path\":\"/docs/grid-template-columns\"}],false]}],[\"$\",\"li\",\"/docs/grid-column\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-column\",\"path\":\"/docs/grid-column\"}],false]}],[\"$\",\"li\",\"/docs/grid-template-rows\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-template-rows\",\"path\":\"/docs/grid-template-rows\"}],false]}],[\"$\",\"li\",\"/docs/grid-row\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-row\",\"path\":\"/docs/grid-row\"}],false]}],[\"$\",\"li\",\"/docs/grid-auto-flow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-auto-flow\",\"path\":\"/docs/grid-auto-flow\"}],false]}],[\"$\",\"li\",\"/docs/grid-auto-columns\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-auto-columns\",\"path\":\"/docs/grid-auto-columns\"}],false]}],[\"$\",\"li\",\"/docs/grid-auto-rows\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"grid-auto-rows\",\"path\":\"/docs/grid-auto-rows\"}],false]}],[\"$\",\"li\",\"/docs/gap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"gap\",\"path\":\"/docs/gap\"}],false]}],[\"$\",\"li\",\"/docs/justify-content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"justify-content\",\"path\":\"/docs/justify-content\"}],false]}],[\"$\",\"li\",\"/docs/justify-items\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"justify-items\",\"path\":\"/docs/justify-items\"}],false]}],[\"$\",\"li\",\"/docs/justify-self\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"justify-self\",\"path\":\"/docs/justify-self\"}],false]}],[\"$\",\"li\",\"/docs/align-content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"align-content\",\"path\":\"/docs/align-content\"}],false]}],[\"$\",\"li\",\"/docs/align-items\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"align-items\",\"path\":\"/docs/align-items\"}],false]}],[\"$\",\"li\",\"/docs/align-self\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"align-self\",\"path\":\"/docs/align-self\"}],false]}],[\"$\",\"li\",\"/docs/place-content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"place-content\",\"path\":\"/docs/place-content\"}],false]}],[\"$\",\"li\",\"/docs/place-items\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$L6c\",false]}],\"$L6d\"]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"56:[\"$\",\"div\",\"Spacing\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Spacing\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/padding\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"padding\",\"path\":\"/docs/padding\"}],false]}],[\"$\",\"li\",\"/docs/margin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"margin\",\"path\":\"/docs/margin\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"57:[\"$\",\"div\",\"Sizing\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Sizing\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"width\",\"path\":\"/docs/width\"}],false]}],[\"$\",\"li\",\"/docs/min-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-width\",\"path\":\"/docs/min-width\"}],false]}],[\"$\",\"li\",\"/docs/max-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-width\",\"path\":\"/docs/max-width\"}],false]}],[\"$\",\"li\",\"/docs/height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"height\",\"path\":\"/docs/height\"}],false]}],[\"$\",\"li\",\"/docs/min-height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-height\",\"path\":\"/docs/min-height\"}],false]}],[\"$\",\"li\",\"/docs/max-height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-height\",\"path\":\"/docs/max-height\"}],false]}],[\"$\",\"li\",\"/docs/inline-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"inline-size\",\"path\":\"/docs/inline-size\"}],false]}],[\"$\",\"li\",\"/docs/min-inline-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-inline-size\",\"path\":\"/docs/min-inline-size\"}],false]}],[\"$\",\"li\",\"/docs/max-inline-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-inline-size\",\"path\":\"/docs/max-inline-size\"}],false]}],[\"$\",\"li\",\"/docs/block-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"block-size\",\"path\":\"/docs/block-size\"}],false]}],[\"$\",\"li\",\"/docs/min-block-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"min-block-size\",\"path\":\"/docs/min-block-size\"}],false]}],[\"$\",\"li\",\"/docs/max-block-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"max-block-size\",\"path\":\"/docs/max-block-size\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"58:[\"$\",\"div\",\"Typography\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Typography\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/font-family\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-family\",\"path\":\"/docs/font-family\"}],false]}],[\"$\",\"li\",\"/docs/font-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-size\",\"path\":\"/docs/font-size\"}],false]}],[\"$\",\"li\",\"/docs/font-smoothing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-smoothing\",\"path\":\"/docs/font-smoothing\"}],false]}],[\"$\",\"li\",\"/docs/font-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-style\",\"path\":\"/docs/font-style\"}],false]}],[\"$\",\"li\",\"/docs/font-weight\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-weight\",\"path\":\"/docs/font-weight\"}],false]}],[\"$\",\"li\",\"/docs/font-stretch\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-stretch\",\"path\":\"/docs/font-stretch\"}],false]}],[\"$\",\"li\",\"/docs/font-variant-numeric\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-variant-numeric\",\"path\":\"/docs/font-variant-numeric\"}],false]}],[\"$\",\"li\",\"/docs/font-feature-settings\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"font-feature-settings\",\"path\":\"/docs/font-feature-settings\"}],false]}],[\"$\",\"li\",\"/docs/letter-spacing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"letter-spacing\",\"path\":\"/docs/letter-spacing\"}],false]}],[\"$\",\"li\",\"/docs/line-clamp\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"line-clamp\",\"path\":\"/docs/line-clamp\"}],false]}],[\"$\",\"li\",\"/docs/line-height\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"line-height\",\"path\":\"/docs/line-height\"}],false]}],[\"$\",\"li\",\"/docs/list-style-image\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"list-style-image\",\"path\":\"/docs/list-style-image\"}],false]}],[\"$\",\"li\",\"/docs/list-style-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"list-style-position\",\"path\":\"/docs/list-style-position\"}],false]}],[\"$\",\"li\",\"/docs/list-style-type\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"list-style-type\",\"path\":\"/docs/list-style-type\"}],false]}],[\"$\",\"li\",\"/docs/text-align\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-align\",\"path\":\"/docs/text-align\"}],false]}],[\"$\",\"li\",\"/docs/color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"color\",\"path\":\"/docs/color\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-line\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-line\",\"path\":\"/docs/text-decoration-line\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-color\",\"path\":\"/docs/text-decoration-color\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-style\",\"path\":\"/docs/text-decoration-style\"}],false]}],[\"$\",\"li\",\"/docs/text-decoration-thickness\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-decoration-thickness\",\"path\":\"/docs/text-decoration-thickness\"}],false]}],[\"$\",\"li\",\"/docs/text-underline-offset\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-underline-offset\",\"path\":\"/docs/text-underline-offset\"}],false]}],\"$L6e\",\"$L6f\",\"$L70\",\"$L71\",\"$L72\",\"$L73\",\"$L74\",\"$L75\",\"$L76\",\"$L77\",\"$L78\"]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"59:[\"$\",\"div\",\"Backgrounds\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Backgrounds\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/background-attachment\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-attachment\",\"path\":\"/docs/background-attachment\"}],false]}],[\"$\",\"li\",\"/docs/background-clip\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-clip\",\"path\":\"/docs/background-clip\"}],false]}],[\"$\",\"li\",\"/docs/background-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-color\",\"path\":\"/docs/background-color\"}],false]}],[\"$\",\"li\",\"/docs/background-image\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-image\",\"path\":\"/docs/background-image\"}],false]}],[\"$\",\"li\",\"/docs/background-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-origin\",\"path\":\"/docs/background-origin\"}],false]}],[\"$\",\"li\",\"/docs/background-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-position\",\"path\":\"/docs/background-position\"}],false]}],[\"$\",\"li\",\"/docs/background-repeat\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-repeat\",\"path\":\"/docs/background-repeat\"}],false]}],[\"$\",\"li\",\"/docs/background-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-size\",\"path\":\"/docs/background-size\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"5a:[\"$\",\"div\",\"Borders\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Borders\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/border-radius\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-radius\",\"path\":\"/docs/border-radius\"}],false]}],[\"$\",\"li\",\"/docs/border-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-width\",\"path\":\"/docs/border-width\"}],false]}],[\"$\",\"li\",\"/docs/border-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-color\",\"path\":\"/docs/border-color\"}],false]}],[\"$\",\"li\",\"/docs/border-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-style\",\"path\":\"/docs/border-style\"}],false]}],[\"$\",\"li\",\"/docs/outline-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-width\",\"path\":\"/docs/outline-width\"}],false]}],[\"$\",\"li\",\"/docs/outline-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-color\",\"path\":\"/docs/outline-color\"}],false]}],[\"$\",\"li\",\"/docs/outline-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-style\",\"path\":\"/docs/outline-style\"}],false]}],[\"$\",\"li\",\"/docs/outline-offset\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"outline-offset\",\"path\":\"/docs/outline-offset\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"5b:[\"$\",\"div\",\"Effects\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Effects\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/box-shadow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"box-shadow\",\"path\":\"/docs/box-shadow\"}],false]}],[\"$\",\"li\",\"/docs/text-shadow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-shadow\",\"path\":\"/docs/text-shadow\"}],false]}],[\"$\",\"li\",\"/docs/opacity\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"opacity\",\"path\":\"/docs/opacity\"}],false]}],[\"$\",\"li\",\"/docs/mix-blend-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mix-blend-mode\",\"path\":\"/docs/mix-blend-mode\"}],false]}],[\"$\",\"li\",\"/docs/background-blend-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"background-blend-mode\",\"path\":\"/docs/background-blend-mode\"}],false]}],[\"$\",\"li\",\"/docs/mask-clip\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-clip\",\"path\":\"/docs/mask-clip\"}],false]}],[\"$\",\"li\",\"/docs/mask-composite\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-composite\",\"path\":\"/docs/mask-composite\"}],false]}],[\"$\",\"li\",\"/docs/mask-image\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-image\",\"path\":\"/docs/mask-image\"}],false]}],[\"$\",\"li\",\"/docs/mask-mode\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-mode\",\"path\":\"/docs/mask-mode\"}],false]}],[\"$\",\"li\",\"/docs/mask-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-origin\",\"path\":\"/docs/mask-origin\"}],false]}],[\"$\",\"li\",\"/docs/mask-position\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-position\",\"path\":\"/docs/mask-position\"}],false]}],[\"$\",\"li\",\"/docs/mask-repeat\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-repeat\",\"path\":\"/docs/mask-repeat\"}],false]}],[\"$\",\"li\",\"/docs/mask-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-size\",\"path\":\"/docs/mask-size\"}],false]}],[\"$\",\"li\",\"/docs/mask-type\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"mask-type\",\"path\":\"/docs/mask-type\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"5c:[\"$\",\"div\",\"Filters\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Filters\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/filter\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"filter\",\"path\":\"/docs/filter\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-transparent\",\"children\":[[\"$\",\"li\",\"/docs/filter-blur\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"blur\",\"path\":\"/docs/filter-blur\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-brightness\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"brightness\",\"path\":\"/docs/filter-brightness\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-contrast\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"contrast\",\"path\":\"/docs/filter-contrast\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-drop-shadow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"drop-shadow\",\"path\":\"/docs/filter-drop-shadow\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-grayscale\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"grayscale\",\"path\":\"/docs/filter-grayscale\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-hue-rotate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"hue-rotate\",\"path\":\"/docs/filter-hue-rotate\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-invert\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"invert\",\"path\":\"/docs/filter-invert\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-saturate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"saturate\",\"path\":\"/docs/filter-saturate\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/filter-sepia\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"sepia\",\"path\":\"/docs/filter-sepia\",\"nested\":true}]}]]}]]}],[\"$\",\"li\",\"/docs/backdrop-filter\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"backdrop-filter\",\"path\":\"/docs/backdrop-filter\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-transparent\",\"children\":[[\"$\",\"li\",\"/docs/backdrop-filter-blur\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"blur\",\"path\":\"/docs/backdrop-filter-blur\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-brightness\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"brightness\",\"path\":\"/docs/backdrop-filter-brightness\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-contrast\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"contrast\",\"path\":\"/docs/backdrop-filter-contrast\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-grayscale\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"grayscale\",\"path\":\"/docs/backdrop-filter-grayscale\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-hue-rotate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"hue-rotate\",\"path\":\"/docs/backdrop-filter-hue-rotate\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-invert\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"invert\",\"path\":\"/docs/backdrop-filter-invert\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-opacity\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"opacity\",\"path\":\"/docs/backdrop-filter-opacity\",\"nested\":true}]}],[\"$\",\"li\",\"/docs/backdrop-filter-saturate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"saturate\",\"path\":\"/docs/backdrop-filter-saturate\",\"nested\":true}]}],\"$L79\"]}]]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"5d:[\"$\",\"div\",\"Tables\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Tables\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/border-collapse\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-collapse\",\"path\":\"/docs/border-collapse\"}],false]}],[\"$\",\"li\",\"/docs/border-spacing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"border-spacing\",\"path\":\"/docs/border-spacing\"}],false]}],[\"$\",\"li\",\"/docs/table-layout\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"table-layout\",\"path\":\"/docs/table-layout\"}],false]}],[\"$\",\"li\",\"/docs/caption-side\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"caption-side\",\"path\":\"/docs/caption-side\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"5e:[\"$\",\"div\",\"Transitions \u0026 Animation\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Transitions \u0026 Animation\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/transition-property\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-property\",\"path\":\"/docs/transition-property\"}],false]}],[\"$\",\"li\",\"/docs/transition-behavior\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-behavior\",\"path\":\"/docs/transition-behavior\"}],false]}],[\"$\",\"li\",\"/docs/transition-duration\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-duration\",\"path\":\"/docs/transition-duration\"}],false]}],[\"$\",\"li\",\"/docs/transition-timing-function\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-timing-function\",\"path\":\"/docs/transition-timing-function\"}],false]}],[\"$\",\"li\",\"/docs/transition-delay\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transition-delay\",\"path\":\"/docs/transition-delay\"}],false]}],[\"$\",\"li\",\"/docs/animation\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"animation\",\"path\":\"/docs/animation\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"5f:[\"$\",\"div\",\"Transforms\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Transforms\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/backface-visibility\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"backface-visibility\",\"path\":\"/docs/backface-visibility\"}],false]}],[\"$\",\"li\",\"/docs/perspective\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"perspective\",\"path\":\"/docs/perspective\"}],false]}],[\"$\",\"li\",\"/docs/perspective-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"perspective-origin\",\"path\":\"/docs/perspective-origin\"}],false]}],[\"$\",\"li\",\"/docs/rotate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"rotate\",\"path\":\"/docs/rotate\"}],false]}],[\"$\",\"li\",\"/docs/scale\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scale\",\"path\":\"/docs/scale\"}],false]}],[\"$\",\"li\",\"/docs/skew\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"skew\",\"path\":\"/docs/skew\"}],false]}],[\"$\",\"li\",\"/docs/transform\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transform\",\"path\":\"/docs/transform\"}],false]}],[\"$\",\"li\",\"/docs/transform-origin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transform-origin\",\"path\":\"/docs/transform-origin\"}],false]}],[\"$\",\"li\",\"/docs/transform-style\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"transform-style\",\"path\":\"/docs/transform-style\"}],false]}],[\"$\",\"li\",\"/docs/translate\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"translate\",\"path\":\"/docs/translate\"}],false]}],[\"$\",\"li\",\"/docs/zoom\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"zoom\",\"path\":\"/docs/zoom\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"60:[\"$\",\"div\",\"Interactivity\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Interactivity\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/accent-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"accent-color\",\"path\":\"/docs/accent-color\"}],false]}],[\"$\",\"li\",\"/docs/appearance\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"appearance\",\"path\":\"/docs/appearance\"}],false]}],[\"$\",\"li\",\"/docs/caret-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"caret-color\",\"path\":\"/docs/caret-color\"}],false]}],[\"$\",\"li\",\"/docs/color-scheme\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"color-scheme\",\"path\":\"/docs/color-scheme\"}],false]}],[\"$\",\"li\",\"/docs/cursor\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"cursor\",\"path\":\"/docs/cursor\"}],false]}],[\"$\",\"li\",\"/docs/field-sizing\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"field-sizing\",\"path\":\"/docs/field-sizing\"}],false]}],[\"$\",\"li\",\"/docs/pointer-events\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"pointer-events\",\"path\":\"/docs/pointer-events\"}],false]}],[\"$\",\"li\",\"/docs/resize\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"resize\",\"path\":\"/docs/resize\"}],false]}],[\"$\",\"li\",\"/docs/scroll-behavior\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-behavior\",\"path\":\"/docs/scroll-behavior\"}],false]}],[\"$\",\"li\",\"/docs/scrollbar-color\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scrollbar-color\",\"path\":\"/docs/scrollbar-color\"}],false]}],[\"$\",\"li\",\"/docs/scrollbar-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scrollbar-width\",\"path\":\"/docs/scrollbar-width\"}],false]}],[\"$\",\"li\",\"/docs/scrollbar-gutter\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scrollbar-gutter\",\"path\":\"/docs/scrollbar-gutter\"}],false]}],[\"$\",\"li\",\"/docs/scroll-margin\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-margin\",\"path\":\"/docs/scroll-margin\"}],false]}],[\"$\",\"li\",\"/docs/scroll-padding\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-padding\",\"path\":\"/docs/scroll-padding\"}],false]}],[\"$\",\"li\",\"/docs/scroll-snap-align\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-snap-align\",\"path\":\"/docs/scroll-snap-align\"}],false]}],[\"$\",\"li\",\"/docs/scroll-snap-stop\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-snap-stop\",\"path\":\"/docs/scroll-snap-stop\"}],false]}],[\"$\",\"li\",\"/docs/scroll-snap-type\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"scroll-snap-type\",\"path\":\"/docs/scroll-snap-type\"}],false]}],[\"$\",\"li\",\"/docs/touch-action\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"touch-action\",\"path\":\"/docs/touch-action\"}],false]}],[\"$\",\"li\",\"/docs/user-select\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"user-select\",\"path\":\"/docs/user-select\"}],false]}],[\"$\",\"li\",\"/docs/will-change\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"will-change\",\"path\":\"/docs/will-change\"}],false]}]]}]]}]\n"])</script>
49<script>self.__next_f.push([1,"61:[\"$\",\"div\",\"SVG\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"SVG\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/fill\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"fill\",\"path\":\"/docs/fill\"}],false]}],[\"$\",\"li\",\"/docs/stroke\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"stroke\",\"path\":\"/docs/stroke\"}],false]}],[\"$\",\"li\",\"/docs/stroke-width\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"stroke-width\",\"path\":\"/docs/stroke-width\"}],false]}]]}]]}]\n62:[\"$\",\"div\",\"Accessibility\",{\"className\":\"flex flex-col gap-3\",\"data-autoscroll\":true,\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400\",\"children\":\"Accessibility\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,var(--color-gray-950),white_20%)] border-[color-mix(in_oklab,var(--color-gray-950),white_90%)]\",\"children\":[[\"$\",\"li\",\"/docs/forced-color-adjust\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"forced-color-adjust\",\"path\":\"/docs/forced-color-adjust\"}],false]}]]}]]}]\n63:[\"$\",\"div\",null,{\"className\":\"col-start-2 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10\"}]\n64:[\"$\",\"div\",null,{\"className\":\"relative row-start-1 grid grid-cols-subgrid bg-white lg:col-start-3 dark:bg-gray-950\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex h-[calc(100vh-3.5rem)] items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-auto flex-col items-center justify-center px-4 text-center sm:flex-row\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-2xl font-extrabold tracking-tight text-gray-900 sm:mr-6 sm:border-r sm:border-gray-900/10 sm:pr-6 sm:text-3xl dark:text-gray-200 sm:dark:border-gray-300/10\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-2 text-gray-700 sm:mt-0 dark:text-gray-400\",\"children\":\"This page could not be found.\"}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n65:[\"$\",\"div\",null,{\"className\":\"col-start-4 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10\"}]\n66:[\"$\",\"div\",null,{\"className\":\"col-span-full col-start-2 row-start-2 h-px bg-gray-950/5 dark:bg-white/10\"}]\n"])</script>
49<script>self.__next_f.push([1,"67:[\"$\",\"div\",null,{\"className\":\"row-start-3 lg:col-start-3\",\"children\":[\"$\",\"footer\",null,{\"className\":\"bg-white text-sm/loose text-gray-950 dark:bg-gray-950 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex gap-4 p-4 md:hidden max-w-2xl lg:max-w-5xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-10\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Tailwind CSS\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/docs\",\"className\":\"hover:underline\",\"children\":\"Documentation\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://play.tailwindcss.com/\",\"className\":\"hover:underline\",\"children\":\"Playground\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/blog\",\"className\":\"hover:underline\",\"children\":\"Blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/showcase\",\"className\":\"hover:underline\",\"children\":\"Showcase\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://www.refactoringui.com\",\"className\":\"hover:underline\",\"children\":\"Refactoring UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://headlessui.com\",\"className\":\"hover:underline\",\"children\":\"Headless UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heroicons.com\",\"className\":\"hover:underline\",\"children\":\"Heroicons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heropatterns.com\",\"className\":\"hover:underline\",\"children\":\"Hero Patterns\"}]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-10\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Community\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://github.com/tailwindlabs/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://x.com/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"X\"}]}]]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"mx-auto hidden w-full grid-cols-3 justify-between gap-y-0 md:grid md:grid-cols-3 md:gap-6 md:gap-x-4 lg:gap-8 max-w-2xl lg:max-w-5xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Tailwind CSS\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/docs\",\"className\":\"hover:underline\",\"children\":\"Documentation\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://play.tailwindcss.com/\",\"className\":\"hover:underline\",\"children\":\"Playground\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/blog\",\"className\":\"hover:underline\",\"children\":\"Blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/showcase\",\"className\":\"hover:underline\",\"children\":\"Showcase\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 sm:border-b-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://www.refactoringui.com\",\"className\":\"hover:underline\",\"children\":\"Refactoring UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://headlessui.com\",\"className\":\"hover:underline\",\"children\":\"Headless UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heroicons.com\",\"className\":\"hover:underline\",\"children\":\"Heroicons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heropatterns.com\",\"className\":\"hover:underline\",\"children\":\"Hero Patterns\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-x border-gray-950/5 py-10 pl-2 not-md:border-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Community\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://github.com/tailwindlabs/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://x.com/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"X\"}]}]]}]]}]]}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"68:[\"$\",\"div\",null,{\"className\":\"col-span-full col-start-2 row-start-4 h-px bg-gray-950/5 dark:bg-white/10\"}]\n69:[\"$\",\"div\",null,{\"className\":\"row-start-5 grid lg:col-start-3\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-2 pt-10 pb-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex w-full flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between sm:gap-8 max-w-2xl lg:max-w-5xl\",\"children\":[[\"$\",\"$L7a\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4 text-sm/6 text-gray-700 sm:flex-row sm:gap-2 sm:pr-4 dark:text-gray-400\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"Copyright © \",2026,\" Tailwind Labs Inc.\"]}],[\"$\",\"span\",null,{\"className\":\"max-sm:hidden\",\"children\":\"·\"}],[\"$\",\"$L1c\",null,{\"href\":\"/brand\",\"className\":\"hover:underline\",\"children\":\"Trademark Policy\"}]]}]]}]}]}]\n"])</script>
49<script>self.__next_f.push([1,"3d:[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child\u003e\u0026]:rounded-t-xl in-data-stack:[:first-child\u003e\u0026]:*:rounded-t-xl in-data-stack:[:last-child\u003e\u0026]:rounded-b-xl in-data-stack:[:last-child\u003e\u0026]:*:rounded-b-xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50\",\"children\":\"CSS\"}],[\"$\",\"$L6a\",null,{\"className\":\"absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75\",\"value\":\"@import \\\"tailwindcss\\\";\"}]]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpre class=\\\"shiki tailwindcss-theme\\\" style=\\\"background-color:transparent;color:var(--color-slate-50)\\\" tabindex=\\\"0\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-slate-300)\\\"\u003e@import\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e \\\"tailwindcss\\\"\u003c/span\u003e\u003cspan style=\\\"color:var(--color-slate-300)\\\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"3e:[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child\u003e\u0026]:rounded-t-xl in-data-stack:[:first-child\u003e\u0026]:*:rounded-t-xl in-data-stack:[:last-child\u003e\u0026]:rounded-b-xl in-data-stack:[:last-child\u003e\u0026]:*:rounded-b-xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50\",\"children\":\"Terminal\"}],[\"$\",\"$L6a\",null,{\"className\":\"absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75\",\"value\":\"npm run dev\"}]]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpre class=\\\"shiki tailwindcss-theme\\\" style=\\\"background-color:transparent;color:var(--color-slate-50)\\\" tabindex=\\\"0\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003enpm\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e run\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e dev\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"7b:Tf4e,"])</script>
49<script>self.__next_f.push([1,"\u003cpre class=\"shiki tailwindcss-theme has-highlighted\" style=\"background-color:transparent;color:var(--color-slate-50)\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;!\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003edoctype\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e html\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ehtml\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ehead\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e  \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003emeta\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e charset\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"UTF-8\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e  \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003emeta\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e name\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"viewport\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e content\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"width=device-width, initial-scale=1.0\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e  \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003elink\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e href\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"/src/style.css\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e rel\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"stylesheet\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ehead\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ebody\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e  \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eh1\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"text-3xl font-bold underline\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e    Hello world!\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line -mx-5 pl-[calc(var(--spacing)*5-2px)] border-l-2 pr-5 border-sky-400 bg-sky-300/15\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e  \u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eh1\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ebody\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ehtml\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script>
49<script>self.__next_f.push([1,"3f:[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child\u003e\u0026]:rounded-t-xl in-data-stack:[:first-child\u003e\u0026]:*:rounded-t-xl in-data-stack:[:last-child\u003e\u0026]:rounded-b-xl in-data-stack:[:last-child\u003e\u0026]:*:rounded-b-xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50\",\"children\":\"HTML\"}],[\"$\",\"$L6a\",null,{\"className\":\"absolute z-10 transition duration-150 group-hover/code-block:opacity-100 -top-1 right-0 text-white/50 hover:text-white/75\",\"value\":\"\u003c!doctype html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n  \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n  \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n  \u003clink href=\\\"/src/style.css\\\" rel=\\\"stylesheet\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n  \u003ch1 class=\\\"text-3xl font-bold underline\\\"\u003e\\n    Hello world!\\n  \u003c/h1\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\"}]]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-lh *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$7b\"}}]]}]}]\n"])</script>
49<script>self.__next_f.push([1,"6c:[\"$\",\"$L2b\",null,{\"title\":\"place-items\",\"path\":\"/docs/place-items\"}]\n6d:[\"$\",\"li\",\"/docs/place-self\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"place-self\",\"path\":\"/docs/place-self\"}],false]}]\n6e:[\"$\",\"li\",\"/docs/text-transform\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-transform\",\"path\":\"/docs/text-transform\"}],false]}]\n6f:[\"$\",\"li\",\"/docs/text-overflow\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-overflow\",\"path\":\"/docs/text-overflow\"}],false]}]\n70:[\"$\",\"li\",\"/docs/text-wrap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-wrap\",\"path\":\"/docs/text-wrap\"}],false]}]\n71:[\"$\",\"li\",\"/docs/text-indent\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"text-indent\",\"path\":\"/docs/text-indent\"}],false]}]\n72:[\"$\",\"li\",\"/docs/tab-size\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"tab-size\",\"path\":\"/docs/tab-size\"}],false]}]\n73:[\"$\",\"li\",\"/docs/vertical-align\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"vertical-align\",\"path\":\"/docs/vertical-align\"}],false]}]\n74:[\"$\",\"li\",\"/docs/white-space\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"white-space\",\"path\":\"/docs/white-space\"}],false]}]\n75:[\"$\",\"li\",\"/docs/word-break\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"word-break\",\"path\":\"/docs/word-break\"}],false]}]\n76:[\"$\",\"li\",\"/docs/overflow-wrap\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"overflow-wrap\",\"path\":\"/docs/overflow-wrap\"}],false]}]\n77:[\"$\",\"li\",\"/docs/hyphens\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"hyphens\",\"path\":\"/docs/hyphens\"}],false]}]\n78:[\"$\",\"li\",\"/docs/content\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[[\"$\",\"$L2b\",null,{\"title\":\"content\",\"path\":\"/docs/content\"}],false]}]\n79:[\"$\",\"li\",\"/docs/backdrop-filter-sepia\",{\"className\":\"-ml-px flex flex-col items-start gap-2\",\"children\":[\"$\",\"$L2b\",null,{\"title\":\"sepia\",\"path\":\"/docs/backdrop-filter-sepia\",\"nested\":true}]}]\n"])</script>
49<script>self.__next_f.push([1,"22:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
49<script>self.__next_f.push([1,"7c:I[81027,[\"/_next/static/chunks/0y97be86sc~2s.js\",\"/_next/static/chunks/17o076c4jq00a.js\",\"/_next/static/chunks/0wixf9kntow24.js\",\"/_next/static/chunks/14npz~h5j0o4o.js\"],\"IconMark\"]\n1f:null\n"])</script>
49<script>self.__next_f.push([1,"24:[[\"$\",\"title\",\"0\",{\"children\":\"Installing Tailwind CSS with Vite - Tailwind CSS\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS.\"}],[\"$\",\"meta\",\"2\",{\"property\":\"og:title\",\"content\":\"Installing with Vite - Installation\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:description\",\"content\":\"Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:url\",\"content\":\"https://tailwindcss.com/docs/installation/using-vite\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://tailwindcss.com/api/og?path=/docs/installation/using-vite\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"Installing with Vite - Installation\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:image\",\"content\":\"https://tailwindcss.com/api/og?path=/docs/installation/using-vite\"}],[\"$\",\"link\",\"11\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0cgjfh1m3jfig.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"$L7c\",\"12\",{}]]\n"])</script>
49</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.