this repo has no description
kitten.sh
1<!DOCTYPE html><html lang="en" class="__className_e8ce0c"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/e4af272ccee01ff0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/0400282a37e0b5cc.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/931b179cff3131dc.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-db645017da02a8f9.js"/><script src="/_next/static/chunks/4bd1b696-bdbcd6b6abfa5f41.js" async=""></script><script src="/_next/static/chunks/684-497e116eabb8fcaa.js" async=""></script><script src="/_next/static/chunks/main-app-b8b88b0914fccdba.js" async=""></script><script src="/_next/static/chunks/769-8af0dd6ba1917f5d.js" async=""></script><script src="/_next/static/chunks/493-66441aebc1d39abd.js" async=""></script><script src="/_next/static/chunks/857-9d435cd9637ba7a9.js" async=""></script><script src="/_next/static/chunks/993-3e8f4916e432e2f6.js" async=""></script><script src="/_next/static/chunks/711-fc912928148f438c.js" async=""></script><script src="/_next/static/chunks/341-5271f225a215cf0f.js" async=""></script><script src="/_next/static/chunks/76-f5e5a5aff019cbf9.js" async=""></script><script src="/_next/static/chunks/437-c0536b8cc623be5c.js" async=""></script><script src="/_next/static/chunks/305-d093f0536b9045a7.js" async=""></script><script src="/_next/static/chunks/818-d9e48921ed4733b8.js" async=""></script><script src="/_next/static/chunks/app/docs/layout-4ba82388b1281064.js" async=""></script><script src="/_next/static/chunks/app/layout-5abee9e51885f5fd.js" async=""></script><script src="/_next/static/chunks/637-c682ed75bce4e9f9.js" async=""></script><script src="/_next/static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js" async=""></script><meta name="next-size-adjust" content=""/><title>Themes</title><meta property="og:title" content="Themes"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1280"/><meta property="og:image:height" content="720"/><meta property="og:image" content="https://www.nativewind.dev/opengraph-image.png?a84e8d7ff09b577f"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Themes"/><meta name="twitter:image:type" content="image/png"/><meta name="twitter:image:width" content="1280"/><meta name="twitter:image:height" content="720"/><meta name="twitter:image" content="https://www.nativewind.dev/opengraph-image.png?a84e8d7ff09b577f"/><link rel="icon" href="/favicon.svg"/><script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="flex flex-col min-h-screen"><script>((e,t,r,n,o,a,i,l)=>{let u=document.documentElement,s=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&a?o.map(e=>a[e]||e):o;r?(u.classList.remove(...n),u.classList.add(a&&a[t]?a[t]:t)):u.setAttribute(e,t)}),r=t,l&&s.includes(r)&&(u.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=i&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script><main id="nd-docs-layout" class="flex w-full flex-1 flex-row pe-(--fd-layout-offset) [--fd-nav-height:calc(var(--spacing)*14)] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]" style="--fd-layout-offset:max(calc(50vw - var(--fd-layout-width) / 2), 0px)"><aside data-open="false" id="nd-sidebar" data-collapsed="false" style="--fd-sidebar-offset:calc(var(--fd-sidebar-width) - 20px);--fd-sidebar-height:calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))" class="fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-10 text-sm md:sticky md:h-(--fd-sidebar-height) max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible md:transition-all md:ps-(--fd-layout-offset) bg-transparent"><div class="flex size-full max-w-full flex-col !pt-0 md:ms-auto md:w-(--fd-sidebar-width) md:border-e md:!pt-0 md:pt-2.5"><div class="flex flex-col gap-2 px-4 empty:hidden"><div class="flex flex-col gap-4 pt-2 lg:hidden"><a class="text-sm flex flex-row items-center gap-2 rounded-md p-2 text-start [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 bg-fd-primary/10 text-fd-primary" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg>Docs</a></div></div><div dir="ltr" class="overflow-hidden h-full" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] p-4 max-lg:pt-0" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><a href="https://github.com/nativewind/nativewind" rel="noreferrer noopener" target="_blank" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none lg:hidden" data-active="false" style="padding-inline-start:calc(var(--spacing) * 2)"><svg role="img" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Github</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/blog"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-text"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path><path d="M8 11h8"></path><path d="M8 7h6"></path></svg>Blog</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/#showcase"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-template"><rect width="18" height="7" x="3" y="3" rx="1"></rect><rect width="9" height="7" x="3" y="14" rx="1"></rect><rect width="5" height="7" x="16" y="14" rx="1"></rect></svg>Showcase</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Overview</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs">Overview</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/guides/goals">Goals & Non-Goals</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Getting Started</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/getting-started/installation">Installation</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/getting-started/typescript">Typescript</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/getting-started/other-bundlers">Other bundlers</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/getting-started/using-with-monorepos">Using with Monorepos</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Guides</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/guides/troubleshooting">Troubleshooting</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/guides/custom-components">How to write custom components</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/guides/third-party-components">Styling Third-Party Components</a><a data-active="true" class="flex flex-row items-center gap-2 rounded-md p-2 text-start [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 text-fd-primary sticky top-0 lg:-top-4 bg-fd-background/70 backdrop-blur z-10" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/guides/themes">Themes</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/guides/editor-setup">Editor Setup</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Core concepts</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/tailwindcss">Built on Tailwind CSS</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/quirks">Quirks</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/responsive-design">Responsive Design</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/dark-mode">Dark Mode</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/functions-and-directives">Functions & Directives</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">React Native concepts</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/units">Units</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/differences">Platform Differences</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/core-concepts/style-specificity">Style Specificity</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/new-concepts/safe-area-insets">Safe Area Insets</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Customization</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/customization/configuration">Configuration</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/customization/content">Content</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/customization/theme">Theme</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/customization/colors">Colors</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">API</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/api/with-nativewind">withNativeWind</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/api/vars">vars()</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/api/use-color-scheme">useColorScheme()</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/api/remap-props">remapProps</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/api/css-interop">cssInterop</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Layout</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/aspect-ratio">Aspect Ratio</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/box-decoration-break">Box Decoration Break</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/box-sizing">Box Sizing</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/break-after">Break After</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/break-before">Break Before</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/break-inside">Break Inside</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/clear">Clear</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/columns">Columns</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/container">Container</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/display">Display</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/float">Floats</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/isolation">Isolation</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/object-fit">Object Fit</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/object-position">Object Position</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/overflow">Overflow</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/overscroll-behavior">Overscroll Behavior</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/position">Position</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/top-right-bottom-left">Top / Right / Bottom / Left</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/visibility">Visibility</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/layout/z-index">Z-Index</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Flexbox & Grid</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/align-content">Align Content</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/align-items">Align Items</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/align-self">Align Self</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/flex">Flex</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/flex-basis">Flex Basis</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/flex-direction">Flex Direction</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/flex-grow">Flex Grow</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/flex-shrink">Flex Shrink</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/flex-wrap">Flex Wrap</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/gap">Gap</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-auto-columns">Grid Auto Columns</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-auto-flow">Grid Auto Flow</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-auto-rows">Grid Auto Rows</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-column">Grid Column Start / End</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-row">Grid Row Start / End</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-template-columns">Grid Template Columns</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/grid-template-rows">Grid Template Rows</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/justify-content">Justify Content</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/justify-items">Justify Items</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/justify-self">Justify Self</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/order">Order</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/place-content">Place Items</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/place-items">Place Content</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/flexbox/place-self">Place Self</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Spacing</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/spacing/margin">Margin</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/spacing/padding">Padding</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/spacing/space-between">Space Between</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Sizing</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/sizing/height">Height</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/sizing/max-height">Max-Height</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/sizing/max-width">Max-Width</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/sizing/min-height">Min-Height</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/sizing/min-width">Min-Width</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/sizing/width">Width</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Typography</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/content">Content</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/font-family">Font Family</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/font-size">Font Size</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/font-smoothing">Font Smoothing</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/font-style">Font Style</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/font-variant-numeric">Font Variant Numeric</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/font-weight">Font Weight</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/hyphens">Hyphens</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/letter-spacing">Letter Spacing</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/line-clamp">Line Clamp</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/line-height">Line Height</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/list-style-image">List Style Image</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/list-style-position">List Style Position</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/list-style-type">List Style Type</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-align">Text Transform</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-color">Text Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-decoration">Text Decoration</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-decoration-color">Text Decoration Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-decoration-style">Text Decoration Style</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-decoration-thickness">Text Decoration Thickness</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-indent">Text Indent</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-overflow">Text Overflow</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-transform">Text Align</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/text-underline-offset">Text Underline Offset</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/vertical-align">Vertical Align</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/whitespace">Whitespace</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/typography/word-break">Word Break</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Backgrounds</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-attachment">Background Attachment</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-clip">Background Clip</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-color">Background Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-image">Background Image</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-origin">Background Origin</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-position">Background Position</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-repeat">Background Repeat</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/background-size">Background Size</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/backgrounds/gradient-color-stops">Gradient Color Stops</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Borders</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/border-color">Border Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/border-radius">Border Radius</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/border-style">Border Style</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/border-width">Border Width</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/divide-color">Divide Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/divide-style">Divide Style</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/divide-width">Divide Width</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/outline-color">Outline Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/outline-offset">Outline Offset</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/outline-style">Outline Style</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/outline-width">Outline Width</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/ring-color">Ring Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/ring-offset-color">Ring Offset Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/ring-offset-width">Ring Offset Width</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/borders/ring-width">Ring Width</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Effects</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/effects/background-blend-mode">Background Blend Mode</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/effects/box-shadow">Box Shadow</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/effects/box-shadow-color">Box Shadow Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/effects/mix-blend-mode">Mix Blend Mode</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/effects/opacity">Opacity</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Transitions & Animation</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transitions-animation/animation">Animation</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transitions-animation/transition-delay">Transition Delay</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transitions-animation/transition-duration">Transition Duration</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transitions-animation/transition-property">Transition Property</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transitions-animation/transition-timing-function">Transition Timing Function</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Transforms</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transforms/rotate">Rotate</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transforms/scale">Scale</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transforms/skew">Skew</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transforms/transform-origin">Transform Origin</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/transforms/translate">Translate</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Interactivity</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/accent-color">Accent Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/appearance">Appearance</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/caret-color">Caret Color</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/cursor">Cursor</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/pointer-events">Pointer Events</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/resize">Resize</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/scroll-behaviour">Scroll Behavior</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/scroll-margin">Scroll Margin</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/scroll-padding">Scroll Padding</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/scroll-snap-align">Scroll Snap Align</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/scroll-snap-stop">Scroll Snap Stop</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/scroll-snap-type">Scroll Snap Type</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/touch-action">Touch Action</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/user-select">User Select</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/interactivity/will-change">Will Change</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">SVG</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/svg/fill">Fill</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/svg/stroke">Stroke</a><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/svg/stroke-width">Stroke Width</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Accessibility</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/accessibility/screen-readers">Screen Readers</a><p class="inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0 mt-8" style="padding-inline-start:calc(var(--spacing) * 2)">Plugins</p><a data-active="false" class="relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs/tailwind/plugins/container-queries">Container Queries</a></div></div></div><div class="border-t px-4 py-3 empty:hidden flex flex-row items-center md:hidden"><button class="inline-flex items-center rounded-full border border-fd-foreground/10 p-1 bg-white/20 dark:bg-black/20 backdrop-blur md:hidden" aria-label="Toggle Theme" data-theme-toggle=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun size-6.5 rounded-full p-1.5 text-fd-muted-foreground"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon size-6.5 rounded-full p-1.5 text-fd-muted-foreground"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></button></div></div></aside><header id="nd-subnav" style="padding-inline-start:var(--fd-layout-offset)" class="fixed inset-x-0 top-(--fd-banner-height) z-10 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors"><div class="flex flex-row border-b border-fd-foreground/10 px-4 h-14 lg:px-36"><div class="flex flex-row items-center flex-1 pe-4"><a class="lg:flex absolute left-4 hidden top-3 text-sm flex-row items-center gap-2 rounded-md p-2 text-start [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0 bg-fd-primary/10 text-fd-primary" style="padding-inline-start:calc(var(--spacing) * 2)" href="/docs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg>Docs</a><a class="inline-flex items-center gap-2.5 font-semibold group" href="/"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 590 110" class="h-6 group-hover:text-fd-primary duration-300"><path fill="currentColor" d="M38.39 68.281c10.696-.694 21.994.63 29.687 4.68 7.96 4.19 11.353 10.849 10.802 17.258-.52 6.042-4.607 11.513-10.6 13.181l-.285.077c-9.075 2.319-18.584-4.306-19.643-13.558l-.044-.442-.012-.189a3.68 3.68 0 0 1 7.323-.619l.021.189.023.23c.56 4.834 5.773 8.469 10.51 7.259l.262-.073c2.698-.817 4.835-3.454 5.113-6.686.264-3.067-1.188-7.11-6.898-10.116-5.978-3.147-15.71-4.501-25.782-3.847-10.072.653-19.546 3.254-25.067 7.147l-.158.105a3.68 3.68 0 0 1-4.083-6.118l.678-.464c7.116-4.718 17.793-7.341 28.154-8.014M102.13 25.779c9.811.34 18.446 8.182 18.288 18.438l-.014.498c-.238 5.563-2.353 10.429-6.203 14.005-3.814 3.544-9.059 5.573-15.172 6.054-3.35.263-7.81-.581-12.554-1.485-4.967-.947-10.816-2.096-17.598-2.811-13.29-1.403-30.147-1.134-49.963 5.86l-.947.338a3.68 3.68 0 0 1-2.504-6.919l1.005-.36c21.073-7.436 39.07-7.727 53.182-6.237 7.135.753 13.283 1.963 18.203 2.9 5.143.98 8.464 1.545 10.598 1.378 4.857-.382 8.406-1.939 10.742-4.108 2.3-2.137 3.696-5.115 3.859-8.93l.008-.282c.085-5.796-4.893-10.768-11.173-10.985l-.306-.007c-5.826-.057-10.31 3.572-11.466 9.283a3.68 3.68 0 0 1-7.213-1.46c1.857-9.17 9.398-15.274 18.753-15.181z"></path><path fill="currentColor" d="M53.784 21.904c.5-8.877 8.697-16.048 17.73-14.752l.331.052c6.939 1.156 11.565 7.015 12.222 13.385.698 6.76-2.975 13.804-11.616 17.543-14.547 6.294-18.427 5.793-45.693 12.193l-2.713.641-.186.04a3.68 3.68 0 0 1-1.701-7.15l.182-.049 2.797-.66c28.056-6.59 30.607-5.804 44.393-11.769 5.983-2.588 7.554-6.772 7.218-10.034-.356-3.44-2.758-6.245-5.967-6.856l-.313-.052c-4.56-.655-9.066 3.108-9.337 7.873l-.01.227-.01.19a3.68 3.68 0 0 1-7.346-.21v-.188z"></path><path fill="currentColor" fill-rule="evenodd" d="M233.686 40.379q3.455.07 6.473 1.21l.398.156q2.95 1.185 5.159 3.144l.42.37a17 17 0 0 1 1.543 1.598v-1.926c0-1.077.353-1.998 1.076-2.72.723-.78 1.674-1.16 2.804-1.16 1.083 0 2.001.386 2.718 1.16.774.717 1.162 1.636 1.162 2.72v37.263A3.84 3.84 0 0 1 254.278 85c-.717.774-1.636 1.16-2.719 1.16-1.066 0-1.974-.338-2.68-1.032l-.139-.144c-.708-.772-1.061-1.712-1.061-2.789v-2.03a19 19 0 0 1-2.295 2.404l-.008.008q-2.265 1.915-5.37 3.207l-.007.002q-3.055 1.22-6.607 1.219c-3.921 0-7.453-1.01-10.58-3.037l-.006-.004c-3.116-2.077-5.594-4.874-7.433-8.38l-.003-.006c-1.787-3.516-2.674-7.511-2.674-11.972 0-4.517.886-8.513 2.675-11.975l.002-.003.353-.649c1.8-3.199 4.163-5.726 7.09-7.569 3.124-2.023 6.597-3.035 10.407-3.035zm.466 7.248c-2.668 0-5.052.678-7.163 2.03l.001.001c-1.932 1.271-3.488 2.997-4.666 5.19l-.23.446c-1.2 2.399-1.807 5.165-1.807 8.31 0 3.088.578 5.857 1.724 8.316 1.203 2.406 2.839 4.309 4.903 5.722 2.108 1.404 4.516 2.109 7.238 2.109l.507-.008c2.514-.083 4.725-.786 6.647-2.101l.005-.003.391-.27q2.894-2.072 4.505-5.445l.002-.004.219-.465q1.587-3.51 1.589-7.85l-.007-.565q-.108-4.202-1.799-7.577l-.006-.012c-1.146-2.455-2.775-4.352-4.887-5.706l-.006-.004-.006-.004c-1.922-1.315-4.133-2.02-6.647-2.102zM380.116 40.374q3.983 0 7.704 1.472l.463.19a19.2 19.2 0 0 1 6.123 4.14l.355.353q2.617 2.675 4.233 6.395l.21.492c1.02 2.477 1.554 5.225 1.608 8.236v.01c0 .978-.351 1.824-1.035 2.513l-.141.136c-.767.702-1.676 1.061-2.704 1.061h-30.19q.292 3.705 1.819 6.62c1.309 2.397 3.103 4.3 5.388 5.717 2.278 1.356 4.949 2.042 8.027 2.042l.711-.012c1.63-.054 3.055-.297 4.28-.72l.526-.19q1.81-.686 3.157-1.61 1.566-1.156 2.621-2.293l.037-.04.045-.031c.789-.547 1.591-.85 2.396-.85l.18.004c.89.038 1.646.368 2.22 1.007a3.26 3.26 0 0 1 .973 2.362c0 1.128-.536 2.096-1.507 2.896-1.626 1.793-3.813 3.368-6.544 4.734l-.008.004q-4.16 1.992-8.834 1.992c-4.293 0-8.104-.856-11.419-2.581l-.657-.358c-3.456-1.958-6.17-4.64-8.131-8.043l-.004-.008c-1.905-3.464-2.85-7.436-2.85-11.903 0-4.965.971-9.222 2.936-12.749l.001-.003.384-.657c1.823-3.023 4.093-5.399 6.815-7.114l.591-.358c3.226-1.9 6.636-2.856 10.221-2.856m-.61 7.352a14 14 0 0 0-3.673.674l-.614.211-.009.003c-1.457.503-2.805 1.337-4.042 2.514l-.246.24c-1.237 1.237-2.273 2.861-3.098 4.892h.001a16 16 0 0 0-.662 2.282h25.551v-.145c-.219-2.212-.972-4.082-2.251-5.627l-.007-.007-.005-.007a12.4 12.4 0 0 0-4.633-3.74l-.005-.002a12.9 12.9 0 0 0-5.697-1.302zM578.417 22.63c1.083 0 2.002.387 2.719 1.16.774.717 1.161 1.636 1.161 2.72v55.684a3.84 3.84 0 0 1-1.16 2.805c-.717.774-1.637 1.16-2.72 1.16-1.066 0-1.973-.338-2.68-1.032l-.138-.144c-.709-.772-1.062-1.712-1.062-2.789v-2.2a18.5 18.5 0 0 1-1.815 1.969l-.48.436q-2.265 2.003-5.374 3.296l.001.001q-2.868 1.228-6.177 1.303l-.442.005c-3.867 0-7.397-1.011-10.578-3.035l-.003-.002c-3.119-2.022-5.598-4.793-7.438-8.3l-.002-.006c-1.675-3.296-2.56-7.013-2.664-11.14l-.01-.832c0-4.516.886-8.54 2.674-12.056l.002-.006.353-.649c1.8-3.199 4.163-5.726 7.09-7.569 3.124-2.023 6.597-3.035 10.407-3.035l.452.005q3.384.07 6.4 1.21l.397.156q2.952 1.185 5.159 3.144l.428.377a18 18 0 0 1 1.62 1.672V26.51c0-1.077.354-1.997 1.076-2.72.723-.78 1.674-1.16 2.804-1.16m-17.406 24.997c-2.667 0-5.048.706-7.159 2.113l-.003.002c-1.932 1.271-3.489 2.998-4.667 5.192l-.231.445c-1.199 2.399-1.805 5.165-1.805 8.31l.006.565q.108 4.206 1.799 7.662l.231.445c1.179 2.199 2.738 3.956 4.674 5.28 2.11 1.406 4.49 2.11 7.155 2.11l.508-.008c2.517-.08 4.73-.757 6.653-2.022 2.117-1.413 3.748-3.314 4.893-5.713l.002-.004.219-.465c1.057-2.341 1.589-4.955 1.589-7.85 0-3.145-.606-5.911-1.806-8.31l-.004-.008c-1.145-2.4-2.774-4.27-4.888-5.626l-.007-.004-.006-.004c-1.922-1.315-4.133-2.02-6.646-2.102z" clip-rule="evenodd"></path><path fill="currentColor" d="M350.21 40.713c.96.004 1.806.33 2.514.974l.131.126c.638.64.962 1.434.962 2.357l-.012.295a3.8 3.8 0 0 1-.172.842q-.093.451-.28.835l.001.002-16.309 37.517-.001.002c-.336.764-.786 1.376-1.363 1.806-.582.432-1.266.658-2.032.69l-.001-.002c-.818.06-1.607-.099-2.356-.473l-.023-.012-.022-.014c-.717-.456-1.226-1.134-1.541-1.996L313.397 46.23q-.174-.35-.343-.775l-.018-.042-.009-.046a5 5 0 0 1-.088-.807l-.005-.304c0-.874.34-1.667.974-2.364l.002-.002.14-.145c.715-.698 1.653-1.031 2.763-1.031l.291.01c.672.05 1.315.273 1.921.659a3.48 3.48 0 0 1 1.543 1.747l13.036 30.622 13-30.538c.336-.82.802-1.469 1.419-1.903.624-.438 1.363-.629 2.187-.597M198.992 26.014c.98.041 1.807.39 2.435 1.072l.121.128c.587.65.87 1.47.87 2.422V82.11l-.005.22c-.044 1.09-.423 2.02-1.155 2.753l-.008.008-.008.007a3.97 3.97 0 0 1-2.588 1.057l-.2.004a5.3 5.3 0 0 1-1.68-.28l-.022-.007-.023-.01c-.558-.248-1.021-.571-1.363-.981l-.008-.01-.006-.009-33.579-44.405v42.075c0 .965-.315 1.807-.945 2.5l-.13.136c-.675.676-1.574.991-2.636.991-1.014 0-1.88-.322-2.549-.991l-.009-.009-.008-.009c-.653-.719-.975-1.602-.975-2.618V29.89c0-1.124.348-2.076 1.076-2.804l.007-.008.008-.007c.767-.702 1.676-1.061 2.704-1.061.577 0 1.146.127 1.705.372.627.195 1.139.527 1.491 1.02l33.653 44.497V29.636c0-1.015.322-1.88.991-2.55l.137-.13c.692-.63 1.534-.946 2.499-.946zM274.852 30.24c.995.045 1.845.43 2.517 1.155l.131.137c.634.7.944 1.573.944 2.582v7.613h7.19c1.022 0 1.887.355 2.551 1.076l.128.135c.625.682.948 1.493.948 2.414 0 .966-.317 1.808-.947 2.5l-.129.136c-.67.67-1.537.992-2.551.992h-7.19v25.948c0 1.32.196 2.227.524 2.79l.136.216c.319.474.701.801 1.139 1.005a5.6 5.6 0 0 0 1.758.305l.366-.014q.434-.037.751-.15l.122-.05a3.9 3.9 0 0 1 1.718-.378c.746 0 1.378.379 1.891 1.01.606.614.89 1.42.89 2.363 0 1.249-.742 2.26-2.011 3.045l-.007.005-.008.005c-1.185.677-2.499 1.033-3.931 1.075l-.288.004q-1.216 0-3.006-.17l-.002-.002q-1.578-.16-3.129-.926l-.442-.231c-1.227-.675-2.246-1.767-3.068-3.236l-.006-.01-.005-.01c-.782-1.564-1.151-3.68-1.151-6.308V48.979h-4.909a3.48 3.48 0 0 1-2.415-.947l-.134-.129a3.58 3.58 0 0 1-1.073-2.443l-.004-.191c0-.985.369-1.824 1.094-2.483.706-.698 1.557-1.06 2.532-1.06h4.909v-7.612c0-1.09.391-2.015 1.175-2.734a3.84 3.84 0 0 1 2.789-1.146zM514.79 40.374c3.893 0 7.023.8 9.334 2.46l.42.314c2.063 1.604 3.534 3.698 4.409 6.269q1.465 4.063 1.463 9.033v23.744A3.84 3.84 0 0 1 529.255 85c-.672.725-1.521 1.11-2.517 1.155l-.202.005a3.84 3.84 0 0 1-2.805-1.16l-.007-.008-.007-.008c-.709-.773-1.061-1.712-1.061-2.789V58.62c0-2.088-.33-3.939-.978-5.56l-.004-.01-.004-.009c-.584-1.646-1.587-2.938-3.017-3.892l-.008-.006-.009-.006c-1.35-.986-3.26-1.51-5.789-1.51q-3.429.003-6.268 1.546l-.01.005c-1.901.977-3.413 2.303-4.547 3.976l-.004.007c-1.122 1.603-1.684 3.417-1.684 5.46v23.574a3.84 3.84 0 0 1-1.16 2.805c-.672.725-1.522 1.11-2.518 1.155l-.202.005c-1.09 0-2.034-.39-2.804-1.16l-.007-.008-.007-.008c-.708-.772-1.062-1.712-1.062-2.789V45.353c0-1.077.354-1.997 1.076-2.72l.147-.139a3.82 3.82 0 0 1 2.657-1.021l.211.005c1.038.044 1.915.425 2.593 1.156l.131.138c.634.7.945 1.571.945 2.58v2.27a18 18 0 0 1 3.249-3.255l.594-.444a19 19 0 0 1 4.612-2.42 16.3 16.3 0 0 1 6.001-1.129M301.287 40.796c1.083 0 2.002.387 2.719 1.16.774.717 1.161 1.636 1.161 2.72v37.517a3.84 3.84 0 0 1-1.16 2.805c-.717.774-1.637 1.16-2.72 1.16-1.066 0-1.973-.338-2.68-1.032l-.138-.144c-.708-.772-1.062-1.712-1.062-2.789V44.676c0-1.077.354-1.997 1.076-2.72l.147-.14c.742-.677 1.635-1.02 2.657-1.02M477.553 40.796c1.083 0 2.002.387 2.718 1.16.775.717 1.162 1.636 1.162 2.72v37.517c0 1.09-.39 2.035-1.161 2.805-.716.774-1.636 1.16-2.719 1.16-1.066 0-1.973-.338-2.68-1.032l-.139-.144c-.708-.772-1.061-1.712-1.061-2.789V44.676c0-1.077.353-1.997 1.076-2.72l.147-.14c.742-.677 1.635-1.02 2.657-1.02M458.662 43.26a3.576 3.576 0 0 1 6.723 2.435l-13.544 37.368c-1.495 4.123-7.334 3.962-8.651-.14l-.059-.198-6.882-24.85-6.882 24.85c-1.171 4.227-7.005 4.519-8.636.53l-.074-.192-13.544-37.368-.057-.173a3.576 3.576 0 0 1 6.713-2.434l.067.172 10.793 29.781 8.142-29.4a3.58 3.58 0 0 1 2.52-2.608h.003q.011-.004.022-.006a4 4 0 0 1 .324-.072l.052-.008.126-.018.041-.004.139-.014.041-.002.127-.006h.165l.127.006.041.002q.07.006.139.014l.041.004.126.018.052.008a3 3 0 0 1 .324.072l.023.005.002.001q.079.023.156.048a3.57 3.57 0 0 1 2.364 2.56l8.142 29.4zM301.287 26.981a4.599 4.599 0 1 1 0 9.198 4.599 4.599 0 0 1 0-9.198M477.553 26.981a4.599 4.599 0 1 1-.001 9.198 4.599 4.599 0 0 1 .001-9.198"></path></svg></a><button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«Rhdejb»" data-state="closed" class="flex flex-row items-center cursor-pointer gap-2.5 ps-2 pe-4 py-1.5 hover:text-fd-accent-foreground"><svg class="opacity-20 -mr-2" height="24" viewBox="0 0 32 32" width="24"><path d="M22 5L9 28" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><div class="flex-1 text-start"><p class="text-sm font-medium">v4</p></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down size-4 text-fd-muted-foreground"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></div><button type="button" data-search-full="" class="inline-flex items-center gap-2 bg-white/30 dark:bg-black/30 hover:bg-white/30 dark:hover:bg-black/30 border border-dashed border-fd-foreground/10 hover:border-fd-foreground/20 cursor-pointer p-1.5 text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground w-full my-auto rounded-xl max-md:hidden max-w-sm px-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search ms-1 size-4"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>Search<!-- --> <div class="ms-auto inline-flex gap-0.5"><kbd class="rounded-md border bg-fd-background px-1.5">⌘</kbd><kbd class="rounded-md border bg-fd-background px-1.5">K</kbd></div></button><div class="flex flex-1 flex-row items-center justify-end"><div class="flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden"></div><button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-5 md:hidden" data-search="" aria-label="Open Search"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg></button><div class="inline-flex items-center rounded-full border border-fd-foreground/10 p-1 bg-white/20 dark:bg-black/20 backdrop-blur mr-2 max-md:hidden" data-theme-toggle=""><button aria-label="light" class="size-6.5 rounded-full p-1.5 text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun size-full"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></button><button aria-label="dark" class="size-6.5 rounded-full p-1.5 text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon size-full"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></button><button aria-label="system" class="size-6.5 rounded-full p-1.5 text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-airplay size-full"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><path d="m12 15 5 6H7Z"></path></svg></button></div><button aria-label="Toggle Sidebar" data-open="false" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-5 md:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button><a href="https://github.com/nativewind/nativewind" rel="noreferrer noopener" target="_blank" class="inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5 text-fd-muted-foreground max-lg:hidden rounded-full border" aria-label="GitHub" data-active="false"><svg role="img" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div></div></header><div class="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none"></div><div class="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none"></div><div class="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none"></div><div id="nd-page" class="flex w-full min-w-0 flex-col mt-(--fd-nav-height)"><div class="sticky overflow-visible z-10 xl:hidden h-10" style="top:calc(var(--fd-banner-height) + var(--fd-nav-height))"><header id="nd-tocnav" class="border-b border-fd-foreground/10 backdrop-blur-sm transition-colors" data-state="closed"><button type="button" aria-controls="radix-«R57n7ejb»" aria-expanded="false" data-state="closed" class="flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6 w-full"><svg role="progressbar" viewBox="0 0 24 24" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1" class=""><circle cx="12" cy="12" r="11" fill="none" stroke-width="2" class="stroke-current/25"></circle><circle cx="12" cy="12" r="11" fill="none" stroke-width="2" stroke="currentColor" stroke-dasharray="69.11503837897544" stroke-dashoffset="69.11503837897544" stroke-linecap="round" transform="rotate(-90 12 12)" class="transition-all"></circle></svg><span class="grid flex-1 *:row-start-1 *:col-start-1"><span class="truncate transition-all">Themes</span><span class="truncate transition-all opacity-0 translate-y-full pointer-events-none"></span></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down transition-transform"><path d="m6 9 6 6 6-6"></path></svg></button><div data-state="closed" id="radix-«R57n7ejb»" hidden="" data-toc-popover="" class="overflow-hidden flex flex-col max-h-[50vh]"></div></header></div><article class="flex w-full flex-1 flex-col gap-6 px-4 md:px-6 pt-8 md:pt-12 xl:px-12 xl:mx-auto max-w-[860px]"><h1 class="text-3xl font-semibold">Themes</h1><p class="text-sm text-muted-foreground mb-4 italic">Last updated on <!-- -->May 30th, 2025</p><div class="prose">
2<p>As Nativewind uses Tailwind CLI, it supports all the theming options Tailwind CSS does. Read the Tailwind CSS docs on each className to learn more about the possible theming values.</p>
3<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="dynamic-themes"><a data-card="" href="#dynamic-themes" class="peer">Dynamic themes</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h2>
4<p>To transition from a static theme to a dynamic one in Nativewind, utilize <a href="https://tailwindcss.com/docs/customizing-colors#using-css-variables" rel="noreferrer noopener" target="_blank">CSS Variables as colors</a>. This approach ensures flexibility and adaptability in theme application, catering to user preferences.</p>
5<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
6<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
7<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> colors: {</span></span>
8<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // Create a custom color that uses a CSS custom value</span></span>
9<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> primary: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"rgb(var(--color-values) / <alpha-value>)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
10<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
11<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
12<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span></span>
13<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // Set a default value on the `:root` element</span></span>
14<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">addBase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span></span>
15<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> addBase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
16<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ":root"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span>
17<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "--color-values"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"255 0 0"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
18<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "--color-rgb"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"rgb(255 0 0)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
19<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
20<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
21<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ],</span></span>
22<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
23<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">App.tsx</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { vars } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'nativewind'</span></span>
24<span class="line"> </span>
25<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> userTheme</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> vars</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
26<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-values'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 255 0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
27<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-rgb'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'rbg(0 0 255)'</span></span>
28<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span>
29<span class="line"> </span>
30<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
31<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
32<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">View</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
33<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Text</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text-primary"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Access </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">as</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> theme</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"></</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
34<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Text</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text-[--color-rgb]"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Or the variable directly</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
35<span class="line"> </span>
36<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* Variables can be changed inline */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
37<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">View</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{userTheme}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Text</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text-primary"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">I</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> am now green</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Text</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text-[--color-rgb]"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">I</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> am now blue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">View</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
41<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">View</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
42<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> )</span></span>
43<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
44<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="switching-themes"><a data-card="" href="#switching-themes" class="peer">Switching themes</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h2>
45<p>Nativewind is unopinionated on how you implement your theming. This is an example implementation that supports two themes with both a light/dark mode.</p>
46<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">App.jsx</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { vars, useColorScheme } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'nativewind'</span></span>
47<span class="line"> </span>
48<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> themes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
49<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> brand: {</span></span>
50<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">vars</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
51<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-primary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'black'</span></span>
52<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-secondary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'white'</span></span>
53<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
54<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">vars</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
55<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-primary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'white'</span></span>
56<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-secondary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'dark'</span></span>
57<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> })</span></span>
58<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
59<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> christmas: {</span></span>
60<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">vars</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
61<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-primary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'red'</span></span>
62<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-secondary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'green'</span></span>
63<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
64<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">vars</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
65<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-primary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'green'</span></span>
66<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '--color-secondary'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'red'</span></span>
67<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> })</span></span>
68<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
69<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
70<span class="line"> </span>
71<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
72<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">colorScheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useColorScheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">()</span></span>
73<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
74<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">View</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{themes[props.name][colorScheme]}></span></span>
75<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {props.children}</span></span>
76<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">View</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
77<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> )</span></span>
78<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
79<span class="line"> </span>
80<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
81<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
82<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Theme</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"brand"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
83<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">View</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text-primary"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* rgba(0, 0, 0, 1) */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
84<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Theme</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"christmas"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
85<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">View</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text-primary"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* rgba(255, 0, 0, 1) */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
86<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
87<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
88<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> )</span></span>
89<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
90<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="retrieving-theme-values"><a data-card="" href="#retrieving-theme-values" class="peer">Retrieving theme values</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h2>
91<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="accessing-default-colors"><a data-card="" href="#accessing-default-colors" class="peer">Accessing default colors</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
92<p>If you need the default color values at runtime, you can import them directly from <code>tailwindcss</code></p>
93<p>retrieve them directly from <code>tailwindcss/colors</code></p>
94<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 absolute right-2 top-2 z-[2] backdrop-blur-md" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> colors </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "tailwindcss/colors"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
95<span class="line"> </span>
96<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> MyActivityIndicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
97<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ActivityIndicator</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"small"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{colors.blue.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">props} />;</span></span>
98<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
99<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="access-theme-values"><a data-card="" href="#access-theme-values" class="peer">Access theme values</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
100<p>If you use custom theme values, extract them to a file that is shared with your code and your <code>tailwind.config.js</code>. <a href="https://tailwindcss.com/docs/configuration#referencing-in-java-script" rel="noreferrer noopener" target="_blank">Please read the Tailwind CSS documentation for more information</a>.</p>
101<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">colors.ts</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
102<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> tahiti: {</span></span>
103<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#cffafe"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
104<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#a5f3fc"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
105<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#67e8f9"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
106<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#22d3ee"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
107<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#06b6d4"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
108<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#0891b2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
109<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#0e7490"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
110<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 800</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#155e75"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
111<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"#164e63"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
112<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
113<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
114<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> colors</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"./colors"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
115<span class="line"> </span>
116<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
117<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
118<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
119<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> colors,</span></span>
120<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
121<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
122<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
123<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">MyActivityIndicator.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> colors </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "./colors"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
124<span class="line"> </span>
125<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> MyActivityIndicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
126<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ActivityIndicator</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{colors.tahiti.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">500</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">props} />;</span></span>
127<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
128<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="platform-specific-theming"><a data-card="" href="#platform-specific-theming" class="peer">Platform specific theming</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h2>
129<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="platformselect"><a data-card="" href="#platformselect" class="peer">platformSelect</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
130<p>platformSelect is the equivalent to <a href="https://reactnative.dev/docs/platform#select" rel="noreferrer noopener" target="_blank"><code>Platform.select()</code></a></p>
131<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">platformSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
132<span class="line"> </span>
133<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
134<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
135<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
136<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> colors: {</span></span>
137<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> error: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">platformSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
138<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ios: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"red"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
139<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> android: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"blue"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
140<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> default: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"green"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
141<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
142<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
143<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
144<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
145<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
146<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="platformcolor"><a data-card="" href="#platformcolor" class="peer">platformColor()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
147<p>Equivalent of <a href="https://reactnative.dev/docs/platformcolor" rel="noreferrer noopener" target="_blank"><code>PlatformColor</code></a>. Typically used with <code>platformSelect</code>.</p>
148<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">platformColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
149<span class="line"> </span>
150<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
151<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
152<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
153<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> colors: {</span></span>
154<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> platformRed: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">platformSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
155<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> android: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">platformColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"systemRed"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">),</span></span>
156<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> web: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"red"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
157<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
158<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
159<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
160<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
161<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
162<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="device-specific-theming"><a data-card="" href="#device-specific-theming" class="peer">Device specific theming</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h2>
163<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="hairlinewidth"><a data-card="" href="#hairlinewidth" class="peer">hairlineWidth()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
164<p>Equivalent of <a href="https://reactnative.dev/docs/stylesheet#hairlinewidth" rel="noreferrer noopener" target="_blank"><code>StyleSheet.hairlineWidth</code></a></p>
165<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">hairlineWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
166<span class="line"> </span>
167<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
168<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
169<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
170<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> borderWidth: {</span></span>
171<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> hairline: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">hairlineWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(),</span></span>
172<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
173<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
174<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
175<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
176<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="pixelratio"><a data-card="" href="#pixelratio" class="peer">pixelRatio()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
177<p>Equivalent of <a href="https://reactnative.dev/docs/pixelratio#get" rel="noreferrer noopener" target="_blank"><code>PixelRatio.get()</code></a>. If a number is provided it returns <code>PixelRatio.get() * <value></code>, otherwise it returns the PixelRatio value.</p>
178<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">pixelRatio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
179<span class="line"> </span>
180<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
181<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
182<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
183<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> borderWidth: {</span></span>
184<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> number: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">pixelRatio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">),</span></span>
185<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
186<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
187<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
188<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
189<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="pixelratioselect"><a data-card="" href="#pixelratioselect" class="peer">pixelRatioSelect()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
190<p>A helper function to use <a href="https://reactnative.dev/docs/pixelratio#get" rel="noreferrer noopener" target="_blank"><code>PixelRatio.get()</code></a> in a conditional statement, similar to <code>Platform.select</code>.</p>
191<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">pixelRatio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">hairlineWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
192<span class="line"> </span>
193<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
194<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
195<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
196<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> borderWidth: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">pixelRatioSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
197<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
198<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> default: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">hairlineWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(),</span></span>
199<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
200<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
201<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
202<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
203<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="fontscale"><a data-card="" href="#fontscale" class="peer">fontScale()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
204<p>Equivalent of <a href="https://reactnative.dev/docs/pixelratio#getFontScale" rel="noreferrer noopener" target="_blank"><code>PixelRatio.getFontScale()</code></a>. If a number is provided it returns <code>PixelRatio.getFontScale() * <value></code>, otherwise it returns the <code>PixelRatio.getFontScale()</code> value.</p>
205<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">fontScale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
206<span class="line"> </span>
207<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
208<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
209<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
210<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> fontSize: {</span></span>
211<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> custom: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontScale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">),</span></span>
212<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
213<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
214<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
215<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
216<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="fontscaleselect"><a data-card="" href="#fontscaleselect" class="peer">fontScaleSelect()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
217<p>A helper function to use <a href="https://reactnative.dev/docs/pixelratio#getFontScale" rel="noreferrer noopener" target="_blank"><code>PixelRatio.getFontScale()</code></a> in a conditional statement, similar to <code>Platform.select</code>.</p>
218<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><div class="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5"><div class="text-fd-muted-foreground [&_svg]:size-3.5"><svg viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="currentColor" /></svg></div><figcaption class="flex-1 truncate text-fd-muted-foreground">tailwind.config.js</figcaption><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 -me-2" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">fontScaleSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">hairlineWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
219<span class="line"> </span>
220<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
221<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
222<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
223<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> fontSize: {</span></span>
224<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> custom: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontScaleSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
225<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
226<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> default: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
227<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }),</span></span>
228<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
229<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
230<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
231<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
232<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="getpixelsizeforlayoutsize"><a data-card="" href="#getpixelsizeforlayoutsize" class="peer">getPixelSizeForLayoutSize()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
233<p>Equivalent of <code>PixelRatio.getPixelSizeForLayoutSize()</code></p>
234<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 absolute right-2 top-2 z-[2] backdrop-blur-md" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">getPixelSizeForLayoutSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
235<span class="line"> </span>
236<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
237<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
238<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
239<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> size: {</span></span>
240<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> custom: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">getPixelSizeForLayoutSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">),</span></span>
241<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
242<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
243<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
244<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre></div></div></div></figure>
245<h3 class="flex scroll-m-28 flex-row items-center gap-2" id="roundtonearestpixel"><a data-card="" href="#roundtonearestpixel" class="peer">roundToNearestPixel()</a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" aria-label="Link to section"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></h3>
246<p>Equivalent of <code>PixelRatio.roundToNearestPixel()</code></p>
247<figure class="not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground transition-opacity group-hover:opacity-100 [&_svg]:size-3.5 [@media(hover:hover)]:opacity-0 absolute right-2 top-2 z-[2] backdrop-blur-md" aria-label="Copy Text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check transition-transform scale-0"><path d="M20 6 9 17l-5-5"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy absolute transition-transform"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><div dir="ltr" class="overflow-hidden" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] max-h-[600px]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><pre class="p-4 focus-visible:outline-none"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">roundToNearestPixel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"nativewind/theme"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
248<span class="line"> </span>
249<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
250<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme: {</span></span>
251<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> extend: {</span></span>
252<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> size: {</span></span>
253<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> custom: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">roundToNearestPixel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">8.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)</span></span>
254<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
255<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
256<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
257<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span></code></pre></div></div></div></figure></div><div role="none" class="flex-1"></div><div class="flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden"></div><div class="@container grid gap-4 pb-6 grid-cols-2"><a class="flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full" href="/docs/guides/third-party-components"><div class="inline-flex items-center gap-1.5 font-medium"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left -mx-1 size-4 shrink-0 rtl:rotate-180"><path d="m15 18-6-6 6-6"></path></svg><p>Styling Third-Party Components</p></div><p class="text-fd-muted-foreground truncate">Previous Page</p></a><a class="flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full text-end" href="/docs/guides/editor-setup"><div class="inline-flex items-center gap-1.5 font-medium flex-row-reverse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right -mx-1 size-4 shrink-0 rtl:rotate-180"><path d="m9 18 6-6-6-6"></path></svg><p>Editor Setup</p></div><p class="text-fd-muted-foreground truncate">Next Page</p></a></div></article></div><div id="nd-toc" class="sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-(--fd-toc-height) pb-2 pt-12 max-xl:hidden" style="--fd-toc-height:calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))"><div class="flex h-full w-(--fd-toc-width) max-w-full flex-col gap-3 pe-4"><h3 class="inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text size-4"><path d="M15 18H3"></path><path d="M17 6H3"></path><path d="M21 12H3"></path></svg>On this page</h3><div dir="ltr" class="overflow-hidden flex flex-col ps-px" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="size-full rounded-[inherit] min-h-0 text-sm" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><div class="flex flex-col"><a data-active="false" href="#dynamic-themes" style="padding-inline-start:14px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:0"></div>Dynamic themes</a><a data-active="false" href="#switching-themes" style="padding-inline-start:14px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:0"></div>Switching themes</a><a data-active="false" href="#retrieving-theme-values" style="padding-inline-start:14px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10 bottom-1.5" style="inset-inline-start:0"></div>Retrieving theme values</a><a data-active="false" href="#accessing-default-colors" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"><line x1="0" y1="0" x2="10" y2="12" class="stroke-fd-foreground/10" stroke-width="1"></line></svg><div class="absolute inset-y-0 w-px bg-fd-foreground/10 top-1.5" style="inset-inline-start:10px"></div>Accessing default colors</a><a data-active="false" href="#access-theme-values" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10 bottom-1.5" style="inset-inline-start:10px"></div>Access theme values</a><a data-active="false" href="#platform-specific-theming" style="padding-inline-start:14px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"><line x1="10" y1="0" x2="0" y2="12" class="stroke-fd-foreground/10" stroke-width="1"></line></svg><div class="absolute inset-y-0 w-px bg-fd-foreground/10 top-1.5 bottom-1.5" style="inset-inline-start:0"></div>Platform specific theming</a><a data-active="false" href="#platformselect" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"><line x1="0" y1="0" x2="10" y2="12" class="stroke-fd-foreground/10" stroke-width="1"></line></svg><div class="absolute inset-y-0 w-px bg-fd-foreground/10 top-1.5" style="inset-inline-start:10px"></div>platformSelect</a><a data-active="false" href="#platformcolor" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10 bottom-1.5" style="inset-inline-start:10px"></div>platformColor()</a><a data-active="false" href="#device-specific-theming" style="padding-inline-start:14px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"><line x1="10" y1="0" x2="0" y2="12" class="stroke-fd-foreground/10" stroke-width="1"></line></svg><div class="absolute inset-y-0 w-px bg-fd-foreground/10 top-1.5 bottom-1.5" style="inset-inline-start:0"></div>Device specific theming</a><a data-active="false" href="#hairlinewidth" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"><line x1="0" y1="0" x2="10" y2="12" class="stroke-fd-foreground/10" stroke-width="1"></line></svg><div class="absolute inset-y-0 w-px bg-fd-foreground/10 top-1.5" style="inset-inline-start:10px"></div>hairlineWidth()</a><a data-active="false" href="#pixelratio" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:10px"></div>pixelRatio()</a><a data-active="false" href="#pixelratioselect" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:10px"></div>pixelRatioSelect()</a><a data-active="false" href="#fontscale" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:10px"></div>fontScale()</a><a data-active="false" href="#fontscaleselect" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:10px"></div>fontScaleSelect()</a><a data-active="false" href="#getpixelsizeforlayoutsize" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:10px"></div>getPixelSizeForLayoutSize()</a><a data-active="false" href="#roundtonearestpixel" style="padding-inline-start:26px" class="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"><div class="absolute inset-y-0 w-px bg-fd-foreground/10" style="inset-inline-start:10px"></div>roundToNearestPixel()</a></div></div></div></div></div></div><!--$--><!--/$--><!--$--><!--/$--></main><script src="/_next/static/chunks/webpack-db645017da02a8f9.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[4341,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"RootProvider\"]\n3:I[7555,[],\"\"]\n4:I[1295,[],\"\"]\n5:I[6874,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"\"]\n6:I[1828,[\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"177\",\"static/chunks/app/layout-5abee9e51885f5fd.js\"],\"Analytics\"]\n7:I[4341,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"TreeContextProvider\"]\n8:I[4341,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"s"])</script><script>self.__next_f.push([1,"tatic/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"NavProvider\"]\n9:I[449,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"CollapsibleSidebar\"]\na:I[449,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"SidebarHeader\"]\nb:I[449,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"SidebarViewport\"]\nc:I[449,[\"769\",\"static/chu"])</script><script>self.__next_f.push([1,"nks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"SidebarItem\"]\nd:I[449,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"SidebarPageTree\"]\ne:I[449,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"SidebarFooter\"]\nf:I[6840,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/81"])</script><script>self.__next_f.push([1,"8-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"ThemeToggle\"]\n10:I[5135,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"Navbar\"]\n11:I[5135,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"DynamicLabel\"]\n15:I[8753,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"RootToggle\"]\n16:I[6157,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9."])</script><script>self.__next_f.push([1,"js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"LargeSearchToggle\"]\n17:I[6157,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"SearchToggle\"]\n18:I[5135,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"NavbarSidebarTrigger\"]\n19:I[9582,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"BaseLinkItem\"]\n1a:I[4341,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"493\",\"static/chunks/493-66441aebc1d39abd.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432"])</script><script>self.__next_f.push([1,"e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"341\",\"static/chunks/341-5271f225a215cf0f.js\",\"76\",\"static/chunks/76-f5e5a5aff019cbf9.js\",\"437\",\"static/chunks/437-c0536b8cc623be5c.js\",\"305\",\"static/chunks/305-d093f0536b9045a7.js\",\"818\",\"static/chunks/818-d9e48921ed4733b8.js\",\"499\",\"static/chunks/app/docs/layout-4ba82388b1281064.js\"],\"StylesProvider\"]\n1c:I[9665,[],\"MetadataBoundary\"]\n1e:I[9665,[],\"OutletBoundary\"]\n21:I[4911,[],\"AsyncMetadataOutlet\"]\n23:I[9665,[],\"ViewportBoundary\"]\n25:I[6614,[],\"\"]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/0400282a37e0b5cc.css\",\"style\"]\n:HL[\"/_next/static/css/931b179cff3131dc.css\",\"style\"]\n12:T46d,M38.39 68.281c10.696-.694 21.994.63 29.687 4.68 7.96 4.19 11.353 10.849 10.802 17.258-.52 6.042-4.607 11.513-10.6 13.181l-.285.077c-9.075 2.319-18.584-4.306-19.643-13.558l-.044-.442-.012-.189a3.68 3.68 0 0 1 7.323-.619l.021.189.023.23c.56 4.834 5.773 8.469 10.51 7.259l.262-.073c2.698-.817 4.835-3.454 5.113-6.686.264-3.067-1.188-7.11-6.898-10.116-5.978-3.147-15.71-4.501-25.782-3.847-10.072.653-19.546 3.254-25.067 7.147l-.158.105a3.68 3.68 0 0 1-4.083-6.118l.678-.464c7.116-4.718 17.793-7.341 28.154-8.014M102.13 25.779c9.811.34 18.446 8.182 18.288 18.438l-.014.498c-.238 5.563-2.353 10.429-6.203 14.005-3.814 3.544-9.059 5.573-15.172 6.054-3.35.263-7.81-.581-12.554-1.485-4.967-.947-10.816-2.096-17.598-2.811-13.29-1.403-30.147-1.134-49.963 5.86l-.947.338a3.68 3.68 0 0 1-2.504-6.919l1.005-.36c21.073-7.436 39.07-7.727 53.182-6.237 7.135.753 13.283 1.963 18.203 2.9 5.143.98 8.464 1.545 10.598 1.378 4.857-.382 8.406-1.939 10.742-4.108 2.3-2.137 3.696-5.115 3.859-8.93l.008-.282c.085-5.796-4.893-10.768-11.173-10.985l-.306-.007c-5.826-.057-10.31 3.572-11.466 9.283a3.68 3.68 0 0 1-7.213-1.46c1.857-9.17 9.398-15.274 18.753-15.181z13:Te3f,"])</script><script>self.__next_f.push([1,"M233.686 40.379q3.455.07 6.473 1.21l.398.156q2.95 1.185 5.159 3.144l.42.37a17 17 0 0 1 1.543 1.598v-1.926c0-1.077.353-1.998 1.076-2.72.723-.78 1.674-1.16 2.804-1.16 1.083 0 2.001.386 2.718 1.16.774.717 1.162 1.636 1.162 2.72v37.263A3.84 3.84 0 0 1 254.278 85c-.717.774-1.636 1.16-2.719 1.16-1.066 0-1.974-.338-2.68-1.032l-.139-.144c-.708-.772-1.061-1.712-1.061-2.789v-2.03a19 19 0 0 1-2.295 2.404l-.008.008q-2.265 1.915-5.37 3.207l-.007.002q-3.055 1.22-6.607 1.219c-3.921 0-7.453-1.01-10.58-3.037l-.006-.004c-3.116-2.077-5.594-4.874-7.433-8.38l-.003-.006c-1.787-3.516-2.674-7.511-2.674-11.972 0-4.517.886-8.513 2.675-11.975l.002-.003.353-.649c1.8-3.199 4.163-5.726 7.09-7.569 3.124-2.023 6.597-3.035 10.407-3.035zm.466 7.248c-2.668 0-5.052.678-7.163 2.03l.001.001c-1.932 1.271-3.488 2.997-4.666 5.19l-.23.446c-1.2 2.399-1.807 5.165-1.807 8.31 0 3.088.578 5.857 1.724 8.316 1.203 2.406 2.839 4.309 4.903 5.722 2.108 1.404 4.516 2.109 7.238 2.109l.507-.008c2.514-.083 4.725-.786 6.647-2.101l.005-.003.391-.27q2.894-2.072 4.505-5.445l.002-.004.219-.465q1.587-3.51 1.589-7.85l-.007-.565q-.108-4.202-1.799-7.577l-.006-.012c-1.146-2.455-2.775-4.352-4.887-5.706l-.006-.004-.006-.004c-1.922-1.315-4.133-2.02-6.647-2.102zM380.116 40.374q3.983 0 7.704 1.472l.463.19a19.2 19.2 0 0 1 6.123 4.14l.355.353q2.617 2.675 4.233 6.395l.21.492c1.02 2.477 1.554 5.225 1.608 8.236v.01c0 .978-.351 1.824-1.035 2.513l-.141.136c-.767.702-1.676 1.061-2.704 1.061h-30.19q.292 3.705 1.819 6.62c1.309 2.397 3.103 4.3 5.388 5.717 2.278 1.356 4.949 2.042 8.027 2.042l.711-.012c1.63-.054 3.055-.297 4.28-.72l.526-.19q1.81-.686 3.157-1.61 1.566-1.156 2.621-2.293l.037-.04.045-.031c.789-.547 1.591-.85 2.396-.85l.18.004c.89.038 1.646.368 2.22 1.007a3.26 3.26 0 0 1 .973 2.362c0 1.128-.536 2.096-1.507 2.896-1.626 1.793-3.813 3.368-6.544 4.734l-.008.004q-4.16 1.992-8.834 1.992c-4.293 0-8.104-.856-11.419-2.581l-.657-.358c-3.456-1.958-6.17-4.64-8.131-8.043l-.004-.008c-1.905-3.464-2.85-7.436-2.85-11.903 0-4.965.971-9.222 2.936-12.749l.001-.003.384-.657c1.823-3.023 4.093-5.399 6.815-7.114l.591-.358c3.226-1.9 6.636-2.856 10.221-2.856m-.61 7.352a14 14 0 0 0-3.673.674l-.614.211-.009.003c-1.457.503-2.805 1.337-4.042 2.514l-.246.24c-1.237 1.237-2.273 2.861-3.098 4.892h.001a16 16 0 0 0-.662 2.282h25.551v-.145c-.219-2.212-.972-4.082-2.251-5.627l-.007-.007-.005-.007a12.4 12.4 0 0 0-4.633-3.74l-.005-.002a12.9 12.9 0 0 0-5.697-1.302zM578.417 22.63c1.083 0 2.002.387 2.719 1.16.774.717 1.161 1.636 1.161 2.72v55.684a3.84 3.84 0 0 1-1.16 2.805c-.717.774-1.637 1.16-2.72 1.16-1.066 0-1.973-.338-2.68-1.032l-.138-.144c-.709-.772-1.062-1.712-1.062-2.789v-2.2a18.5 18.5 0 0 1-1.815 1.969l-.48.436q-2.265 2.003-5.374 3.296l.001.001q-2.868 1.228-6.177 1.303l-.442.005c-3.867 0-7.397-1.011-10.578-3.035l-.003-.002c-3.119-2.022-5.598-4.793-7.438-8.3l-.002-.006c-1.675-3.296-2.56-7.013-2.664-11.14l-.01-.832c0-4.516.886-8.54 2.674-12.056l.002-.006.353-.649c1.8-3.199 4.163-5.726 7.09-7.569 3.124-2.023 6.597-3.035 10.407-3.035l.452.005q3.384.07 6.4 1.21l.397.156q2.952 1.185 5.159 3.144l.428.377a18 18 0 0 1 1.62 1.672V26.51c0-1.077.354-1.997 1.076-2.72.723-.78 1.674-1.16 2.804-1.16m-17.406 24.997c-2.667 0-5.048.706-7.159 2.113l-.003.002c-1.932 1.271-3.489 2.998-4.667 5.192l-.231.445c-1.199 2.399-1.805 5.165-1.805 8.31l.006.565q.108 4.206 1.799 7.662l.231.445c1.179 2.199 2.738 3.956 4.674 5.28 2.11 1.406 4.49 2.11 7.155 2.11l.508-.008c2.517-.08 4.73-.757 6.653-2.022 2.117-1.413 3.748-3.314 4.893-5.713l.002-.004.219-.465c1.057-2.341 1.589-4.955 1.589-7.85 0-3.145-.606-5.911-1.806-8.31l-.004-.008c-1.145-2.4-2.774-4.27-4.888-5.626l-.007-.004-.006-.004c-1.922-1.315-4.133-2.02-6.646-2.102z"])</script><script>self.__next_f.push([1,"14:T1144,"])</script><script>self.__next_f.push([1,"M350.21 40.713c.96.004 1.806.33 2.514.974l.131.126c.638.64.962 1.434.962 2.357l-.012.295a3.8 3.8 0 0 1-.172.842q-.093.451-.28.835l.001.002-16.309 37.517-.001.002c-.336.764-.786 1.376-1.363 1.806-.582.432-1.266.658-2.032.69l-.001-.002c-.818.06-1.607-.099-2.356-.473l-.023-.012-.022-.014c-.717-.456-1.226-1.134-1.541-1.996L313.397 46.23q-.174-.35-.343-.775l-.018-.042-.009-.046a5 5 0 0 1-.088-.807l-.005-.304c0-.874.34-1.667.974-2.364l.002-.002.14-.145c.715-.698 1.653-1.031 2.763-1.031l.291.01c.672.05 1.315.273 1.921.659a3.48 3.48 0 0 1 1.543 1.747l13.036 30.622 13-30.538c.336-.82.802-1.469 1.419-1.903.624-.438 1.363-.629 2.187-.597M198.992 26.014c.98.041 1.807.39 2.435 1.072l.121.128c.587.65.87 1.47.87 2.422V82.11l-.005.22c-.044 1.09-.423 2.02-1.155 2.753l-.008.008-.008.007a3.97 3.97 0 0 1-2.588 1.057l-.2.004a5.3 5.3 0 0 1-1.68-.28l-.022-.007-.023-.01c-.558-.248-1.021-.571-1.363-.981l-.008-.01-.006-.009-33.579-44.405v42.075c0 .965-.315 1.807-.945 2.5l-.13.136c-.675.676-1.574.991-2.636.991-1.014 0-1.88-.322-2.549-.991l-.009-.009-.008-.009c-.653-.719-.975-1.602-.975-2.618V29.89c0-1.124.348-2.076 1.076-2.804l.007-.008.008-.007c.767-.702 1.676-1.061 2.704-1.061.577 0 1.146.127 1.705.372.627.195 1.139.527 1.491 1.02l33.653 44.497V29.636c0-1.015.322-1.88.991-2.55l.137-.13c.692-.63 1.534-.946 2.499-.946zM274.852 30.24c.995.045 1.845.43 2.517 1.155l.131.137c.634.7.944 1.573.944 2.582v7.613h7.19c1.022 0 1.887.355 2.551 1.076l.128.135c.625.682.948 1.493.948 2.414 0 .966-.317 1.808-.947 2.5l-.129.136c-.67.67-1.537.992-2.551.992h-7.19v25.948c0 1.32.196 2.227.524 2.79l.136.216c.319.474.701.801 1.139 1.005a5.6 5.6 0 0 0 1.758.305l.366-.014q.434-.037.751-.15l.122-.05a3.9 3.9 0 0 1 1.718-.378c.746 0 1.378.379 1.891 1.01.606.614.89 1.42.89 2.363 0 1.249-.742 2.26-2.011 3.045l-.007.005-.008.005c-1.185.677-2.499 1.033-3.931 1.075l-.288.004q-1.216 0-3.006-.17l-.002-.002q-1.578-.16-3.129-.926l-.442-.231c-1.227-.675-2.246-1.767-3.068-3.236l-.006-.01-.005-.01c-.782-1.564-1.151-3.68-1.151-6.308V48.979h-4.909a3.48 3.48 0 0 1-2.415-.947l-.134-.129a3.58 3.58 0 0 1-1.073-2.443l-.004-.191c0-.985.369-1.824 1.094-2.483.706-.698 1.557-1.06 2.532-1.06h4.909v-7.612c0-1.09.391-2.015 1.175-2.734a3.84 3.84 0 0 1 2.789-1.146zM514.79 40.374c3.893 0 7.023.8 9.334 2.46l.42.314c2.063 1.604 3.534 3.698 4.409 6.269q1.465 4.063 1.463 9.033v23.744A3.84 3.84 0 0 1 529.255 85c-.672.725-1.521 1.11-2.517 1.155l-.202.005a3.84 3.84 0 0 1-2.805-1.16l-.007-.008-.007-.008c-.709-.773-1.061-1.712-1.061-2.789V58.62c0-2.088-.33-3.939-.978-5.56l-.004-.01-.004-.009c-.584-1.646-1.587-2.938-3.017-3.892l-.008-.006-.009-.006c-1.35-.986-3.26-1.51-5.789-1.51q-3.429.003-6.268 1.546l-.01.005c-1.901.977-3.413 2.303-4.547 3.976l-.004.007c-1.122 1.603-1.684 3.417-1.684 5.46v23.574a3.84 3.84 0 0 1-1.16 2.805c-.672.725-1.522 1.11-2.518 1.155l-.202.005c-1.09 0-2.034-.39-2.804-1.16l-.007-.008-.007-.008c-.708-.772-1.062-1.712-1.062-2.789V45.353c0-1.077.354-1.997 1.076-2.72l.147-.139a3.82 3.82 0 0 1 2.657-1.021l.211.005c1.038.044 1.915.425 2.593 1.156l.131.138c.634.7.945 1.571.945 2.58v2.27a18 18 0 0 1 3.249-3.255l.594-.444a19 19 0 0 1 4.612-2.42 16.3 16.3 0 0 1 6.001-1.129M301.287 40.796c1.083 0 2.002.387 2.719 1.16.774.717 1.161 1.636 1.161 2.72v37.517a3.84 3.84 0 0 1-1.16 2.805c-.717.774-1.637 1.16-2.72 1.16-1.066 0-1.973-.338-2.68-1.032l-.138-.144c-.708-.772-1.062-1.712-1.062-2.789V44.676c0-1.077.354-1.997 1.076-2.72l.147-.14c.742-.677 1.635-1.02 2.657-1.02M477.553 40.796c1.083 0 2.002.387 2.718 1.16.775.717 1.162 1.636 1.162 2.72v37.517c0 1.09-.39 2.035-1.161 2.805-.716.774-1.636 1.16-2.719 1.16-1.066 0-1.973-.338-2.68-1.032l-.139-.144c-.708-.772-1.061-1.712-1.061-2.789V44.676c0-1.077.353-1.997 1.076-2.72l.147-.14c.742-.677 1.635-1.02 2.657-1.02M458.662 43.26a3.576 3.576 0 0 1 6.723 2.435l-13.544 37.368c-1.495 4.123-7.334 3.962-8.651-.14l-.059-.198-6.882-24.85-6.882 24.85c-1.171 4.227-7.005 4.519-8.636.53l-.074-.192-13.544-37.368-.057-.173a3.576 3.576 0 0 1 6.713-2.434l.067.172 10.793 29.781 8.142-29.4a3.58 3.58 0 0 1 2.52-2.608h.003q.011-.004.022-.006a4 4 0 0 1 .324-.072l.052-.008.126-.018.041-.004.139-.014.041-.002.127-.006h.165l.127.006.041.002q.07.006.139.014l.041.004.126.018.052.008a3 3 0 0 1 .324.072l.023.005.002.001q.079.023.156.048a3.57 3.57 0 0 1 2.364 2.56l8.142 29.4zM301.287 26.981a4.599 4.599 0 1 1 0 9.198 4.599 4.599 0 0 1 0-9.198M477.553 26.981a4.599 4.599 0 1 1-.001 9.198 4.599 4.599 0 0 1 .001-9.198"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"czOghRJ8ho0TIHFmBTj4p\",\"p\":\"\",\"c\":[\"\",\"docs\",\"guides\",\"themes\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"guides/themes\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0400282a37e0b5cc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/931b179cff3131dc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__className_e8ce0c\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"border-y border-dashed m-auto text-center flex flex-col items-center gap-4 py-8 w-screen max-w-fd-container\",\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed max-w-fd-container lg:w-[calc(100%-1rem)] box-content lg:border-x border-dashed top-0 left-1/2 -translate-x-1/2 h-screen pointer-events-none\"}],[\"$\",\"h1\",null,{\"className\":\"font-mono text-8xl font-bold opacity-50\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"font-mono text-2xl font-bold\",\"children\":\"Not Found\"}],[\"$\",\"p\",null,{\"className\":\"font-mono opacity-50 text-sm\",\"children\":[\"Could not find\",[\"$\",\"br\",null,{}],\" requested resource\"]}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"w-fit mx-auto bg-fd-foreground text-fd-background font-mono px-4 py-2 border-y border-dashed hover:rounded-xl duration-300\",\"children\":\"Return Home\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L6\",null,{}]]}]}]]}],{\"children\":[\"docs\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L7\",null,{\"tree\":{\"$id\":\"root\",\"name\":\"Overview\",\"children\":[{\"type\":\"page\",\"icon\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-text\",\"children\":[[\"$\",\"path\",\"k3hazp\",{\"d\":\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"}],[\"$\",\"path\",\"vwpz6n\",{\"d\":\"M8 11h8\"}],[\"$\",\"path\",\"1f0q6e\",{\"d\":\"M8 7h6\"}],\"$undefined\"]}],\"name\":\"Blog\",\"url\":\"/blog/\",\"external\":false},{\"type\":\"page\",\"icon\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-layout-template\",\"children\":[[\"$\",\"rect\",\"f1a2em\",{\"width\":\"18\",\"height\":\"7\",\"x\":\"3\",\"y\":\"3\",\"rx\":\"1\"}],[\"$\",\"rect\",\"jqznyg\",{\"width\":\"9\",\"height\":\"7\",\"x\":\"3\",\"y\":\"14\",\"rx\":\"1\"}],[\"$\",\"rect\",\"q5h2i8\",{\"width\":\"5\",\"height\":\"7\",\"x\":\"16\",\"y\":\"14\",\"rx\":\"1\"}],\"$undefined\"]}],\"name\":\"Showcase\",\"url\":\"/#showcase\",\"external\":false},{\"$id\":\"#2\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Overview\"},{\"$id\":\"index.mdx\",\"type\":\"page\",\"name\":\"Overview\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs\",\"$ref\":{\"file\":\"index.mdx\"}},{\"$id\":\"guides/goals.mdx\",\"type\":\"page\",\"name\":\"Goals \u0026 Non-Goals\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/guides/goals\",\"$ref\":{\"file\":\"guides/goals.mdx\"}},{\"$id\":\"#5\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Getting Started\"},{\"$id\":\"getting-started/installation/index.mdx\",\"type\":\"page\",\"name\":\"Installation\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/getting-started/installation\",\"$ref\":{\"file\":\"getting-started/installation/index.mdx\"}},{\"$id\":\"getting-started/typescript.mdx\",\"type\":\"page\",\"name\":\"Typescript\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/getting-started/typescript\",\"$ref\":{\"file\":\"getting-started/typescript.mdx\"}},{\"$id\":\"getting-started/other-bundlers.mdx\",\"type\":\"page\",\"name\":\"Other bundlers\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/getting-started/other-bundlers\",\"$ref\":{\"file\":\"getting-started/other-bundlers.mdx\"}},{\"$id\":\"getting-started/using-with-monorepos.mdx\",\"type\":\"page\",\"name\":\"Using with Monorepos\",\"description\":\"Learn how to set up Nativewind in monorepo environments like NX\",\"icon\":\"$undefined\",\"url\":\"/docs/getting-started/using-with-monorepos\",\"$ref\":{\"file\":\"getting-started/using-with-monorepos.mdx\"}},{\"$id\":\"#10\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Guides\"},{\"$id\":\"guides/troubleshooting.mdx\",\"type\":\"page\",\"name\":\"Troubleshooting\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/guides/troubleshooting\",\"$ref\":{\"file\":\"guides/troubleshooting.mdx\"}},{\"$id\":\"guides/custom-components.mdx\",\"type\":\"page\",\"name\":\"How to write custom components\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/guides/custom-components\",\"$ref\":{\"file\":\"guides/custom-components.mdx\"}},{\"$id\":\"guides/third-party-components.mdx\",\"type\":\"page\",\"name\":\"Styling Third-Party Components\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/guides/third-party-components\",\"$ref\":{\"file\":\"guides/third-party-components.mdx\"}},{\"$id\":\"guides/themes.mdx\",\"type\":\"page\",\"name\":\"Themes\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/guides/themes\",\"$ref\":{\"file\":\"guides/themes.mdx\"}},{\"$id\":\"guides/editor-setup.mdx\",\"type\":\"page\",\"name\":\"Editor Setup\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/guides/editor-setup\",\"$ref\":{\"file\":\"guides/editor-setup.mdx\"}},{\"$id\":\"#16\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Core concepts\"},{\"$id\":\"core-concepts/tailwindcss.mdx\",\"type\":\"page\",\"name\":\"Built on Tailwind CSS\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/tailwindcss\",\"$ref\":{\"file\":\"core-concepts/tailwindcss.mdx\"}},{\"$id\":\"core-concepts/quirks.mdx\",\"type\":\"page\",\"name\":\"Quirks\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/quirks\",\"$ref\":{\"file\":\"core-concepts/quirks.mdx\"}},{\"$id\":\"core-concepts/responsive-design.mdx\",\"type\":\"page\",\"name\":\"Responsive Design\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/responsive-design\",\"$ref\":{\"file\":\"core-concepts/responsive-design.mdx\"}},{\"$id\":\"core-concepts/dark-mode.mdx\",\"type\":\"page\",\"name\":\"Dark Mode\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/dark-mode\",\"$ref\":{\"file\":\"core-concepts/dark-mode.mdx\"}},{\"$id\":\"core-concepts/functions-and-directives.mdx\",\"type\":\"page\",\"name\":\"Functions \u0026 Directives\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/functions-and-directives\",\"$ref\":{\"file\":\"core-concepts/functions-and-directives.mdx\"}},{\"$id\":\"#22\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"React Native concepts\"},{\"$id\":\"core-concepts/units.mdx\",\"type\":\"page\",\"name\":\"Units\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/units\",\"$ref\":{\"file\":\"core-concepts/units.mdx\"}},{\"$id\":\"core-concepts/differences.md\",\"type\":\"page\",\"name\":\"Platform Differences\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/differences\",\"$ref\":{\"file\":\"core-concepts/differences.md\"}},{\"$id\":\"core-concepts/style-specificity.mdx\",\"type\":\"page\",\"name\":\"Style Specificity\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/core-concepts/style-specificity\",\"$ref\":{\"file\":\"core-concepts/style-specificity.mdx\"}},{\"$id\":\"tailwind/new-concepts/safe-area-insets.mdx\",\"type\":\"page\",\"name\":\"Safe Area Insets\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/new-concepts/safe-area-insets\",\"$ref\":{\"file\":\"tailwind/new-concepts/safe-area-insets.mdx\"}},{\"$id\":\"#27\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Customization\"},{\"$id\":\"customization/configuration.md\",\"type\":\"page\",\"name\":\"Configuration\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/customization/configuration\",\"$ref\":{\"file\":\"customization/configuration.md\"}},{\"$id\":\"customization/content.md\",\"type\":\"page\",\"name\":\"Content\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/customization/content\",\"$ref\":{\"file\":\"customization/content.md\"}},{\"$id\":\"customization/theme.md\",\"type\":\"page\",\"name\":\"Theme\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/customization/theme\",\"$ref\":{\"file\":\"customization/theme.md\"}},{\"$id\":\"customization/colors.md\",\"type\":\"page\",\"name\":\"Colors\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/customization/colors\",\"$ref\":{\"file\":\"customization/colors.md\"}},{\"$id\":\"#32\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"API\"},{\"$id\":\"api/with-nativewind.mdx\",\"type\":\"page\",\"name\":\"withNativeWind\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/api/with-nativewind\",\"$ref\":{\"file\":\"api/with-nativewind.mdx\"}},{\"$id\":\"api/vars.mdx\",\"type\":\"page\",\"name\":\"vars()\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/api/vars\",\"$ref\":{\"file\":\"api/vars.mdx\"}},{\"$id\":\"api/use-color-scheme.md\",\"type\":\"page\",\"name\":\"useColorScheme()\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/api/use-color-scheme\",\"$ref\":{\"file\":\"api/use-color-scheme.md\"}},{\"$id\":\"api/remap-props.mdx\",\"type\":\"page\",\"name\":\"remapProps\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/api/remap-props\",\"$ref\":{\"file\":\"api/remap-props.mdx\"}},{\"$id\":\"api/css-interop.mdx\",\"type\":\"page\",\"name\":\"cssInterop\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/api/css-interop\",\"$ref\":{\"file\":\"api/css-interop.mdx\"}},{\"$id\":\"#38\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Layout\"},{\"$id\":\"tailwind/layout/aspect-ratio.mdx\",\"type\":\"page\",\"name\":\"Aspect Ratio\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/aspect-ratio\",\"$ref\":{\"file\":\"tailwind/layout/aspect-ratio.mdx\"}},{\"$id\":\"tailwind/layout/box-decoration-break.mdx\",\"type\":\"page\",\"name\":\"Box Decoration Break\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/box-decoration-break\",\"$ref\":{\"file\":\"tailwind/layout/box-decoration-break.mdx\"}},{\"$id\":\"tailwind/layout/box-sizing.mdx\",\"type\":\"page\",\"name\":\"Box Sizing\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/box-sizing\",\"$ref\":{\"file\":\"tailwind/layout/box-sizing.mdx\"}},{\"$id\":\"tailwind/layout/break-after.mdx\",\"type\":\"page\",\"name\":\"Break After\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/break-after\",\"$ref\":{\"file\":\"tailwind/layout/break-after.mdx\"}},{\"$id\":\"tailwind/layout/break-before.mdx\",\"type\":\"page\",\"name\":\"Break Before\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/break-before\",\"$ref\":{\"file\":\"tailwind/layout/break-before.mdx\"}},{\"$id\":\"tailwind/layout/break-inside.mdx\",\"type\":\"page\",\"name\":\"Break Inside\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/break-inside\",\"$ref\":{\"file\":\"tailwind/layout/break-inside.mdx\"}},{\"$id\":\"tailwind/layout/clear.mdx\",\"type\":\"page\",\"name\":\"Clear\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/clear\",\"$ref\":{\"file\":\"tailwind/layout/clear.mdx\"}},{\"$id\":\"tailwind/layout/columns.mdx\",\"type\":\"page\",\"name\":\"Columns\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/columns\",\"$ref\":{\"file\":\"tailwind/layout/columns.mdx\"}},{\"$id\":\"tailwind/layout/container.mdx\",\"type\":\"page\",\"name\":\"Container\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/container\",\"$ref\":{\"file\":\"tailwind/layout/container.mdx\"}},{\"$id\":\"tailwind/layout/display.mdx\",\"type\":\"page\",\"name\":\"Display\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/display\",\"$ref\":{\"file\":\"tailwind/layout/display.mdx\"}},{\"$id\":\"tailwind/layout/float.mdx\",\"type\":\"page\",\"name\":\"Floats\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/float\",\"$ref\":{\"file\":\"tailwind/layout/float.mdx\"}},{\"$id\":\"tailwind/layout/isolation.mdx\",\"type\":\"page\",\"name\":\"Isolation\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/isolation\",\"$ref\":{\"file\":\"tailwind/layout/isolation.mdx\"}},{\"$id\":\"tailwind/layout/object-fit.mdx\",\"type\":\"page\",\"name\":\"Object Fit\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/object-fit\",\"$ref\":{\"file\":\"tailwind/layout/object-fit.mdx\"}},{\"$id\":\"tailwind/layout/object-position.mdx\",\"type\":\"page\",\"name\":\"Object Position\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/object-position\",\"$ref\":{\"file\":\"tailwind/layout/object-position.mdx\"}},{\"$id\":\"tailwind/layout/overflow.mdx\",\"type\":\"page\",\"name\":\"Overflow\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/overflow\",\"$ref\":{\"file\":\"tailwind/layout/overflow.mdx\"}},{\"$id\":\"tailwind/layout/overscroll-behavior.mdx\",\"type\":\"page\",\"name\":\"Overscroll Behavior\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/overscroll-behavior\",\"$ref\":{\"file\":\"tailwind/layout/overscroll-behavior.mdx\"}},{\"$id\":\"tailwind/layout/position.mdx\",\"type\":\"page\",\"name\":\"Position\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/position\",\"$ref\":{\"file\":\"tailwind/layout/position.mdx\"}},{\"$id\":\"tailwind/layout/top-right-bottom-left.mdx\",\"type\":\"page\",\"name\":\"Top / Right / Bottom / Left\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/top-right-bottom-left\",\"$ref\":{\"file\":\"tailwind/layout/top-right-bottom-left.mdx\"}},{\"$id\":\"tailwind/layout/visibility.mdx\",\"type\":\"page\",\"name\":\"Visibility\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/visibility\",\"$ref\":{\"file\":\"tailwind/layout/visibility.mdx\"}},{\"$id\":\"tailwind/layout/z-index.mdx\",\"type\":\"page\",\"name\":\"Z-Index\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/layout/z-index\",\"$ref\":{\"file\":\"tailwind/layout/z-index.mdx\"}},{\"$id\":\"#40\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Flexbox \u0026 Grid\"},{\"$id\":\"tailwind/flexbox/align-content.mdx\",\"type\":\"page\",\"name\":\"Align Content\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/align-content\",\"$ref\":{\"file\":\"tailwind/flexbox/align-content.mdx\"}},{\"$id\":\"tailwind/flexbox/align-items.mdx\",\"type\":\"page\",\"name\":\"Align Items\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/align-items\",\"$ref\":{\"file\":\"tailwind/flexbox/align-items.mdx\"}},{\"$id\":\"tailwind/flexbox/align-self.mdx\",\"type\":\"page\",\"name\":\"Align Self\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/align-self\",\"$ref\":{\"file\":\"tailwind/flexbox/align-self.mdx\"}},{\"$id\":\"tailwind/flexbox/flex.mdx\",\"type\":\"page\",\"name\":\"Flex\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/flex\",\"$ref\":{\"file\":\"tailwind/flexbox/flex.mdx\"}},{\"$id\":\"tailwind/flexbox/flex-basis.mdx\",\"type\":\"page\",\"name\":\"Flex Basis\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/flex-basis\",\"$ref\":{\"file\":\"tailwind/flexbox/flex-basis.mdx\"}},{\"$id\":\"tailwind/flexbox/flex-direction.mdx\",\"type\":\"page\",\"name\":\"Flex Direction\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/flex-direction\",\"$ref\":{\"file\":\"tailwind/flexbox/flex-direction.mdx\"}},{\"$id\":\"tailwind/flexbox/flex-grow.mdx\",\"type\":\"page\",\"name\":\"Flex Grow\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/flex-grow\",\"$ref\":{\"file\":\"tailwind/flexbox/flex-grow.mdx\"}},{\"$id\":\"tailwind/flexbox/flex-shrink.mdx\",\"type\":\"page\",\"name\":\"Flex Shrink\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/flex-shrink\",\"$ref\":{\"file\":\"tailwind/flexbox/flex-shrink.mdx\"}},{\"$id\":\"tailwind/flexbox/flex-wrap.mdx\",\"type\":\"page\",\"name\":\"Flex Wrap\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/flex-wrap\",\"$ref\":{\"file\":\"tailwind/flexbox/flex-wrap.mdx\"}},{\"$id\":\"tailwind/flexbox/gap.mdx\",\"type\":\"page\",\"name\":\"Gap\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/gap\",\"$ref\":{\"file\":\"tailwind/flexbox/gap.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-auto-columns.mdx\",\"type\":\"page\",\"name\":\"Grid Auto Columns\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-auto-columns\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-auto-columns.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-auto-flow.mdx\",\"type\":\"page\",\"name\":\"Grid Auto Flow\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-auto-flow\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-auto-flow.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-auto-rows.mdx\",\"type\":\"page\",\"name\":\"Grid Auto Rows\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-auto-rows\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-auto-rows.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-column.mdx\",\"type\":\"page\",\"name\":\"Grid Column Start / End\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-column\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-column.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-row.mdx\",\"type\":\"page\",\"name\":\"Grid Row Start / End\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-row\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-row.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-template-columns.mdx\",\"type\":\"page\",\"name\":\"Grid Template Columns\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-template-columns\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-template-columns.mdx\"}},{\"$id\":\"tailwind/flexbox/grid-template-rows.mdx\",\"type\":\"page\",\"name\":\"Grid Template Rows\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/grid-template-rows\",\"$ref\":{\"file\":\"tailwind/flexbox/grid-template-rows.mdx\"}},{\"$id\":\"tailwind/flexbox/justify-content.mdx\",\"type\":\"page\",\"name\":\"Justify Content\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/justify-content\",\"$ref\":{\"file\":\"tailwind/flexbox/justify-content.mdx\"}},{\"$id\":\"tailwind/flexbox/justify-items.mdx\",\"type\":\"page\",\"name\":\"Justify Items\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/justify-items\",\"$ref\":{\"file\":\"tailwind/flexbox/justify-items.mdx\"}},{\"$id\":\"tailwind/flexbox/justify-self.mdx\",\"type\":\"page\",\"name\":\"Justify Self\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/justify-self\",\"$ref\":{\"file\":\"tailwind/flexbox/justify-self.mdx\"}},{\"$id\":\"tailwind/flexbox/order.mdx\",\"type\":\"page\",\"name\":\"Order\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/order\",\"$ref\":{\"file\":\"tailwind/flexbox/order.mdx\"}},{\"$id\":\"tailwind/flexbox/place-content.mdx\",\"type\":\"page\",\"name\":\"Place Items\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/place-content\",\"$ref\":{\"file\":\"tailwind/flexbox/place-content.mdx\"}},{\"$id\":\"tailwind/flexbox/place-items.mdx\",\"type\":\"page\",\"name\":\"Place Content\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/place-items\",\"$ref\":{\"file\":\"tailwind/flexbox/place-items.mdx\"}},{\"$id\":\"tailwind/flexbox/place-self.mdx\",\"type\":\"page\",\"name\":\"Place Self\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/flexbox/place-self\",\"$ref\":{\"file\":\"tailwind/flexbox/place-self.mdx\"}},{\"$id\":\"#42\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Spacing\"},{\"$id\":\"tailwind/spacing/margin.mdx\",\"type\":\"page\",\"name\":\"Margin\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/spacing/margin\",\"$ref\":{\"file\":\"tailwind/spacing/margin.mdx\"}},{\"$id\":\"tailwind/spacing/padding.mdx\",\"type\":\"page\",\"name\":\"Padding\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/spacing/padding\",\"$ref\":{\"file\":\"tailwind/spacing/padding.mdx\"}},{\"$id\":\"tailwind/spacing/space-between.mdx\",\"type\":\"page\",\"name\":\"Space Between\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/spacing/space-between\",\"$ref\":{\"file\":\"tailwind/spacing/space-between.mdx\"}},{\"$id\":\"#44\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Sizing\"},{\"$id\":\"tailwind/sizing/height.mdx\",\"type\":\"page\",\"name\":\"Height\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/sizing/height\",\"$ref\":{\"file\":\"tailwind/sizing/height.mdx\"}},{\"$id\":\"tailwind/sizing/max-height.mdx\",\"type\":\"page\",\"name\":\"Max-Height\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/sizing/max-height\",\"$ref\":{\"file\":\"tailwind/sizing/max-height.mdx\"}},{\"$id\":\"tailwind/sizing/max-width.mdx\",\"type\":\"page\",\"name\":\"Max-Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/sizing/max-width\",\"$ref\":{\"file\":\"tailwind/sizing/max-width.mdx\"}},{\"$id\":\"tailwind/sizing/min-height.mdx\",\"type\":\"page\",\"name\":\"Min-Height\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/sizing/min-height\",\"$ref\":{\"file\":\"tailwind/sizing/min-height.mdx\"}},{\"$id\":\"tailwind/sizing/min-width.mdx\",\"type\":\"page\",\"name\":\"Min-Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/sizing/min-width\",\"$ref\":{\"file\":\"tailwind/sizing/min-width.mdx\"}},{\"$id\":\"tailwind/sizing/width.mdx\",\"type\":\"page\",\"name\":\"Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/sizing/width\",\"$ref\":{\"file\":\"tailwind/sizing/width.mdx\"}},{\"$id\":\"#46\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Typography\"},{\"$id\":\"tailwind/typography/content.mdx\",\"type\":\"page\",\"name\":\"Content\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/content\",\"$ref\":{\"file\":\"tailwind/typography/content.mdx\"}},{\"$id\":\"tailwind/typography/font-family.mdx\",\"type\":\"page\",\"name\":\"Font Family\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/font-family\",\"$ref\":{\"file\":\"tailwind/typography/font-family.mdx\"}},{\"$id\":\"tailwind/typography/font-size.mdx\",\"type\":\"page\",\"name\":\"Font Size\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/font-size\",\"$ref\":{\"file\":\"tailwind/typography/font-size.mdx\"}},{\"$id\":\"tailwind/typography/font-smoothing.mdx\",\"type\":\"page\",\"name\":\"Font Smoothing\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/font-smoothing\",\"$ref\":{\"file\":\"tailwind/typography/font-smoothing.mdx\"}},{\"$id\":\"tailwind/typography/font-style.mdx\",\"type\":\"page\",\"name\":\"Font Style\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/font-style\",\"$ref\":{\"file\":\"tailwind/typography/font-style.mdx\"}},{\"$id\":\"tailwind/typography/font-variant-numeric.mdx\",\"type\":\"page\",\"name\":\"Font Variant Numeric\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/font-variant-numeric\",\"$ref\":{\"file\":\"tailwind/typography/font-variant-numeric.mdx\"}},{\"$id\":\"tailwind/typography/font-weight.mdx\",\"type\":\"page\",\"name\":\"Font Weight\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/font-weight\",\"$ref\":{\"file\":\"tailwind/typography/font-weight.mdx\"}},{\"$id\":\"tailwind/typography/hyphens.mdx\",\"type\":\"page\",\"name\":\"Hyphens\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/hyphens\",\"$ref\":{\"file\":\"tailwind/typography/hyphens.mdx\"}},{\"$id\":\"tailwind/typography/letter-spacing.mdx\",\"type\":\"page\",\"name\":\"Letter Spacing\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/letter-spacing\",\"$ref\":{\"file\":\"tailwind/typography/letter-spacing.mdx\"}},{\"$id\":\"tailwind/typography/line-clamp.mdx\",\"type\":\"page\",\"name\":\"Line Clamp\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/line-clamp\",\"$ref\":{\"file\":\"tailwind/typography/line-clamp.mdx\"}},{\"$id\":\"tailwind/typography/line-height.mdx\",\"type\":\"page\",\"name\":\"Line Height\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/line-height\",\"$ref\":{\"file\":\"tailwind/typography/line-height.mdx\"}},{\"$id\":\"tailwind/typography/list-style-image.mdx\",\"type\":\"page\",\"name\":\"List Style Image\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/list-style-image\",\"$ref\":{\"file\":\"tailwind/typography/list-style-image.mdx\"}},{\"$id\":\"tailwind/typography/list-style-position.mdx\",\"type\":\"page\",\"name\":\"List Style Position\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/list-style-position\",\"$ref\":{\"file\":\"tailwind/typography/list-style-position.mdx\"}},{\"$id\":\"tailwind/typography/list-style-type.mdx\",\"type\":\"page\",\"name\":\"List Style Type\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/list-style-type\",\"$ref\":{\"file\":\"tailwind/typography/list-style-type.mdx\"}},{\"$id\":\"tailwind/typography/text-align.mdx\",\"type\":\"page\",\"name\":\"Text Transform\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-align\",\"$ref\":{\"file\":\"tailwind/typography/text-align.mdx\"}},{\"$id\":\"tailwind/typography/text-color.mdx\",\"type\":\"page\",\"name\":\"Text Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-color\",\"$ref\":{\"file\":\"tailwind/typography/text-color.mdx\"}},{\"$id\":\"tailwind/typography/text-decoration.mdx\",\"type\":\"page\",\"name\":\"Text Decoration\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-decoration\",\"$ref\":{\"file\":\"tailwind/typography/text-decoration.mdx\"}},{\"$id\":\"tailwind/typography/text-decoration-color.mdx\",\"type\":\"page\",\"name\":\"Text Decoration Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-decoration-color\",\"$ref\":{\"file\":\"tailwind/typography/text-decoration-color.mdx\"}},{\"$id\":\"tailwind/typography/text-decoration-style.mdx\",\"type\":\"page\",\"name\":\"Text Decoration Style\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-decoration-style\",\"$ref\":{\"file\":\"tailwind/typography/text-decoration-style.mdx\"}},{\"$id\":\"tailwind/typography/text-decoration-thickness.mdx\",\"type\":\"page\",\"name\":\"Text Decoration Thickness\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-decoration-thickness\",\"$ref\":{\"file\":\"tailwind/typography/text-decoration-thickness.mdx\"}},{\"$id\":\"tailwind/typography/text-indent.mdx\",\"type\":\"page\",\"name\":\"Text Indent\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-indent\",\"$ref\":{\"file\":\"tailwind/typography/text-indent.mdx\"}},{\"$id\":\"tailwind/typography/text-overflow.mdx\",\"type\":\"page\",\"name\":\"Text Overflow\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-overflow\",\"$ref\":{\"file\":\"tailwind/typography/text-overflow.mdx\"}},{\"$id\":\"tailwind/typography/text-transform.mdx\",\"type\":\"page\",\"name\":\"Text Align\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-transform\",\"$ref\":{\"file\":\"tailwind/typography/text-transform.mdx\"}},{\"$id\":\"tailwind/typography/text-underline-offset.mdx\",\"type\":\"page\",\"name\":\"Text Underline Offset\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/text-underline-offset\",\"$ref\":{\"file\":\"tailwind/typography/text-underline-offset.mdx\"}},{\"$id\":\"tailwind/typography/vertical-align.mdx\",\"type\":\"page\",\"name\":\"Vertical Align\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/vertical-align\",\"$ref\":{\"file\":\"tailwind/typography/vertical-align.mdx\"}},{\"$id\":\"tailwind/typography/whitespace.mdx\",\"type\":\"page\",\"name\":\"Whitespace\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/whitespace\",\"$ref\":{\"file\":\"tailwind/typography/whitespace.mdx\"}},{\"$id\":\"tailwind/typography/word-break.mdx\",\"type\":\"page\",\"name\":\"Word Break\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/typography/word-break\",\"$ref\":{\"file\":\"tailwind/typography/word-break.mdx\"}},{\"$id\":\"#48\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Backgrounds\"},{\"$id\":\"tailwind/backgrounds/background-attachment.mdx\",\"type\":\"page\",\"name\":\"Background Attachment\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-attachment\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-attachment.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-clip.mdx\",\"type\":\"page\",\"name\":\"Background Clip\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-clip\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-clip.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-color.mdx\",\"type\":\"page\",\"name\":\"Background Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-color\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-color.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-image.mdx\",\"type\":\"page\",\"name\":\"Background Image\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-image\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-image.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-origin.mdx\",\"type\":\"page\",\"name\":\"Background Origin\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-origin\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-origin.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-position.mdx\",\"type\":\"page\",\"name\":\"Background Position\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-position\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-position.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-repeat.mdx\",\"type\":\"page\",\"name\":\"Background Repeat\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-repeat\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-repeat.mdx\"}},{\"$id\":\"tailwind/backgrounds/background-size.mdx\",\"type\":\"page\",\"name\":\"Background Size\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/background-size\",\"$ref\":{\"file\":\"tailwind/backgrounds/background-size.mdx\"}},{\"$id\":\"tailwind/backgrounds/gradient-color-stops.mdx\",\"type\":\"page\",\"name\":\"Gradient Color Stops\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/backgrounds/gradient-color-stops\",\"$ref\":{\"file\":\"tailwind/backgrounds/gradient-color-stops.mdx\"}},{\"$id\":\"#50\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Borders\"},{\"$id\":\"tailwind/borders/border-color.mdx\",\"type\":\"page\",\"name\":\"Border Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/border-color\",\"$ref\":{\"file\":\"tailwind/borders/border-color.mdx\"}},{\"$id\":\"tailwind/borders/border-radius.mdx\",\"type\":\"page\",\"name\":\"Border Radius\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/border-radius\",\"$ref\":{\"file\":\"tailwind/borders/border-radius.mdx\"}},{\"$id\":\"tailwind/borders/border-style.mdx\",\"type\":\"page\",\"name\":\"Border Style\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/border-style\",\"$ref\":{\"file\":\"tailwind/borders/border-style.mdx\"}},{\"$id\":\"tailwind/borders/border-width.mdx\",\"type\":\"page\",\"name\":\"Border Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/border-width\",\"$ref\":{\"file\":\"tailwind/borders/border-width.mdx\"}},{\"$id\":\"tailwind/borders/divide-color.mdx\",\"type\":\"page\",\"name\":\"Divide Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/divide-color\",\"$ref\":{\"file\":\"tailwind/borders/divide-color.mdx\"}},{\"$id\":\"tailwind/borders/divide-style.mdx\",\"type\":\"page\",\"name\":\"Divide Style\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/divide-style\",\"$ref\":{\"file\":\"tailwind/borders/divide-style.mdx\"}},{\"$id\":\"tailwind/borders/divide-width.mdx\",\"type\":\"page\",\"name\":\"Divide Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/divide-width\",\"$ref\":{\"file\":\"tailwind/borders/divide-width.mdx\"}},{\"$id\":\"tailwind/borders/outline-color.mdx\",\"type\":\"page\",\"name\":\"Outline Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/outline-color\",\"$ref\":{\"file\":\"tailwind/borders/outline-color.mdx\"}},{\"$id\":\"tailwind/borders/outline-offset.mdx\",\"type\":\"page\",\"name\":\"Outline Offset\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/outline-offset\",\"$ref\":{\"file\":\"tailwind/borders/outline-offset.mdx\"}},{\"$id\":\"tailwind/borders/outline-style.mdx\",\"type\":\"page\",\"name\":\"Outline Style\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/outline-style\",\"$ref\":{\"file\":\"tailwind/borders/outline-style.mdx\"}},{\"$id\":\"tailwind/borders/outline-width.mdx\",\"type\":\"page\",\"name\":\"Outline Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/outline-width\",\"$ref\":{\"file\":\"tailwind/borders/outline-width.mdx\"}},{\"$id\":\"tailwind/borders/ring-color.mdx\",\"type\":\"page\",\"name\":\"Ring Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/ring-color\",\"$ref\":{\"file\":\"tailwind/borders/ring-color.mdx\"}},{\"$id\":\"tailwind/borders/ring-offset-color.mdx\",\"type\":\"page\",\"name\":\"Ring Offset Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/ring-offset-color\",\"$ref\":{\"file\":\"tailwind/borders/ring-offset-color.mdx\"}},{\"$id\":\"tailwind/borders/ring-offset-width.mdx\",\"type\":\"page\",\"name\":\"Ring Offset Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/ring-offset-width\",\"$ref\":{\"file\":\"tailwind/borders/ring-offset-width.mdx\"}},{\"$id\":\"tailwind/borders/ring-width.mdx\",\"type\":\"page\",\"name\":\"Ring Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/borders/ring-width\",\"$ref\":{\"file\":\"tailwind/borders/ring-width.mdx\"}},{\"$id\":\"#52\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Effects\"},{\"$id\":\"tailwind/effects/background-blend-mode.mdx\",\"type\":\"page\",\"name\":\"Background Blend Mode\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/effects/background-blend-mode\",\"$ref\":{\"file\":\"tailwind/effects/background-blend-mode.mdx\"}},{\"$id\":\"tailwind/effects/box-shadow.mdx\",\"type\":\"page\",\"name\":\"Box Shadow\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/effects/box-shadow\",\"$ref\":{\"file\":\"tailwind/effects/box-shadow.mdx\"}},{\"$id\":\"tailwind/effects/box-shadow-color.mdx\",\"type\":\"page\",\"name\":\"Box Shadow Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/effects/box-shadow-color\",\"$ref\":{\"file\":\"tailwind/effects/box-shadow-color.mdx\"}},{\"$id\":\"tailwind/effects/mix-blend-mode.mdx\",\"type\":\"page\",\"name\":\"Mix Blend Mode\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/effects/mix-blend-mode\",\"$ref\":{\"file\":\"tailwind/effects/mix-blend-mode.mdx\"}},{\"$id\":\"tailwind/effects/opacity.mdx\",\"type\":\"page\",\"name\":\"Opacity\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/effects/opacity\",\"$ref\":{\"file\":\"tailwind/effects/opacity.mdx\"}},{\"$id\":\"#54\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Transitions \u0026 Animation\"},{\"$id\":\"tailwind/transitions-animation/animation.mdx\",\"type\":\"page\",\"name\":\"Animation\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transitions-animation/animation\",\"$ref\":{\"file\":\"tailwind/transitions-animation/animation.mdx\"}},{\"$id\":\"tailwind/transitions-animation/transition-delay.mdx\",\"type\":\"page\",\"name\":\"Transition Delay\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transitions-animation/transition-delay\",\"$ref\":{\"file\":\"tailwind/transitions-animation/transition-delay.mdx\"}},{\"$id\":\"tailwind/transitions-animation/transition-duration.mdx\",\"type\":\"page\",\"name\":\"Transition Duration\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transitions-animation/transition-duration\",\"$ref\":{\"file\":\"tailwind/transitions-animation/transition-duration.mdx\"}},{\"$id\":\"tailwind/transitions-animation/transition-property.mdx\",\"type\":\"page\",\"name\":\"Transition Property\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transitions-animation/transition-property\",\"$ref\":{\"file\":\"tailwind/transitions-animation/transition-property.mdx\"}},{\"$id\":\"tailwind/transitions-animation/transition-timing-function.mdx\",\"type\":\"page\",\"name\":\"Transition Timing Function\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transitions-animation/transition-timing-function\",\"$ref\":{\"file\":\"tailwind/transitions-animation/transition-timing-function.mdx\"}},{\"$id\":\"#56\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Transforms\"},{\"$id\":\"tailwind/transforms/rotate.mdx\",\"type\":\"page\",\"name\":\"Rotate\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transforms/rotate\",\"$ref\":{\"file\":\"tailwind/transforms/rotate.mdx\"}},{\"$id\":\"tailwind/transforms/scale.mdx\",\"type\":\"page\",\"name\":\"Scale\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transforms/scale\",\"$ref\":{\"file\":\"tailwind/transforms/scale.mdx\"}},{\"$id\":\"tailwind/transforms/skew.mdx\",\"type\":\"page\",\"name\":\"Skew\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transforms/skew\",\"$ref\":{\"file\":\"tailwind/transforms/skew.mdx\"}},{\"$id\":\"tailwind/transforms/transform-origin.mdx\",\"type\":\"page\",\"name\":\"Transform Origin\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transforms/transform-origin\",\"$ref\":{\"file\":\"tailwind/transforms/transform-origin.mdx\"}},{\"$id\":\"tailwind/transforms/translate.mdx\",\"type\":\"page\",\"name\":\"Translate\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/transforms/translate\",\"$ref\":{\"file\":\"tailwind/transforms/translate.mdx\"}},{\"$id\":\"#58\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Interactivity\"},{\"$id\":\"tailwind/interactivity/accent-color.mdx\",\"type\":\"page\",\"name\":\"Accent Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/accent-color\",\"$ref\":{\"file\":\"tailwind/interactivity/accent-color.mdx\"}},{\"$id\":\"tailwind/interactivity/appearance.mdx\",\"type\":\"page\",\"name\":\"Appearance\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/appearance\",\"$ref\":{\"file\":\"tailwind/interactivity/appearance.mdx\"}},{\"$id\":\"tailwind/interactivity/caret-color.mdx\",\"type\":\"page\",\"name\":\"Caret Color\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/caret-color\",\"$ref\":{\"file\":\"tailwind/interactivity/caret-color.mdx\"}},{\"$id\":\"tailwind/interactivity/cursor.mdx\",\"type\":\"page\",\"name\":\"Cursor\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/cursor\",\"$ref\":{\"file\":\"tailwind/interactivity/cursor.mdx\"}},{\"$id\":\"tailwind/interactivity/pointer-events.mdx\",\"type\":\"page\",\"name\":\"Pointer Events\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/pointer-events\",\"$ref\":{\"file\":\"tailwind/interactivity/pointer-events.mdx\"}},{\"$id\":\"tailwind/interactivity/resize.mdx\",\"type\":\"page\",\"name\":\"Resize\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/resize\",\"$ref\":{\"file\":\"tailwind/interactivity/resize.mdx\"}},{\"$id\":\"tailwind/interactivity/scroll-behaviour.mdx\",\"type\":\"page\",\"name\":\"Scroll Behavior\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/scroll-behaviour\",\"$ref\":{\"file\":\"tailwind/interactivity/scroll-behaviour.mdx\"}},{\"$id\":\"tailwind/interactivity/scroll-margin.mdx\",\"type\":\"page\",\"name\":\"Scroll Margin\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/scroll-margin\",\"$ref\":{\"file\":\"tailwind/interactivity/scroll-margin.mdx\"}},{\"$id\":\"tailwind/interactivity/scroll-padding.mdx\",\"type\":\"page\",\"name\":\"Scroll Padding\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/scroll-padding\",\"$ref\":{\"file\":\"tailwind/interactivity/scroll-padding.mdx\"}},{\"$id\":\"tailwind/interactivity/scroll-snap-align.mdx\",\"type\":\"page\",\"name\":\"Scroll Snap Align\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/scroll-snap-align\",\"$ref\":{\"file\":\"tailwind/interactivity/scroll-snap-align.mdx\"}},{\"$id\":\"tailwind/interactivity/scroll-snap-stop.mdx\",\"type\":\"page\",\"name\":\"Scroll Snap Stop\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/scroll-snap-stop\",\"$ref\":{\"file\":\"tailwind/interactivity/scroll-snap-stop.mdx\"}},{\"$id\":\"tailwind/interactivity/scroll-snap-type.mdx\",\"type\":\"page\",\"name\":\"Scroll Snap Type\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/scroll-snap-type\",\"$ref\":{\"file\":\"tailwind/interactivity/scroll-snap-type.mdx\"}},{\"$id\":\"tailwind/interactivity/touch-action.mdx\",\"type\":\"page\",\"name\":\"Touch Action\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/touch-action\",\"$ref\":{\"file\":\"tailwind/interactivity/touch-action.mdx\"}},{\"$id\":\"tailwind/interactivity/user-select.mdx\",\"type\":\"page\",\"name\":\"User Select\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/user-select\",\"$ref\":{\"file\":\"tailwind/interactivity/user-select.mdx\"}},{\"$id\":\"tailwind/interactivity/will-change.mdx\",\"type\":\"page\",\"name\":\"Will Change\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/interactivity/will-change\",\"$ref\":{\"file\":\"tailwind/interactivity/will-change.mdx\"}},{\"$id\":\"#60\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"SVG\"},{\"$id\":\"tailwind/svg/fill.mdx\",\"type\":\"page\",\"name\":\"Fill\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/svg/fill\",\"$ref\":{\"file\":\"tailwind/svg/fill.mdx\"}},{\"$id\":\"tailwind/svg/stroke.mdx\",\"type\":\"page\",\"name\":\"Stroke\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/svg/stroke\",\"$ref\":{\"file\":\"tailwind/svg/stroke.mdx\"}},{\"$id\":\"tailwind/svg/stroke-width.mdx\",\"type\":\"page\",\"name\":\"Stroke Width\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/svg/stroke-width\",\"$ref\":{\"file\":\"tailwind/svg/stroke-width.mdx\"}},{\"$id\":\"#62\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Accessibility\"},{\"$id\":\"tailwind/accessibility/screen-readers.mdx\",\"type\":\"page\",\"name\":\"Screen Readers\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/accessibility/screen-readers\",\"$ref\":{\"file\":\"tailwind/accessibility/screen-readers.mdx\"}},{\"$id\":\"#64\",\"type\":\"separator\",\"icon\":\"$undefined\",\"name\":\"Plugins\"},{\"$id\":\"tailwind/plugins/container-queries.mdx\",\"type\":\"page\",\"name\":\"Container Queries\",\"description\":\"$undefined\",\"icon\":\"$undefined\",\"url\":\"/docs/tailwind/plugins/container-queries\",\"$ref\":{\"file\":\"tailwind/plugins/container-queries.mdx\"}}]},\"children\":[\"$\",\"$L8\",null,{\"transparentMode\":\"top\",\"children\":[\"$\",\"main\",null,{\"id\":\"nd-docs-layout\",\"className\":\"flex w-full flex-1 flex-row pe-(--fd-layout-offset) [--fd-nav-height:calc(var(--spacing)*14)] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]\",\"style\":{\"--fd-layout-offset\":\"max(calc(50vw - var(--fd-layout-width) / 2), 0px)\"},\"children\":[[\"$\",\"$L9\",null,{\"className\":\"md:ps-(--fd-layout-offset) bg-transparent\",\"inner\":{\"className\":\"md:pt-2.5\"},\"children\":[[\"$\",\"$La\",null,{\"children\":[false,\"$undefined\",[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4 pt-2 lg:hidden\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/docs\",\"className\":\"text-sm flex flex-row items-center gap-2 rounded-md p-2 text-start [overflow-wrap:anywhere] md:py-1.5 [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 bg-fd-primary/10 text-fd-primary\",\"style\":{\"paddingInlineStart\":\"calc(var(--spacing) * 2)\"},\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}],\"Docs\"]}]}],null]}],[\"$\",\"$Lb\",null,{\"children\":[false,[[\"$\",\"$Lc\",\"0\",{\"href\":\"https://github.com/nativewind/nativewind\",\"icon\":[\"$\",\"svg\",null,{\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"d\":\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"}]}],\"external\":true,\"className\":\"lg:hidden\",\"children\":\"Github\"}]],[\"$\",\"$Ld\",null,{\"components\":\"$undefined\"}]]}],[\"$\",\"$Le\",null,{\"className\":\"flex flex-row items-center md:hidden\",\"children\":[null,[\"$\",\"$Lf\",null,{\"className\":\"md:hidden\",\"mode\":\"light-dark\"}],\"$undefined\"]}]]}],[\"$\",\"$L10\",null,{\"style\":{\"paddingInlineStart\":\"var(--fd-layout-offset)\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row border-b border-fd-foreground/10 px-4 h-14 lg:px-36\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row items-center flex-1 pe-4\",\"children\":[null,[\"$\",\"$L11\",null,{}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center gap-2.5 font-semibold group\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 590 110\",\"className\":\"h-6 group-hover:text-fd-primary duration-300\",\"children\":[[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"$12\"}],[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"M53.784 21.904c.5-8.877 8.697-16.048 17.73-14.752l.331.052c6.939 1.156 11.565 7.015 12.222 13.385.698 6.76-2.975 13.804-11.616 17.543-14.547 6.294-18.427 5.793-45.693 12.193l-2.713.641-.186.04a3.68 3.68 0 0 1-1.701-7.15l.182-.049 2.797-.66c28.056-6.59 30.607-5.804 44.393-11.769 5.983-2.588 7.554-6.772 7.218-10.034-.356-3.44-2.758-6.245-5.967-6.856l-.313-.052c-4.56-.655-9.066 3.108-9.337 7.873l-.01.227-.01.19a3.68 3.68 0 0 1-7.346-.21v-.188z\"}],[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"fillRule\":\"evenodd\",\"d\":\"$13\",\"clipRule\":\"evenodd\"}],[\"$\",\"path\",null,{\"fill\":\"currentColor\",\"d\":\"$14\"}]]}]}],[\"$\",\"$L15\",null,{\"options\":[{\"title\":\"v4\",\"url\":\"/docs\"},{\"title\":\"v2\",\"url\":\"https://v2.nativewind.dev/\"}]}]]}],[\"$\",\"$L16\",null,{\"hideIfDisabled\":true,\"className\":\"w-full my-auto rounded-xl max-md:hidden max-w-sm px-2\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-row items-center justify-end\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden\",\"children\":[]}],\"$undefined\",[\"$\",\"$L17\",null,{\"hideIfDisabled\":true,\"className\":\"md:hidden\"}],[\"$\",\"$Lf\",null,{\"className\":\"mr-2 max-md:hidden\",\"mode\":\"light-dark-system\"}],[\"$\",\"$L18\",null,{\"className\":\"md:hidden\"}],[[\"$\",\"$L19\",\"0\",{\"item\":{\"type\":\"icon\",\"url\":\"https://github.com/nativewind/nativewind\",\"text\":\"Github\",\"label\":\"GitHub\",\"icon\":\"$0:f:0:1:2:children:1:props:children:1:props:children:props:children:props:children:0:props:children:1:props:children:1:0:props:icon\",\"external\":true},\"className\":\"inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [\u0026_svg]:size-4.5 text-fd-muted-foreground max-lg:hidden rounded-full border\",\"aria-label\":\"GitHub\",\"children\":\"$0:f:0:1:2:children:1:props:children:1:props:children:props:children:props:children:0:props:children:1:props:children:1:0:props:icon\"}]],null]}]]}],null]}],[\"$\",\"$L1a\",null,{\"tocNav\":\"xl:hidden\",\"toc\":\"max-xl:hidden\",\"page\":\"mt-(--fd-nav-height)\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none\"}],[\"$\",\"div\",null,{\"className\":\"fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none\"}],[\"$\",\"div\",null,{\"className\":\"absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none\"}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]}]}]]}],{\"children\":[[\"slug\",\"guides/themes\",\"oc\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L1b\",[\"$\",\"$L1c\",null,{\"children\":\"$L1d\"}],null,[\"$\",\"$L1e\",null,{\"children\":[\"$L1f\",\"$L20\",[\"$\",\"$L21\",null,{\"promise\":\"$@22\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"NB4v4brWjvuHoo65lbWVx\",{\"children\":[[\"$\",\"$L23\",null,{\"children\":\"$L24\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$25\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"26:\"$Sreact.suspense\"\n27:I[4911,[],\"AsyncMetadata\"]\n29:I[6441,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"AnchorProvider\"]\n2a:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"PageBody\"]\n2b:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"TocPopover\"]\n2c:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"TocPopoverTrigger\"]\n2d:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"TocPopoverContent\"]\n2e:I[8070,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"T"])</script><script>self.__next_f.push([1,"OCScrollArea\"]\n2f:I[8070,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"TOCItems\"]\n30:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"PageArticle\"]\n31:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"Breadcrumb\"]\n33:I[7242,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"CodeBlock\"]\n34:I[7242,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"Pre\"]\n4a:I[3406,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"Footer\"]\n4b:I[8070,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.j"])</script><script>self.__next_f.push([1,"s\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"Toc\"]\n4c:I[9697,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"I18nLabel\"]\n4d:I[1778,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"default\"]\n1d:[\"$\",\"$26\",null,{\"fallback\":null,\"children\":[\"$\",\"$L27\",null,{\"promise\":\"$@28\"}]}]\n35:Tb41,"])</script><script>self.__next_f.push([1,"\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script><script>self.__next_f.push([1,"36:Tb41,"])</script><script>self.__next_f.push([1,"\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script><script>self.__next_f.push([1,"37:Tb41,"])</script><script>self.__next_f.push([1,"\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script><script>self.__next_f.push([1,"39:Tb41,"])</script><script>self.__next_f.push([1,"\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script><script>self.__next_f.push([1,"3a:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e3b:Tb41,"])</script><script>self.__next_f.push([1,"\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script><script>self.__next_f.push([1,"3e:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e40:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3"])</script><script>self.__next_f.push([1,".237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e42:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e44:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.8"])</script><script>self.__next_f.push([1,"19.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e46:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.62"])</script><script>self.__next_f.push([1,"9 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e48:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e49:T4dc,\u003csvg viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1."])</script><script>self.__next_f.push([1,"487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /\u003e\u003c/svg\u003e"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"$L29\",null,{\"toc\":[{\"depth\":2,\"url\":\"#dynamic-themes\",\"title\":\"Dynamic themes\"},{\"depth\":2,\"url\":\"#switching-themes\",\"title\":\"Switching themes\"},{\"depth\":2,\"url\":\"#retrieving-theme-values\",\"title\":\"Retrieving theme values\"},{\"depth\":3,\"url\":\"#accessing-default-colors\",\"title\":\"Accessing default colors\"},{\"depth\":3,\"url\":\"#access-theme-values\",\"title\":\"Access theme values\"},{\"depth\":2,\"url\":\"#platform-specific-theming\",\"title\":\"Platform specific theming\"},{\"depth\":3,\"url\":\"#platformselect\",\"title\":\"platformSelect\"},{\"depth\":3,\"url\":\"#platformcolor\",\"title\":\"platformColor()\"},{\"depth\":2,\"url\":\"#device-specific-theming\",\"title\":\"Device specific theming\"},{\"depth\":3,\"url\":\"#hairlinewidth\",\"title\":\"hairlineWidth()\"},{\"depth\":3,\"url\":\"#pixelratio\",\"title\":\"pixelRatio()\"},{\"depth\":3,\"url\":\"#pixelratioselect\",\"title\":\"pixelRatioSelect()\"},{\"depth\":3,\"url\":\"#fontscale\",\"title\":\"fontScale()\"},{\"depth\":3,\"url\":\"#fontscaleselect\",\"title\":\"fontScaleSelect()\"},{\"depth\":3,\"url\":\"#getpixelsizeforlayoutsize\",\"title\":\"getPixelSizeForLayoutSize()\"},{\"depth\":3,\"url\":\"#roundtonearestpixel\",\"title\":\"roundToNearestPixel()\"}],\"single\":false,\"children\":[[\"$\",\"$L2a\",null,{\"className\":\"\",\"style\":{\"--fd-tocnav-height\":\"$undefined\"},\"children\":[[\"$\",\"$L2b\",null,{\"className\":\"h-10\",\"children\":[[\"$\",\"$L2c\",null,{\"className\":\"w-full\",\"items\":\"$1b:props:toc\"}],[\"$\",\"$L2d\",null,{\"children\":[\"$undefined\",[\"$\",\"$L2e\",null,{\"isMenu\":true,\"children\":[\"$\",\"$L2f\",null,{\"items\":\"$1b:props:toc\"}]}],\"$undefined\"]}]]}],[\"$\",\"$L30\",null,{\"className\":\"max-w-[860px]\",\"children\":[[\"$\",\"$L31\",null,{}],[[\"$\",\"h1\",null,{\"ref\":\"$undefined\",\"children\":\"Themes\",\"className\":\"text-3xl font-semibold\"}],null,[\"$\",\"p\",null,{\"className\":\"text-sm text-muted-foreground mb-4 italic\",\"children\":[\"Last updated on \",\"May 30th, 2025\"]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":\"As Nativewind uses Tailwind CLI, it supports all the theming options Tailwind CSS does. Read the Tailwind CSS docs on each className to learn more about the possible theming values.\"}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"dynamic-themes\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#dynamic-themes\",\"className\":\"peer\",\"children\":\"Dynamic themes\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"To transition from a static theme to a dynamic one in Nativewind, utilize \",\"$L32\",\". This approach ensures flexibility and adaptability in theme application, catering to user preferences.\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" colors: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // Create a custom color that uses a CSS custom value\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" primary: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"rgb(var(--color-values) / \u003calpha-value\u003e)\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" plugins: [\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // Set a default value on the `:root` element\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"addBase\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }) \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" addBase\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\":root\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"--color-values\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"255 0 0\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"--color-rgb\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"rgb(255 0 0)\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ],\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"App.tsx\",\"icon\":\"$35\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { vars } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'nativewind'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" userTheme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" vars\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-values'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'0 255 0'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-rgb'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'rbg(0 0 255)'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"});\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" default\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" App\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"text-primary\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"Access \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"as\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" a\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" theme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" value\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"text-[--color-rgb]\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"Or the variable directly\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"/* Variables can be changed inline */\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{userTheme}\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"text-primary\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"I\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" am now green\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"!\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"text-[--color-rgb]\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"I\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" am now blue\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"!\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"Text\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]]}]}]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"switching-themes\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#switching-themes\",\"className\":\"peer\",\"children\":\"Switching themes\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Nativewind is unopinionated on how you implement your theming. This is an example implementation that supports two themes with both a light/dark mode.\"}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"App.jsx\",\"icon\":\"$36\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { vars, useColorScheme } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'nativewind'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" themes\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" brand: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'light'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"vars\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-primary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'black'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-secondary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'white'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'dark'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"vars\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-primary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'white'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-secondary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'dark'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" })\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" christmas: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'light'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"vars\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-primary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'red'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-secondary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'green'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'dark'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"vars\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-primary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'green'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '--color-secondary'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'red'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" })\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" Theme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"props\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\") {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"colorScheme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" useColorScheme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"()\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{themes[props.name][colorScheme]}\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {props.children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" default\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" App\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Theme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" name\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"brand\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"text-primary\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"/* rgba(0, 0, 0, 1) */\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Theme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" name\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"christmas\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"View\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"text-primary\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"/* rgba(255, 0, 0, 1) */\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Theme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"Theme\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]]}]}]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"retrieving-theme-values\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#retrieving-theme-values\",\"className\":\"peer\",\"children\":\"Retrieving theme values\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"accessing-default-colors\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#accessing-default-colors\",\"className\":\"peer\",\"children\":\"Accessing default colors\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"If you need the default color values at runtime, you can import them directly from \",[\"$\",\"code\",null,{\"children\":\"tailwindcss\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"retrieve them directly from \",[\"$\",\"code\",null,{\"children\":\"tailwindcss/colors\"}]]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"$37\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" colors \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"tailwindcss/colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" function\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" MyActivityIndicator\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"props\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\") {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"ActivityIndicator\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" size\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"small\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" color\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{colors.blue.\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"500\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"} {\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"...\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"props} /\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"access-theme-values\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#access-theme-values\",\"className\":\"peer\",\"children\":\"Access theme values\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"If you use custom theme values, extract them to a file that is shared with your code and your \",[\"$\",\"code\",null,{\"children\":\"tailwind.config.js\"}],\". \",\"$L38\",\".\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"colors.ts\",\"icon\":\"$39\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" tahiti: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 100\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#cffafe\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 200\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#a5f3fc\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 300\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#67e8f9\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 400\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#22d3ee\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 500\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#06b6d4\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 600\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#0891b2\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 700\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#0e7490\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 800\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#155e75\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 900\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"#164e63\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$3a\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" colors\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"./colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" colors,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"MyActivityIndicator.js\",\"icon\":\"$3b\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" colors \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"./colors\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" function\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" MyActivityIndicator\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"props\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\") {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"ActivityIndicator\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" color\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{colors.tahiti.\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"500\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"} {\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"...\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"props} /\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]]}]}]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"platform-specific-theming\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#platform-specific-theming\",\"className\":\"peer\",\"children\":\"Platform specific theming\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"platformselect\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#platformselect\",\"className\":\"peer\",\"children\":\"platformSelect\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"platformSelect is the equivalent to \",\"$L3c\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"platformSelect\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" colors: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" error: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"platformSelect\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ios: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"red\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" android: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"blue\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" default: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"green\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"platformcolor\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#platformcolor\",\"className\":\"peer\",\"children\":\"platformColor()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Equivalent of \",\"$L3d\",\". Typically used with \",[\"$\",\"code\",null,{\"children\":\"platformSelect\"}],\".\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$3e\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"platformColor\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" colors: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" platformRed: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"platformSelect\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" android: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"platformColor\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"systemRed\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"),\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" web: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"red\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"device-specific-theming\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#device-specific-theming\",\"className\":\"peer\",\"children\":\"Device specific theming\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"hairlinewidth\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#hairlinewidth\",\"className\":\"peer\",\"children\":\"hairlineWidth()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Equivalent of \",\"$L3f\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$40\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"hairlineWidth\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" borderWidth: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" hairline: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"hairlineWidth\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(),\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"pixelratio\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#pixelratio\",\"className\":\"peer\",\"children\":\"pixelRatio()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Equivalent of \",\"$L41\",\". If a number is provided it returns \",[\"$\",\"code\",null,{\"children\":\"PixelRatio.get() * \u003cvalue\u003e\"}],\", otherwise it returns the PixelRatio value.\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$42\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"pixelRatio\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" borderWidth: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" number: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"pixelRatio\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"2\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"),\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"pixelratioselect\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#pixelratioselect\",\"className\":\"peer\",\"children\":\"pixelRatioSelect()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A helper function to use \",\"$L43\",\" in a conditional statement, similar to \",[\"$\",\"code\",null,{\"children\":\"Platform.select\"}],\".\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$44\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"pixelRatio\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"hairlineWidth\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" borderWidth: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"pixelRatioSelect\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 2\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"1\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" default: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"hairlineWidth\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(),\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"fontscale\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#fontscale\",\"className\":\"peer\",\"children\":\"fontScale()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Equivalent of \",\"$L45\",\". If a number is provided it returns \",[\"$\",\"code\",null,{\"children\":\"PixelRatio.getFontScale() * \u003cvalue\u003e\"}],\", otherwise it returns the \",[\"$\",\"code\",null,{\"children\":\"PixelRatio.getFontScale()\"}],\" value.\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$46\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"fontScale\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" fontSize: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" custom: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"fontScale\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"2\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"),\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"fontscaleselect\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#fontscaleselect\",\"className\":\"peer\",\"children\":\"fontScaleSelect()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A helper function to use \",\"$L47\",\" in a conditional statement, similar to \",[\"$\",\"code\",null,{\"children\":\"Platform.select\"}],\".\"]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"title\":\"tailwind.config.js\",\"icon\":\"$48\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"fontScaleSelect\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"hairlineWidth\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" fontSize: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" custom: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"fontScaleSelect\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 2\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"14\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" default: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"16\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }),\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"getpixelsizeforlayoutsize\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#getpixelsizeforlayoutsize\",\"className\":\"peer\",\"children\":\"getPixelSizeForLayoutSize()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Equivalent of \",[\"$\",\"code\",null,{\"children\":\"PixelRatio.getPixelSizeForLayoutSize()\"}]]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"\u003csvg viewBox=\\\"0 0 24 24\\\"\u003e\u003cpath d=\\\"M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z\\\" fill=\\\"currentColor\\\" /\u003e\u003c/svg\u003e\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"getPixelSizeForLayoutSize\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" size: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" custom: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"getPixelSizeForLayoutSize\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"2\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"),\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}]]}]}]}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"roundtonearestpixel\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#roundtonearestpixel\",\"className\":\"peer\",\"children\":\"roundToNearestPixel()\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}],\"$undefined\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Equivalent of \",[\"$\",\"code\",null,{\"children\":\"PixelRatio.roundToNearestPixel()\"}]]}],\"\\n\",[\"$\",\"$L33\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"$49\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"roundToNearestPixel\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" require\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"nativewind/theme\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\");\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"exports\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" theme: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" extend: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" size: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" custom: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"roundToNearestPixel\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"8.4\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\")\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"});\"}]}]]}]}]}]],\"className\":\"prose\"}]],[\"$\",\"div\",null,{\"role\":\"none\",\"className\":\"flex-1\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden\",\"children\":[null,null]}],[\"$\",\"$L4a\",null,{\"items\":\"$undefined\"}]]}]]}],[\"$\",\"$L4b\",null,{\"children\":[\"$undefined\",[\"$\",\"h3\",null,{\"className\":\"inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-text size-4\",\"children\":[[\"$\",\"path\",\"olowqp\",{\"d\":\"M15 18H3\"}],[\"$\",\"path\",\"16j9eg\",{\"d\":\"M17 6H3\"}],[\"$\",\"path\",\"2avoz0\",{\"d\":\"M21 12H3\"}],\"$undefined\"]}],[\"$\",\"$L4c\",null,{\"label\":\"toc\"}]]}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L4d\",null,{\"items\":\"$1b:props:toc\"}]}],\"$undefined\"]}]]}]\n"])</script><script>self.__next_f.push([1,"4e:I[9949,[\"769\",\"static/chunks/769-8af0dd6ba1917f5d.js\",\"857\",\"static/chunks/857-9d435cd9637ba7a9.js\",\"993\",\"static/chunks/993-3e8f4916e432e2f6.js\",\"711\",\"static/chunks/711-fc912928148f438c.js\",\"637\",\"static/chunks/637-c682ed75bce4e9f9.js\",\"870\",\"static/chunks/app/docs/%5B%5B...slug%5D%5D/page-d60e743d5bbf02fa.js\"],\"default\"]\n20:null\n32:[\"$\",\"$L4e\",null,{\"href\":\"https://tailwindcss.com/docs/customizing-colors#using-css-variables\",\"children\":\"CSS Variables as colors\"}]\n38:[\"$\",\"$L4e\",null,{\"href\":\"https://tailwindcss.com/docs/configuration#referencing-in-java-script\",\"children\":\"Please read the Tailwind CSS documentation for more information\"}]\n3c:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/platform#select\",\"children\":[\"$\",\"code\",null,{\"children\":\"Platform.select()\"}]}]\n3d:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/platformcolor\",\"children\":[\"$\",\"code\",null,{\"children\":\"PlatformColor\"}]}]\n3f:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/stylesheet#hairlinewidth\",\"children\":[\"$\",\"code\",null,{\"children\":\"StyleSheet.hairlineWidth\"}]}]\n41:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/pixelratio#get\",\"children\":[\"$\",\"code\",null,{\"children\":\"PixelRatio.get()\"}]}]\n43:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/pixelratio#get\",\"children\":[\"$\",\"code\",null,{\"children\":\"PixelRatio.get()\"}]}]\n45:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/pixelratio#getFontScale\",\"children\":[\"$\",\"code\",null,{\"children\":\"PixelRatio.getFontScale()\"}]}]\n47:[\"$\",\"$L4e\",null,{\"href\":\"https://reactnative.dev/docs/pixelratio#getFontScale\",\"children\":[\"$\",\"code\",null,{\"children\":\"PixelRatio.getFontScale()\"}]}]\n"])</script><script>self.__next_f.push([1,"24:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n1f:null\n"])</script><script>self.__next_f.push([1,"28:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Themes\"}],[\"$\",\"meta\",\"1\",{\"property\":\"og:title\",\"content\":\"Themes\"}],[\"$\",\"meta\",\"2\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:image:width\",\"content\":\"1280\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:image:height\",\"content\":\"720\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://www.nativewind.dev/opengraph-image.png?a84e8d7ff09b577f\"}],[\"$\",\"meta\",\"6\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:title\",\"content\":\"Themes\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:image:width\",\"content\":\"1280\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:image:height\",\"content\":\"720\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:image\",\"content\":\"https://www.nativewind.dev/opengraph-image.png?a84e8d7ff09b577f\"}],[\"$\",\"link\",\"12\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\"}]],\"error\":null,\"digest\":\"$undefined\"}\n22:{\"metadata\":\"$28:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>