yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ac8fe3db294f9190c01a11098aa61d36581da609
platform/services/brain/storage/76e16d78-d501-4a14-a3d8-a58bc13be121/archived_html/page.html
Yusuf Suleman 2072c359aa feat: wire brain service to platform gateway 
- Gateway proxies /api/brain/* to brain-api:8200/api/* via pangolin network
- User identity injected via X-Gateway-User-Id header
- Brain app registered in gateway database (sort_order 9)
- Added to GATEWAY_KEY_SERVICES for dashboard integration
- Tested: health, config, list, create all working through gateway

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 16:32:53 -05:00

208 lines
342 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><!--D_CvOyWUBUWYwHrX6psBJ--><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.ddd44df2.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_Medium-s.p.511bc7e4.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_MediumItalic-s.p.824237ad.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_Regular-s.p.170fa0da.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_SemiBold-s.p.4dbcf170.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/IBMPlexMono_SemiBoldItalic-s.p.63e919a5.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/InterVariable-s.p.53d7b668.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/InterVariable_Italic-s.p.8c0e9517.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/SourceSansPro_Regular_ttf-s.p.aa178fa4.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/Ubuntu_Mono_bold-s.p.36063628.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3603&amp;q=80" as="image"/><link rel="preload" href="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" as="image"/><link rel="stylesheet" href="/_next/static/chunks/0aa6f91bf69bba4f.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/22067bb27c370d37.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/743779ddfb90a35d.js"/><script src="/_next/static/chunks/ff579b18ed9296ac.js" async=""></script><script src="/_next/static/chunks/33e576c593493439.js" async=""></script><script src="/_next/static/chunks/6120162fc820413f.js" async=""></script><script src="/_next/static/chunks/turbopack-59447e2416b3e85b.js" async=""></script><script src="/_next/static/chunks/8af0df776a7020ae.js" async=""></script><script src="/_next/static/chunks/e343ebd917f30815.js" async=""></script><script src="/_next/static/chunks/3999145dce13d1ea.js" async=""></script><script src="/_next/static/chunks/396c9350f71c1071.js" async=""></script><script src="/_next/static/chunks/bea4eec49ddd3f96.js" async=""></script><script src="/_next/static/chunks/25dc322f57be6f14.js" async=""></script><script src="/_next/static/chunks/a8798b4b93dc70b0.js" async=""></script><script src="/_next/static/chunks/f85253431e2047ca.js" async=""></script><script src="/_next/static/chunks/918560bfa843b51f.js" async=""></script><script src="/_next/static/chunks/70e258b44c36445b.js" async=""></script><script src="/_next/static/chunks/16a6a8ec5f5434fe.js" async=""></script><link rel="preload" href="data:text/javascript;base64,CiAgaWYgKCEoJ191cGRhdGVUaGVtZScgaW4gd2luZG93KSkgewogICAgd2luZG93Ll91cGRhdGVUaGVtZSA9IGZ1bmN0aW9uIHVwZGF0ZVRoZW1lKHRoZW1lKSB7CiAgICAgIGxldCBjbGFzc0xpc3QgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0OwoKICAgICAgY2xhc3NMaXN0LnJlbW92ZSgibGlnaHQiLCAiZGFyayIsICJzeXN0ZW0iKTsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnbWV0YVtuYW1lPSJ0aGVtZS1jb2xvciJdJykuZm9yRWFjaChlbCA9PiBlbC5yZW1vdmUoKSkKICAgICAgaWYgKHRoZW1lID09PSAnZGFyaycpIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdkYXJrJykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ29rbGNoKC4xMyAuMDI4IDI2MS42OTIpJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIGlmICh0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgIGNsYXNzTGlzdC5hZGQoJ2xpZ2h0JykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ3doaXRlJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdzeXN0ZW0nKQoKICAgICAgICBsZXQgbWV0YTEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMS5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGExLmNvbnRlbnQgPSAnb2tsY2goLjEzIC4wMjggMjYxLjY5MiknCiAgICAgICAgbWV0YTEubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScKICAgICAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKG1ldGExKQoKICAgICAgICBsZXQgbWV0YTIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMi5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGEyLmNvbnRlbnQgPSAnd2hpdGUnCiAgICAgICAgbWV0YTIubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCknCiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChtZXRhMikKICAgICAgfQogICAgfQoKICAgIHRyeSB7CiAgICAgIF91cGRhdGVUaGVtZShsb2NhbFN0b3JhZ2UuY3VycmVudFRoZW1lKQogICAgfSBjYXRjaCAoXykge30KCiAgICB0cnkgewogICAgICBpZiAoLyhNYWN8aVBob25lfGlQb2R8aVBhZCkvaS50ZXN0KG5hdmlnYXRvci5wbGF0Zm9ybSkpIHsKICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnb3MtbWFjb3MnKQogICAgICB9CiAgICB9IGNhdGNoIChfKSB7fQogIH0K" 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>Tailwind CSS v4.0 - Tailwind CSS</title><meta name="description" content="We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer."/><meta property="og:title" content="Tailwind CSS v4.0"/><meta property="og:description" content="We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer."/><meta property="og:url" content="https://tailwindcss.com/blog/tailwindcss-v4"/><meta property="og:image" content="https://tailwindcss.com/_next/static/media/card.1a4fc606.jpg"/><meta property="og:type" content="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@tailwindcss"/><meta name="twitter:creator" content="@tailwindcss"/><meta name="twitter:title" content="Tailwind CSS v4.0"/><meta name="twitter:description" content="We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer."/><meta name="twitter:image" content="https://tailwindcss.com/_next/static/media/card.1a4fc606.jpg"/><link rel="icon" href="/favicon.ico?favicon.32781b0b.ico" sizes="48x48" type="image/x-icon"/><script type="text/javascript">
if (!('_updateTheme' in window)) {
window._updateTheme = function updateTheme(theme) {
let classList = document.documentElement.classList;
classList.remove("light", "dark", "system");
document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove())
if (theme === 'dark') {
classList.add('dark')
let meta = document.createElement('meta')
meta.name = 'theme-color'
meta.content = 'oklch(.13 .028 261.692)'
document.head.appendChild(meta)
} else if (theme === 'light') {
classList.add('light')
let meta = document.createElement('meta')
meta.name = 'theme-color'
meta.content = 'white'
document.head.appendChild(meta)
} else {
classList.add('system')
let meta1 = document.createElement('meta')
meta1.name = 'theme-color'
meta1.content = 'oklch(.13 .028 261.692)'
meta1.media = '(prefers-color-scheme: dark)'
document.head.appendChild(meta1)
let meta2 = document.createElement('meta')
meta2.name = 'theme-color'
meta2.content = 'white'
meta2.media = '(prefers-color-scheme: light)'
document.head.appendChild(meta2)
}
}
try {
_updateTheme(localStorage.currentTheme)
} catch (_) {}
try {
if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
document.documentElement.classList.add('os-macos')
}
} catch (_) {}
}
</script><script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script></head><body><div hidden=""><!--$--><!--/$--></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><div class="isolate"><div class="max-w-screen overflow-x-hidden"><div class="fixed inset-x-0 top-0 z-10 border-b border-black/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_ub5ulb_" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="">v<!-- -->4.2<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 dark:text-gray-400 [.os-macos_&amp;]:block">⌘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="/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="/sponsor">Sponsor</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-400/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><div class="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)]"><div class="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image: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><div class="text-gray-950 dark:text-white"><div hidden=""></div><div class="grid grid-cols-1 xl:grid-cols-[22rem_2.5rem_auto] xl:grid-rows-[1fr_auto]"><div class="col-start-2 row-span-2 border-r border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div><div class="max-xl:mx-auto max-xl:w-full max-xl:max-w-(--breakpoint-md)"><div class="mt-16 px-4 font-mono text-sm/7 font-medium tracking-widest text-gray-500 uppercase lg:px-2"><time dateTime="2025-01-22T22:00:00.000Z">January 22, 2025</time></div><div class="mb-6 px-4 lg:px-2 xl:mb-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><h1 class="inline-block max-w-(--breakpoint-md) text-[2.5rem]/10 tracking-tight text-pretty text-gray-950 max-lg:font-medium lg:text-6xl dark:text-gray-200">Tailwind CSS v4.0</h1></div></div><div class="max-xl:mx-auto max-xl:w-full max-xl:max-w-(--breakpoint-md)"><div class="flex flex-col gap-4"><div class="flex items-center px-4 py-2 font-medium whitespace-nowrap max-xl:before:-left-[100vw]! max-xl:after:-left-[100vw]! xl:px-2 xl:before:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:right-0 after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:right-0"><div class="flex gap-4"><img alt="" loading="lazy" width="36" height="36" decoding="async" data-nimg="1" class="size-12 rounded-full" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fadamwathan.19522b47.jpg&amp;w=48&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fadamwathan.19522b47.jpg&amp;w=96&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fadamwathan.19522b47.jpg&amp;w=96&amp;q=75"/><div class="flex flex-col justify-center gap-1 text-sm font-semibold"><div class="text-gray-950 dark:text-white">Adam Wathan</div><div><a href="https://twitter.com/adamwathan" target="_blank" rel="noopener noreferrer" class="text-sky-500 hover:text-sky-600 dark:text-sky-400">@<!-- -->adamwathan</a></div></div></div></div></div></div><div class="max-xl:mx-auto max-xl:mt-16 max-xl:w-full max-xl:max-w-(--breakpoint-md)"><div class="px-4 py-2 lg:px-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><article class="prose prose-blog max-w-(--breakpoint-md)"><div data-media="true"><div class="not-prose relative overflow-hidden rounded-xl"><div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-slate-950/10 ring-inset dark:ring-white/10"></div><img alt="Tailwind CSS v4.0" loading="lazy" width="1536" height="806" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcard.1a4fc606.jpg&amp;w=1920&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcard.1a4fc606.jpg&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcard.1a4fc606.jpg&amp;w=3840&amp;q=75"/></div></div>
<p>Holy shit it&#x27;s actually done — we just tagged Tailwind CSS v4.0.</p>
<p>Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.</p>
<ul>
<li><a href="#new-high-performance-engine">New high-performance engine</a> — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.</li>
<li><a href="#designed-for-the-modern-web">Designed for the modern web</a> — built on cutting-edge CSS features like cascade layers, registered custom properties with <code>@property</code>, and <code>color-mix()</code>.</li>
<li><a href="#simplified-installation">Simplified installation</a> — fewer dependencies, zero configuration, and just a single line of code in your CSS file.</li>
<li><a href="#first-party-vite-plugin">First-party Vite plugin</a> — tight integration for maximum performance and minimum configuration.</li>
<li><a href="#automatic-content-detection">Automatic content detection</a> — all of your template files are discovered automatically, with no configuration required.</li>
<li><a href="#built-in-import-support">Built-in import support</a> — no additional tooling necessary to bundle multiple CSS files.</li>
<li><a href="#css-first-configuration">CSS-first configuration</a> — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.</li>
<li><a href="#css-theme-variables">CSS theme variables</a> — all of your design tokens exposed as native CSS variables so you can access them anywhere.</li>
<li><a href="#dynamic-utility-values-and-variants">Dynamic utility values and variants</a> — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.</li>
<li><a href="#modernized-p3-color-palette">Modernized P3 color palette</a> — a redesigned, more vivid color palette that takes full advantage of modern display technology.</li>
<li><a href="#container-queries">Container queries</a> — first-class APIs for styling elements based on their container size, no plugins required.</li>
<li><a href="#new-3d-transform-utilities">New 3D transform utilities</a> — transform elements in 3D space directly in your HTML.</li>
<li><a href="#expanded-gradient-apis">Expanded gradient APIs</a> — radial and conic gradients, interpolation modes, and more.</li>
<li><a href="#starting-style-support">@starting-style support</a> — a new variant you can use to create enter and exit transitions, without the need for JavaScript.</li>
<li><a href="#not-variant">not-* variant</a> — style an element only when it doesn&#x27;t match another variant, custom selector, or media or feature query.</li>
<li><a href="#even-more-new-utilities-and-variants">Even more new utilities and variants</a> — including support for <code>color-scheme</code>, <code>field-sizing</code>, complex shadows, <code>inert</code>, and more.</li>
</ul>
<p>Start using Tailwind CSS v4.0 today by <a href="/docs/installation">installing it in a new project</a>, or playing with it directly in the browser on <a href="https://play.tailwindcss.com/">Tailwind Play</a>.</p>
<p>For existing projects, we&#x27;ve published a comprehensive <a href="/docs/upgrade-guide">upgrade guide</a> and built an <a href="/docs/upgrade-guide#using-the-upgrade-tool">automated upgrade tool</a> to get you on the latest version as quickly and painlessly as possible.</p>
<hr/>
<h2 id="new-high-performance-engine"><a href="#new-high-performance-engine" class="anchor">New high-performance engine</a></h2>
<p>Tailwind CSS v4.0 is a ground-up rewrite of the framework, taking everything we&#x27;ve learned about the architecture over the years and optimizing it to be as fast as possible.</p>
<p>When benchmarking it on our own projects, we&#x27;ve found full rebuilds to be over 3.5x faster, and incremental builds to be over 8x faster.</p>
<p>Here are the median build times we saw when we benchmarked Tailwind CSS v4.0 against <a href="https://tailwindui.com/templates/catalyst">Catalyst</a>:</p>
<table><thead><tr><th></th><th>v3.4</th><th>v4.0</th><th>Improvement</th></tr></thead><tbody><tr><td>Full build</td><td>378ms</td><td>100ms</td><td>3.78x</td></tr><tr><td>Incremental rebuild with new CSS</td><td>44ms</td><td>5ms</td><td>8.8x</td></tr><tr><td>Incremental rebuild with no new CSS</td><td>35ms</td><td>192µs</td><td>182x</td></tr></tbody></table>
<p>The most impressive improvement is on incremental builds that don&#x27;t actually need to compile any new CSS — these builds are over 100x faster and complete in <em>microseconds</em>. And the longer you work on a project, the more of these builds you run into because you&#x27;re just using classes you&#x27;ve already used before, like <code>flex</code>, <code>col-span-2</code>, or <code>font-bold</code>.</p>
<hr/>
<h2 id="designed-for-the-modern-web"><a href="#designed-for-the-modern-web" class="anchor">Designed for the modern web</a></h2>
<p>The platform has evolved a lot since we released Tailwind CSS v3.0, and v4.0 takes full advantage of many of these improvements.</p>
<div><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 not-prose"><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></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-[1lh] *: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)">@layer</span><span style="color:var(--color-slate-50)"> theme</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> base</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> components</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> utilities</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> utilities </span><span style="color:var(--color-slate-300)">{</span></span><span class="line"><span style="color:var(--color-pink-400)"> .mx-6</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> margin-inline</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">calc</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-blue-200)">var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--spacing</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> *</span><span style="color:var(--color-slate-50)"> 6</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-pink-400)"> .bg-blue-500</span><span style="color:var(--color-slate-300)">\/</span><span style="color:var(--color-pink-400)">50</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> background-color</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">color-mix</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">in oklab</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-blue-200)"> var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--color-blue-500</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-50)"> 50</span><span style="color:var(--color-teal-100)">%</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> transparent</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-300)">@property</span><span style="color:var(--color-slate-50)"> --tw-gradient-from </span><span style="color:var(--color-slate-300)">{</span></span><span class="line"><span style="color:var(--color-slate-50)"> syntax: "&#x3C;color</span><span style="color:var(--color-slate-300)">></span><span style="color:var(--color-slate-50)">";</span></span><span class="line"><span style="color:var(--color-slate-50)"> inherits: false;</span></span><span class="line"><span style="color:var(--color-pink-400)"> initial-value</span><span style="color:var(--color-slate-50)">: </span><span style="color:var(--color-pink-400)">#</span><span style="color:var(--color-slate-50)">0000;</span></span><span class="line"><span style="color:var(--color-slate-50)">}</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>We&#x27;re leveraging modern CSS features like:</p>
<ul>
<li><strong>Native cascade layers</strong> — giving us more control than ever over how different style rules interact with each other.</li>
<li><strong>Registered custom properties</strong> — making it possible to do things like animate gradients, and significantly improving performance on large pages.</li>
<li><strong>color-mix()</strong> — which lets us adjust the opacity of any color value, including CSS variables and <code>currentColor</code>.</li>
<li><strong>Logical properties</strong> — simplifying RTL support and reducing the size of your generated CSS.</li>
</ul>
<p>Many of these features have even simplified Tailwind internally, reducing the surface area for bugs and making the framework easier for us to maintain.</p>
<hr/>
<h2 id="simplified-installation"><a href="#simplified-installation" class="anchor">Simplified installation</a></h2>
<p>We&#x27;ve streamlined the setup process a ton in v4.0, reducing the number of steps and removing a lot of boilerplate.</p>
<div data-stack="true"><div class="not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1"><div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">1. Install Tailwind CSS</div></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-[1lh] *: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)"> i</span><span style="color:var(--color-sky-300)"> tailwindcss</span><span style="color:var(--color-sky-300)"> @tailwindcss/postcss</span><span style="color:var(--color-slate-400)">;</span></span><span class="line"></span></code></pre></div></div></div></div><div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">2. Add the PostCSS plugin</div></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-[1lh] *: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-violet-300)">export</span><span style="color:var(--color-violet-300)"> default</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 style="color:var(--color-sky-300)">"@tailwindcss/postcss"</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-400)">};</span></span><span class="line"></span></code></pre></div></div></div></div><div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">3. Import Tailwind in your CSS</div></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-[1lh] *: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)">@import</span><span style="color:var(--color-sky-300)"> "tailwindcss"</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span></code></pre></div></div></div></div></div></div>
<p>With the improvements we&#x27;ve made to this process for v4.0, Tailwind feels more light-weight than ever:</p>
<ul>
<li><strong>Just one-line of CSS</strong> — no more <code>@tailwind</code> directives, just add <code>@import &quot;tailwindcss&quot;</code> and start building.</li>
<li><strong>Zero configuration</strong> — you can start using the framework without configuring anything, not even the paths to your template files.</li>
<li><strong>No external plugins required</strong> — we bundle <code>@import</code> rules for you out of the box, and use <a href="https://lightningcss.dev/">Lightning CSS</a> under the hood for vendor prefixing and modern syntax transforms.</li>
</ul>
<p>Sure you only go through this once per project, but it adds up when you&#x27;re starting and abandoning a different side-project every weekend.</p>
<h2 id="first-party-vite-plugin"><a href="#first-party-vite-plugin" class="anchor">First-party Vite plugin</a></h2>
<p>If you&#x27;re a Vite user, you can now integrate Tailwind using <a href="/docs/installation/using-vite"><code>@tailwindcss/vite</code></a> instead of PostCSS:</p>
<div><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 not-prose"><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></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-[1lh] *: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)">import</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 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-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 style="color:var(--color-slate-400)">;</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 style="color:var(--color-slate-400)">;</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>Tailwind CSS v4.0 is incredibly fast when used as a PostCSS plugin, but you&#x27;ll get even better performance using the Vite plugin.</p>
<h2 id="automatic-content-detection"><a href="#automatic-content-detection" class="anchor">Automatic content detection</a></h2>
<p>You know how you always had to configure that annoying <code>content</code> array in Tailwind CSS v3? In v4.0, we came up with a bunch of heuristics for detecting all of that stuff automatically so you don’t have to configure it at all.</p>
<p>For example, we automatically ignore anything in your <code>.gitignore</code> file to avoid scanning dependencies or generated files that aren’t under version control:</p>
<div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">.gitignore</div></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-[1lh] *: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)">/node_modules</span></span><span class="line"><span style="color:var(--color-pink-400)">/coverage</span></span><span class="line"><span style="color:var(--color-pink-400)">/.next/</span></span><span class="line"><span style="color:var(--color-pink-400)">/build</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>We also automatically ignore all binary extensions like images, videos, .zip files, and more.</p>
<p>And if you ever need to explicitly add a source that&#x27;s excluded by default, you can always add it with the <code>@source</code> directive, right in your CSS file:</p>
<div><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 not-prose"><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></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-[1lh] *: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)">@import</span><span style="color:var(--color-sky-300)"> "tailwindcss"</span><span style="color:var(--color-slate-300)">;</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)">@source</span><span style="color:var(--color-sky-300)"> "../node_modules/@my-company/ui-lib"</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>The <code>@source</code> directive uses the same heuristics under the hood, so it will exclude binary file types for example as well, without you having to specify all of the extensions to scan explicitly.</p>
<p>Learn more about in our new documentation on <a href="/docs/detecting-classes-in-source-files">detecting classes in source files</a>.</p>
<hr/>
<h2 id="built-in-import-support"><a href="#built-in-import-support" class="anchor">Built-in import support</a></h2>
<p>Before v4.0, if you wanted to inline other CSS files using <code>@import</code> you&#x27;d have to configure another plugin like <code>postcss-import</code> to handle it for you.</p>
<p>Now we handle this out of the box, so you don&#x27;t need any other tools:</p>
<div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">postcss.config.js</div></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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none"><pre class="shiki tailwindcss-theme [:where(&#x26;_.line)]:pl-4" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><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-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 relative -mx-5 border-l-4 border-red-400 bg-red-300/15 pr-5 pl-8 before:absolute before:left-4 before:text-red-400 before:content-[&#x27;-&#x27;]"><span style="color:var(--color-sky-300)"> "postcss-import"</span><span style="color:var(--color-slate-400)">,</span></span><span class="line"><span style="color:var(--color-sky-300)"> "@tailwindcss/postcss"</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><span class="line"></span></code></pre></div></div></div></div>
<p>Our import system is purpose-built for Tailwind CSS, so we&#x27;ve also been able to make it even faster by tightly integrating it with our engine.</p>
<hr/>
<h2 id="css-first-configuration"><a href="#css-first-configuration" class="anchor">CSS-first configuration</a></h2>
<p>One of the biggest changes in Tailwind CSS v4.0 is the shift from configuring your project in JavaScript to configuring it in CSS.</p>
<p>Instead of a <code>tailwind.config.js</code> file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:</p>
<div><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 not-prose"><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></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-[1lh] *: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)">@import</span><span style="color:var(--color-sky-300)"> "tailwindcss"</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-300)">@theme</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-teal-200)"> --font-display</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-sky-300)">"Satoshi"</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-sky-300)"> "sans-serif"</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span><span class="line"><span style="color:var(--color-teal-200)"> --breakpoint-3xl</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">1920</span><span style="color:var(--color-teal-100)">px</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-100</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.99 0 0</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-200</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.98 0.04 113.22</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-300</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.94 0.11 115.03</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-400</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.92 0.19 114.08</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-500</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.84 0.18 117.33</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-600</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.53 0.12 118.34</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"></span><span class="line"><span style="color:var(--color-teal-200)"> --ease-fluid</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">cubic-bezier</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.3</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 1</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --ease-snappy</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">cubic-bezier</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.2</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 1</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> /* ... */</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>The new CSS-first configuration lets you do just about everything you could do in your <code>tailwind.config.js</code> file, including configuring your design tokens, defining custom utilities and variants, and more.</p>
<p>To learn more about how it all works, read the new <a href="/docs/theme">theme variables</a> documentation.</p>
<hr/>
<h2 id="css-theme-variables"><a href="#css-theme-variables" class="anchor">CSS theme variables</a></h2>
<p>Tailwind CSS v4.0 takes all of your design tokens and makes them available as CSS variables by default, so you can reference any value you need at run-time using just CSS.</p>
<p>Using the example <code>@theme</code> from earlier, all of these values will be added to your CSS to as regular custom properties:</p>
<div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">Generated CSS</div></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-[1lh] *: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)">:root</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-teal-200)"> --font-display</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-sky-300)">"Satoshi"</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-sky-300)"> "sans-serif"</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span><span class="line"><span style="color:var(--color-teal-200)"> --breakpoint-3xl</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">1920</span><span style="color:var(--color-teal-100)">px</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-100</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.99 0 0</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-200</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.98 0.04 113.22</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-300</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.94 0.11 115.03</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-400</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.92 0.19 114.08</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-500</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.84 0.18 117.33</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --color-avocado-600</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.53 0.12 118.34</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"></span><span class="line"><span style="color:var(--color-teal-200)"> --ease-fluid</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">cubic-bezier</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.3</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 1</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-teal-200)"> --ease-snappy</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">cubic-bezier</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.2</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 0</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> 1</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> /* ... */</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>This makes it easy to reuse these values as inline styles or pass them to libraries like <a href="https://motion.dev/docs/react-animation#css-variables">Motion</a> to animate them.</p>
<hr/>
<h2 id="dynamic-utility-values-and-variants"><a href="#dynamic-utility-values-and-variants" class="anchor">Dynamic utility values and variants</a></h2>
<p>We&#x27;ve simplified the way many utilities and variants work in v4.0 by effectively allowing them to accept certain types of arbitrary values, <em>without</em> the need for any configuration or dropping down to the arbitrary value syntax.</p>
<p>For example, in Tailwind CSS v4.0 you can create grids of any size out of the box:</p>
<div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"grid </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">grid-cols-15</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div>
<p>You can also target custom boolean data attributes without needing to define them:</p>
<div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-300)"> data-current</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)">"opacity-75 </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">data-current:opacity-100</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div>
<p>Even spacing utilities like <code>px-*</code>, <code>mt-*</code>, <code>w-*</code>, <code>h-*</code>, and more are now dynamically derived from a single spacing scale variable and accept any value out of the box:</p>
<div><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 not-prose"><div class="relative"><div class="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">Generated CSS</div></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-[1lh] *: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)">@layer</span><span style="color:var(--color-slate-50)"> theme </span><span style="color:var(--color-slate-300)">{</span></span><span class="line"><span style="color:var(--color-pink-400)"> :root</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-teal-200)"> --spacing</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">0.25</span><span style="color:var(--color-teal-100)">rem</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> utilities </span><span style="color:var(--color-slate-300)">{</span></span><span class="line"><span style="color:var(--color-pink-400)"> .mt-8</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> margin-top</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">calc</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-blue-200)">var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--spacing</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> *</span><span style="color:var(--color-slate-50)"> 8</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-pink-400)"> .w-17</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> width</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">calc</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-blue-200)">var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--spacing</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> *</span><span style="color:var(--color-slate-50)"> 17</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-pink-400)"> .pr-29</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> padding-right</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">calc</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-blue-200)">var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--spacing</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> *</span><span style="color:var(--color-slate-50)"> 29</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span></code></pre></div></div></div></div>
<p>The upgrade tool we released alongside v4.0 will even simplify most of these utilities for you automatically if it notices you using an arbitrary value that&#x27;s no longer needed.</p>
<hr/>
<h2 id="modernized-p3-color-palette"><a href="#modernized-p3-color-palette" class="anchor">Modernized P3 color palette</a></h2>
<p>We&#x27;ve upgraded the entire default color palette from <code>rgb</code> to <code>oklch</code>, taking advantage of the wider gamut to make the colors more vivid in places where we were previously limited by the sRGB color space.</p>
<div class="not-prose my-12"><div class="not-prose grid grid-cols-[repeat(17,minmax(0,1fr))] gap-1 md:gap-2"><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.971 0.013 17.38)"></div><div class="aspect-square rounded" style="background-color:oklch(0.936 0.032 17.717)"></div><div class="aspect-square rounded" style="background-color:oklch(0.885 0.062 18.334)"></div><div class="aspect-square rounded" style="background-color:oklch(0.808 0.114 19.571)"></div><div class="aspect-square rounded" style="background-color:oklch(0.704 0.191 22.216)"></div><div class="aspect-square rounded" style="background-color:oklch(0.637 0.237 25.331)"></div><div class="aspect-square rounded" style="background-color:oklch(0.577 0.245 27.325)"></div><div class="aspect-square rounded" style="background-color:oklch(0.505 0.213 27.518)"></div><div class="aspect-square rounded" style="background-color:oklch(0.444 0.177 26.899)"></div><div class="aspect-square rounded" style="background-color:oklch(0.396 0.141 25.723)"></div><div class="aspect-square rounded" style="background-color:oklch(0.258 0.092 26.042)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.98 0.016 73.684)"></div><div class="aspect-square rounded" style="background-color:oklch(0.954 0.038 75.164)"></div><div class="aspect-square rounded" style="background-color:oklch(0.901 0.076 70.697)"></div><div class="aspect-square rounded" style="background-color:oklch(0.837 0.128 66.29)"></div><div class="aspect-square rounded" style="background-color:oklch(0.75 0.183 55.934)"></div><div class="aspect-square rounded" style="background-color:oklch(0.705 0.213 47.604)"></div><div class="aspect-square rounded" style="background-color:oklch(0.646 0.222 41.116)"></div><div class="aspect-square rounded" style="background-color:oklch(0.553 0.195 38.402)"></div><div class="aspect-square rounded" style="background-color:oklch(0.47 0.157 37.304)"></div><div class="aspect-square rounded" style="background-color:oklch(0.408 0.123 38.172)"></div><div class="aspect-square rounded" style="background-color:oklch(0.266 0.079 36.259)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.987 0.022 95.277)"></div><div class="aspect-square rounded" style="background-color:oklch(0.962 0.059 95.617)"></div><div class="aspect-square rounded" style="background-color:oklch(0.924 0.12 95.746)"></div><div class="aspect-square rounded" style="background-color:oklch(0.879 0.169 91.605)"></div><div class="aspect-square rounded" style="background-color:oklch(0.828 0.189 84.429)"></div><div class="aspect-square rounded" style="background-color:oklch(0.769 0.188 70.08)"></div><div class="aspect-square rounded" style="background-color:oklch(0.666 0.179 58.318)"></div><div class="aspect-square rounded" style="background-color:oklch(0.555 0.163 48.998)"></div><div class="aspect-square rounded" style="background-color:oklch(0.473 0.137 46.201)"></div><div class="aspect-square rounded" style="background-color:oklch(0.414 0.112 45.904)"></div><div class="aspect-square rounded" style="background-color:oklch(0.279 0.077 45.635)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.987 0.026 102.212)"></div><div class="aspect-square rounded" style="background-color:oklch(0.973 0.071 103.193)"></div><div class="aspect-square rounded" style="background-color:oklch(0.945 0.129 101.54)"></div><div class="aspect-square rounded" style="background-color:oklch(0.905 0.182 98.111)"></div><div class="aspect-square rounded" style="background-color:oklch(0.852 0.199 91.936)"></div><div class="aspect-square rounded" style="background-color:oklch(0.795 0.184 86.047)"></div><div class="aspect-square rounded" style="background-color:oklch(0.681 0.162 75.834)"></div><div class="aspect-square rounded" style="background-color:oklch(0.554 0.135 66.442)"></div><div class="aspect-square rounded" style="background-color:oklch(0.476 0.114 61.907)"></div><div class="aspect-square rounded" style="background-color:oklch(0.421 0.095 57.708)"></div><div class="aspect-square rounded" style="background-color:oklch(0.286 0.066 53.813)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.986 0.031 120.757)"></div><div class="aspect-square rounded" style="background-color:oklch(0.967 0.067 122.328)"></div><div class="aspect-square rounded" style="background-color:oklch(0.938 0.127 124.321)"></div><div class="aspect-square rounded" style="background-color:oklch(0.897 0.196 126.665)"></div><div class="aspect-square rounded" style="background-color:oklch(0.841 0.238 128.85)"></div><div class="aspect-square rounded" style="background-color:oklch(0.768 0.233 130.85)"></div><div class="aspect-square rounded" style="background-color:oklch(0.648 0.2 131.684)"></div><div class="aspect-square rounded" style="background-color:oklch(0.532 0.157 131.589)"></div><div class="aspect-square rounded" style="background-color:oklch(0.453 0.124 130.933)"></div><div class="aspect-square rounded" style="background-color:oklch(0.405 0.101 131.063)"></div><div class="aspect-square rounded" style="background-color:oklch(0.274 0.072 132.109)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.982 0.018 155.826)"></div><div class="aspect-square rounded" style="background-color:oklch(0.962 0.044 156.743)"></div><div class="aspect-square rounded" style="background-color:oklch(0.925 0.084 155.995)"></div><div class="aspect-square rounded" style="background-color:oklch(0.871 0.15 154.449)"></div><div class="aspect-square rounded" style="background-color:oklch(0.792 0.209 151.711)"></div><div class="aspect-square rounded" style="background-color:oklch(0.723 0.219 149.579)"></div><div class="aspect-square rounded" style="background-color:oklch(0.627 0.194 149.214)"></div><div class="aspect-square rounded" style="background-color:oklch(0.527 0.154 150.069)"></div><div class="aspect-square rounded" style="background-color:oklch(0.448 0.119 151.328)"></div><div class="aspect-square rounded" style="background-color:oklch(0.393 0.095 152.535)"></div><div class="aspect-square rounded" style="background-color:oklch(0.266 0.065 152.934)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.979 0.021 166.113)"></div><div class="aspect-square rounded" style="background-color:oklch(0.95 0.052 163.051)"></div><div class="aspect-square rounded" style="background-color:oklch(0.905 0.093 164.15)"></div><div class="aspect-square rounded" style="background-color:oklch(0.845 0.143 164.978)"></div><div class="aspect-square rounded" style="background-color:oklch(0.765 0.177 163.223)"></div><div class="aspect-square rounded" style="background-color:oklch(0.696 0.17 162.48)"></div><div class="aspect-square rounded" style="background-color:oklch(0.596 0.145 163.225)"></div><div class="aspect-square rounded" style="background-color:oklch(0.508 0.118 165.612)"></div><div class="aspect-square rounded" style="background-color:oklch(0.432 0.095 166.913)"></div><div class="aspect-square rounded" style="background-color:oklch(0.378 0.077 168.94)"></div><div class="aspect-square rounded" style="background-color:oklch(0.262 0.051 172.552)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.984 0.014 180.72)"></div><div class="aspect-square rounded" style="background-color:oklch(0.953 0.051 180.801)"></div><div class="aspect-square rounded" style="background-color:oklch(0.91 0.096 180.426)"></div><div class="aspect-square rounded" style="background-color:oklch(0.855 0.138 181.071)"></div><div class="aspect-square rounded" style="background-color:oklch(0.777 0.152 181.912)"></div><div class="aspect-square rounded" style="background-color:oklch(0.704 0.14 182.503)"></div><div class="aspect-square rounded" style="background-color:oklch(0.6 0.118 184.704)"></div><div class="aspect-square rounded" style="background-color:oklch(0.511 0.096 186.391)"></div><div class="aspect-square rounded" style="background-color:oklch(0.437 0.078 188.216)"></div><div class="aspect-square rounded" style="background-color:oklch(0.386 0.063 188.416)"></div><div class="aspect-square rounded" style="background-color:oklch(0.277 0.046 192.524)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.984 0.019 200.873)"></div><div class="aspect-square rounded" style="background-color:oklch(0.956 0.045 203.388)"></div><div class="aspect-square rounded" style="background-color:oklch(0.917 0.08 205.041)"></div><div class="aspect-square rounded" style="background-color:oklch(0.865 0.127 207.078)"></div><div class="aspect-square rounded" style="background-color:oklch(0.789 0.154 211.53)"></div><div class="aspect-square rounded" style="background-color:oklch(0.715 0.143 215.221)"></div><div class="aspect-square rounded" style="background-color:oklch(0.609 0.126 221.723)"></div><div class="aspect-square rounded" style="background-color:oklch(0.52 0.105 223.128)"></div><div class="aspect-square rounded" style="background-color:oklch(0.45 0.085 224.283)"></div><div class="aspect-square rounded" style="background-color:oklch(0.398 0.07 227.392)"></div><div class="aspect-square rounded" style="background-color:oklch(0.302 0.056 229.695)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.977 0.013 236.62)"></div><div class="aspect-square rounded" style="background-color:oklch(0.951 0.026 236.824)"></div><div class="aspect-square rounded" style="background-color:oklch(0.901 0.058 230.902)"></div><div class="aspect-square rounded" style="background-color:oklch(0.828 0.111 230.318)"></div><div class="aspect-square rounded" style="background-color:oklch(0.746 0.16 232.661)"></div><div class="aspect-square rounded" style="background-color:oklch(0.685 0.169 237.323)"></div><div class="aspect-square rounded" style="background-color:oklch(0.588 0.158 241.966)"></div><div class="aspect-square rounded" style="background-color:oklch(0.5 0.134 242.749)"></div><div class="aspect-square rounded" style="background-color:oklch(0.443 0.11 240.79)"></div><div class="aspect-square rounded" style="background-color:oklch(0.391 0.09 240.876)"></div><div class="aspect-square rounded" style="background-color:oklch(0.293 0.066 243.157)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.97 0.014 254.604)"></div><div class="aspect-square rounded" style="background-color:oklch(0.932 0.032 255.585)"></div><div class="aspect-square rounded" style="background-color:oklch(0.882 0.059 254.128)"></div><div class="aspect-square rounded" style="background-color:oklch(0.809 0.105 251.813)"></div><div class="aspect-square rounded" style="background-color:oklch(0.707 0.165 254.624)"></div><div class="aspect-square rounded" style="background-color:oklch(0.623 0.214 259.815)"></div><div class="aspect-square rounded" style="background-color:oklch(0.546 0.245 262.881)"></div><div class="aspect-square rounded" style="background-color:oklch(0.488 0.243 264.376)"></div><div class="aspect-square rounded" style="background-color:oklch(0.424 0.199 265.638)"></div><div class="aspect-square rounded" style="background-color:oklch(0.379 0.146 265.522)"></div><div class="aspect-square rounded" style="background-color:oklch(0.282 0.091 267.935)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.962 0.018 272.314)"></div><div class="aspect-square rounded" style="background-color:oklch(0.93 0.034 272.788)"></div><div class="aspect-square rounded" style="background-color:oklch(0.87 0.065 274.039)"></div><div class="aspect-square rounded" style="background-color:oklch(0.785 0.115 274.713)"></div><div class="aspect-square rounded" style="background-color:oklch(0.673 0.182 276.935)"></div><div class="aspect-square rounded" style="background-color:oklch(0.585 0.233 277.117)"></div><div class="aspect-square rounded" style="background-color:oklch(0.511 0.262 276.966)"></div><div class="aspect-square rounded" style="background-color:oklch(0.457 0.24 277.023)"></div><div class="aspect-square rounded" style="background-color:oklch(0.398 0.195 277.366)"></div><div class="aspect-square rounded" style="background-color:oklch(0.359 0.144 278.697)"></div><div class="aspect-square rounded" style="background-color:oklch(0.257 0.09 281.288)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.969 0.016 293.756)"></div><div class="aspect-square rounded" style="background-color:oklch(0.943 0.029 294.588)"></div><div class="aspect-square rounded" style="background-color:oklch(0.894 0.057 293.283)"></div><div class="aspect-square rounded" style="background-color:oklch(0.811 0.111 293.571)"></div><div class="aspect-square rounded" style="background-color:oklch(0.702 0.183 293.541)"></div><div class="aspect-square rounded" style="background-color:oklch(0.606 0.25 292.717)"></div><div class="aspect-square rounded" style="background-color:oklch(0.541 0.281 293.009)"></div><div class="aspect-square rounded" style="background-color:oklch(0.491 0.27 292.581)"></div><div class="aspect-square rounded" style="background-color:oklch(0.432 0.232 292.759)"></div><div class="aspect-square rounded" style="background-color:oklch(0.38 0.189 293.745)"></div><div class="aspect-square rounded" style="background-color:oklch(0.283 0.141 291.089)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.977 0.014 308.299)"></div><div class="aspect-square rounded" style="background-color:oklch(0.946 0.033 307.174)"></div><div class="aspect-square rounded" style="background-color:oklch(0.902 0.063 306.703)"></div><div class="aspect-square rounded" style="background-color:oklch(0.827 0.119 306.383)"></div><div class="aspect-square rounded" style="background-color:oklch(0.714 0.203 305.504)"></div><div class="aspect-square rounded" style="background-color:oklch(0.627 0.265 303.9)"></div><div class="aspect-square rounded" style="background-color:oklch(0.558 0.288 302.321)"></div><div class="aspect-square rounded" style="background-color:oklch(0.496 0.265 301.924)"></div><div class="aspect-square rounded" style="background-color:oklch(0.438 0.218 303.724)"></div><div class="aspect-square rounded" style="background-color:oklch(0.381 0.176 304.987)"></div><div class="aspect-square rounded" style="background-color:oklch(0.291 0.149 302.717)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.977 0.017 320.058)"></div><div class="aspect-square rounded" style="background-color:oklch(0.952 0.037 318.852)"></div><div class="aspect-square rounded" style="background-color:oklch(0.903 0.076 319.62)"></div><div class="aspect-square rounded" style="background-color:oklch(0.833 0.145 321.434)"></div><div class="aspect-square rounded" style="background-color:oklch(0.74 0.238 322.16)"></div><div class="aspect-square rounded" style="background-color:oklch(0.667 0.295 322.15)"></div><div class="aspect-square rounded" style="background-color:oklch(0.591 0.293 322.896)"></div><div class="aspect-square rounded" style="background-color:oklch(0.518 0.253 323.949)"></div><div class="aspect-square rounded" style="background-color:oklch(0.452 0.211 324.591)"></div><div class="aspect-square rounded" style="background-color:oklch(0.401 0.17 325.612)"></div><div class="aspect-square rounded" style="background-color:oklch(0.293 0.136 325.661)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.971 0.014 343.198)"></div><div class="aspect-square rounded" style="background-color:oklch(0.948 0.028 342.258)"></div><div class="aspect-square rounded" style="background-color:oklch(0.899 0.061 343.231)"></div><div class="aspect-square rounded" style="background-color:oklch(0.823 0.12 346.018)"></div><div class="aspect-square rounded" style="background-color:oklch(0.718 0.202 349.761)"></div><div class="aspect-square rounded" style="background-color:oklch(0.656 0.241 354.308)"></div><div class="aspect-square rounded" style="background-color:oklch(0.592 0.249 0.584)"></div><div class="aspect-square rounded" style="background-color:oklch(0.525 0.223 3.958)"></div><div class="aspect-square rounded" style="background-color:oklch(0.459 0.187 3.815)"></div><div class="aspect-square rounded" style="background-color:oklch(0.408 0.153 2.432)"></div><div class="aspect-square rounded" style="background-color:oklch(0.284 0.109 3.907)"></div></div><div class="grid grid-cols-1 gap-2"><div class="aspect-square rounded" style="background-color:oklch(0.969 0.015 12.422)"></div><div class="aspect-square rounded" style="background-color:oklch(0.941 0.03 12.58)"></div><div class="aspect-square rounded" style="background-color:oklch(0.892 0.058 10.001)"></div><div class="aspect-square rounded" style="background-color:oklch(0.81 0.117 11.638)"></div><div class="aspect-square rounded" style="background-color:oklch(0.712 0.194 13.428)"></div><div class="aspect-square rounded" style="background-color:oklch(0.645 0.246 16.439)"></div><div class="aspect-square rounded" style="background-color:oklch(0.586 0.253 17.585)"></div><div class="aspect-square rounded" style="background-color:oklch(0.514 0.222 16.935)"></div><div class="aspect-square rounded" style="background-color:oklch(0.455 0.188 13.697)"></div><div class="aspect-square rounded" style="background-color:oklch(0.41 0.159 10.272)"></div><div class="aspect-square rounded" style="background-color:oklch(0.271 0.105 12.094)"></div></div></div></div>
<p>We&#x27;ve tried to keep the balance between all the colors the same as it was in v3, so even though we&#x27;ve refreshed things across the board, it shouldn&#x27;t feel like a breaking change when upgrading your existing projects.</p>
<hr/>
<h2 id="container-queries"><a href="#container-queries" class="anchor">Container queries</a></h2>
<p>We&#x27;ve brought container query support into core for v4.0, so you don&#x27;t need the <code>@tailwindcss/container-queries</code> plugin anymore:</p>
<div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@container</span><span style="color:var(--color-sky-300)">"</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)">div</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)">"grid grid-cols-1 </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@sm:grid-cols-3</span><span style="color:var(--color-sky-300)"> </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@lg:grid-cols-4</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)"> &#x3C;/</span><span style="color:var(--color-pink-400)">div</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)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div>
<p>We&#x27;ve also added support for max-width container queries using the new <code>@max-*</code> variant:</p>
<div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@container</span><span style="color:var(--color-sky-300)">"</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)">div</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)">"grid grid-cols-3 </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@max-md:grid-cols-1</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)"> &#x3C;/</span><span style="color:var(--color-pink-400)">div</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)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div>
<p>Like our regular breakpoint variants, you can also stack <code>@min-*</code> and <code>@max-*</code> variants to define container query ranges:</p>
<div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@container</span><span style="color:var(--color-sky-300)">"</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)">div</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)">"flex </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">@min-md:@max-xl:hidden</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)"> &#x3C;/</span><span style="color:var(--color-pink-400)">div</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)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div>
<p>Learn more in our all-new <a href="/docs/responsive-design#container-queries">container queries</a> documentation.</p>
<hr/>
<h2 id="new-3d-transform-utilities"><a href="#new-3d-transform-utilities" class="anchor">New 3D transform utilities</a></h2>
<p>We&#x27;ve finally added APIs for doing 3D transforms, like <code>rotate-x-*</code>, <code>rotate-y-*</code>, <code>scale-z-*</code>, <code>translate-z-*</code>, and tons more.</p>
<div><div class="not-prose isolate"><figure class="flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10"><div class="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8"><div class="grid perspective-distant"><article class="relative isolate z-10 flex w-full max-w-80 rotate-x-51 rotate-z-43 flex-col justify-end justify-self-center overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl transition-all duration-500 transform-3d"><img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3603&amp;q=80" alt="" class="absolute inset-0 -z-10 size-full object-cover"/><div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div><div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div><div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300"><time dateTime="2020-03-16" class="mr-8">Mar 16, 2020</time><div class="-ml-4 flex items-center gap-x-4"><svg view-box="0 0 2 2" class="-ml-0.5 size-0.5 flex-none fill-white/50"><circle r="1" cx="1" cy="1"></circle></svg><div class="flex gap-x-2.5"><img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="" class="size-6 flex-none rounded-full bg-white/10"/>Michael Foster</div></div></div><p class="mt-3 text-lg/6 font-semibold text-white"><span class="absolute inset-0"></span>Boost your conversion rate</p></article></div></div><div><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 not-prose"><div class="relative"></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">perspective-distant</span><span style="color:var(--color-sky-300)">"</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)">article</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">rotate-x-51</span><span style="color:var(--color-sky-300)"> </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">rotate-z-43</span><span style="color:var(--color-sky-300)"> </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">transform-3d</span><span style="color:var(--color-sky-300)"> ..."</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)"> &#x3C;/</span><span style="color:var(--color-pink-400)">article</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)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div></figure></div></div>
<p>Check out the updated <a href="/docs/transform-style"><code>transform-style</code></a>, <a href="/docs/rotate"><code>rotate</code></a>, <a href="/docs/perspective"><code>perspective</code></a>, and <a href="/docs/perspective-origin"><code>perspective-origin</code></a> documentation to get started.</p>
<hr/>
<h2 id="expanded-gradient-apis"><a href="#expanded-gradient-apis" class="anchor">Expanded gradient APIs</a></h2>
<p>We&#x27;ve added a ton of new gradient features in v4.0, so you can pull off even fancier effects without having to write any custom CSS.</p>
<h3 id="linear-gradient-angles"><a href="#linear-gradient-angles" class="anchor">Linear gradient angles</a></h3>
<p>Linear gradients now support angles as values, so you can use utilities like <code>bg-linear-45</code> to create a gradient on a 45 degree angle:</p>
<div><div class="not-prose isolate"><figure class="flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10"><div class="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8"><div class="grid place-items-center"><div class="size-32 rounded-lg bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div></div></div><div><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 not-prose"><div class="relative"></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">bg-linear-45</span><span style="color:var(--color-sky-300)"> from-indigo-500 via-purple-500 to-pink-500"</span><span style="color:var(--color-slate-400)">>&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div></figure></div></div>
<p>You may notice we&#x27;ve renamed <code>bg-gradient-*</code> to <code>bg-linear-*</code> too — you&#x27;ll see why shortly!</p>
<h3 id="gradient-interpolation-modifiers"><a href="#gradient-interpolation-modifiers" class="anchor">Gradient interpolation modifiers</a></h3>
<p>We&#x27;ve added the ability to control the color interpolation mode for gradients using a modifier, so a class like <code>bg-linear-to-r/srgb</code> interpolates using sRGB, and <code>bg-linear-to-r/oklch</code> interpolates using OKLCH:</p>
<div><div class="not-prose isolate"><figure class="flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10"><div class="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8"><div class="grid grid-cols-1 gap-4"><div class="h-16 rounded-lg bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div><div class="h-16 rounded-lg bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div></div></div><div><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 not-prose"><div class="relative"></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">bg-linear-to-r/srgb</span><span style="color:var(--color-sky-300)"> from-indigo-500 to-teal-400"</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">...</span><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">div</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)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">bg-linear-to-r/oklch</span><span style="color:var(--color-sky-300)"> from-indigo-500 to-teal-400"</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">...</span><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div></figure></div></div>
<p>Using polar color spaces like OKLCH or HSL can lead to much more vivid gradients when the <code>from-*</code> and <code>to-*</code> colors are far apart on the color wheel. We&#x27;re using OKLAB by default in v4.0 but you can always interpolate using a different color space by adding one of these modifiers.</p>
<h3 id="conic-and-radial-gradients"><a href="#conic-and-radial-gradients" class="anchor">Conic and radial gradients</a></h3>
<p>We&#x27;ve added new <code>bg-conic-*</code> and <code>bg-radial-*</code> utilities for creating conic and radial gradients:</p>
<div><div class="not-prose isolate"><figure class="flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10"><div class="not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8"><div class="flex justify-around p-8"><div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div><div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div></div></div><div><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 not-prose"><div class="relative"></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"size-24 rounded-full </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">bg-conic/[in_hsl_longer_hue]</span><span style="color:var(--color-sky-300)"> from-red-600 to-red-600"</span><span style="color:var(--color-slate-400)">>&#x3C;/</span><span style="color:var(--color-pink-400)">div</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)">div</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)">"size-24 rounded-full </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">bg-radial-[at_25%_25%]</span><span style="color:var(--color-sky-300)"> from-white to-zinc-900 to-75%"</span><span style="color:var(--color-slate-400)">>&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div></figure></div></div>
<p>These new utilities work alongside the existing <code>from-*</code>, <code>via-*</code>, and <code>to-*</code> utilities to let you create conic and radial gradients the same way you create linear gradients, and include modifiers for setting the color interpolation method and arbitrary value support for controlling details like the gradient position.</p>
<hr/>
<h2 id="starting-style-support"><a href="#starting-style-support" class="anchor">@starting-style support</a></h2>
<p>The new <code>starting</code> variant adds support for the new CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style"><code>@starting-style</code></a> feature, making it possible to transition element properties when an element is first displayed:</p>
<div><div class="not-prose isolate"><figure class="flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10"><div class="flex py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8"><iframe class="h-[340px] w-full" allowtransparency="true"></iframe></div><div><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 not-prose"><div class="relative"></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">button</span><span style="color:var(--color-slate-300)"> popovertarget</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"my-popover"</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">Check for updates</span><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">button</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)">div</span><span style="color:var(--color-slate-300)"> popover</span><span style="color:var(--color-slate-300)"> id</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"my-popover"</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">transition-discrete</span><span style="color:var(--color-sky-300)"> </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">starting:open:opacity-0</span><span style="color:var(--color-sky-300)"> ..."</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)"> &#x3C;/</span><span style="color:var(--color-pink-400)">div</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)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div></figure></div></div>
<p>With <code>@starting-style</code>, you can finally animate elements as they appear on the page without the need for any JavaScript at all. <a href="https://caniuse.com/mdn-css_at-rules_starting-style">Browser support</a> probably isn&#x27;t quite there yet for most teams, but we&#x27;re getting close!</p>
<hr/>
<h2 id="not-variant"><a href="#not-variant" class="anchor">not-* variant</a></h2>
<p>We&#x27;ve added a new <code>not-*</code> variant which finally adds support for the CSS <code>:not()</code> pseudo-class:</p>
<div data-stack="true"><div class="not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1"><div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">not-hover:opacity-75</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div><div><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 not-prose"><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></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-[1lh] *: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)">.not-hover</span><span style="color:var(--color-slate-300)">\:</span><span style="color:var(--color-pink-400)">opacity-75:not</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-pink-400)">*:hover</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> opacity</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">75</span><span style="color:var(--color-teal-100)">%</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span><span class="line"><span style="color:var(--color-slate-300)">@media</span><span style="color:var(--color-slate-300)"> not</span><span style="color:var(--color-slate-300)"> (</span><span style="color:var(--color-sky-300)">hover</span><span style="color:var(--color-slate-300)">:</span><span style="color:var(--color-sky-300)"> hover</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-pink-400)"> .not-hover</span><span style="color:var(--color-slate-300)">\:</span><span style="color:var(--color-pink-400)">opacity-75</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-sky-300)"> opacity</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">75</span><span style="color:var(--color-teal-100)">%</span><span style="color:var(--color-slate-300)">;</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-slate-300)">}</span></span><span class="line"></span></code></pre></div></div></div></div></div></div>
<p>It does double duty and also lets you negate media queries and <code>@supports</code> queries:</p>
<div data-stack="true"><div class="not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1"><div><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 not-prose"><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></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-[1lh] *: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-400)">&#x3C;</span><span style="color:var(--color-pink-400)">div</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)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&#x26;]:before:rounded-l-none">not-supports-hanging-punctuation:px-4</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400);font-style:italic"> &#x3C;!-- ... --></span></span><span class="line"><span style="color:var(--color-slate-400)">&#x3C;/</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"></span></code></pre></div></div></div></div><div><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 not-prose"><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></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-[1lh] *: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)">.not-supports-hanging-punctuation</span><span style="color:var(--color-slate-300)">\:</span><span style="color:var(--color-pink-400)">px-4</span><span style="color:var(--color-slate-300)"> {</span></span><span class="line"><span style="color:var(--color-slate-300)"> @</span><span style="color:var(--color-sky-300)">supports</span><span style="color:var(--color-sky-300)"> not</span><span style="color:var(--color-slate-300)"> (</span><span style="color:var(--color-sky-300)">hanging-punctuation</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--tw</span><span style="color:var(--color-slate-300)">)) {</span></span><span class="line"><span style="color:var(--color-sky-300)"> padding-inline</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">calc</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-blue-200)">var</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-teal-200)">--spacing</span><span style="color:var(--color-slate-300)">)</span><span style="color:var(--color-slate-300)"> *</span><span style="color:var(--color-slate-50)"> 4</span><span style="color:var(--color-slate-300)">);</span></span><span class="line"><span style="color:var(--color-slate-300)"> }</span></span><span class="line"><span style="color:var(--color-slate-50)">}</span></span><span class="line"></span></code></pre></div></div></div></div></div></div>
<p>Check out the new <a href="/docs/hover-focus-and-other-states#not"><code>not-*</code> documentation</a> to learn more.</p>
<hr/>
<h2 id="even-more-new-utilities-and-variants"><a href="#even-more-new-utilities-and-variants" class="anchor">Even more new utilities and variants</a></h2>
<p>We&#x27;ve added a ton of other new utilities and variants to v4.0 too, including:</p>
<ul>
<li><strong>New <a href="/docs/box-shadow#adding-an-inset-shadow"><code>inset-shadow-*</code></a> and <a href="/docs/box-shadow#adding-an-inset-ring"><code>inset-ring-*</code></a> utilities</strong> — making it possible to stack up to four layers of box shadows on a single element.</li>
<li><strong>New <a href="/docs/field-sizing"><code>field-sizing</code></a> utilities</strong> — for auto-resizing textareas without writing a single line of JavaScript.</li>
<li><strong>New <a href="/docs/color-scheme"><code>color-scheme</code></a> utilities</strong> — so you can finally get rid of those ugly light scrollbars in dark mode.</li>
<li><strong>New <a href="/docs/font-stretch"><code>font-stretch</code></a> utilities</strong> — for carefully tweaking variable fonts that support different widths.</li>
<li><strong>New <a href="/docs/hover-focus-and-other-states#styling-inert-elements"><code>inert</code></a> variant</strong> — for styling non-interactive elements marked with the <code>inert</code> attribute.</li>
<li><strong>New <a href="/docs/hover-focus-and-other-states#first-last-odd-and-even"><code>nth-*</code></a> variants</strong> — for doing really clever things you&#x27;ll eventually regret.</li>
<li><strong>New <a href="/docs/hover-focus-and-other-states#implicit-groups"><code>in-*</code></a> variant</strong> — which is a lot like <code>group-*</code>, but without the need for the <code>group</code> class.</li>
<li><strong>Support for <a href="/docs/hover-focus-and-other-states#openclosed-state"><code>:popover-open</code></a></strong> — using the existing <code>open</code> variant to also target open popovers.</li>
<li><strong>New <a href="/docs/hover-focus-and-other-states#styling-all-descendants">descendant variant</a></strong> — for styling all descendant elements, for better or for worse.</li>
</ul>
<p>Check out the relevant documentation for all of these features to learn more.</p>
<hr/>
<p><strong>And that&#x27;s it — that&#x27;s Tailwind CSS v4.0.</strong> It&#x27;s been years of work to get to this point, but we&#x27;re all extremely proud of this release and we can&#x27;t wait to see what you build with it.</p>
<p>Check it out, play with it, maybe even break it, and definitely let us know what you think.</p>
<p>Just no bug reports until tomorrow please — let us at least enjoy one celebratory team dinner and maybe relax in the hot tub at this hotel for a bit believing that somehow we really did ship flawless software.</p></article></div><div class="mt-16 px-4 py-4 sm:py-2 lg:px-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><section><h2 class="text-3xl font-medium tracking-tight text-slate-900 dark:text-white">Get all of our updates directly to your inbox.<br/>Sign up for our newsletter.</h2><div class="mt-10 max-w-md"><form class="flex flex-nowrap gap-4" action="https://app.convertkit.com/forms/3181881/subscriptions" method="post"><div class="max-w-82 flex-1"><div class="group relative"><div class="pointer-events-none absolute left-4 flex h-full items-center"><svg viewBox="0 0 20 20" fill="currentColor" class="size-4 text-gray-950/50 group-focus-within:text-gray-950 dark:text-white/50 dark:group-focus-within:text-white"><path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z"></path><path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z"></path></svg></div><input type="email" required="" autoComplete="email" aria-label="Email address" class="block w-full appearance-none rounded-4xl bg-white py-2 pr-3 pl-10 text-sm/6 text-gray-950 outline -outline-offset-1 outline-gray-950/8 placeholder:text-sm/6 placeholder:text-gray-950/50 focus:outline-gray-950 dark:bg-white/10 dark:text-white/50 dark:outline-white/15 dark:placeholder:text-white/50 dark:focus:outline-white" placeholder="Subscribe via email" name="email_address"/></div></div><div><button type="submit" class="rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600">Subscribe</button></div></form></div></section></div><div class="mt-46 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><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 *:first:border-l-0 *:last:border-r-0"><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><li><a class="hover:underline" href="/sponsor">Sponsor</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="mb-2 font-semibold"><a href="/plus?ref=footer" class="hover:underline">Tailwind Plus</a></h3><ul class="mt-4 grid gap-4"><li><a href="/plus/ui-blocks?ref=footer" class="hover:underline">UI Blocks</a></li><li><a href="/plus/templates?ref=footer" class="hover:underline">Templates</a></li><li><a href="/plus/ui-kit?ref=footer" class="hover:underline">UI Kit</a></li></ul></div><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="/sponsor#insiders">Discord</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-4 justify-between gap-y-0 md:grid md:grid-cols-4 md:gap-6 md:gap-x-4 lg:gap-8 *:first:border-l-0 *:last:border-r-0"><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><li><a class="hover:underline" href="/sponsor">Sponsor</a></li></ul></div><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="mb-2 font-semibold"><a href="/plus?ref=footer" class="hover:underline">Tailwind Plus</a></h3><ul class="mt-4 grid gap-4"><li><a href="/plus/ui-blocks?ref=footer" class="hover:underline">UI Blocks</a></li><li><a href="/plus/templates?ref=footer" class="hover:underline">Templates</a></li><li><a href="/plus/ui-kit?ref=footer" class="hover:underline">UI Kit</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="/sponsor#insiders">Discord</a></li><li><a class="hover:underline" href="https://x.com/tailwindcss">X</a></li></ul></div></div></footer></div><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 px-4 md:px-6 lg:px-8"><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_34inpfl5ulb_" 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_3b4inpfl5ulb_" 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><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_5b4inpfl5ulb_" 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_7b4inpfl5ulb_" 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 class="row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image: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"></div></div></div></div><script src="/_next/static/chunks/743779ddfb90a35d.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n4:I[151274,[\"/_next/static/chunks/8af0df776a7020ae.js\",\"/_next/static/chunks/e343ebd917f30815.js\"],\"default\"]\n5:I[592888,[\"/_next/static/chunks/8af0df776a7020ae.js\",\"/_next/static/chunks/e343ebd917f30815.js\"],\"default\"]\n7:I[990582,[\"/_next/static/chunks/8af0df776a7020ae.js\",\"/_next/static/chunks/e343ebd917f30815.js\"],\"OutletBoundary\"]\n8:\"$Sreact.suspense\"\na:I[990582,[\"/_next/static/chunks/8af0df776a7020ae.js\",\"/_next/static/chunks/e343ebd917f30815.js\"],\"ViewportBoundary\"]\nc:I[990582,[\"/_next/static/chunks/8af0df776a7020ae.js\",\"/_next/static/chunks/e343ebd917f30815.js\"],\"MetadataBoundary\"]\ne:I[302517,[],\"default\"]\n:HL[\"/_next/static/chunks/0aa6f91bf69bba4f.css\",\"style\"]\n:HL[\"/_next/static/chunks/22067bb27c370d37.css\",\"style\"]\n:HL[\"/_next/static/media/IBMPlexMono_Italic-s.p.ddd44df2.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_Medium-s.p.511bc7e4.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_MediumItalic-s.p.824237ad.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_Regular-s.p.170fa0da.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_SemiBold-s.p.4dbcf170.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/IBMPlexMono_SemiBoldItalic-s.p.63e919a5.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/InterVariable-s.p.53d7b668.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/InterVariable_Italic-s.p.8c0e9517.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/SourceSansPro_Regular_ttf-s.p.aa178fa4.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/Ubuntu_Mono_bold-s.p.36063628.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"D-CvOyWUBUWYwHrX6psBJ\",\"c\":[\"\",\"blog\",\"tailwindcss-v4\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"tailwindcss-v4\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0aa6f91bf69bba4f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/22067bb27c370d37.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3999145dce13d1ea.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/396c9350f71c1071.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/25dc322f57be6f14.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/f85253431e2047ca.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\":[\"$L6\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/918560bfa843b51f.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/70e258b44c36445b.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/16a6a8ec5f5434fe.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@9\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Ld\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"S\":true}\n"])</script><script>self.__next_f.push([1,"10:I[109571,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\"],\"\"]\n13:I[893963,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\"],\"Header\"]\nf:T5d9,"])</script><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><script>self.__next_f.push([1,"11:T7e8,"])</script><script>self.__next_f.push([1,"data:text/javascript;base64,CiAgaWYgKCEoJ191cGRhdGVUaGVtZScgaW4gd2luZG93KSkgewogICAgd2luZG93Ll91cGRhdGVUaGVtZSA9IGZ1bmN0aW9uIHVwZGF0ZVRoZW1lKHRoZW1lKSB7CiAgICAgIGxldCBjbGFzc0xpc3QgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0OwoKICAgICAgY2xhc3NMaXN0LnJlbW92ZSgibGlnaHQiLCAiZGFyayIsICJzeXN0ZW0iKTsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnbWV0YVtuYW1lPSJ0aGVtZS1jb2xvciJdJykuZm9yRWFjaChlbCA9PiBlbC5yZW1vdmUoKSkKICAgICAgaWYgKHRoZW1lID09PSAnZGFyaycpIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdkYXJrJykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ29rbGNoKC4xMyAuMDI4IDI2MS42OTIpJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIGlmICh0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgIGNsYXNzTGlzdC5hZGQoJ2xpZ2h0JykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ3doaXRlJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdzeXN0ZW0nKQoKICAgICAgICBsZXQgbWV0YTEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMS5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGExLmNvbnRlbnQgPSAnb2tsY2goLjEzIC4wMjggMjYxLjY5MiknCiAgICAgICAgbWV0YTEubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScKICAgICAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKG1ldGExKQoKICAgICAgICBsZXQgbWV0YTIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMi5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGEyLmNvbnRlbnQgPSAnd2hpdGUnCiAgICAgICAgbWV0YTIubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCknCiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChtZXRhMikKICAgICAgfQogICAgfQoKICAgIHRyeSB7CiAgICAgIF91cGRhdGVUaGVtZShsb2NhbFN0b3JhZ2UuY3VycmVudFRoZW1lKQogICAgfSBjYXRjaCAoXykge30KCiAgICB0cnkgewogICAgICBpZiAoLyhNYWN8aVBob25lfGlQb2R8aVBhZCkvaS50ZXN0KG5hdmlnYXRvci5wbGF0Zm9ybSkpIHsKICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnb3MtbWFjb3MnKQogICAgICB9CiAgICB9IGNhdGNoIChfKSB7fQogIH0K"])</script><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\":\"$f\"}}],[\"$\",\"$L10\",null,{\"src\":\"$11\"}]]}],\"$L12\"]}]\n"])</script><script>self.__next_f.push([1,"3:[\"$\",\"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\":[\"$\",\"$L13\",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-[image: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\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"div\",null,{\"className\":\"row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image: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\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"14:I[432426,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\"],\"default\"]\n15:I[104100,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\"],\"SearchProvider\"]\n16:I[894013,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\",\"/_next/static/chunks/918560bfa843b51f.js\",\"/_next/static/chunks/70e258b44c36445b.js\",\"/_next/static/chunks/16a6a8ec5f5434fe.js\"],\"ThemeProvider\"]\n"])</script><script>self.__next_f.push([1,"12:[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L14\",null,{}],[\"$\",\"$L15\",null,{\"children\":[\"$\",\"$L16\",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\":[\"$\",\"$L13\",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-[image: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-[image: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\"}]}]}]}]]}]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[999334,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\",\"/_next/static/chunks/918560bfa843b51f.js\",\"/_next/static/chunks/70e258b44c36445b.js\",\"/_next/static/chunks/16a6a8ec5f5434fe.js\"],\"Image\"]\n96:I[123768,[\"/_next/static/chunks/8af0df776a7020ae.js\",\"/_next/static/chunks/e343ebd917f30815.js\"],\"IconMark\"]\n"])</script><script>self.__next_f.push([1,"6:[[\"$\",\"div\",null,{\"hidden\":true}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 xl:grid-cols-[22rem_2.5rem_auto] xl:grid-rows-[1fr_auto]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-2 row-span-2 border-r border-l border-gray-950/5 max-xl:hidden dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"max-xl:mx-auto max-xl:w-full max-xl:max-w-(--breakpoint-md)\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mt-16 px-4 font-mono text-sm/7 font-medium tracking-widest text-gray-500 uppercase lg:px-2\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2025-01-22T22:00:00.000Z\",\"children\":\"January 22, 2025\"}]}],[\"$\",\"div\",null,{\"className\":\"mb-6 px-4 lg:px-2 xl:mb-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"h1\",null,{\"className\":\"inline-block max-w-(--breakpoint-md) text-[2.5rem]/10 tracking-tight text-pretty text-gray-950 max-lg:font-medium lg:text-6xl dark:text-gray-200\",\"children\":\"Tailwind CSS v4.0\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"max-xl:mx-auto max-xl:w-full max-xl:max-w-(--breakpoint-md)\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4\",\"children\":[[\"$\",\"div\",\"adamwathan\",{\"className\":\"flex items-center px-4 py-2 font-medium whitespace-nowrap max-xl:before:-left-[100vw]! max-xl:after:-left-[100vw]! xl:px-2 xl:before:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:right-0 after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:right-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex gap-4\",\"children\":[[\"$\",\"$L17\",null,{\"src\":\"/_next/static/media/adamwathan.19522b47.jpg\",\"alt\":\"\",\"className\":\"size-12 rounded-full\",\"width\":36,\"height\":36}],[\"$\",\"div\",null,{\"className\":\"flex flex-col justify-center gap-1 text-sm font-semibold\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-gray-950 dark:text-white\",\"children\":\"Adam Wathan\"}],[\"$\",\"div\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://twitter.com/adamwathan\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-sky-500 hover:text-sky-600 dark:text-sky-400\",\"children\":[\"@\",\"adamwathan\"]}]}]]}]]}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"max-xl:mx-auto max-xl:mt-16 max-xl:w-full max-xl:max-w-(--breakpoint-md)\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-4 py-2 lg:px-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"article\",null,{\"className\":\"prose prose-blog max-w-(--breakpoint-md)\",\"children\":[[\"$\",\"div\",null,{\"data-media\":true,\"className\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose relative overflow-hidden rounded-xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute inset-0 rounded-xl ring-1 ring-slate-950/10 ring-inset dark:ring-white/10\"}],[\"$\",\"$L17\",null,{\"width\":1536,\"src\":{\"src\":\"/_next/static/media/card.1a4fc606.jpg\",\"width\":1200,\"height\":630,\"blurWidth\":8,\"blurHeight\":4,\"blurDataURL\":\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/wAARCAAEAAgDAREAAhEBAxEB/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/9sAQwEKCwsODQ4cEBAcOygiKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDyeeJYUjKk5b1rUhH/2Q==\"},\"alt\":\"Tailwind CSS v4.0\"}]]}]}],\"\\n\",\"$L18\",\"\\n\",\"$L19\",\"\\n\",\"$L1a\",\"\\n\",\"$L1b\",\"\\n\",\"$L1c\",\"\\n\",\"$L1d\",\"\\n\",\"$L1e\",\"\\n\",\"$L1f\",\"\\n\",\"$L20\",\"\\n\",\"$L21\",\"\\n\",\"$L22\",\"\\n\",\"$L23\",\"\\n\",\"$L24\",\"\\n\",\"$L25\",\"\\n\",\"$L26\",\"\\n\",\"$L27\",\"\\n\",\"$L28\",\"\\n\",\"$L29\",\"\\n\",\"$L2a\",\"\\n\",\"$L2b\",\"\\n\",\"$L2c\",\"\\n\",\"$L2d\",\"\\n\",\"$L2e\",\"\\n\",\"$L2f\",\"\\n\",\"$L30\",\"\\n\",\"$L31\",\"\\n\",\"$L32\",\"\\n\",\"$L33\",\"\\n\",\"$L34\",\"\\n\",\"$L35\",\"\\n\",\"$L36\",\"\\n\",\"$L37\",\"\\n\",\"$L38\",\"\\n\",\"$L39\",\"\\n\",\"$L3a\",\"\\n\",\"$L3b\",\"\\n\",\"$L3c\",\"\\n\",\"$L3d\",\"\\n\",\"$L3e\",\"\\n\",\"$L3f\",\"\\n\",\"$L40\",\"\\n\",\"$L41\",\"\\n\",\"$L42\",\"\\n\",\"$L43\",\"\\n\",\"$L44\",\"\\n\",\"$L45\",\"\\n\",\"$L46\",\"\\n\",\"$L47\",\"\\n\",\"$L48\",\"\\n\",\"$L49\",\"\\n\",\"$L4a\",\"\\n\",\"$L4b\",\"\\n\",\"$L4c\",\"\\n\",\"$L4d\",\"\\n\",\"$L4e\",\"\\n\",\"$L4f\",\"\\n\",\"$L50\",\"\\n\",\"$L51\",\"\\n\",\"$L52\",\"\\n\",\"$L53\",\"\\n\",\"$L54\",\"\\n\",\"$L55\",\"\\n\",\"$L56\",\"\\n\",\"$L57\",\"\\n\",\"$L58\",\"\\n\",\"$L59\",\"\\n\",\"$L5a\",\"\\n\",\"$L5b\",\"\\n\",\"$L5c\",\"\\n\",\"$L5d\",\"\\n\",\"$L5e\",\"\\n\",\"$L5f\",\"\\n\",\"$L60\",\"\\n\",\"$L61\",\"\\n\",\"$L62\",\"\\n\",\"$L63\",\"\\n\",\"$L64\",\"\\n\",\"$L65\",\"\\n\",\"$L66\",\"\\n\",\"$L67\",\"\\n\",\"$L68\",\"\\n\",\"$L69\",\"\\n\",\"$L6a\",\"\\n\",\"$L6b\",\"\\n\",\"$L6c\",\"\\n\",\"$L6d\",\"\\n\",\"$L6e\",\"\\n\",\"$L6f\",\"\\n\",\"$L70\",\"\\n\",\"$L71\",\"\\n\",\"$L72\",\"\\n\",\"$L73\",\"\\n\",\"$L74\",\"\\n\",\"$L75\",\"\\n\",\"$L76\",\"\\n\",\"$L77\",\"\\n\",\"$L78\",\"\\n\",\"$L79\",\"\\n\",\"$L7a\",\"\\n\",\"$L7b\",\"\\n\",\"$L7c\",\"\\n\",\"$L7d\",\"\\n\",\"$L7e\",\"\\n\",\"$L7f\",\"\\n\",\"$L80\",\"\\n\",\"$L81\",\"\\n\",\"$L82\",\"\\n\",\"$L83\",\"\\n\",\"$L84\",\"\\n\",\"$L85\",\"\\n\",\"$L86\",\"\\n\",\"$L87\",\"\\n\",\"$L88\",\"\\n\",\"$L89\",\"\\n\",\"$L8a\",\"\\n\",\"$L8b\",\"\\n\",\"$L8c\",\"\\n\",\"$L8d\",\"\\n\",\"$L8e\",\"\\n\",\"$L8f\",\"\\n\",\"$L90\",\"\\n\",\"$L91\",\"\\n\",\"$L92\"]}]}],\"$L93\",\"$L94\",\"$L95\"]}]]}]]\n"])</script><script>self.__next_f.push([1,"9:null\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"title\",\"0\",{\"children\":\"Tailwind CSS v4.0 - Tailwind CSS\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.\"}],[\"$\",\"meta\",\"2\",{\"property\":\"og:title\",\"content\":\"Tailwind CSS v4.0\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:description\",\"content\":\"We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:url\",\"content\":\"https://tailwindcss.com/blog/tailwindcss-v4\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://tailwindcss.com/_next/static/media/card.1a4fc606.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:site\",\"content\":\"@tailwindcss\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:creator\",\"content\":\"@tailwindcss\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:title\",\"content\":\"Tailwind CSS v4.0\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:description\",\"content\":\"We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:image\",\"content\":\"https://tailwindcss.com/_next/static/media/card.1a4fc606.jpg\"}],[\"$\",\"link\",\"13\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.32781b0b.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"$L96\",\"14\",{}]]\n"])</script><script>self.__next_f.push([1,"97:I[785924,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\",\"/_next/static/chunks/918560bfa843b51f.js\",\"/_next/static/chunks/70e258b44c36445b.js\",\"/_next/static/chunks/16a6a8ec5f5434fe.js\"],\"\"]\nbe:I[356811,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\",\"/_next/static/chunks/918560bfa843b51f.js\",\"/_next/static/chunks/70e258b44c36445b.js\",\"/_next/static/chunks/16a6a8ec5f5434fe.js\"],\"Example\"]\nc3:I[792973,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\",\"/_next/static/chunks/918560bfa843b51f.js\",\"/_next/static/chunks/70e258b44c36445b.js\",\"/_next/static/chunks/16a6a8ec5f5434fe.js\"],\"Iframe\"]\ncd:I[894013,[\"/_next/static/chunks/3999145dce13d1ea.js\",\"/_next/static/chunks/396c9350f71c1071.js\",\"/_next/static/chunks/bea4eec49ddd3f96.js\",\"/_next/static/chunks/25dc322f57be6f14.js\",\"/_next/static/chunks/a8798b4b93dc70b0.js\",\"/_next/static/chunks/f85253431e2047ca.js\",\"/_next/static/chunks/918560bfa843b51f.js\",\"/_next/static/chunks/70e258b44c36445b.js\",\"/_next/static/chunks/16a6a8ec5f5434fe.js\"],\"default\"]\n:HL[\"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=3603\u0026q=80\",\"image\"]\n:HL[\"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=facearea\u0026facepad=2\u0026w=256\u0026h=256\u0026q=80\",\"image\"]\n18:[\"$\",\"p\",null,{\"children\":\"Holy shit it's actually done — we just tagged Tailwind CSS v4.0.\"}]\n19:[\"$\",\"p\",null,{\"children\":\"Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.\"}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#new-high-performance-engine\",\"children\":\"New high-performance engine\"}],\" — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#designed-for-the-modern-web\",\"children\":\"Designed for the modern web\"}],\" — built on cutting-edge CSS features like cascade layers, registered custom properties with \",[\"$\",\"code\",null,{\"children\":[\"@property\"]}],\", and \",[\"$\",\"code\",null,{\"children\":[\"color-mix()\"]}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#simplified-installation\",\"children\":\"Simplified installation\"}],\" — fewer dependencies, zero configuration, and just a single line of code in your CSS file.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#first-party-vite-plugin\",\"children\":\"First-party Vite plugin\"}],\" — tight integration for maximum performance and minimum configuration.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#automatic-content-detection\",\"children\":\"Automatic content detection\"}],\" — all of your template files are discovered automatically, with no configuration required.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#built-in-import-support\",\"children\":\"Built-in import support\"}],\" — no additional tooling necessary to bundle multiple CSS files.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#css-first-configuration\",\"children\":\"CSS-first configuration\"}],\" — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#css-theme-variables\",\"children\":\"CSS theme variables\"}],\" — all of your design tokens exposed as native CSS variables so you can access them anywhere.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#dynamic-utility-values-and-variants\",\"children\":\"Dynamic utility values and variants\"}],\" — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#modernized-p3-color-palette\",\"children\":\"Modernized P3 color palette\"}],\" — a redesigned, more vivid color palette that takes full advantage of modern display technology.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#container-queries\",\"children\":\"Container queries\"}],\" — first-class APIs for styling elements based on their container size, no plugins required.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#new-3d-transform-utilities\",\"children\":\"New 3D transform utilities\"}],\" — transform elements in 3D space directly in your HTML.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#expanded-gradient-apis\",\"children\":\"Expanded gradient APIs\"}],\" — radial and conic gradients, interpolation modes, and more.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#starting-style-support\",\"children\":\"@starting-style support\"}],\" — a new variant you can use to create enter and exit transitions, without the need for JavaScript.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#not-variant\",\"children\":\"not-* variant\"}],\" — style an element only when it doesn't match another variant, custom selector, or media or feature query.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"$L97\",null,{\"href\":\"#even-more-new-utilities-and-variants\",\"children\":\"Even more new utilities and variants\"}],\" — including support for \",[\"$\",\"code\",null,{\"children\":[\"color-scheme\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"field-sizing\"]}],\", complex shadows, \",[\"$\",\"code\",null,{\"children\":[\"inert\"]}],\", and more.\"]}],\"\\n\"]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"p\",null,{\"children\":[\"Start using Tailwind CSS v4.0 today by \",[\"$\",\"$L97\",null,{\"href\":\"/docs/installation/\",\"children\":\"installing it in a new project\"}],\", or playing with it directly in the browser on \",[\"$\",\"$L97\",null,{\"href\":\"https://play.tailwindcss.com/\",\"children\":\"Tailwind Play\"}],\".\"]}]\n1c:[\"$\",\"p\",null,{\"children\":[\"For existing projects, we've published a comprehensive \",[\"$\",\"$L97\",null,{\"href\":\"/docs/upgrade-guide\",\"children\":\"upgrade guide\"}],\" and built an \",[\"$\",\"$L97\",null,{\"href\":\"/docs/upgrade-guide#using-the-upgrade-tool\",\"children\":\"automated upgrade tool\"}],\" to get you on the latest version as quickly and painlessly as possible.\"]}]\n1d:[\"$\",\"hr\",null,{}]\n1e:[\"$\",\"h2\",null,{\"id\":\"new-high-performance-engine\",\"children\":[[\"$\",\"a\",\"link-new-high-performance-engine\",{\"href\":\"#new-high-performance-engine\",\"className\":\"anchor\",\"children\":\"New high-performance engine\"}]]}]\n1f:[\"$\",\"p\",null,{\"children\":\"Tailwind CSS v4.0 is a ground-up rewrite of the framework, taking everything we've learned about the architecture over the years and optimizing it to be as fast as possible.\"}]\n20:[\"$\",\"p\",null,{\"children\":\"When benchmarking it on our own projects, we've found full rebuilds to be over 3.5x faster, and incremental builds to be over 8x faster.\"}]\n21:[\"$\",\"p\",null,{\"children\":[\"Here are the median build times we saw when we benchmarked Tailwind CSS v4.0 against \",[\"$\",\"$L97\",null,{\"href\":\"https://tailwindui.com/templates/catalyst\",\"children\":\"Catalyst\"}],\":\"]}]\n22:[\"$\",\"table\",null,{\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{}],[\"$\",\"th\",null,{\"children\":\"v3.4\"}],[\"$\",\"th\",null,{\"children\":\"v4.0\"}],[\"$\",\"th\",null,{\"children\":\"Improvement\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Full build\"}],[\"$\",\"td\",null,{\"children\":\"378ms\"}],[\"$\",\"td\",null,{\"children\":\"100ms\"}],[\"$\",\"td\",null,{\"children\":\"3.78x\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Incremental rebuild with new CSS\"}],[\"$\",\"td\",null,{\"children\":\"44ms\"}],[\"$\",\"td\",null,{\"children\":\"5ms\"}],[\"$\",\"td\",null,{\"children\":\"8.8x\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"children\":\"Incremental rebuild with no new CSS\"}],[\"$\",\"td\",null,{\"children\":\"35ms\"}],[\"$\",\"td\",null,{\"children\":\"192µs\"}],[\"$\",\"td\",null,{\"children\":\"182x\"}]]}]]}]]}]\n23:[\"$\",\"p\",null,{\"children\":[\"The most impressive improvement is on incremental builds that don't actually need to compile any new CSS — these builds are over 100x faster and complete in \",[\"$\",\"em\",null,{\"children\":\"microseconds\"}],\". And the longer you work on a project, the more of these builds you run into because you're just using classes you've already used before, like \",[\"$\",\"code\",null,{\"children\":[\"flex\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"col-span-2\"]}],\", or \",[\"$\",\"code\",null,{\"children\":[\"font-bold\"]}],\".\"]}]\n24:[\"$\",\"hr\",null,{}]\n25:[\"$\",\"h2\",null,{\"id\":\"designed-for-the-modern-web\",\"children\":[[\"$\",\"a\",\"link-designed-for-the-modern-web\",{\"href\":\"#designed-for-the-modern-web\",\"className\":\"anchor\",\"children\":\"Designed for the modern web\"}]]}]\n26:[\"$\",\"p\",null,{\"children\":\"The platform has evolved a lot since we released Tailwind CSS v3.0, and v4.0 takes full advantage of many of these improvements.\"}]\n27:[\"$\",\"div\",null,{\"children\":\"$L98\"}]\n28:[\"$\",\"p\",null,{\"children\":\"We're leveraging modern CSS features like:\"}]\n29:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Native cascade layers\"}],\" — giving us more control than ever over how different style rules interact with each other.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Registered custom properties\"}],\" — making it possible to do things like animate gradients, and significantly improving performance on large pages.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"color-mix()\"}],\" — which lets us adjust the opacity of any color value, including CSS variables and \",[\"$\",\"code\",null,{\"children\":[\"currentColor\"]}],\".\"]}],\"\\n\",[\"$\","])</script><script>self.__next_f.push([1,"\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Logical properties\"}],\" — simplifying RTL support and reducing the size of your generated CSS.\"]}],\"\\n\"]}]\n2a:[\"$\",\"p\",null,{\"children\":\"Many of these features have even simplified Tailwind internally, reducing the surface area for bugs and making the framework easier for us to maintain.\"}]\n2b:[\"$\",\"hr\",null,{}]\n2c:[\"$\",\"h2\",null,{\"id\":\"simplified-installation\",\"children\":[[\"$\",\"a\",\"link-simplified-installation\",{\"href\":\"#simplified-installation\",\"className\":\"anchor\",\"children\":\"Simplified installation\"}]]}]\n2d:[\"$\",\"p\",null,{\"children\":\"We've streamlined the setup process a ton in v4.0, reducing the number of steps and removing a lot of boilerplate.\"}]\n2e:[\"$\",\"div\",null,{\"data-stack\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1\",\"children\":[[\"$\",\"div\",null,{\"children\":\"$L99\"}],[\"$\",\"div\",null,{\"children\":\"$L9a\"}],[\"$\",\"div\",null,{\"children\":\"$L9b\"}]]}]}]\n2f:[\"$\",\"p\",null,{\"children\":\"With the improvements we've made to this process for v4.0, Tailwind feels more light-weight than ever:\"}]\n30:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Just one-line of CSS\"}],\" — no more \",[\"$\",\"code\",null,{\"children\":[\"@tailwind\"]}],\" directives, just add \",[\"$\",\"code\",null,{\"children\":[\"@import \\\"tailwindcss\\\"\"]}],\" and start building.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Zero configuration\"}],\" — you can start using the framework without configuring anything, not even the paths to your template files.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"No external plugins required\"}],\" — we bundle \",[\"$\",\"code\",null,{\"children\":[\"@import\"]}],\" rules for you out of the box, and use \",[\"$\",\"$L97\",null,{\"href\":\"https://lightningcss.dev/\",\"children\":\"Lightning CSS\"}],\" under the hood for vendor prefixing and modern syntax transforms.\"]}],\"\\n\"]}]\n31:[\"$\",\"p\",null,{\"children\":\"Sure you only go through this once per project, but it adds up when you're starting and abandoning a different side-project every weekend.\"}]\n32:[\"$\",\"h2\",null,{\"id\":\"first-party-vite-plugin\",\"children\":[[\"$\",\"a\",\"link-first-party-vite-plugin\",{\"href\":\"#first-party-vite-plugin\",\"className\":\"anchor\",\"children\":\"First-party Vite plugin\"}]]}]\n33:[\"$\",\"p\",null,{\"children\":[\"If you're a Vite user, you can now integrate Tailwind using \",[\"$\",\"$L97\",null,{\"href\":\"/docs/installation/using-vite\",\"children\":[\"$\",\"code\",null,{\"children\":[\"@tailwindcss/vite\"]}]}],\" instead of PostCSS:\"]}]\n34:[\"$\",\"div\",null,{\"children\":\"$L9c\"}]\n35:[\"$\",\"p\",null,{\"children\":\"Tailwind CSS v4.0 is incredibly fast when used as a PostCSS plugin, but you'll get even better performance using the Vite plugin.\"}]\n36:[\"$\",\"h2\",null,{\"id\":\"automatic-content-detection\",\"children\":[[\"$\",\"a\",\"link-automatic-content-detection\",{\"href\":\"#automatic-content-detection\",\"className\":\"anchor\",\"children\":\"Automatic content detection\"}]]}]\n37:[\"$\",\"p\",null,{\"children\":[\"You know how you always had to configure that annoying \",[\"$\",\"code\",null,{\"children\":[\"content\"]}],\" array in Tailwind CSS v3? In v4.0, we came up with a bunch of heuristics for detecting all of that stuff automatically so you don’t have to configure it at all.\"]}]\n38:[\"$\",\"p\",null,{\"children\":[\"For example, we automatically ignore anything in your \",[\"$\",\"code\",null,{\"children\":[\".gitignore\"]}],\" file to avoid scanning dependencies or generated files that aren’t under version control:\"]}]\n39:[\"$\",\"div\",null,{\"children\":\"$L9d\"}]\n3a:[\"$\",\"p\",null,{\"children\":\"We also automatically ignore all binary extensions like images, videos, .zip files, and more.\"}]\n3b:[\"$\",\"p\",null,{\"children\":[\"And if you ever need to explicitly add a source that's excluded by default, you can always add it with the \",[\"$\",\"code\",null,{\"children\":[\"@source\"]}],\" directive, right in your CSS file:\"]}]\n3"])</script><script>self.__next_f.push([1,"c:[\"$\",\"div\",null,{\"children\":\"$L9e\"}]\n3d:[\"$\",\"p\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":[\"@source\"]}],\" directive uses the same heuristics under the hood, so it will exclude binary file types for example as well, without you having to specify all of the extensions to scan explicitly.\"]}]\n3e:[\"$\",\"p\",null,{\"children\":[\"Learn more about in our new documentation on \",[\"$\",\"$L97\",null,{\"href\":\"/docs/detecting-classes-in-source-files\",\"children\":\"detecting classes in source files\"}],\".\"]}]\n3f:[\"$\",\"hr\",null,{}]\n40:[\"$\",\"h2\",null,{\"id\":\"built-in-import-support\",\"children\":[[\"$\",\"a\",\"link-built-in-import-support\",{\"href\":\"#built-in-import-support\",\"className\":\"anchor\",\"children\":\"Built-in import support\"}]]}]\n41:[\"$\",\"p\",null,{\"children\":[\"Before v4.0, if you wanted to inline other CSS files using \",[\"$\",\"code\",null,{\"children\":[\"@import\"]}],\" you'd have to configure another plugin like \",[\"$\",\"code\",null,{\"children\":[\"postcss-import\"]}],\" to handle it for you.\"]}]\n42:[\"$\",\"p\",null,{\"children\":\"Now we handle this out of the box, so you don't need any other tools:\"}]\n43:[\"$\",\"div\",null,{\"children\":\"$L9f\"}]\n44:[\"$\",\"p\",null,{\"children\":\"Our import system is purpose-built for Tailwind CSS, so we've also been able to make it even faster by tightly integrating it with our engine.\"}]\n45:[\"$\",\"hr\",null,{}]\n46:[\"$\",\"h2\",null,{\"id\":\"css-first-configuration\",\"children\":[[\"$\",\"a\",\"link-css-first-configuration\",{\"href\":\"#css-first-configuration\",\"className\":\"anchor\",\"children\":\"CSS-first configuration\"}]]}]\n47:[\"$\",\"p\",null,{\"children\":\"One of the biggest changes in Tailwind CSS v4.0 is the shift from configuring your project in JavaScript to configuring it in CSS.\"}]\n48:[\"$\",\"p\",null,{\"children\":[\"Instead of a \",[\"$\",\"code\",null,{\"children\":[\"tailwind.config.js\"]}],\" file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:\"]}]\n49:[\"$\",\"div\",null,{\"children\":\"$La0\"}]\n4a:[\"$\",\"p\",null,{\"children\":[\"The new CSS-first configuration lets you do just about everything you could do in your \",[\"$\",\"code\",null,{\"children\":[\"tailwind.config.js\"]}],\" file, including configuring your design tokens, defining custom utilities and variants, and more.\"]}]\n4b:[\"$\",\"p\",null,{\"children\":[\"To learn more about how it all works, read the new \",[\"$\",\"$L97\",null,{\"href\":\"/docs/theme\",\"children\":\"theme variables\"}],\" documentation.\"]}]\n4c:[\"$\",\"hr\",null,{}]\n4d:[\"$\",\"h2\",null,{\"id\":\"css-theme-variables\",\"children\":[[\"$\",\"a\",\"link-css-theme-variables\",{\"href\":\"#css-theme-variables\",\"className\":\"anchor\",\"children\":\"CSS theme variables\"}]]}]\n4e:[\"$\",\"p\",null,{\"children\":\"Tailwind CSS v4.0 takes all of your design tokens and makes them available as CSS variables by default, so you can reference any value you need at run-time using just CSS.\"}]\n4f:[\"$\",\"p\",null,{\"children\":[\"Using the example \",[\"$\",\"code\",null,{\"children\":[\"@theme\"]}],\" from earlier, all of these values will be added to your CSS to as regular custom properties:\"]}]\n50:[\"$\",\"div\",null,{\"children\":\"$La1\"}]\n51:[\"$\",\"p\",null,{\"children\":[\"This makes it easy to reuse these values as inline styles or pass them to libraries like \",[\"$\",\"$L97\",null,{\"href\":\"https://motion.dev/docs/react-animation#css-variables\",\"children\":\"Motion\"}],\" to animate them.\"]}]\n52:[\"$\",\"hr\",null,{}]\n53:[\"$\",\"h2\",null,{\"id\":\"dynamic-utility-values-and-variants\",\"children\":[[\"$\",\"a\",\"link-dynamic-utility-values-and-variants\",{\"href\":\"#dynamic-utility-values-and-variants\",\"className\":\"anchor\",\"children\":\"Dynamic utility values and variants\"}]]}]\n54:[\"$\",\"p\",null,{\"children\":[\"We've simplified the way many utilities and variants work in v4.0 by effectively allowing them to accept certain types of arbitrary values, \",[\"$\",\"em\",null,{\"children\":\"without\"}],\" the need for any configuration or dropping down to the arbitrary value syntax.\"]}]\n55:[\"$\",\"p\",null,{\"children\":\"For example, in Tailwind CSS v4.0 you can create grids of any size out of the box:\"}]\n56:[\"$\",\"div\",null,{\"children\":\"$La2\"}]\n57:[\"$\",\"p\",null,{\"children\""])</script><script>self.__next_f.push([1,":\"You can also target custom boolean data attributes without needing to define them:\"}]\n58:[\"$\",\"div\",null,{\"children\":\"$La3\"}]\n59:[\"$\",\"p\",null,{\"children\":[\"Even spacing utilities like \",[\"$\",\"code\",null,{\"children\":[\"px-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"mt-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"w-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"h-*\"]}],\", and more are now dynamically derived from a single spacing scale variable and accept any value out of the box:\"]}]\n5a:[\"$\",\"div\",null,{\"children\":\"$La4\"}]\n5b:[\"$\",\"p\",null,{\"children\":\"The upgrade tool we released alongside v4.0 will even simplify most of these utilities for you automatically if it notices you using an arbitrary value that's no longer needed.\"}]\n5c:[\"$\",\"hr\",null,{}]\n5d:[\"$\",\"h2\",null,{\"id\":\"modernized-p3-color-palette\",\"children\":[[\"$\",\"a\",\"link-modernized-p3-color-palette\",{\"href\":\"#modernized-p3-color-palette\",\"className\":\"anchor\",\"children\":\"Modernized P3 color palette\"}]]}]\n5e:[\"$\",\"p\",null,{\"children\":[\"We've upgraded the entire default color palette from \",[\"$\",\"code\",null,{\"children\":[\"rgb\"]}],\" to \",[\"$\",\"code\",null,{\"children\":[\"oklch\"]}],\", taking advantage of the wider gamut to make the colors more vivid in places where we were previously limited by the sRGB color space.\"]}]\n"])</script><script>self.__next_f.push([1,"5f:[\"$\",\"div\",null,{\"className\":\"not-prose my-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose grid grid-cols-[repeat(17,minmax(0,1fr))] gap-1 md:gap-2\",\"children\":[[\"$\",\"div\",\"red\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.971 0.013 17.38)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.936 0.032 17.717)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.885 0.062 18.334)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.808 0.114 19.571)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.704 0.191 22.216)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.637 0.237 25.331)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.577 0.245 27.325)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.505 0.213 27.518)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.444 0.177 26.899)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.396 0.141 25.723)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.258 0.092 26.042)\"}}]]}],[\"$\",\"div\",\"orange\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.98 0.016 73.684)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.954 0.038 75.164)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.901 0.076 70.697)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.837 0.128 66.29)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.75 0.183 55.934)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.705 0.213 47.604)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.646 0.222 41.116)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.553 0.195 38.402)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.47 0.157 37.304)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.408 0.123 38.172)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.266 0.079 36.259)\"}}]]}],[\"$\",\"div\",\"amber\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.987 0.022 95.277)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.962 0.059 95.617)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.924 0.12 95.746)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.879 0.169 91.605)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.828 0.189 84.429)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.769 0.188 70.08)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.666 0.179 58.318)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.555 0.163 48.998)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.473 0.137 46.201)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.414 0.112 45.904)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.279 0.077 45.635)\"}}]]}],[\"$\",\"div\",\"yellow\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.987 0.026 102.212)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.973 0.071 103.193)\"}}],\"$La5\",\"$La6\",\"$La7\",\"$La8\",\"$La9\",\"$Laa\",\"$Lab\",\"$Lac\",\"$Lad\"]}],\"$Lae\",\"$Laf\",\"$Lb0\",\"$Lb1\",\"$Lb2\",\"$Lb3\",\"$Lb4\",\"$Lb5\",\"$Lb6\",\"$Lb7\",\"$Lb8\",\"$Lb9\",\"$Lba\"]}]}]\n"])</script><script>self.__next_f.push([1,"60:[\"$\",\"p\",null,{\"children\":\"We've tried to keep the balance between all the colors the same as it was in v3, so even though we've refreshed things across the board, it shouldn't feel like a breaking change when upgrading your existing projects.\"}]\n61:[\"$\",\"hr\",null,{}]\n62:[\"$\",\"h2\",null,{\"id\":\"container-queries\",\"children\":[[\"$\",\"a\",\"link-container-queries\",{\"href\":\"#container-queries\",\"className\":\"anchor\",\"children\":\"Container queries\"}]]}]\n63:[\"$\",\"p\",null,{\"children\":[\"We've brought container query support into core for v4.0, so you don't need the \",[\"$\",\"code\",null,{\"children\":[\"@tailwindcss/container-queries\"]}],\" plugin anymore:\"]}]\n64:[\"$\",\"div\",null,{\"children\":\"$Lbb\"}]\n65:[\"$\",\"p\",null,{\"children\":[\"We've also added support for max-width container queries using the new \",[\"$\",\"code\",null,{\"children\":[\"@max-*\"]}],\" variant:\"]}]\n66:[\"$\",\"div\",null,{\"children\":\"$Lbc\"}]\n67:[\"$\",\"p\",null,{\"children\":[\"Like our regular breakpoint variants, you can also stack \",[\"$\",\"code\",null,{\"children\":[\"@min-*\"]}],\" and \",[\"$\",\"code\",null,{\"children\":[\"@max-*\"]}],\" variants to define container query ranges:\"]}]\n68:[\"$\",\"div\",null,{\"children\":\"$Lbd\"}]\n69:[\"$\",\"p\",null,{\"children\":[\"Learn more in our all-new \",[\"$\",\"$L97\",null,{\"href\":\"/docs/responsive-design#container-queries\",\"children\":\"container queries\"}],\" documentation.\"]}]\n6a:[\"$\",\"hr\",null,{}]\n6b:[\"$\",\"h2\",null,{\"id\":\"new-3d-transform-utilities\",\"children\":[[\"$\",\"a\",\"link-new-3d-transform-utilities\",{\"href\":\"#new-3d-transform-utilities\",\"className\":\"anchor\",\"children\":\"New 3D transform utilities\"}]]}]\n6c:[\"$\",\"p\",null,{\"children\":[\"We've finally added APIs for doing 3D transforms, like \",[\"$\",\"code\",null,{\"children\":[\"rotate-x-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"rotate-y-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"scale-z-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"translate-z-*\"]}],\", and tons more.\"]}]\n"])</script><script>self.__next_f.push([1,"6d:[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose isolate\",\"children\":[\"$undefined\",[\"$\",\"figure\",null,{\"className\":\"flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10\",\"children\":[[\"$\",\"$Lbe\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"grid perspective-distant\",\"children\":[\"$\",\"article\",null,{\"className\":\"relative isolate z-10 flex w-full max-w-80 rotate-x-51 rotate-z-43 flex-col justify-end justify-self-center overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 shadow-xl transition-all duration-500 transform-3d\",\"children\":[[\"$\",\"img\",null,{\"src\":\"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=3603\u0026q=80\",\"alt\":\"\",\"className\":\"absolute inset-0 -z-10 size-full object-cover\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300\",\"children\":[[\"$\",\"time\",null,{\"dateTime\":\"2020-03-16\",\"className\":\"mr-8\",\"children\":\"Mar 16, 2020\"}],[\"$\",\"div\",null,{\"className\":\"-ml-4 flex items-center gap-x-4\",\"children\":[[\"$\",\"svg\",null,{\"view-box\":\"0 0 2 2\",\"className\":\"-ml-0.5 size-0.5 flex-none fill-white/50\",\"children\":[\"$\",\"circle\",null,{\"r\":\"1\",\"cx\":\"1\",\"cy\":\"1\"}]}],[\"$\",\"div\",null,{\"className\":\"flex gap-x-2.5\",\"children\":[[\"$\",\"img\",null,{\"src\":\"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=facearea\u0026facepad=2\u0026w=256\u0026h=256\u0026q=80\",\"alt\":\"\",\"className\":\"size-6 flex-none rounded-full bg-white/10\"}],\"Michael Foster\"]}]]}]]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-lg/6 font-semibold text-white\",\"children\":[[\"$\",\"span\",null,{\"className\":\"absolute inset-0\"}],\"Boost your conversion rate\"]}]]}]}]}],[\"$\",\"div\",null,{\"children\":\"$Lbf\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"6e:[\"$\",\"p\",null,{\"children\":[\"Check out the updated \",[\"$\",\"$L97\",null,{\"href\":\"/docs/transform-style\",\"children\":[\"$\",\"code\",null,{\"children\":[\"transform-style\"]}]}],\", \",[\"$\",\"$L97\",null,{\"href\":\"/docs/rotate\",\"children\":[\"$\",\"code\",null,{\"children\":[\"rotate\"]}]}],\", \",[\"$\",\"$L97\",null,{\"href\":\"/docs/perspective\",\"children\":[\"$\",\"code\",null,{\"children\":[\"perspective\"]}]}],\", and \",[\"$\",\"$L97\",null,{\"href\":\"/docs/perspective-origin\",\"children\":[\"$\",\"code\",null,{\"children\":[\"perspective-origin\"]}]}],\" documentation to get started.\"]}]\n6f:[\"$\",\"hr\",null,{}]\n70:[\"$\",\"h2\",null,{\"id\":\"expanded-gradient-apis\",\"children\":[[\"$\",\"a\",\"link-expanded-gradient-apis\",{\"href\":\"#expanded-gradient-apis\",\"className\":\"anchor\",\"children\":\"Expanded gradient APIs\"}]]}]\n71:[\"$\",\"p\",null,{\"children\":\"We've added a ton of new gradient features in v4.0, so you can pull off even fancier effects without having to write any custom CSS.\"}]\n72:[\"$\",\"h3\",null,{\"id\":\"linear-gradient-angles\",\"children\":[[\"$\",\"a\",\"link-linear-gradient-angles\",{\"href\":\"#linear-gradient-angles\",\"className\":\"anchor\",\"children\":\"Linear gradient angles\"}]]}]\n73:[\"$\",\"p\",null,{\"children\":[\"Linear gradients now support angles as values, so you can use utilities like \",[\"$\",\"code\",null,{\"children\":[\"bg-linear-45\"]}],\" to create a gradient on a 45 degree angle:\"]}]\n74:[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose isolate\",\"children\":[\"$undefined\",[\"$\",\"figure\",null,{\"className\":\"flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10\",\"children\":[[\"$\",\"$Lbe\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"grid place-items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-32 rounded-lg bg-linear-45 from-indigo-500 via-purple-500 to-pink-500\"}]}]}],[\"$\",\"div\",null,{\"children\":\"$Lc0\"}]]}]]}]}]\n75:[\"$\",\"p\",null,{\"children\":[\"You may notice we've renamed \",[\"$\",\"code\",null,{\"children\":[\"bg-gradient-*\"]}],\" to \",[\"$\",\"code\",null,{\"children\":[\"bg-linear-*\"]}],\" too — you'll see why shortly!\"]}]\n76:[\"$\",\"h3\",null,{\"id\":\"gradient-interpolation-modifiers\",\"children\":[[\"$\",\"a\",\"link-gradient-interpolation-modifiers\",{\"href\":\"#gradient-interpolation-modifiers\",\"className\":\"anchor\",\"children\":\"Gradient interpolation modifiers\"}]]}]\n77:[\"$\",\"p\",null,{\"children\":[\"We've added the ability to control the color interpolation mode for gradients using a modifier, so a class like \",[\"$\",\"code\",null,{\"children\":[\"bg-linear-to-r/srgb\"]}],\" interpolates using sRGB, and \",[\"$\",\"code\",null,{\"children\":[\"bg-linear-to-r/oklch\"]}],\" interpolates using OKLCH:\"]}]\n78:[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose isolate\",\"children\":[\"$undefined\",[\"$\",\"figure\",null,{\"className\":\"flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10\",\"children\":[[\"$\",\"$Lbe\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-16 rounded-lg bg-linear-to-r/srgb from-indigo-500 to-teal-400\"}],[\"$\",\"div\",null,{\"className\":\"h-16 rounded-lg bg-linear-to-r/oklch from-indigo-500 to-teal-400\"}]]}]}],[\"$\",\"div\",null,{\"children\":\"$Lc1\"}]]}]]}]}]\n79:[\"$\",\"p\",null,{\"children\":[\"Using polar color spaces like OKLCH or HSL can lead to much more vivid gradients when the \",[\"$\",\"code\",null,{\"children\":[\"from-*\"]}],\" and \",[\"$\",\"code\",null,{\"children\":[\"to-*\"]}],\" colors are far apart on the color wheel. We're using OKLAB by default in v4.0 but you can always interpolate using a different color space by adding one of these modifiers.\"]}]\n7a:[\"$\",\"h3\",null,{\"id\":\"conic-and-radial-gradients\",\"children\":[[\"$\",\"a\",\"link-conic-and-radial-gradients\",{\"href\":\"#conic-and-radial-gradients\",\"className\":\"anchor\",\"children\":\"Conic and radial gradients\"}]]}]\n7b:[\"$\",\"p\",null,{\"children\":[\"We've added new \",[\"$\",\"code\",null,{\"children\":[\"bg-conic-*\"]}],\" and \",[\"$\",\"code\",null,{\"children\":[\"bg-radial-*\"]}],\" utilities for creating conic and radial gradients:\"]}]\n7c:[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"class"])</script><script>self.__next_f.push([1,"Name\":\"not-prose isolate\",\"children\":[\"$undefined\",[\"$\",\"figure\",null,{\"className\":\"flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10\",\"children\":[[\"$\",\"$Lbe\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"flex justify-around p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600\"}],[\"$\",\"div\",null,{\"className\":\"size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%\"}]]}]}],[\"$\",\"div\",null,{\"children\":\"$Lc2\"}]]}]]}]}]\n7d:[\"$\",\"p\",null,{\"children\":[\"These new utilities work alongside the existing \",[\"$\",\"code\",null,{\"children\":[\"from-*\"]}],\", \",[\"$\",\"code\",null,{\"children\":[\"via-*\"]}],\", and \",[\"$\",\"code\",null,{\"children\":[\"to-*\"]}],\" utilities to let you create conic and radial gradients the same way you create linear gradients, and include modifiers for setting the color interpolation method and arbitrary value support for controlling details like the gradient position.\"]}]\n7e:[\"$\",\"hr\",null,{}]\n7f:[\"$\",\"h2\",null,{\"id\":\"starting-style-support\",\"children\":[[\"$\",\"a\",\"link-starting-style-support\",{\"href\":\"#starting-style-support\",\"className\":\"anchor\",\"children\":\"@starting-style support\"}]]}]\n80:[\"$\",\"p\",null,{\"children\":[\"The new \",[\"$\",\"code\",null,{\"children\":[\"starting\"]}],\" variant adds support for the new CSS \",[\"$\",\"$L97\",null,{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style\",\"children\":[\"$\",\"code\",null,{\"children\":[\"@starting-style\"]}]}],\" feature, making it possible to transition element properties when an element is first displayed:\"]}]\n"])</script><script>self.__next_f.push([1,"81:[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose isolate\",\"children\":[\"$undefined\",[\"$\",\"figure\",null,{\"className\":\"flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10\",\"children\":[[\"$\",\"$Lbe\",null,{\"className\":\"flex py-0\",\"children\":[\"$\",\"$Lc3\",null,{\"className\":\"h-[340px] w-full\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid h-full items-center justify-center\",\"children\":[[\"$\",\"button\",null,{\"popoverTarget\":\"my-popover\",\"className\":\"inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2\",\"children\":\"Check for updates\"}],[\"$\",\"div\",null,{\"popover\":\"auto\",\"id\":\"my-popover\",\"className\":\"relative inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left opacity-0 shadow-xl ring ring-black/5 transition-all transition-discrete duration-500 sm:w-full sm:max-w-96 sm:p-6 dark:bg-gray-800 dark:inset-ring dark:inset-ring-white/5 [\u0026:is([open],:popover-open)]:opacity-100 [@starting-style]:[\u0026:is([open],:popover-open)]:opacity-0\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"mx-auto flex size-12 items-center justify-center rounded-full bg-indigo-50 dark:bg-indigo-600/10\",\"children\":[\"$\",\"svg\",null,{\"className\":\"size-5 text-indigo-400 dark:text-indigo-600\",\"viewBox\":\"0 0 20 20\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z\",\"clipRule\":\"evenodd\"}]}]}],[\"$\",\"div\",null,{\"className\":\"mt-3 text-center sm:mt-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-base font-semibold text-gray-900 dark:text-white\",\"id\":\"modal-title\",\"children\":\"Update available\"}],[\"$\",\"div\",null,{\"className\":\"mt-2\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-500 dark:text-gray-200\",\"children\":[\"A new software update is available: \",[\"$\",\"span\",null,{\"className\":\"font-semibold\",\"children\":\"v2.0.4.\"}],[\"$\",\"br\",null,{}],\"Click the button below to install it.\"]}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-5\",\"children\":[\"$\",\"button\",null,{\"type\":\"button\",\"className\":\"inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2\",\"children\":\"Install\"}]}]]}]]}]}]}],[\"$\",\"div\",null,{\"children\":\"$Lc4\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"82:[\"$\",\"p\",null,{\"children\":[\"With \",[\"$\",\"code\",null,{\"children\":[\"@starting-style\"]}],\", you can finally animate elements as they appear on the page without the need for any JavaScript at all. \",[\"$\",\"$L97\",null,{\"href\":\"https://caniuse.com/mdn-css_at-rules_starting-style\",\"children\":\"Browser support\"}],\" probably isn't quite there yet for most teams, but we're getting close!\"]}]\n83:[\"$\",\"hr\",null,{}]\n84:[\"$\",\"h2\",null,{\"id\":\"not-variant\",\"children\":[[\"$\",\"a\",\"link-not-variant\",{\"href\":\"#not-variant\",\"className\":\"anchor\",\"children\":\"not-* variant\"}]]}]\n85:[\"$\",\"p\",null,{\"children\":[\"We've added a new \",[\"$\",\"code\",null,{\"children\":[\"not-*\"]}],\" variant which finally adds support for the CSS \",[\"$\",\"code\",null,{\"children\":[\":not()\"]}],\" pseudo-class:\"]}]\n86:[\"$\",\"div\",null,{\"data-stack\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1\",\"children\":[[\"$\",\"div\",null,{\"children\":\"$Lc5\"}],[\"$\",\"div\",null,{\"children\":\"$Lc6\"}]]}]}]\n87:[\"$\",\"p\",null,{\"children\":[\"It does double duty and also lets you negate media queries and \",[\"$\",\"code\",null,{\"children\":[\"@supports\"]}],\" queries:\"]}]\n88:[\"$\",\"div\",null,{\"data-stack\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose rounded-xl in-[figure]:mt-1 in-[figure]:rounded-b-lg in-[figure]:px-0.5 in-[figure]:pb-0.5 dark:outline dark:-outline-offset-1 dark:outline-white/10 dark:in-[figure]:outline-1 dark:in-[figure]:outline-offset-1\",\"children\":[[\"$\",\"div\",null,{\"children\":\"$Lc7\"}],[\"$\",\"div\",null,{\"children\":\"$Lc8\"}]]}]}]\n89:[\"$\",\"p\",null,{\"children\":[\"Check out the new \",[\"$\",\"$L97\",null,{\"href\":\"/docs/hover-focus-and-other-states#not\",\"children\":[[\"$\",\"code\",null,{\"children\":[\"not-*\"]}],\" documentation\"]}],\" to learn more.\"]}]\n8a:[\"$\",\"hr\",null,{}]\n8b:[\"$\",\"h2\",null,{\"id\":\"even-more-new-utilities-and-variants\",\"children\":[[\"$\",\"a\",\"link-even-more-new-utilities-and-variants\",{\"href\":\"#even-more-new-utilities-and-variants\",\"className\":\"anchor\",\"children\":\"Even more new utilities and variants\"}]]}]\n8c:[\"$\",\"p\",null,{\"children\":\"We've added a ton of other new utilities and variants to v4.0 too, including:\"}]\n"])</script><script>self.__next_f.push([1,"8d:[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/box-shadow#adding-an-inset-shadow\",\"children\":[\"$\",\"code\",null,{\"children\":[\"inset-shadow-*\"]}]}],\" and \",[\"$\",\"$L97\",null,{\"href\":\"/docs/box-shadow#adding-an-inset-ring\",\"children\":[\"$\",\"code\",null,{\"children\":[\"inset-ring-*\"]}]}],\" utilities\"]}],\" — making it possible to stack up to four layers of box shadows on a single element.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/field-sizing\",\"children\":[\"$\",\"code\",null,{\"children\":[\"field-sizing\"]}]}],\" utilities\"]}],\" — for auto-resizing textareas without writing a single line of JavaScript.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/color-scheme\",\"children\":[\"$\",\"code\",null,{\"children\":[\"color-scheme\"]}]}],\" utilities\"]}],\" — so you can finally get rid of those ugly light scrollbars in dark mode.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/font-stretch\",\"children\":[\"$\",\"code\",null,{\"children\":[\"font-stretch\"]}]}],\" utilities\"]}],\" — for carefully tweaking variable fonts that support different widths.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/hover-focus-and-other-states#styling-inert-elements\",\"children\":[\"$\",\"code\",null,{\"children\":[\"inert\"]}]}],\" variant\"]}],\" — for styling non-interactive elements marked with the \",[\"$\",\"code\",null,{\"children\":[\"inert\"]}],\" attribute.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/hover-focus-and-other-states#first-last-odd-and-even\",\"children\":[\"$\",\"code\",null,{\"children\":[\"nth-*\"]}]}],\" variants\"]}],\" — for doing really clever things you'll eventually regret.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/hover-focus-and-other-states#implicit-groups\",\"children\":[\"$\",\"code\",null,{\"children\":[\"in-*\"]}]}],\" variant\"]}],\" — which is a lot like \",[\"$\",\"code\",null,{\"children\":[\"group-*\"]}],\", but without the need for the \",[\"$\",\"code\",null,{\"children\":[\"group\"]}],\" class.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"Support for \",[\"$\",\"$L97\",null,{\"href\":\"/docs/hover-focus-and-other-states#openclosed-state\",\"children\":[\"$\",\"code\",null,{\"children\":[\":popover-open\"]}]}]]}],\" — using the existing \",[\"$\",\"code\",null,{\"children\":[\"open\"]}],\" variant to also target open popovers.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":[\"New \",[\"$\",\"$L97\",null,{\"href\":\"/docs/hover-focus-and-other-states#styling-all-descendants\",\"children\":\"descendant variant\"}]]}],\" — for styling all descendant elements, for better or for worse.\"]}],\"\\n\"]}]\n"])</script><script>self.__next_f.push([1,"8e:[\"$\",\"p\",null,{\"children\":\"Check out the relevant documentation for all of these features to learn more.\"}]\n8f:[\"$\",\"hr\",null,{}]\n90:[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"And that's it — that's Tailwind CSS v4.0.\"}],\" It's been years of work to get to this point, but we're all extremely proud of this release and we can't wait to see what you build with it.\"]}]\n91:[\"$\",\"p\",null,{\"children\":\"Check it out, play with it, maybe even break it, and definitely let us know what you think.\"}]\n92:[\"$\",\"p\",null,{\"children\":\"Just no bug reports until tomorrow please — let us at least enjoy one celebratory team dinner and maybe relax in the hot tub at this hotel for a bit believing that somehow we really did ship flawless software.\"}]\n"])</script><script>self.__next_f.push([1,"93:[\"$\",\"div\",null,{\"className\":\"mt-16 px-4 py-4 sm:py-2 lg:px-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"section\",null,{\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-3xl font-medium tracking-tight text-slate-900 dark:text-white\",\"children\":[\"Get all of our updates directly to your inbox.\",[\"$\",\"br\",null,{}],\"Sign up for our newsletter.\"]}],[\"$\",\"div\",null,{\"className\":\"mt-10 max-w-md\",\"children\":[\"$\",\"form\",null,{\"action\":\"https://app.convertkit.com/forms/3181881/subscriptions\",\"method\":\"post\",\"className\":\"flex flex-nowrap gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"max-w-82 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"group relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute left-4 flex h-full items-center\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"fill\":\"currentColor\",\"className\":\"size-4 text-gray-950/50 group-focus-within:text-gray-950 dark:text-white/50 dark:group-focus-within:text-white\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z\"}],[\"$\",\"path\",null,{\"d\":\"m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z\"}]]}]}],[\"$\",\"input\",null,{\"name\":\"email_address\",\"type\":\"email\",\"required\":true,\"autoComplete\":\"email\",\"aria-label\":\"Email address\",\"className\":\"block w-full appearance-none rounded-4xl bg-white py-2 pr-3 pl-10 text-sm/6 text-gray-950 outline -outline-offset-1 outline-gray-950/8 placeholder:text-sm/6 placeholder:text-gray-950/50 focus:outline-gray-950 dark:bg-white/10 dark:text-white/50 dark:outline-white/15 dark:placeholder:text-white/50 dark:focus:outline-white\",\"placeholder\":\"Subscribe via email\"}]]}]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"button\",null,{\"type\":\"submit\",\"className\":\"rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600\",\"children\":\"Subscribe\"}]}]]}]}]]}]}]\n"])</script><script>self.__next_f.push([1,"94:[\"$\",\"div\",null,{\"className\":\"mt-46 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"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 *:first:border-l-0 *:last:border-r-0\",\"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\":[\"$\",\"$L97\",null,{\"href\":\"/docs\",\"className\":\"hover:underline\",\"children\":\"Documentation\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://play.tailwindcss.com/\",\"className\":\"hover:underline\",\"children\":\"Playground\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/blog\",\"className\":\"hover:underline\",\"children\":\"Blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/showcase\",\"className\":\"hover:underline\",\"children\":\"Showcase\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/sponsor\",\"className\":\"hover:underline\",\"children\":\"Sponsor\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://www.refactoringui.com\",\"className\":\"hover:underline\",\"children\":\"Refactoring UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://headlessui.com\",\"className\":\"hover:underline\",\"children\":\"Headless UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://heroicons.com\",\"className\":\"hover:underline\",\"children\":\"Heroicons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",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\":\"mb-2 font-semibold\",\"children\":[\"$\",\"a\",null,{\"href\":\"/plus?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Tailwind Plus\"}]}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-blocks?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Blocks\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/templates?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Templates\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-kit?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Kit\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Community\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://github.com/tailwindlabs/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/sponsor#insiders\",\"className\":\"hover:underline\",\"children\":\"Discord\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://x.com/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"X\"}]}]]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mx-auto hidden w-full grid-cols-4 justify-between gap-y-0 md:grid md:grid-cols-4 md:gap-6 md:gap-x-4 lg:gap-8 *:first:border-l-0 *:last:border-r-0\",\"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\":[\"$\",\"$L97\",null,{\"href\":\"/docs\",\"className\":\"hover:underline\",\"children\":\"Documentation\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://play.tailwindcss.com/\",\"className\":\"hover:underline\",\"children\":\"Playground\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/blog\",\"className\":\"hover:underline\",\"children\":\"Blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/showcase\",\"className\":\"hover:underline\",\"children\":\"Showcase\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/sponsor\",\"className\":\"hover:underline\",\"children\":\"Sponsor\"}]}]]}]]}],[\"$\",\"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\":\"mb-2 font-semibold\",\"children\":\"$Lc9\"}],\"$Lca\"]}],\"$Lcb\",\"$Lcc\"]}]]}]}]\n"])</script><script>self.__next_f.push([1,"95:[\"$\",\"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 px-4 md:px-6 lg:px-8\",\"children\":[[\"$\",\"$Lcd\",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\":\"·\"}],[\"$\",\"$L97\",null,{\"href\":\"/brand\",\"className\":\"hover:underline\",\"children\":\"Trademark Policy\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"a5:[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.945 0.129 101.54)\"}}]\na6:[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.905 0.182 98.111)\"}}]\na7:[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.852 0.199 91.936)\"}}]\na8:[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.795 0.184 86.047)\"}}]\na9:[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.681 0.162 75.834)\"}}]\naa:[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.554 0.135 66.442)\"}}]\nab:[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.476 0.114 61.907)\"}}]\nac:[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.421 0.095 57.708)\"}}]\nad:[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.286 0.066 53.813)\"}}]\nae:[\"$\",\"div\",\"lime\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.986 0.031 120.757)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.967 0.067 122.328)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.938 0.127 124.321)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.897 0.196 126.665)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.841 0.238 128.85)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.768 0.233 130.85)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.648 0.2 131.684)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.532 0.157 131.589)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.453 0.124 130.933)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.405 0.101 131.063)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.274 0.072 132.109)\"}}]]}]\naf:[\"$\",\"div\",\"green\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.982 0.018 155.826)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.962 0.044 156.743)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.925 0.084 155.995)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.871 0.15 154.449)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.792 0.209 151.711)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.723 0.219 149.579)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.627 0.194 149.214)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.527 0.154 150.069)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.448 0.119 151.328)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.393 0.095 152.535)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.266 0.065 152.934)\"}}]]}]\nb0:[\"$\",\"div\",\"emerald\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.979 0.021 166.113)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.95 0.052 163.051)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.905 0.093 164.15)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch"])</script><script>self.__next_f.push([1,"(0.845 0.143 164.978)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.765 0.177 163.223)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.696 0.17 162.48)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.596 0.145 163.225)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.508 0.118 165.612)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.432 0.095 166.913)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.378 0.077 168.94)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.262 0.051 172.552)\"}}]]}]\nb1:[\"$\",\"div\",\"teal\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.984 0.014 180.72)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.953 0.051 180.801)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.91 0.096 180.426)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.855 0.138 181.071)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.777 0.152 181.912)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.704 0.14 182.503)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.6 0.118 184.704)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.511 0.096 186.391)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.437 0.078 188.216)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.386 0.063 188.416)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.277 0.046 192.524)\"}}]]}]\nb2:[\"$\",\"div\",\"cyan\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.984 0.019 200.873)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.956 0.045 203.388)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.917 0.08 205.041)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.865 0.127 207.078)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.789 0.154 211.53)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.715 0.143 215.221)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.609 0.126 221.723)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.52 0.105 223.128)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.45 0.085 224.283)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.398 0.07 227.392)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.302 0.056 229.695)\"}}]]}]\nb3:[\"$\",\"div\",\"sky\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.977 0.013 236.62)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.951 0.026 236.824)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.901 0.058 230.902)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.828 0.111 230.318)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.746 0.16 232.661)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0"])</script><script>self.__next_f.push([1,".685 0.169 237.323)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.588 0.158 241.966)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.5 0.134 242.749)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.443 0.11 240.79)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.391 0.09 240.876)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.293 0.066 243.157)\"}}]]}]\nb4:[\"$\",\"div\",\"blue\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.97 0.014 254.604)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.932 0.032 255.585)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.882 0.059 254.128)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.809 0.105 251.813)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.707 0.165 254.624)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.623 0.214 259.815)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.546 0.245 262.881)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.488 0.243 264.376)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.424 0.199 265.638)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.379 0.146 265.522)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.282 0.091 267.935)\"}}]]}]\nb5:[\"$\",\"div\",\"indigo\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.962 0.018 272.314)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.93 0.034 272.788)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.87 0.065 274.039)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.785 0.115 274.713)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.673 0.182 276.935)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.585 0.233 277.117)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.511 0.262 276.966)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.457 0.24 277.023)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.398 0.195 277.366)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.359 0.144 278.697)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.257 0.09 281.288)\"}}]]}]\nb6:[\"$\",\"div\",\"violet\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.969 0.016 293.756)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.943 0.029 294.588)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.894 0.057 293.283)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.811 0.111 293.571)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.702 0.183 293.541)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.606 0.25 292.717)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.541 0.281 293.009)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\""])</script><script>self.__next_f.push([1,"oklch(0.491 0.27 292.581)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.432 0.232 292.759)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.38 0.189 293.745)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.283 0.141 291.089)\"}}]]}]\nb7:[\"$\",\"div\",\"purple\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.977 0.014 308.299)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.946 0.033 307.174)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.902 0.063 306.703)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.827 0.119 306.383)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.714 0.203 305.504)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.627 0.265 303.9)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.558 0.288 302.321)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.496 0.265 301.924)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.438 0.218 303.724)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.381 0.176 304.987)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.291 0.149 302.717)\"}}]]}]\nb8:[\"$\",\"div\",\"fuchsia\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.977 0.017 320.058)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.952 0.037 318.852)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.903 0.076 319.62)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.833 0.145 321.434)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.74 0.238 322.16)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.667 0.295 322.15)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.591 0.293 322.896)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.518 0.253 323.949)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.452 0.211 324.591)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.401 0.17 325.612)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.293 0.136 325.661)\"}}]]}]\nb9:[\"$\",\"div\",\"pink\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.971 0.014 343.198)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.948 0.028 342.258)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.899 0.061 343.231)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.823 0.12 346.018)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.718 0.202 349.761)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.656 0.241 354.308)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.592 0.249 0.584)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.525 0.223 3.958)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.459 0.187 3.815)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor"])</script><script>self.__next_f.push([1,"\":\"oklch(0.408 0.153 2.432)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.284 0.109 3.907)\"}}]]}]\nba:[\"$\",\"div\",\"rose\",{\"className\":\"grid grid-cols-1 gap-2\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.969 0.015 12.422)\"}}],[\"$\",\"div\",\"1\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.941 0.03 12.58)\"}}],[\"$\",\"div\",\"2\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.892 0.058 10.001)\"}}],[\"$\",\"div\",\"3\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.81 0.117 11.638)\"}}],[\"$\",\"div\",\"4\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.712 0.194 13.428)\"}}],[\"$\",\"div\",\"5\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.645 0.246 16.439)\"}}],[\"$\",\"div\",\"6\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.586 0.253 17.585)\"}}],[\"$\",\"div\",\"7\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.514 0.222 16.935)\"}}],[\"$\",\"div\",\"8\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.455 0.188 13.697)\"}}],[\"$\",\"div\",\"9\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.41 0.159 10.272)\"}}],[\"$\",\"div\",\"10\",{\"className\":\"aspect-square rounded\",\"style\":{\"backgroundColor\":\"oklch(0.271 0.105 12.094)\"}}]]}]\nc9:[\"$\",\"a\",null,{\"href\":\"/plus?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Tailwind Plus\"}]\nca:[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-blocks?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Blocks\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/templates?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Templates\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-kit?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Kit\"}]}]]}]\ncb:[\"$\",\"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\":[\"$\",\"$L97\",null,{\"href\":\"https://www.refactoringui.com\",\"className\":\"hover:underline\",\"children\":\"Refactoring UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://headlessui.com\",\"className\":\"hover:underline\",\"children\":\"Headless UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://heroicons.com\",\"className\":\"hover:underline\",\"children\":\"Heroicons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://heropatterns.com\",\"className\":\"hover:underline\",\"children\":\"Hero Patterns\"}]}]]}]]}]\ncc:[\"$\",\"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\":[\"$\",\"$L97\",null,{\"href\":\"https://github.com/tailwindlabs/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"/sponsor#insiders\",\"className\":\"hover:underline\",\"children\":\"Discord\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L97\",null,{\"href\":\"https://x.com/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"X\"}]}]]}]]}]\nce:Tee5,"])</script><script>self.__next_f.push([1,"\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@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e theme\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e base\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e components\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e utilities\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e utilities \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e .mx-6\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e margin-inline\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecalc\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003evar\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--spacing\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e *\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 6\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e .bg-blue-500\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e\\/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e50\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e background-color\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecolor-mix\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003ein oklab\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003e var\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--color-blue-500\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 50\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003e%\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e transparent\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@property\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e --tw-gradient-from \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e syntax: \"\u0026#x3C;color\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e\u003e\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e\";\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e inherits: false;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e initial-value\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e#\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0000;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"98:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$ce\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"99:[\"$\",\"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 not-prose\",\"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\":\"1. Install Tailwind CSS\"}],false]}],[\"$\",\"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-[1lh] *: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 i\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e tailwindcss\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e @tailwindcss/postcss\u003c/span\u003e\u003cspan style=\\\"color:var(--color-slate-400)\\\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"9a:[\"$\",\"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 not-prose\",\"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\":\"2. Add the PostCSS plugin\"}],false]}],[\"$\",\"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-[1lh] *: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-violet-300)\\\"\u003eexport\u003c/span\u003e\u003cspan style=\\\"color:var(--color-violet-300)\\\"\u003e default\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\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e\\\"@tailwindcss/postcss\\\"\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-400)\\\"\u003e};\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"9b:[\"$\",\"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 not-prose\",\"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\":\"3. Import Tailwind in your CSS\"}],false]}],[\"$\",\"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-[1lh] *: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\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"cf:T826,"])</script><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\u003cspan style=\"color:var(--color-slate-400)\"\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-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\u003cspan style=\"color:var(--color-slate-400)\"\u003e;\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\u003cspan style=\"color:var(--color-slate-400)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"9c:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$cf\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"9d:[\"$\",\"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 not-prose\",\"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\":\".gitignore\"}],false]}],[\"$\",\"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-[1lh] *: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)\\\"\u003e/node_modules\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003e/coverage\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003e/.next/\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003e/build\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"9e:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"\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)\\\"\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\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)\\\"\u003e@source\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e \\\"../node_modules/@my-company/ui-lib\\\"\u003c/span\u003e\u003cspan style=\\\"color:var(--color-slate-300)\\\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"d0:T4c1,\u003cpre class=\"shiki tailwindcss-theme [:where(\u0026#x26;_.line)]:pl-4\" style=\"background-color:transparent;color:var(--color-slate-50)\" tabindex=\"0\"\u003e\u003ccode\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-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 relative -mx-5 border-l-4 border-red-400 bg-red-300/15 pr-5 pl-8 before:absolute before:left-4 before:text-red-400 before:content-[\u0026#x27;-\u0026#x27;]\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \"postcss-import\"\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-sky-300)\"\u003e \"@tailwindcss/postcss\"\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\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e9f:[\"$\",\"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 not-prose\",\"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\":\"postcss.config.js\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d0\"}}]]}]}]\nd1:T138c,"])</script><script>self.__next_f.push([1,"\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\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@theme\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --font-display\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"Satoshi\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \"sans-serif\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --breakpoint-3xl\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e1920\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003epx\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-100\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.99 0 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-200\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.98 0.04 113.22\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-300\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.94 0.11 115.03\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-400\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.92 0.19 114.08\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-500\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.84 0.18 117.33\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-600\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.53 0.12 118.34\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --ease-fluid\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecubic-bezier\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.3\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 1\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --ease-snappy\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecubic-bezier\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.2\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 1\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e /* ... */\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"a0:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d1\"}}]]}]}]\nd2:T12ac,"])</script><script>self.__next_f.push([1,"\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)\"\u003e:root\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --font-display\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"Satoshi\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \"sans-serif\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --breakpoint-3xl\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e1920\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003epx\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-100\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.99 0 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-200\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.98 0.04 113.22\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-300\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.94 0.11 115.03\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-400\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.92 0.19 114.08\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-500\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.84 0.18 117.33\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-avocado-600\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.53 0.12 118.34\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --ease-fluid\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecubic-bezier\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.3\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 1\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --ease-snappy\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecubic-bezier\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.2\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 1\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e /* ... */\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"a1:[\"$\",\"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 not-prose\",\"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\":\"Generated CSS\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d2\"}}]]}]}]\nd3:T46e,\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"grid \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003egrid-cols-15\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003ea2:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d3\"}}]]}]}]\nd4:T4bf,\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e data-current\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\"opacity-75 \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003edata-current:opacity-100\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cs"])</script><script>self.__next_f.push([1,"pan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003ea3:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d4\"}}]]}]}]\nd5:Te78,"])</script><script>self.__next_f.push([1,"\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@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e theme \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e :root\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --spacing\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.25\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003erem\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e utilities \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e .mt-8\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e margin-top\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecalc\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003evar\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--spacing\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e *\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 8\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e .w-17\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e width\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecalc\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003evar\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--spacing\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e *\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 17\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e .pr-29\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e padding-right\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecalc\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003evar\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--spacing\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e *\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 29\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"a4:[\"$\",\"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 not-prose\",\"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\":\"Generated CSS\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d5\"}}]]}]}]\nd6:T925,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@container\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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)\"\u003ediv\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\"grid grid-cols-1 \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@sm:grid-cols-3\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@lg:grid-cols-4\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"bb:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d6\"}}]]}]}]\nd7:T7dd,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@container\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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)\"\u003ediv\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\"grid grid-cols-3 \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@max-md:grid-cols-1\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"bc:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d7\"}}]]}]}]\nd8:T7d4,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@container\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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)\"\u003ediv\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\"flex \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@min-md:@max-xl:hidden\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"bd:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d8\"}}]]}]}]\nd9:Ta6a,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003eperspective-distant\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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)\"\u003earticle\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003erotate-x-51\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003erotate-z-43\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003etransform-3d\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e ...\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003earticle\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"bf:[\"$\",\"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 not-prose\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[null,false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d9\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"c0:[\"$\",\"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 not-prose\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[null,false]}],[\"$\",\"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-[1lh] *: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-400)\\\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003ediv\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\\\"\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\" class=\\\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\\\"\u003ebg-linear-45\u003c/span\u003e\u003cspan style=\\\"color:var(--color-sky-300)\\\"\u003e from-indigo-500 via-purple-500 to-pink-500\\\"\u003c/span\u003e\u003cspan style=\\\"color:var(--color-slate-400)\\\"\u003e\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\\\"color:var(--color-pink-400)\\\"\u003ediv\u003c/span\u003e\u003cspan style=\\\"color:var(--color-slate-400)\\\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\"}}]]}]}]\n"])</script><script>self.__next_f.push([1,"da:T7cb,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003ebg-linear-to-r/srgb\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e from-indigo-500 to-teal-400\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e...\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003ebg-linear-to-r/oklch\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e from-indigo-500 to-teal-400\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e...\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"c1:[\"$\",\"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 not-prose\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[null,false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$da\"}}]]}]}]\ndb:T732,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"size-24 rounded-full \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003ebg-conic/[in_hsl_longer_hue]\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e from-red-600 to-red-600\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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)\"\u003ediv\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\"size-24 rounded-full \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003ebg-radial-[at_25%_25%]\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e from-white to-zinc-900 to-75%\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"c2:[\"$\",\"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 not-prose\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[null,false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$db\"}}]]}]}]\ndc:Ta71,"])</script><script>self.__next_f.push([1,"\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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)\"\u003ebutton\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e popovertarget\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"my-popover\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003eCheck for updates\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ebutton\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e popover\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e id\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"my-popover\"\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003etransition-discrete\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003estarting:open:opacity-0\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e ...\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"c4:[\"$\",\"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 not-prose\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[null,false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$dc\"}}]]}]}]\ndd:T471,\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003enot-hover:opacity-75\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003ec5:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$dd\"}}]]}]}]\nde:T838,"])</script><script>self.__next_f.push([1,"\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)\"\u003e.not-hover\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e\\:\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eopacity-75:not\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e*:hover\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e opacity\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e75\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003e%\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@media\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e not\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e (\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003ehover\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e:\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e hover\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e .not-hover\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e\\:\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eopacity-75\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e opacity\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e75\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003e%\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"c6:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$de\"}}]]}]}]\ndf:T482,\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-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\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\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003enot-supports-hanging-punctuation:px-4\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\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);font-style:italic\"\u003e \u0026#x3C;!-- ... --\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)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003ec7:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$df\"}}]]}]}]\ne0:T6e3,"])</script><script>self.__next_f.push([1,"\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)\"\u003e.not-supports-hanging-punctuation\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e\\:\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003epx-4\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e @\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003esupports\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e not\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e (\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003ehanging-punctuation\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003evar\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--tw\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)) {\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e padding-inline\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003ecalc\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003evar\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e--spacing\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e)\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e *\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e 4\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"c8:[\"$\",\"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 not-prose\",\"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\"}],false]}],[\"$\",\"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-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5 *:*:max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$e0\"}}]]}]}]\n"])</script></body></html>
Reference in New Issue View Git Blame Copy Permalink