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>Styling Third-Party Components</title><meta property="og:title" content="Styling Third-Party Components"/><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="Styling Third-Party Components"/><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="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/third-party-components">Styling Third-Party 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/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">Styling Third-Party Components</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">Styling Third-Party Components</h1><p class="text-sm text-muted-foreground mb-4 italic">Last updated on <!-- -->May 30th, 2025</p><div class="prose">
2<p>A third-party component is a component that is a dependency of your application and not a core React Native component. Nativewind works by passing the <code>className</code> prop to the core React Native components. Unfortunately, its not always obvious what third-party components implement this behavior without checking their source code.</p>
3<p>This is an example of a 3rd party component that does not pass the <code>className</code> prop down:</p>
4<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:#6A737D;--shiki-dark:#6A737D">// ❌ This component will not work with Nativewind</span></span>
5<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// This component is 'picking' the props.</span></span>
6<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// Any props that are not explicitly defined will not be passed down</span></span>
7<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ThirdPartyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) {</span></span>
8<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">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">{style} />;</span></span>
9<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
10<span class="line"> </span>
11<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// ✅ This component will work with Nativewind</span></span>
12<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ThirdPartyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) {</span></span>
13<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">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">{style} {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">props} />;</span></span>
14<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
15<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="improving-3rd-party-components"><a data-card="" href="#improving-3rd-party-components" class="peer">Improving 3rd party components</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>
16<p>If you encounter a 3rd party component 'picks' its props, you should consider submitting a pull request to modify the component so it passes all props down. Components that 'pick' their props can be very limiting, and not just for Nativewind! React Native often adds new APIs and 'picking' props prevents you from using these new features.</p>
17<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">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ThirdPartyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) {</span></span>
18<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">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">{style} />;</span></span>
19<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
20<span class="line"> </span>
21<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// aria-label was added in 0.71, but this component will not work with it!</span></span>
22<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ThirdPartyComponent</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> aria-label</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"My Label"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />;</span></span></code></pre></div></div></div></figure>
23<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="handling-components-with-multiple-style-props"><a data-card="" href="#handling-components-with-multiple-style-props" class="peer">Handling components with multiple style props</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>
24<p>Some components will pass the <code>className</code> prop down, but they may also have multiple style props. For example, React Native's <code><FlatList /></code> component has a <code>style</code> and <code>contentContainerStyle</code> prop. The <code>remapProps</code> function can be used to create new <code>className</code> props for these components.</p>
25<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:#6A737D;--shiki-dark:#6A737D">// This component has two 'style' props</span></span>
26<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ThirdPartyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">contentContainerStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) {</span></span>
27<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
28<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">FlatList</span></span>
29<span class="line"><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">{style}</span></span>
30<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> contentContainerStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{contentContainerStyle}</span></span>
31<span class="line"><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>
32<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
33<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> );</span></span>
34<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
35<span class="line"> </span>
36<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// Call this once at the entry point of your app</span></span>
37<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">remapProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(ThirdPartyComponent, {</span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> className: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"style"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> contentContainerClassName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"contentContainerStyle"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span>
41<span class="line"> </span>
42<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// Now you can use the component with Nativewind</span></span>
43<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ThirdPartyComponent</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"p-5"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> contentContainerClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"p-2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />;</span></span></code></pre></div></div></div></figure>
44<div class="my-6 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md border-s-emerald-500 dark:border-s-emerald-300"><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-lightbulb size-5 stroke-emerald-500 dark:stroke-emerald-300"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><div class="min-w-0 flex-1"><div class="text-fd-muted-foreground prose-no-margin"><p>Nativewind's style objects are more complex than the objected created <code>StyleSheet.create</code>. To not break third-party components, <code>remapProps</code> will pass a special object to the target prop. To the third-party component this will appear as an empty object.</p></div></div></div>
45<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="handling-components-with-style-attribute-props"><a data-card="" href="#handling-components-with-style-attribute-props" class="peer">Handling components with style attribute props</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>
46<p>Some components may require style attributes to be passed as props (for example, React Native's <code><StatusBar /></code> component accepts a <code>backgroundColor</code> prop), or they may access the <code>style</code> prop directly.</p>
47<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:#6A737D;--shiki-dark:#6A737D">/*</span></span>
48<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> * This component will not work as expected with Nativewind</span></span>
49<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> * - borderColor will not work as it is a prop</span></span>
50<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> * - backgroundColor will not work as it is based on the style.color value</span></span>
51<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> */</span></span>
52<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ThirdPartyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) {</span></span>
53<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // The background color is based on the style prop</span></span>
54<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> backgroundColor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> style.color </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "white"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "black"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "white"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
55<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
56<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">View</span></span>
57<span class="line"><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">{{</span></span>
58<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">style,</span></span>
59<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> borderColor,</span></span>
60<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> backgroundColor,</span></span>
61<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span>
62<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
63<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> );</span></span>
64<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
65<p>To support these components, you can use the <a href="./../api/css-interop"><code>cssInterop</code></a> function. You can think of <code>cssInterop</code> as a "className termination". It a marker that Nativewind needs to convert the <code>className</code> props into style objects.</p>
66<div class="my-6 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md border-s-orange-500 dark:border-s-orange-400"><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-triangle-alert size-5 fill-orange-500 dark:fill-orange-400 text-fd-card"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><div class="min-w-0 flex-1"><p class="not-prose mb-2 font-medium">CAUTION</p><div class="text-fd-muted-foreground prose-no-margin"><p>Enabling the <code>cssInterop</code> for a component comes at a performance cost. Nativewind will need to resolve the styles, add event handlers, inject context, etc.</p></div></div></div>
67<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="handling-multiple-props-with-similar-properties"><a data-card="" href="#handling-multiple-props-with-similar-properties" class="peer">Handling multiple props with similar properties</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>
68<p>Sometimes a component will have multiple props that are similar.</p>
69<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">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ThirdPartyComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">labelColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">inputColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">props</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) {</span></span>
70<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
71<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <></span></span>
72<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Text</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">{color: labelColor}>Label</</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
73<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">TextInput</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">{color: labelColor} /></span></span>
74<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </></span></span>
75<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> );</span></span>
76<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
77<p>You could creating a new mapping for each props, but it can be cumbersome to manage multiple props with className management libraries</p>
78<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:#6A737D;--shiki-dark:#6A737D">// This is possible</span></span>
79<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">cssInterop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(ThirdPartyComponent, {</span></span>
80<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> labelColorClassName: {</span></span>
81<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> target: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">false</span></span>
82<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> nativeStyleToProps: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'labelColor'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
83<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
84<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> inputColorClassName: {</span></span>
85<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> target: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">false</span></span>
86<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> nativeStyleToProps: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'inputColor'</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>
88<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">})</span></span>
89<span class="line"> </span>
90<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Wrapper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
91<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // Need to create a new className for each prop</span></span>
92<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> labelStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> cva</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'color-black'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)</span></span>
93<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> inputStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> cva</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'color-black'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)</span></span>
94<span class="line"> </span>
95<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
96<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ThirdPartyComponent</span></span>
97<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> labelColorClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{labelStyle}</span></span>
98<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> inputColorClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{inputStyle}</span></span>
99<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
100<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> )</span></span>
101<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
102<p>Instead, you can use the dynamic mapping modifier to move props.</p>
103<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:#6F42C1;--shiki-dark:#B392F0">cssInterop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(ThirdPartyComponent, {</span></span>
104<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> className: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"style"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
105<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span>
106<span class="line"> </span>
107<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Wrapper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
108<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // Need to create a new className for each prop</span></span>
109<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> cva</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"{}-[inputColor]:color-black {}-[labelColor]:color-black"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
110<span class="line"> </span>
111<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">ThirdPartyComponent</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{style} />;</span></span>
112<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
113<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="dynamic-mapping-modifier"><a data-card="" href="#dynamic-mapping-modifier" class="peer">Dynamic mapping modifier</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>
114<p>The dynamic mapping modifier allows you to move props from one prop to another. This is useful when you have multiple props that are similar, or you want to manage the styles in a single prop.</p>
115<p>There are two ways to use the dynamic mapping modifier:</p>
116<ul>
117<li><code>{}-[<propName>]</code>: This will move the values the style to the <code>propName</code> prop. If a className sets multiple properties, the last property will be used.</li>
118<li><code>{}-[<propName>]:style-property</code>: This will move the <code>propName</code> prop to the <code>style-property</code> of the <code>className</code> prop, but only for the specified <code>style-property</code></li>
119</ul>
120<p>Both <code>propName</code> and <code>style-property</code> can be written using dot notation to access nested properties.</p>
121<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:#6A737D;--shiki-dark:#6A737D">//This class</span></span>
122<span class="line"><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">[screenOptions.tabBarTintColor]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">:color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">red</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">500</span></span>
123<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// Will output</span></span>
124<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">screenOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">tabBarTintColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'color-red-500'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } }</span></span></code></pre></div></div></div></figure>
125<h2 class="flex scroll-m-28 flex-row items-center gap-2" id="typescript"><a data-card="" href="#typescript" class="peer">TypeScript</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>
126<p>Both <code>remapProps</code> and <code>cssInterop</code> will return a typed version of your component. However, you can globally defined the types in a new declaration file.</p>
127<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">declare</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> module</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "<3rd party package>"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
128<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> interface</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> 3</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">rdPartyComponentProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
129<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> customClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
130<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
131<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div></div></div></figure>
132<p><strong>Example</strong></p>
133<p>Setting global types requires in-depth knowledge of TypeScript. Your interface declaration needs to <strong>exactly match</strong> the 3rd party declaration (including <code>extends</code> and generics).</p>
134<p>For example, Nativewind uses the follow types for React Native's <code><FlatList /></code>, which uses multiple interfaces for its props, across multiple packages.</p>
135<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"> {</span></span>
136<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ScrollViewProps,</span></span>
137<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ScrollViewPropsAndroid,</span></span>
138<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ScrollViewPropsIOS,</span></span>
139<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Touchable,</span></span>
140<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> VirtualizedListProps,</span></span>
141<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "react-native"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
142<span class="line"> </span>
143<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">declare</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> module</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "@react-native/virtualized-lists"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
144<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> VirtualizedListWithoutRenderItemProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">ItemT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
145<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ScrollViewProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
146<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> ListFooterComponentClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
147<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> ListHeaderComponentClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
148<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
149<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
150<span class="line"> </span>
151<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">declare</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> module</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "react-native"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
152<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ScrollViewProps</span></span>
153<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ViewProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
154<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ScrollViewPropsIOS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
155<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ScrollViewPropsAndroid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
156<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Touchable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
157<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> contentContainerClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
158<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> indicatorClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><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:#D73A49;--shiki-dark:#F97583"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> FlatListProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">ItemT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> VirtualizedListProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">ItemT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">> {</span></span>
161<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> columnWrapperClassName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
162<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
163<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ViewProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
164<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> className</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
165<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span>
166<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/custom-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>How to write custom 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/themes"><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>Themes</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="#improving-3rd-party-components" 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>Improving 3rd party components</a><a data-active="false" href="#handling-components-with-multiple-style-props" 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>Handling components with multiple style props</a><a data-active="false" href="#handling-components-with-style-attribute-props" 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>Handling components with style attribute props</a><a data-active="false" href="#handling-multiple-props-with-similar-properties" 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>Handling multiple props with similar properties</a><a data-active="false" href="#dynamic-mapping-modifier" 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 mapping modifier</a><a data-active="false" href="#typescript" 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>TypeScript</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\",\"third-party-components\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"guides/third-party-components\",\"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/third-party-components\",\"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\",\"08lg9B9tQ2OCm3eTeqjzR\",{\"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\"]\n32: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\"]\n3f: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\"]\n40: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\"]\n41: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\"]\n42: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\"}]}]\n33: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,"35: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: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,"3b: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,"3c: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,"3d: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: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,"1b:[\"$\",\"$L29\",null,{\"toc\":[{\"depth\":2,\"url\":\"#improving-3rd-party-components\",\"title\":\"Improving 3rd party components\"},{\"depth\":2,\"url\":\"#handling-components-with-multiple-style-props\",\"title\":\"Handling components with multiple style props\"},{\"depth\":2,\"url\":\"#handling-components-with-style-attribute-props\",\"title\":\"Handling components with style attribute props\"},{\"depth\":2,\"url\":\"#handling-multiple-props-with-similar-properties\",\"title\":\"Handling multiple props with similar properties\"},{\"depth\":2,\"url\":\"#dynamic-mapping-modifier\",\"title\":\"Dynamic mapping modifier\"},{\"depth\":2,\"url\":\"#typescript\",\"title\":\"TypeScript\"}],\"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\":\"Styling Third-Party Components\",\"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\":[\"A third-party component is a component that is a dependency of your application and not a core React Native component. Nativewind works by passing the \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" prop to the core React Native components. Unfortunately, its not always obvious what third-party components implement this behavior without checking their source code.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This is an example of a 3rd party component that does not pass the \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" prop down:\"]}],\"\\n\",[\"$\",\"$L32\",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\":\"$33\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// ❌ This component will not work with Nativewind\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// This component is 'picking' the props.\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// Any props that are not explicitly defined will not be passed down\"}]}],\"\\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\":\" ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"style\"}],[\"$\",\"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\":\"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\":\"{style} /\u003e;\"}]]}],\"\\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\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// ✅ This component will work with Nativewind\"}]}],\"\\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\":\" ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"style\"}],[\"$\",\"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\":\"#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\":\"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\":\"{style} {\"}],[\"$\",\"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\":\"improving-3rd-party-components\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#improving-3rd-party-components\",\"className\":\"peer\",\"children\":\"Improving 3rd party components\"}],[\"$\",\"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 encounter a 3rd party component 'picks' its props, you should consider submitting a pull request to modify the component so it passes all props down. Components that 'pick' their props can be very limiting, and not just for Nativewind! React Native often adds new APIs and 'picking' props prevents you from using these new features.\"}],\"\\n\",[\"$\",\"$L32\",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\":\"$35\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"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\":\" ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"style\"}],[\"$\",\"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\":\"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\":\"{style} /\u003e;\"}]]}],\"\\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\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// aria-label was added in 0.71, but this component will not work with it!\"}]}],\"\\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\":\"ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" aria-label\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"My Label\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" /\u003e;\"}]]}]]}]}]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"handling-components-with-multiple-style-props\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#handling-components-with-multiple-style-props\",\"className\":\"peer\",\"children\":\"Handling components with multiple style props\"}],[\"$\",\"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\":[\"Some components will pass the \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" prop down, but they may also have multiple style props. For example, React Native's \",[\"$\",\"code\",null,{\"children\":\"\u003cFlatList /\u003e\"}],\" component has a \",[\"$\",\"code\",null,{\"children\":\"style\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"contentContainerStyle\"}],\" prop. The \",[\"$\",\"code\",null,{\"children\":\"remapProps\"}],\" function can be used to create new \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" props for these components.\"]}],\"\\n\",[\"$\",\"$L32\",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\":\"$36\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// This component has two 'style' props\"}]}],\"\\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\":\" ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"contentContainerStyle\"}],[\"$\",\"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\":\"#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\":\" (\"}]]}],\"\\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\":\"FlatList\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"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\":\"{style}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" contentContainerStyle\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{contentContainerStyle}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"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}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"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\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// Call this once at the entry point of your app\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"remapProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(ThirdPartyComponent, {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" className: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"style\\\"\"}],[\"$\",\"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\":\" contentContainerClassName: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"contentContainerStyle\\\"\"}],[\"$\",\"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\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// Now you can use the component with Nativewind\"}]}],\"\\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\":\"ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"p-5\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" contentContainerClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"p-2\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" /\u003e;\"}]]}]]}]}]}],\"\\n\",[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-6 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md border-s-emerald-500 dark:border-s-emerald-300\",\"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-lightbulb size-5 stroke-emerald-500 dark:stroke-emerald-300\",\"children\":[[\"$\",\"path\",\"1gvzjb\",{\"d\":\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"}],[\"$\",\"path\",\"x1upvd\",{\"d\":\"M9 18h6\"}],[\"$\",\"path\",\"ceow96\",{\"d\":\"M10 22h4\"}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[null,[\"$\",\"div\",null,{\"className\":\"text-fd-muted-foreground prose-no-margin\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Nativewind's style objects are more complex than the objected created \",[\"$\",\"code\",null,{\"children\":\"StyleSheet.create\"}],\". To not break third-party components, \",[\"$\",\"code\",null,{\"children\":\"remapProps\"}],\" will pass a special object to the target prop. To the third-party component this will appear as an empty object.\"]}]}]]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"handling-components-with-style-attribute-props\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#handling-components-with-style-attribute-props\",\"className\":\"peer\",\"children\":\"Handling components with style attribute props\"}],[\"$\",\"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\":[\"Some components may require style attributes to be passed as props (for example, React Native's \",[\"$\",\"code\",null,{\"children\":\"\u003cStatusBar /\u003e\"}],\" component accepts a \",[\"$\",\"code\",null,{\"children\":\"backgroundColor\"}],\" prop), or they may access the \",[\"$\",\"code\",null,{\"children\":\"style\"}],\" prop directly.\"]}],\"\\n\",[\"$\",\"$L32\",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\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"/*\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" * This component will not work as expected with Nativewind\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" * - borderColor will not work as it is a prop\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" * - backgroundColor will not work as it is based on the style.color value\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"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\":\" ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"borderColor\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"style\"}],[\"$\",\"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\":\"#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\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // The background color is based on the style prop\"}]}],\"\\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\":\" backgroundColor\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" style.color \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"===\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"white\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" ?\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"black\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" :\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"white\\\"\"}],[\"$\",\"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\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"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\":\"{{\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" ...\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"style,\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" borderColor,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" backgroundColor,\"}]}],\"\\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\":\" /\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\",[\"$\",\"p\",null,{\"children\":[\"To support these components, you can use the \",\"$L38\",\" function. You can think of \",[\"$\",\"code\",null,{\"children\":\"cssInterop\"}],\" as a \\\"className termination\\\". It a marker that Nativewind needs to convert the \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" props into style objects.\"]}],\"\\n\",[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-6 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md border-s-orange-500 dark:border-s-orange-400\",\"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-triangle-alert size-5 fill-orange-500 dark:fill-orange-400 text-fd-card\",\"children\":[[\"$\",\"path\",\"wmoenq\",{\"d\":\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"}],[\"$\",\"path\",\"juzpu7\",{\"d\":\"M12 9v4\"}],[\"$\",\"path\",\"p32p05\",{\"d\":\"M12 17h.01\"}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"not-prose mb-2 font-medium\",\"children\":\"CAUTION\"}],[\"$\",\"div\",null,{\"className\":\"text-fd-muted-foreground prose-no-margin\",\"children\":[\"$\",\"p\",null,{\"children\":[\"Enabling the \",[\"$\",\"code\",null,{\"children\":\"cssInterop\"}],\" for a component comes at a performance cost. Nativewind will need to resolve the styles, add event handlers, inject context, etc.\"]}]}]]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"handling-multiple-props-with-similar-properties\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#handling-multiple-props-with-similar-properties\",\"className\":\"peer\",\"children\":\"Handling multiple props with similar properties\"}],[\"$\",\"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\":\"Sometimes a component will have multiple props that are similar.\"}],\"\\n\",[\"$\",\"$L32\",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\":\"$39\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"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\":\" ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"({ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"labelColor\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"inputColor\"}],[\"$\",\"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\":\"#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\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\u003e\"}]}],\"\\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\":\"Text\"}],[\"$\",\"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\":\"{color: labelColor}\u003eLabel\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"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\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"TextInput\"}],[\"$\",\"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\":\"{color: labelColor} /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\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\",[\"$\",\"p\",null,{\"children\":\"You could creating a new mapping for each props, but it can be cumbersome to manage multiple props with className management libraries\"}],\"\\n\",[\"$\",\"$L32\",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\":\"$3a\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// This is possible\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"cssInterop\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(ThirdPartyComponent, {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" labelColorClassName: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" target: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"false\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" nativeStyleToProps: { color: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'labelColor'\"}],[\"$\",\"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\":\" inputColorClassName: {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" target: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"false\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" nativeStyleToProps: { color: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'inputColor'\"}],[\"$\",\"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\":\" Wrapper\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // Need to create a new className for each prop\"}]}],\"\\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\":\" labelStyle\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" cva\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'color-black'\"}],[\"$\",\"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\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" inputStyle\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" cva\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'color-black'\"}],[\"$\",\"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\":\" 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\":\"ThirdPartyComponent\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" labelColorClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{labelStyle}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" inputColorClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{inputStyle}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"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\",[\"$\",\"p\",null,{\"children\":\"Instead, you can use the dynamic mapping modifier to move props.\"}],\"\\n\",[\"$\",\"$L32\",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\":\"$3b\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"cssInterop\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(ThirdPartyComponent, {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" className: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"style\\\"\"}],[\"$\",\"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\":\" Wrapper\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // Need to create a new className for each prop\"}]}],\"\\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\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" cva\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"{}-[inputColor]:color-black {}-[labelColor]:color-black\\\"\"}],[\"$\",\"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\":\" return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"ThirdPartyComponent\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" className\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{style} /\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\":\"dynamic-mapping-modifier\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#dynamic-mapping-modifier\",\"className\":\"peer\",\"children\":\"Dynamic mapping modifier\"}],[\"$\",\"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\":\"The dynamic mapping modifier allows you to move props from one prop to another. This is useful when you have multiple props that are similar, or you want to manage the styles in a single prop.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"There are two ways to use the dynamic mapping modifier:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"{}-[\u003cpropName\u003e]\"}],\": This will move the values the style to the \",[\"$\",\"code\",null,{\"children\":\"propName\"}],\" prop. If a className sets multiple properties, the last property will be used.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"{}-[\u003cpropName\u003e]:style-property\"}],\": This will move the \",[\"$\",\"code\",null,{\"children\":\"propName\"}],\" prop to the \",[\"$\",\"code\",null,{\"children\":\"style-property\"}],\" of the \",[\"$\",\"code\",null,{\"children\":\"className\"}],\" prop, but only for the specified \",[\"$\",\"code\",null,{\"children\":\"style-property\"}]]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Both \",[\"$\",\"code\",null,{\"children\":\"propName\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"style-property\"}],\" can be written using dot notation to access nested properties.\"]}],\"\\n\",[\"$\",\"$L32\",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\":\"$3c\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"//This class\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"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\":\"[screenOptions.tabBarTintColor]\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"color\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\":color\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"-\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"red\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"-\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"500\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"// Will output\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{ \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"screenOptions\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": { \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"tabBarTintColor\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\": \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'color-red-500'\"}],[\"$\",\"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\":\"typescript\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#typescript\",\"className\":\"peer\",\"children\":\"TypeScript\"}],[\"$\",\"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\":[\"Both \",[\"$\",\"code\",null,{\"children\":\"remapProps\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"cssInterop\"}],\" will return a typed version of your component. However, you can globally defined the types in a new declaration file.\"]}],\"\\n\",[\"$\",\"$L32\",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\":\"$3d\",\"children\":[\"$\",\"$L34\",null,{\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"declare\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"\u003c3rd party package\u003e\\\"\"}],[\"$\",\"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\":\" interface\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" 3\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"rdPartyComponentProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" customClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"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\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Setting global types requires in-depth knowledge of TypeScript. Your interface declaration needs to \",[\"$\",\"strong\",null,{\"children\":\"exactly match\"}],\" the 3rd party declaration (including \",[\"$\",\"code\",null,{\"children\":\"extends\"}],\" and generics).\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, Nativewind uses the follow types for React Native's \",[\"$\",\"code\",null,{\"children\":\"\u003cFlatList /\u003e\"}],\", which uses multiple interfaces for its props, across multiple packages.\"]}],\"\\n\",[\"$\",\"$L32\",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\":\"$3e\",\"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\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ScrollViewProps,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ScrollViewPropsAndroid,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ScrollViewPropsIOS,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" Touchable,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" VirtualizedListProps,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"} \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"react-native\\\"\"}],[\"$\",\"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\":\"declare\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"@react-native/virtualized-lists\\\"\"}],[\"$\",\"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\":\" export\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" interface\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" VirtualizedListWithoutRenderItemProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"ItemT\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" extends\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" ScrollViewProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" ListFooterComponentClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" ListHeaderComponentClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"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\":\"declare\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" module\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" \\\"react-native\\\"\"}],[\"$\",\"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\":\" interface\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" ScrollViewProps\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" extends\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" ViewProps\"}],[\"$\",\"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\":\" ScrollViewPropsIOS\"}],[\"$\",\"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\":\" ScrollViewPropsAndroid\"}],[\"$\",\"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\":\" Touchable\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" contentContainerClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" indicatorClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"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\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" interface\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" FlatListProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"ItemT\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"extends\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" VirtualizedListProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"ItemT\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\" columnWrapperClassName\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"?:\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"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\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" interface\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" ViewProps\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"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\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" string\"}],[\"$\",\"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]}],[\"$\",\"$L3f\",null,{\"items\":\"$undefined\"}]]}]]}],[\"$\",\"$L40\",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\"]}],[\"$\",\"$L41\",null,{\"label\":\"toc\"}]]}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L42\",null,{\"items\":\"$1b:props:toc\"}]}],\"$undefined\"]}]]}]\n"])</script><script>self.__next_f.push([1,"43: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\n38:[\"$\",\"$L43\",null,{\"href\":\"./../api/css-interop\",\"children\":[\"$\",\"code\",null,{\"children\":\"cssInterop\"}]}]\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\":\"Styling Third-Party Components\"}],[\"$\",\"meta\",\"1\",{\"property\":\"og:title\",\"content\":\"Styling Third-Party Components\"}],[\"$\",\"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\":\"Styling Third-Party Components\"}],[\"$\",\"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>