CINXE.COM

<!DOCTYPE html> <html lang="en"> <head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="theme-color" content="#fbf0df"/><title>CSS – Bundler | Bun Docs</title><meta name="description" content="Production ready CSS bundler with support for modern CSS features, CSS modules, and more."/><meta name="og:site_name" content="Bun"/><meta name="og:title" content="CSS – Bundler | Bun Docs"/><meta name="og:description" content="Production ready CSS bundler with support for modern CSS features, CSS modules, and more."/><meta name="og:url" content="https://bun.sh/docs/bundler/css"/><meta name="og:image" content="https://bun.sh/og/docs/bundler/css.jpg"/><meta name="og:locale" content="en_US"/><meta name="og:type" content="website"/><meta name="twitter:site" content="@oven_sh"/><meta name="twitter:card" content="summary_large_image"/><script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebSite", "name": "Bun", "alternateName": "Bun", "url": "https://bun.sh" }</script><script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Organization", "name": "Bun", "url": "https://bun.sh", "logo": "https://bun.sh/logo-square.png", "alternateName": "Oven", "sameAs": [ "https://twitter.com/bunjavascript", "https://bun.sh" ], "description": "A fast all-in-one JavaScript runtime and toolkit" }</script><link rel="manifest" href="/manifest.json"/><link rel="alternate" type="text/markdown" href="/docs/bundler/css.md"/><link rel="icon" type="image/png" sizes="256x256" href="data:image/png;base64, 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"/><link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64, 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"/><link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAI2AAACNgElQaYmAAACc0lEQVQ4jaVTXUiTURh+zlxrW21u7mtz6pa//alpXkgRiIGYZWA3XkRBdlMGQQZ1kd0EBVJdqDdZF0kRRRdCNwkFmlZCWhQMI2NDncvAOW1+c5vO7fve+E5taBhd+MID57w/z3PO+57DiAgbMdV6tYyx6pLi3W+KCgtC+bnOScZY07801pyAMZZrz7Q9rqjYV3n+TKMm22pAYF7Ek56XYu+r1965+WALEQ2uS5CTndUuSXLzowd31flZBrWUiEOr1/OYLEn4GYrh9NlL/inf9PNwJHqViBZ4UCHIMJt7Tp08EU8sTpN//APNeT+R98sABb+7UogvTHLcutG6pNNpfQBMSfHj9UfrYkpxMul/uNLSLOp0WrdCwATB4hsZ6nc4M9M525hnEm63Bw31tal7rufL2VEp+mcD11VOR47BaTenAr19w7h5pwuu0a98vyCGuO/ytbaUT7FjtYcYgAuqaCQSAcm/O7qYgG2ZsLcgD2Wle7jPlG6EVZuGqpIylNsL8adxEMzpGgAFTLCYfWOfBx1KokLAfsRAwibU1ByGUQKWpQQ6uu9hpyUPZEwD2TZDXo6h9GDdinvcq1HNzQe7b7d3iZzYoIa8awtI0GCr0QCdWoUoA4r2F0Mu0vNikiQMDLyDuBgOA3DxMer1Os/9zrbo390PTLnW7GOzbhrufUYWs2lJ0QPQxAkAbLdtE2YbG46E3R/7aSXgoXhwgkNZx2a+0czoELVePCfZM62KslL0kI8x+RgYYyYAL6xCRrkjO0tVU3VA6TK3vrfv5QmvLy0ohqIAlJF1ElFL6iWuBoBqAE8BJJWS8ALoAJC7On9j3xnAL9flh6V7H5YQAAAAAElFTkSuQmCC"/><script type="text/javascript">globalThis.__setTheme=function(theme){if(theme==="dark"){localStorage.theme="dark";document.documentElement.classList.add("dark")}else{localStorage.theme="light";document.documentElement.classList.remove("dark")}};if(localStorage.theme==="dark"||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches){globalThis.__setTheme("dark")}else{globalThis.__setTheme("light")}</script><script type="text/javascript">document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".DocSearchBox").forEach((el)=>{el.addEventListener("click",()=>{document.querySelector(".DocSearch-Button").click()})})});</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/><style>:root { --black: #0b0a08; /* --gray-50: rgb(249 250 251); --gray-100: rgb(243 244 246); --gray-200: rgb(229 231 235); --gray-300: rgb(209 213 219); --gray-400: rgb(156 163 175); --gray-500: rgb(107 114 128); --gray-600: rgb(75 85 99); --gray-700: rgb(55 65 81); --gray-800: rgb(31 41 55); --gray-900: rgb(17 24 39); */ --gray-950: #0d0e11; --gray-900: #14151a; --gray-800: #282a36; --gray-700: #3b3f4b; --gray-600: #4f5666; --gray-500: #6b7280; --gray-400: #9ca3af; --gray-300: #d1d5db; --gray-200: #e5e7eb; --gray-100: #f3f4f6; --gray-50: #f9fafb; --link-hover-color: #a03939; /* --doc-padding-top: 110px; */ --dark-gray: #282a35; --blue: #00a6e1; --orange: #f89b4b; --orange-light: #d4d3d2; /* --pink: #ee81c3; */ /* --pink-50: #f9e7ed; --pink-100: #f6d2dc; --pink-200: #f3bdc9; --pink-300: #f0a8b6; --pink-400: #ed93a3; --pink-500: #ea7e90; --pink-600: #e7697d; --pink-700: #e4546a; --pink-800: #e13f57; --pink-900: #de2a44; */ /* --pink-50: #fce4ec; --pink-100: #f8bbd0; --pink-200: #f48fb1; --pink-300: #f06292; --pink-400: #ec407a; --pink-500: #e91e63; --pink-600: #d81b60; --pink-700: #c2185b; --pink-800: #ad1457; --pink-900: #880e4f; */ --pink-50: 253, 242, 248; --pink-100: 252, 231, 243; --pink-200: 251, 207, 232; --pink-300: 249, 168, 212; --pink-400: 244, 114, 182; --pink-500: 236, 72, 153; --pink-600: 219, 39, 119; --pink-700: 190, 24, 93; --pink-800: 157, 23, 77; --pink-900: 131, 24, 67; --pink-950: 80, 7, 36; --purple-50: #f3e8f9; --purple-100: #e1d0f2; --purple-200: #cfc8ec; --purple-300: #bdb1e5; --purple-400: #ab99de; --purple-500: #9982d8; --purple-600: #876ad1; --purple-700: #7553cb; --purple-800: #633bc4; --purple-900: #5122bd; --monospace-font: "Fira Code", "Hack", "Source Code Pro", "SF Mono", "Inconsolata", monospace; --dark-border: rgba(200, 200, 25, 0.2); --max-width: 1280px; --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --horizontal-padding: 3rem; --vertical-padding: 4rem; --line-height: 1.4; --phone: 600px; --tablet: 900px; --list-padding: 0.9em; --list-item-padding: 0.375em; --navbar-height: 60px; } * { box-sizing: border-box; } head, body, :root { margin: 0 auto; padding: 0; font-family: var(--system-font); } html { height: 100vh; overflow-y: scroll; overflow-x: hidden; line-height: 1.5; text-size-adjust: 100%; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; /* touch-action: manipulation; */ } a { color: inherit; text-decoration: none; } a.expand { transition: transform 0.1s linear; } a.expand:hover { /* text-decoration: underline; */ transform: scale(1.06, 1.06); transform-origin: center; } .mono { font-family: var(--monospace-font) !important; } .Navigation ul { white-space: nowrap; display: flex; gap: 2rem; list-style: none; } .NavText { /* color: #fbf0df; */ display: block; font-weight: 500; font-size: 1.2rem; } #HeaderInstallButton { margin-left: 2.4rem; } #logo { max-width: 70px; margin: auto 0; } #logo-text { max-width: 96px; } /* header { */ /* display: grid; */ /* grid-template-columns: auto max-content; */ /* background-color: var(--black); */ /* padding: 1.5rem 3rem; */ /* align-items: center; */ /* color: white; */ /* } */ #HeaderInstallButton:hover { cursor: pointer; transform: scale(1.06); } #HeaderInstallButton { transition: transform 0.1s linear; background: #00a6e1; padding: 8px 16px; border-radius: 100px; color: black; font-weight: 500; } .BarGraph-subheading { font-size: 0.9rem; color: rgb(135, 134, 134); margin: 0; } .bun-bar { background-color: #f9f1e1; box-shadow: inset 1px 1px 3px #ccc6bb; background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQnVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA3MCI+PHRpdGxlPkJ1biBMb2dvPC90aXRsZT48cGF0aCBpZD0iU2hhZG93IiBkPSJNNzEuMDksMjAuNzRjLS4xNi0uMTctLjMzLS4zNC0uNS0uNXMtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjUtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjVBMjYuNDYsMjYuNDYsMCwwLDEsNzUuNSwzNS43YzAsMTYuNTctMTYuODIsMzAuMDUtMzcuNSwzMC4wNS0xMS41OCwwLTIxLjk0LTQuMjMtMjguODMtMTAuODZsLjUuNS41LjUuNS41LjUuNS41LjUuNS41LjUuNUMxOS41NSw2NS4zLDMwLjE0LDY5Ljc1LDQyLDY5Ljc1YzIwLjY4LDAsMzcuNS0xMy40OCwzNy41LTMwQzc5LjUsMzIuNjksNzYuNDYsMjYsNzEuMDksMjAuNzRaIi8+PGcgaWQ9IkJvZHkiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kIiBkPSJNNzMsMzUuN2MwLDE1LjIxLTE1LjY3LDI3LjU0LTM1LDI3LjU0UzMsNTAuOTEsMywzNS43QzMsMjYuMjcsOSwxNy45NCwxOC4yMiwxM1MzMy4xOCwzLDM4LDNzOC45NCw0LjEzLDE5Ljc4LDEwQzY3LDE3Ljk0LDczLDI2LjI3LDczLDM1LjdaIiBzdHlsZT0iZmlsbDojZmJmMGRmIi8+PHBhdGggaWQ9IkJvdHRvbV9TaGFkb3ciIGRhdGEtbmFtZT0iQm90dG9tIFNoYWRvdyIgZD0iTTczLDM1LjdhMjEuNjcsMjEuNjcsMCwwLDAtLjgtNS43OGMtMi43MywzMy4zLTQzLjM1LDM0LjktNTkuMzIsMjQuOTRBNDAsNDAsMCwwLDAsMzgsNjMuMjRDNTcuMyw2My4yNCw3Myw1MC44OSw3MywzNS43WiIgc3R5bGU9ImZpbGw6I2Y2ZGVjZSIvPjxwYXRoIGlkPSJMaWdodF9TaGluZSIgZGF0YS1uYW1lPSJMaWdodCBTaGluZSIgZD0iTTI0LjUzLDExLjE3QzI5LDguNDksMzQuOTQsMy40Niw0MC43OCwzLjQ1QTkuMjksOS4yOSwwLDAsMCwzOCwzYy0yLjQyLDAtNSwxLjI1LTguMjUsMy4xMy0xLjEzLjY2LTIuMywxLjM5LTMuNTQsMi4xNS0yLjMzLDEuNDQtNSwzLjA3LTgsNC43QzguNjksMTguMTMsMywyNi42MiwzLDM1LjdjMCwuNCwwLC44LDAsMS4xOUM5LjA2LDE1LjQ4LDIwLjA3LDEzLjg1LDI0LjUzLDExLjE3WiIgc3R5bGU9ImZpbGw6I2ZmZmVmYyIvPjxwYXRoIGlkPSJUb3AiIGQ9Ik0zNS4xMiw1LjUzQTE2LjQxLDE2LjQxLDAsMCwxLDI5LjQ5LDE4Yy0uMjguMjUtLjA2LjczLjMuNTksMy4zNy0xLjMxLDcuOTItNS4yMyw2LTEzLjE0QzM1LjcxLDUsMzUuMTIsNS4xMiwzNS4xMiw1LjUzWm0yLjI3LDBBMTYuMjQsMTYuMjQsMCwwLDEsMzksMTljLS4xMi4zNS4zMS42NS41NS4zNkM0MS43NCwxNi41Niw0My42NSwxMSwzNy45Myw1LDM3LjY0LDQuNzQsMzcuMTksNS4xNCwzNy4zOSw1LjQ5Wm0yLjc2LS4xN0ExNi40MiwxNi40MiwwLDAsMSw0NywxNy4xMmEuMzMuMzMsMCwwLDAsLjY1LjExYy45Mi0zLjQ5LjQtOS40NC03LjE3LTEyLjUzQzQwLjA4LDQuNTQsMzkuODIsNS4wOCw0MC4xNSw1LjMyWk0yMS42OSwxNS43NmExNi45NCwxNi45NCwwLDAsMCwxMC40Ny05Yy4xOC0uMzYuNzUtLjIyLjY2LjE4LTEuNzMsOC03LjUyLDkuNjctMTEuMTIsOS40NUMyMS4zMiwxNi40LDIxLjMzLDE1Ljg3LDIxLjY5LDE1Ljc2WiIgc3R5bGU9ImZpbGw6I2NjYmVhNztmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJPdXRsaW5lIiBkPSJNMzgsNjUuNzVDMTcuMzIsNjUuNzUuNSw1Mi4yNy41LDM1LjdjMC0xMCw2LjE4LTE5LjMzLDE2LjUzLTI0LjkyLDMtMS42LDUuNTctMy4yMSw3Ljg2LTQuNjIsMS4yNi0uNzgsMi40NS0xLjUxLDMuNi0yLjE5QzMyLDEuODksMzUsLjUsMzgsLjVzNS42MiwxLjIsOC45LDMuMTRjMSwuNTcsMiwxLjE5LDMuMDcsMS44NywyLjQ5LDEuNTQsNS4zLDMuMjgsOSw1LjI3QzY5LjMyLDE2LjM3LDc1LjUsMjUuNjksNzUuNSwzNS43LDc1LjUsNTIuMjcsNTguNjgsNjUuNzUsMzgsNjUuNzVaTTM4LDNjLTIuNDIsMC01LDEuMjUtOC4yNSwzLjEzLTEuMTMuNjYtMi4zLDEuMzktMy41NCwyLjE1LTIuMzMsMS40NC01LDMuMDctOCw0LjdDOC42OSwxOC4xMywzLDI2LjYyLDMsMzUuNywzLDUwLjg5LDE4LjcsNjMuMjUsMzgsNjMuMjVTNzMsNTAuODksNzMsMzUuN0M3MywyNi42Miw2Ny4zMSwxOC4xMyw1Ny43OCwxMyw1NCwxMSw1MS4wNSw5LjEyLDQ4LjY2LDcuNjRjLTEuMDktLjY3LTIuMDktMS4yOS0zLTEuODRDNDIuNjMsNCw0MC40MiwzLDM4LDNaIi8+PC9nPjxnIGlkPSJNb3V0aCI+PGcgaWQ9IkJhY2tncm91bmQtMiIgZGF0YS1uYW1lPSJCYWNrZ3JvdW5kIj48cGF0aCBkPSJNNDUuMDUsNDNhOC45Myw4LjkzLDAsMCwxLTIuOTIsNC43MSw2LjgxLDYuODEsMCwwLDEtNCwxLjg4QTYuODQsNi44NCwwLDAsMSwzNCw0Ny43MSw4LjkzLDguOTMsMCwwLDEsMzEuMTIsNDNhLjcyLjcyLDAsMCwxLC44LS44MUg0NC4yNkEuNzIuNzIsMCwwLDEsNDUuMDUsNDNaIiBzdHlsZT0iZmlsbDojYjcxNDIyIi8+PC9nPjxnIGlkPSJUb25ndWUiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kLTMiIGRhdGEtbmFtZT0iQmFja2dyb3VuZCIgZD0iTTM0LDQ3Ljc5YTYuOTEsNi45MSwwLDAsMCw0LjEyLDEuOSw2LjkxLDYuOTEsMCwwLDAsNC4xMS0xLjksMTAuNjMsMTAuNjMsMCwwLDAsMS0xLjA3LDYuODMsNi44MywwLDAsMC00LjktMi4zMSw2LjE1LDYuMTUsMCwwLDAtNSwyLjc4QzMzLjU2LDQ3LjQsMzMuNzYsNDcuNiwzNCw0Ny43OVoiIHN0eWxlPSJmaWxsOiNmZjYxNjQiLz48cGF0aCBpZD0iT3V0bGluZS0yIiBkYXRhLW5hbWU9Ik91dGxpbmUiIGQ9Ik0zNC4xNiw0N2E1LjM2LDUuMzYsMCwwLDEsNC4xOS0yLjA4LDYsNiwwLDAsMSw0LDEuNjljLjIzLS4yNS40NS0uNTEuNjYtLjc3YTcsNywwLDAsMC00LjcxLTEuOTMsNi4zNiw2LjM2LDAsMCwwLTQuODksMi4zNkE5LjUzLDkuNTMsMCwwLDAsMzQuMTYsNDdaIi8+PC9nPjxwYXRoIGlkPSJPdXRsaW5lLTMiIGRhdGEtbmFtZT0iT3V0bGluZSIgZD0iTTM4LjA5LDUwLjE5YTcuNDIsNy40MiwwLDAsMS00LjQ1LTIsOS41Miw5LjUyLDAsMCwxLTMuMTEtNS4wNSwxLjIsMS4yLDAsMCwxLC4yNi0xLDEuNDEsMS40MSwwLDAsMSwxLjEzLS41MUg0NC4yNmExLjQ0LDEuNDQsMCwwLDEsMS4xMy41MSwxLjE5LDEuMTksMCwwLDEsLjI1LDFoMGE5LjUyLDkuNTIsMCwwLDEtMy4xMSw1LjA1QTcuNDIsNy40MiwwLDAsMSwzOC4wOSw1MC4xOVptLTYuMTctNy40Yy0uMTYsMC0uMi4wNy0uMjEuMDlhOC4yOSw4LjI5LDAsMCwwLDIuNzMsNC4zN0E2LjIzLDYuMjMsMCwwLDAsMzguMDksNDlhNi4yOCw2LjI4LDAsMCwwLDMuNjUtMS43Myw4LjMsOC4zLDAsMCwwLDIuNzItNC4zNy4yMS4yMSwwLDAsMC0uMi0uMDlaIi8+PC9nPjxnIGlkPSJGYWNlIj48ZWxsaXBzZSBpZD0iUmlnaHRfQmx1c2giIGRhdGEtbmFtZT0iUmlnaHQgQmx1c2giIGN4PSI1My4yMiIgY3k9IjQwLjE4IiByeD0iNS44NSIgcnk9IjMuNDQiIHN0eWxlPSJmaWxsOiNmZWJiZDAiLz48ZWxsaXBzZSBpZD0iTGVmdF9CbHVjaCIgZGF0YS1uYW1lPSJMZWZ0IEJsdWNoIiBjeD0iMjIuOTUiIGN5PSI0MC4xOCIgcng9IjUuODUiIHJ5PSIzLjQ0IiBzdHlsZT0iZmlsbDojZmViYmQwIi8+PHBhdGggaWQ9IkV5ZXMiIGQ9Ik0yNS43LDM4LjhhNS41MSw1LjUxLDAsMSwwLTUuNS01LjUxQTUuNTEsNS41MSwwLDAsMCwyNS43LDM4LjhabTI0Ljc3LDBBNS41MSw1LjUxLDAsMSwwLDQ1LDMzLjI5LDUuNSw1LjUsMCwwLDAsNTAuNDcsMzguOFoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJJcmlzIiBkPSJNMjQsMzMuNjRhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsMjQsMzMuNjRabTI0Ljc3LDBhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsNDguNzUsMzMuNjRaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkIi8+PC9nPjwvc3ZnPg==); background-repeat: no-repeat; background-size: 56px 48.8px; background-position: 19px 46%; } .Tab:hover, .Tab.active { border-bottom-color: var(--gray-400); background-color: var(--gray-800); } .CardContent { position: relative; } .DemphasizedLabel { text-transform: uppercase; white-space: nowrap; } #frameworks { display: flex; } .FrameworksGroup { display: grid; grid-template-rows: auto 40px; gap: 0.5rem; } .DemphasizedLabel { color: #7a7a7a; font-weight: 300; } .FrameworksList { display: grid; grid-template-columns: repeat(2, 40px); gap: 3.5rem; align-items: center; } #cards { display: grid; } .Tag { --background: rgba(31, 31, 132, 0.15); background-color: var(--background); border-radius: 4px; padding: 4px 4px; border: none; line-height: 1; color: black; text-decoration: none !important; display: inline-block; font-family: var(--monospace-font) !important; box-shadow: 0px 1px 0px rgb(111 111 111); } .Tag--Command { --background: #111; font-weight: medium; color: rgb(163, 255, 133); } .Tag--Command:before { content: "❯" / ""; color: rgba(255, 255, 255, 0.35); margin-top: auto; margin-bottom: auto; margin-right: 1ch; margin-left: 0.5ch; display: inline-block; transform: translateY(-1px); } .Tag--WebAPI { --background: #29b6f6; } .Tag--NodeJS { --background: rgb(130, 172, 108); } .Tag--TypeScript { --background: rgb(69, 119, 192); color: white; } .Tag--React { color: rgb(130, 216, 247); --background: #333; } .Tag--React:before { color: rgba(130, 216, 247, 0.5); content: "<" / ""; } .Tag--React:after { color: rgba(130, 216, 247, 0.5); content: ">" / ""; } .Tag--Bun { --background: #e600e5; color: white; } @media (max-width: 1024px) { :root { --max-width: 100%; --horizontal-padding: 16px; --vertical-padding: 2rem; --line-height: 1.6; } main { grid-template-columns: auto; grid-template-rows: auto auto auto; } ul { padding: 0; list-style: none; } #logo-text, #HeaderInstallButton { display: none; } } .Zig { transform: translateY(15%); display: inline; vertical-align: baseline; } .CodeBlock { margin-top: 0px; margin-bottom: 0px; padding: 10px 0px; background-color: var(--gray-800); border-radius: 5px; overflow-x: scroll; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .CodeBlock::-webkit-scrollbar { display: none; /* Safari and Chrome */ } /* Memory leak debug post avoid/prefer styles */ .avoid-example > .CodeBlock { position: relative; } .avoid-example > .CodeBlock::before { content: ""; position: absolute; inset: 0; background-color: rgba(220, 38, 38, 0.08); pointer-events: none; height: 100%; z-index: 1; border: 1px solid rgb(185, 28, 28); border-radius: 0.25rem; } .dark .avoid-example > .CodeBlock::before { background-color: rgba(185, 28, 28, 0.12); } .prefer-example .CodeBlock { position: relative; } .prefer-example > .CodeBlock::before { content: ""; position: absolute; inset: 0; background-color: rgba(22, 163, 74, 0.08); pointer-events: none; height: 100%; z-index: 1; border: 1px solid rgb(22, 163, 74); border-radius: 0.25rem; } .dark .prefer-example > .CodeBlock::before { background-color: rgba(22, 163, 74, 0.12); } .CodeBlock > * { width: fit-content; min-width: 100%; } .CodeBlock .line { height: 15px; white-space: pre; } .CodeBlockShell .shiki code .line:last-child::before { content: "$ " !important; color: white; opacity: 0.5; } .CodeBlockPowershell .shiki code .line:last-child::before { content: "> " !important; color: white; opacity: 0.5; } .CodeBlockResults .shiki * { opacity: 0.8; } .CodeBlockDiff .shiki code .line::before { content: " " !important; opacity: 0.5; } .CodeBlock > div { /* border-bottom: 1px solid #525567; */ overflow: hidden; } .CodeBlock > div:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .CodeBlock > div:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom: none; } .CodeBlock .shiki { /* line-height: 20px; !important; */ line-height: 20px; padding: 3px 2.5rem 3px 1rem; border-radius: 0px; font-family: var(--monospace-font); margin-top: 0px; margin-bottom: 0px; } .CodeBlock .CopyIcon { top: -1px; } .CodeBlock + .CodeBlock { margin-top: 15px; } .CodeBlock code { font-size: inherit; } @media (max-width: 640px) { /* .CodeBlock code { */ /* font-size: 0.8em; */ /* } */ } @media (max-width: 768px) { .CodeBlock > div { border-radius: 0px !important; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } } .CodeTabs .CodeBlock { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } .CodeTabs .CodeBlock > div { border-radius: 0px !important; } .CodeTabs { border-radius: 5px; overflow: hidden; } .CodeTabs .CodeBlockTab { display: none; } /* .CodeTabsHeader { */ /* display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; font-size: 13px; padding: 0px 0rem; border-bottom: 1px solid transparent; background-color: var(--gray-800); border-top-left-radius: 5px; border-top-right-radius: 5px; color: #ffffff80; border-bottom: 1px solid #525567; */ /* } */ /* .CodeTab { */ /* cursor: pointer; */ /* text-align: center; padding: 6px 1rem; font-weight: 400; border-right: 1px solid #525567; */ /* } */ .CodeTab:hover { color: white; } .CodeTab.active { color: white; } .CodeBlockTab { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; font-size: 12px; padding: 0px 1rem 5px 1rem; margin-top: -6px; margin-bottom: 8px; border-bottom: 1px solid transparent; background-color: var(--gray-800); border-top-left-radius: 5px; border-top-right-radius: 5px; color: #ffffff80; border-bottom: 1px solid #525567; } .CodeBlockTab p { margin: 0; padding-top: 5px; padding-bottom: 5px; line-height: 18px; padding-right: 12px; } .CodeTabItem { display: none; } .CodeTabItem.active { display: block; } /* .CodeBlock:nth-child(even) .shiki { background-color: #2e3142 !important; } */ .PlusLine::before, .MinusLine::before { color: #ffffff; opacity: 0.5; left: 8px; top: -6px; position: relative; font-size: 13px; } .PlusLine::before { content: "+"; } .MinusLine::before { content: "-"; /* left: 7px; */ } .Identifier { font-family: var(--monospace-font); font-size: 1rem; color: #50fa7b !important; background-color: var(--gray-800); padding: 0.25rem; border-radius: 4px; text-decoration: none !important; } .PerformanceClaim { text-decoration: dashed underline 2px #000 !important; text-decoration-skip-ink: auto !important; text-underline-offset: 0.3rem !important; } .BarGraph.active { display: block !important; } @media (max-width: 767px) { .sm-full { margin: 0 calc(-1 * var(--horizontal-padding)); width: calc(100vw); border-radius: 0px; } } @media (max-width: 767px) { article > .CodeBlock, .Guide .CodeBlock { margin: 0 calc(-1 * var(--horizontal-padding)); width: calc( 100vw - var(--horizontal-padding) - var(--horizontal-padding) -2px ); border-radius: 0px; } .TableWrapper { margin: 0 calc(-1 * var(--horizontal-padding)); padding: 0px var(--horizontal-padding); width: calc( 100vw - var(--horizontal-padding) - var(--horizontal-padding) -2px ); border-radius: 0px; overflow-x: scroll; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .TableWrapper::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .CodeTabs { margin: 0 calc(-1 * var(--horizontal-padding)); width: calc( 100vw - var(--horizontal-padding) - var(--horizontal-padding) -2px ); border-radius: 0px; } .CodeTabs .CodeBlock { border-radius: 0px; } .CodeTabsHeader { border-top-left-radius: 0px; border-top-right-radius: 0px; overflow-x: auto; } .CodeBlock .shiki { /* padding: 24px 16px; */ white-space: pre-wrap; box-sizing: border-box; font-size: 0.9rem; } header { grid-template-columns: min-content auto; gap: 2rem; } main { padding-left: 0; padding-right: 0; text-align: left; } .Tag--Command { display: block; width: fit-content; margin-bottom: 1rem; } } .Tag--Command { display: block; width: fit-content; margin-bottom: 0.5rem; padding: 8px 12px; } img { object-fit: contain; } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .prose > * { --tw-prose-body: red !important; } /* .prose p { */ /* color: var(--gray-800); */ /* } */ .prose :where(a):not(:where([class~="not-prose"] *)) { font-weight: unset !important; } .prose hr { margin-top: 2em; margin-bottom: 2em; } .prose code { background-color: var(--gray-200); border: 1px solid var(--gray-300); padding: 2px 3px; border-radius: 0.2em; font-weight: unset !important; } .dark .prose code { background-color: var(--gray-700); border: 1px solid var(--gray-700); } .prose pre { overflow-x: hidden !important; } .prose pre code, .dark .prose pre code { background-color: unset; padding: unset; border-radius: unset; font-weight: unset; border: unset; } .prose > img { border-radius: 5px; margin: auto; } @media (max-width: 768px) { .prose > img { margin-left: calc(-1 * var(--horizontal-padding)); border-radius: 0px; max-width: none; width: 100vw; } .prose li figure { width: 100vw !important; margin-left: calc( -1 * (var(--horizontal-padding) + var(--list-item-padding) + var(--list-padding)) ) !important; } .prose > p > img { border-radius: 0px; } .prose .details { margin-left: calc(-1 * var(--horizontal-padding)); border-radius: 0px; max-width: none; width: 100vw; } } .prose li > * { margin-top: 2px !important; margin-bottom: 2px !important; } .prose li p { padding-bottom: 8px; line-height: 1.5; } .prose li > *:last-child { margin-bottom: 1em; } /* .prose figure { width: 100%; margin: auto; } */ .prose figure img { margin-top: 0px !important; margin-bottom: 0px !important; margin-left: auto; margin-right: auto; } .prose li img, .prose li figure { margin: unset; margin-top: 1em; } .prose details { margin-top: 1.25em; margin-bottom: 1.25em; border-left: 1px solid var(--gray-300); padding-left: 15px; } .prose summary::marker { display: none; } .prose :where(code):not(:where([class~="not-prose"] *)):before, .prose :where(code):not(:where([class~="not-prose"] *)):after { content: unset !important; } .prose :where(ul):not(:where([class~="not-prose"] *)) { list-style-type: square !important; padding-left: var(--list-padding) !important; } .prose :where(ul > li):not(:where([class~="not-prose"] *)) { padding-left: var(--list-item-padding) !important; } #blog-post .prose h1 { padding-bottom: 6px; border-bottom: 1px solid #00000018; } #blog-post .prose h2 { padding-bottom: 3px; border-bottom: 1px solid #00000018; } .prose :where(ol):not(:where([class~="not-prose"] *)) { padding-left: 1.22em !important; } .prose :where(ol > li):not(:where([class~="not-prose"] *)) { padding-left: var(--list-item-padding) !important; } .prose :where(blockquote):not(:where([class~="not-prose"] *)) { border-left: 1px solid var(--gray-200); font-weight: normal; } .prose a:hover { transform: none; color: var(--link-hover-color); } .dark .prose a { color: inherit; } .dark .prose a:hover { color: inherit; } .expand-on-hover > * { transition: transform 0.1s linear; } .expand-on-hover:hover > * { transform: scale(1.06, 1.06); transform-origin: center; } .prose .anchored:hover a { transform: none; color: inherit; } .prose h1 { border-bottom: 1px solid var(--gray-200); padding-bottom: 8px; } .prose h2 { border-bottom: 1px solid var(--gray-200); padding-bottom: 4px; } .dark .prose h1, .dark .prose h2 { border-color: var(--gray-700); color: var(--gray-200); } .prose h5, .prose h6 { font-weight: bold; } /* .prose img { border-radius: 5px; } */ @media (max-width: 640px) { .prose > img { height: auto; width: 100vw; } } @media (min-width: 640px) { .prose img { border-radius: 5px; } } .callout > *:first-child { margin-top: 0; } .callout > *:last-child { margin-bottom: 0; } .callout > figure { margin-top: 1.25rem; } .anchored:hover a:last-child::after { content: "#"; opacity: 0.3; margin-left: 0.25em; font-weight: normal; cursor: pointer; /* position: "absolute"; */ } .rawhtml > * { margin: auto; } /* #doc-menu code { background-color: var(--gray-100); border: 1px solid var(--gray-300); padding: 1px 3px; border-radius: 0.2em; font-weight: unset !important; } */ .BlogCard:first-child .BlogCardContents { border-top-color: transparent; } .BlogCard:hover .BlogCardContents { border-top-color: transparent; } .BlogCard:hover + .BlogCard .BlogCardContents { border-top-color: transparent; } .Params { margin: 0; } .Params:nth-child(even) .ParamsName, .Params:nth-child(even) .ParamsContent, .Params:nth-child(even) .ParamsSpacerLast { background-color: var(--gray-100); } .Params .ParamsContent > *:first-child { margin-top: 0; } .Params .ParamsContent > *:last-child { margin-bottom: 0; } .dark .anchor-menu code { color: var(--gray-400) !important; text-decoration: none; } .readme h1:not(:first-of-type) { padding-top: 70px; } @keyframes loaderbar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .text-outline { text-shadow: 1px 1px 3px black; } a.link-always-underline { text-decoration: underline; text-decoration-thickness: 0.1rem; } .HorizontalGraphItem-grid { margin-top: 4px; display: grid; grid-template-columns: auto min-content min-content; overflow: hidden; grid-template-rows: 36px; } .HorizontalGraphItem-grid .counter { align-items: center; } /* .Crumb .CodeBlock { height: 0px; overflow: visible; margin-left: 500px; } */ @media (min-width: 1024px) { .crumb-left > p:first-child { margin-top: 8px; } .crumb-right { /* max-width: 600px; */ overflow: auto; } .crumb-left { min-width: 350px; } .crumb-left > h1, .crumb-left > h2, .crumb-left > h3 { margin-top: 0; } .crumb-right > figure { margin-top: 0px; margin-bottom: 0px; } } .chakra-portal { --inkeep-colors-grayDark-600: #282a35 !important; } .inline-icon { margin-top: 0 !important; margin-bottom: 0 !important; display: inline; } @media (max-width: 580px) { /* TODO: figure out how to avoid this */ .mobile-flex-wrap { flex-wrap: wrap; } } </style><link rel="canonical" href="https://bun.sh/docs/bundler/css"/><style>*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.bottom-0{bottom:0}.bottom-\[calc\(100\%\+8px\)\]{bottom:calc(100% + 8px)}.left-0{left:0}.left-1\/2{left:50%}.right-4{right:1rem}.right-\[6px\]{right:6px}.top-0{top:0}.top-24{top:6rem}.top-\[-22px\]{top:-22px}.top-\[-2px\]{top:-2px}.top-\[-80px\]{top:-80px}.top-\[10px\]{top:10px}.top-\[var\(--navbar-height\)\]{top:var(--navbar-height)}.top-full{top:100%}.z-10{z-index:10}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[9999\]{z-index:9999}.col-span-1{grid-column:span 1/span 1}.col-span-full{grid-column:1/-1}.col-start-2{grid-column-start:2}.row-span-full{grid-row:1/-1}.row-start-2{grid-row-start:2}.row-end-\[-1\]{grid-row-end:-1}.-m-1{margin:-.25rem}.-m-2{margin:-.5rem}.m-0{margin:0}.m-\[-2px\]{margin:-2px}.m-\[0\]{margin:0}.m-auto{margin:auto}.-mx-4{margin-left:-1rem;margin-right:-1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-\[18px\]{margin-left:18px;margin-right:18px}.mx-\[calc\(-1\*var\(--horizontal-padding\)\)\]{margin-left:calc(var(--horizontal-padding)*-1);margin-right:calc(var(--horizontal-padding)*-1)}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-\[1\.25em\]{margin-top:1.25em;margin-bottom:1.25em}.my-\[10px\]{margin-top:10px;margin-bottom:10px}.-mt-\[1px\]{margin-top:-1px}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[12px\]{margin-bottom:12px}.mb-\[1rem\]{margin-bottom:1rem}.mb-\[2rem\]{margin-bottom:2rem}.mb-\[3px\]{margin-bottom:3px}.mb-\[4px\]{margin-bottom:4px}.mb-\[6px\]{margin-bottom:6px}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-\[-0\.9em\]{margin-left:-.9em}.ml-\[-18px\]{margin-left:-18px}.ml-\[-2px\]{margin-left:-2px}.ml-\[-3px\]{margin-left:-3px}.ml-\[-4px\]{margin-left:-4px}.ml-\[10px\]{margin-left:10px}.ml-\[1px\]{margin-left:1px}.ml-\[6px\]{margin-left:6px}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mr-\[-12px\]{margin-right:-12px}.mr-\[-6px\]{margin-right:-6px}.mr-\[10px\]{margin-right:10px}.mr-\[9px\]{margin-right:9px}.mr-auto{margin-right:auto}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-\[0\.5rem\]{margin-top:.5rem}.mt-\[0\.857em\]{margin-top:.857em}.mt-\[1\.25em\]{margin-top:1.25em}.mt-\[10px\]{margin-top:10px}.mt-\[150px\]{margin-top:150px}.mt-\[1px\]{margin-top:1px}.mt-\[20px\]{margin-top:20px}.mt-\[4px\]{margin-top:4px}.mt-\[80px\]{margin-top:80px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-32{height:8rem}.h-36{height:9rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-\[100px\]{height:100px}.h-\[10px\]{height:10px}.h-\[125px\]{height:125px}.h-\[13px\]{height:13px}.h-\[140px\]{height:140px}.h-\[15px\]{height:15px}.h-\[17px\]{height:17px}.h-\[18px\]{height:18px}.h-\[1px\]{height:1px}.h-\[20px\]{height:20px}.h-\[22px\]{height:22px}.h-\[24px\]{height:24px}.h-\[25px\]{height:25px}.h-\[26px\]{height:26px}.h-\[27px\]{height:27px}.h-\[30px\]{height:30px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[40px\]{height:40px}.h-\[50px\]{height:50px}.h-\[56px\]{height:56px}.h-\[60\.5px\]{height:60.5px}.h-\[60px\]{height:60px}.h-\[62px\]{height:62px}.h-\[63px\]{height:63px}.h-\[80px\]{height:80px}.h-\[85px\]{height:85px}.h-\[calc\(100vh-var\(--navbar-height\)\)\]{height:calc(100vh - var(--navbar-height))}.h-\[calc\(200px\*var\(--level\)\)\]{height:calc(200px*var(--level))}.h-\[var\(--navbar-height\)\]{height:var(--navbar-height)}.h-full{height:100%}.h-min{height:-moz-min-content;height:min-content}.h-screen{height:100vh}.max-h-\[calc\(100vh-10rem\)\]{max-height:calc(100vh - 10rem)}.min-h-\[100vh\]{min-height:100vh}.min-h-\[200px\]{min-height:200px}.min-h-\[70\%\]{min-height:70%}.min-h-\[calc\(100vh-600px\)\]{min-height:calc(100vh - 600px)}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-28{width:7rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-\[100px\]{width:100px}.w-\[10px\]{width:10px}.w-\[120px\]{width:120px}.w-\[15px\]{width:15px}.w-\[16px\]{width:16px}.w-\[17px\]{width:17px}.w-\[180px\]{width:180px}.w-\[18px\]{width:18px}.w-\[200px\]{width:200px}.w-\[20px\]{width:20px}.w-\[21px\]{width:21px}.w-\[22px\]{width:22px}.w-\[24px\]{width:24px}.w-\[250px\]{width:250px}.w-\[25px\]{width:25px}.w-\[26px\]{width:26px}.w-\[300px\]{width:300px}.w-\[30px\]{width:30px}.w-\[35px\]{width:35px}.w-\[4px\]{width:4px}.w-\[50px\]{width:50px}.w-\[8px\]{width:8px}.w-\[var\(--primary\)\]{width:var(--primary)}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.min-w-\[12px\]{min-width:12px}.min-w-\[200px\]{min-width:200px}.min-w-\[250px\]{min-width:250px}.min-w-\[300px\]{min-width:300px}.min-w-\[400px\]{min-width:400px}.max-w-4xl{max-width:56rem}.max-w-\[1200px\]{max-width:1200px}.max-w-\[400px\]{max-width:400px}.max-w-\[55px\]{max-width:55px}.max-w-\[600px\]{max-width:600px}.max-w-\[640px\]{max-width:640px}.max-w-\[700px\]{max-width:700px}.max-w-\[750px\]{max-width:750px}.max-w-\[80\%\]{max-width:80%}.max-w-\[800px\]{max-width:800px}.max-w-\[90rem\]{max-width:90rem}.max-w-none{max-width:none}.max-w-screen-lg{max-width:1024px}.max-w-screen-md{max-width:768px}.max-w-screen-sm{max-width:640px}.max-w-screen-xl{max-width:1280px}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-\[10\]{flex:10}.flex-\[1\]{flex:1}.flex-\[2\]{flex:2}.flex-\[3\]{flex:3}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-auto{cursor:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.list-none{list-style-type:none}.break-inside-avoid{-moz-column-break-inside:avoid;break-inside:avoid}.break-inside-avoid-column{-moz-column-break-inside:avoid;break-inside:avoid-column}.grid-flow-row{grid-auto-flow:row}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.grid-cols-\[minmax\(130px\2c _1fr\)_65px_65px_65px\]{grid-template-columns:minmax(130px,1fr) 65px 65px 65px}.grid-cols-\[minmax\(auto\2c var\(--max-width\)\)\]{grid-template-columns:minmax(auto,var(--max-width))}.grid-cols-\[repeat\(3\2c 1fr\)\]{grid-template-columns:repeat(3,1fr)}.grid-cols-\[repeat\(var\(--count\)\2c 1fr\)\]{grid-template-columns:repeat(var(--count),1fr)}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[0px\]{gap:0}.gap-\[12px\]{gap:12px}.gap-\[13px\]{gap:13px}.gap-\[15px\]{gap:15px}.gap-\[20px\]{gap:20px}.gap-\[25px\]{gap:25px}.gap-\[35px\]{gap:35px}.gap-\[40px\]{gap:40px}.gap-\[5px\]{gap:5px}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-scroll{overflow-y:scroll}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[0\.2em\]{border-radius:.2em}.rounded-\[2px\]{border-radius:2px}.rounded-\[30px\]{border-radius:30px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[5px\]{border-radius:5px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-tl-none{border-top-left-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\[0px\]{border-width:0}.border-\[2px\]{border-width:2px}.border-x-0{border-left-width:0;border-right-width:0}.border-y-2{border-top-width:2px;border-bottom-width:2px}.\!border-b-0{border-bottom-width:0!important}.border-b,.border-b-\[1px\]{border-bottom-width:1px}.border-b-\[3px\]{border-bottom-width:3px}.border-l,.border-l-\[1px\]{border-left-width:1px}.border-r,.border-r-\[1px\]{border-right-width:1px}.border-t{border-top-width:1px}.border-t-2,.border-t-\[2px\]{border-top-width:2px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#00000010\]{border-color:#00000010}.border-\[\#EE81C3\]{--tw-border-opacity:1;border-color:rgb(238 129 195/var(--tw-border-opacity,1))}.border-\[var\(--gray-300\)\]{border-color:var(--gray-300)}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-200\/80{border-color:rgba(229,231,235,.8)}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity,1))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(79 86 102/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(59 63 75/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(40 42 54/var(--tw-border-opacity,1))}.border-gray-800\/50{border-color:rgba(40,42,54,.5)}.border-green-500\/30{border-color:rgba(34,197,94,.3)}.border-pink-400{--tw-border-opacity:1;border-color:rgb(244 114 182/var(--tw-border-opacity,1))}.border-pink-500\/20{border-color:rgba(236,72,153,.2)}.border-transparent{border-color:transparent}.border-b-gray-200{--tw-border-opacity:1;border-bottom-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-b-gray-700{--tw-border-opacity:1;border-bottom-color:rgb(59 63 75/var(--tw-border-opacity,1))}.border-b-gray-800{--tw-border-opacity:1;border-bottom-color:rgb(40 42 54/var(--tw-border-opacity,1))}.border-t-gray-200{--tw-border-opacity:1;border-top-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-t-gray-800{--tw-border-opacity:1;border-top-color:rgb(40 42 54/var(--tw-border-opacity,1))}.bg-\[\#00000010\]{background-color:#00000010}.bg-\[\#00000018\]{background-color:#00000018}.bg-\[\#00000020\]{background-color:#00000020}.bg-\[\#00ff0020\]{background-color:#00ff0020}.bg-\[\#131414\]{--tw-bg-opacity:1;background-color:rgb(19 20 20/var(--tw-bg-opacity,1))}.bg-\[\#1a1a1a\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\[\#EE81C3\]{--tw-bg-opacity:1;background-color:rgb(238 129 195/var(--tw-bg-opacity,1))}.bg-\[\#ff000020\]{background-color:#ff000020}.bg-\[rgb\(249\2c 241\2c 225\)\]{--tw-bg-opacity:1;background-color:rgb(249 241 225/var(--tw-bg-opacity,1))}.bg-\[rgb\(93\2c 89\2c 134\)\]{--tw-bg-opacity:1;background-color:rgb(93 89 134/var(--tw-bg-opacity,1))}.bg-\[rgba\(var\(--pink-400\)\2c 0\.8\)\]{background-color:rgba(var(--pink-400),.8)}.bg-\[var\(--gray-200\)\]{background-color:var(--gray-200)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(79 86 102/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(59 63 75/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(40 42 54/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(40,42,54,.5)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(20 21 26/var(--tw-bg-opacity,1))}.bg-gray-950{--tw-bg-opacity:1;background-color:rgb(13 14 17/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-500\/20{background-color:rgba(34,197,94,.2)}.bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity,1))}.bg-pink-400{--tw-bg-opacity:1;background-color:rgb(244 114 182/var(--tw-bg-opacity,1))}.bg-pink-500\/10{background-color:rgba(236,72,153,.1)}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/20{background-color:rgba(239,68,68,.2)}.bg-stone-100{--tw-bg-opacity:1;background-color:rgb(245 245 244/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-yellow-500\/20{background-color:rgba(234,179,8,.2)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[var\(--purple-500\)\]{--tw-gradient-from:var(--purple-500) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-800{--tw-gradient-from:#282a36 var(--tw-gradient-from-position);--tw-gradient-to:rgba(40,42,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pink-200\/50{--tw-gradient-from:rgba(251,207,232,.5) var(--tw-gradient-from-position);--tw-gradient-to:rgba(251,207,232,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-gray-800{--tw-gradient-to:rgba(40,42,54,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#282a36 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-pink-500\/50{--tw-gradient-to:rgba(236,72,153,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(236,72,153,.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[var\(--purple-700\)\]{--tw-gradient-to:var(--purple-700) var(--tw-gradient-to-position)}.to-gray-800{--tw-gradient-to:#282a36 var(--tw-gradient-to-position)}.to-purple-200\/50{--tw-gradient-to:rgba(233,213,255,.5) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-8{padding:2rem}.p-\[0\]{padding:0}.p-\[15px\]{padding:15px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[12\.5px\]{padding-left:12.5px;padding-right:12.5px}.px-\[12px\]{padding-left:12px;padding-right:12px}.px-\[15px\]{padding-left:15px;padding-right:15px}.px-\[16px\]{padding-left:16px;padding-right:16px}.px-\[17px\]{padding-left:17px;padding-right:17px}.px-\[1rem\]{padding-left:1rem;padding-right:1rem}.px-\[20px\]{padding-left:20px;padding-right:20px}.px-\[25px\]{padding-left:25px;padding-right:25px}.px-\[36px\]{padding-left:36px;padding-right:36px}.px-\[3px\]{padding-left:3px;padding-right:3px}.px-\[4px\]{padding-left:4px;padding-right:4px}.px-\[5px\]{padding-left:5px;padding-right:5px}.px-\[6px\]{padding-left:6px;padding-right:6px}.px-\[7px\]{padding-left:7px;padding-right:7px}.px-\[8px\]{padding-left:8px;padding-right:8px}.px-\[var\(--horizontal-padding\)\]{padding-left:var(--horizontal-padding);padding-right:var(--horizontal-padding)}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[100px\]{padding-top:100px;padding-bottom:100px}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.py-\[12px\]{padding-top:12px;padding-bottom:12px}.py-\[13px\]{padding-top:13px;padding-bottom:13px}.py-\[14px\]{padding-top:14px;padding-bottom:14px}.py-\[15px\]{padding-top:15px;padding-bottom:15px}.py-\[16px\]{padding-top:16px;padding-bottom:16px}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-\[20px\]{padding-top:20px;padding-bottom:20px}.py-\[24px\]{padding-top:24px;padding-bottom:24px}.py-\[2px\]{padding-top:2px;padding-bottom:2px}.py-\[3px\]{padding-top:3px;padding-bottom:3px}.py-\[4px\]{padding-top:4px;padding-bottom:4px}.py-\[5px\]{padding-top:5px;padding-bottom:5px}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.py-\[70px\]{padding-top:70px;padding-bottom:70px}.py-\[7px\]{padding-top:7px;padding-bottom:7px}.py-\[80px\]{padding-top:80px;padding-bottom:80px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.\!pb-0{padding-bottom:0!important}.pb-0\.5{padding-bottom:.125rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pb-\[1px\]{padding-bottom:1px}.pb-\[25px\]{padding-bottom:25px}.pb-\[4px\]{padding-bottom:4px}.pb-\[50px\]{padding-bottom:50px}.pb-\[5px\]{padding-bottom:5px}.pb-\[5rem\]{padding-bottom:5rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pl-\[28px\]{padding-left:28px}.pl-\[40px\]{padding-left:40px}.pl-\[52px\]{padding-left:52px}.pl-\[5px\]{padding-left:5px}.pl-\[9px\]{padding-left:9px}.pr-3{padding-right:.75rem}.pr-8{padding-right:2rem}.pr-\[4px\]{padding-right:4px}.pr-\[6px\]{padding-right:6px}.pr-\[9px\]{padding-right:9px}.pt-12{padding-top:3rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-\[0px\]{padding-top:0}.pt-\[1px\]{padding-top:1px}.pt-\[3px\]{padding-top:3px}.pt-\[45px\]{padding-top:45px}.pt-\[5rem\]{padding-top:5rem}.pt-\[6px\]{padding-top:6px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-start{text-align:start}.align-middle{vertical-align:middle}.align-text-bottom{vertical-align:text-bottom}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.\!text-\[100\%\]{font-size:100%!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[0\.875em\]{font-size:.875em}.text-\[0\.9em\]{font-size:.9em}.text-\[0\.9rem\]{font-size:.9rem}.text-\[1\.3rem\]{font-size:1.3rem}.text-\[1\.5rem\]{font-size:1.5rem}.text-\[10px\]{font-size:10px}.text-\[130px\]{font-size:130px}.text-\[13pt\]{font-size:13pt}.text-\[13px\]{font-size:13px}.text-\[14pt\]{font-size:14pt}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[1rem\]{font-size:1rem}.text-\[2\.25em\]{font-size:2.25em}.text-\[24pt\]{font-size:24pt}.text-\[28pt\]{font-size:28pt}.text-\[36pt\]{font-size:36pt}.text-\[85\%\]{font-size:85%}.text-\[92\%\]{font-size:92%}.text-\[93\%\]{font-size:93%}.text-\[95\%\]{font-size:95%}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\[400\]{font-weight:400}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-6{line-height:1.5rem}.leading-\[16px\]{line-height:16px}.leading-\[20px\]{line-height:20px}.leading-\[24px\]{line-height:24px}.leading-\[32px\]{line-height:32px}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.\!text-gray-500{--tw-text-opacity:1!important;color:rgb(107 114 128/var(--tw-text-opacity,1))!important}.text-\[\#111827\]{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-\[\#ffffff80\]{color:#ffffff80}.text-\[var\(--tw-prose-captions\)\]{color:var(--tw-prose-captions)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-300\/90{color:rgba(147,197,253,.9)}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(79 86 102/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(59 63 75/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(40 42 54/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(20 21 26/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-700\/90{color:rgba(21,128,61,.9)}.text-neutral-800\/50{color:rgba(38,38,38,.5)}.text-pink-400{--tw-text-opacity:1;color:rgb(244 114 182/var(--tw-text-opacity,1))}.text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.text-pink-800{--tw-text-opacity:1;color:rgb(157 23 77/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700\/90{color:rgba(185,28,28,.9)}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/90{color:hsla(0,0%,100%,.9)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow-\[2px_2px_0px_rgba\(var\(--pink-800\)\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[2px_2px_0px_rgba\(var\(--pink-800\)\)\]{--tw-drop-shadow:drop-shadow(2px 2px 0px rgba(var(--pink-800)))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter-none{filter:none}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.\[-webkit-tap-highlight-color\:transparent\]{-webkit-tap-highlight-color:transparent}.dark\:prose-invert:is(.dark *){--tw-prose-body:var(--tw-prose-invert-body);--tw-prose-headings:var(--tw-prose-invert-headings);--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:var(--tw-prose-invert-links);--tw-prose-bold:var(--tw-prose-invert-bold);--tw-prose-counters:var(--tw-prose-invert-counters);--tw-prose-bullets:var(--tw-prose-invert-bullets);--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:var(--tw-prose-invert-quotes);--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}.first\:pt-0:first-child{padding-top:0}.last\:mb-0:last-child{margin-bottom:0}.last\:border-0:last-child{border-width:0}.visited\:text-pink-900:visited{color:#831843}.hover\:transform-none:hover{transform:none}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.hover\:border-gray-700:hover{--tw-border-opacity:1;border-color:rgb(59 63 75/var(--tw-border-opacity,1))}.hover\:border-pink-900:hover{--tw-border-opacity:1;border-color:rgb(131 24 67/var(--tw-border-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(59 63 75/var(--tw-bg-opacity,1))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(40 42 54/var(--tw-bg-opacity,1))}.hover\:bg-gray-800\/20:hover{background-color:rgba(40,42,54,.2)}.hover\:bg-gray-800\/30:hover{background-color:rgba(40,42,54,.3)}.hover\:bg-gray-800\/60:hover{background-color:rgba(40,42,54,.6)}.hover\:bg-gradient-to-br:hover{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.hover\:text-gray-100:hover{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.hover\:text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(40 42 54/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(20 21 26/var(--tw-text-opacity,1))}.hover\:text-pink-900:hover{--tw-text-opacity:1;color:rgb(131 24 67/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-100:hover{opacity:1}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.group:hover .group-hover\:bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.group:hover .group-hover\:text-gray-700{--tw-text-opacity:1;color:rgb(59 63 75/var(--tw-text-opacity,1))}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100,.group\/tooltip:hover .group-hover\/tooltip\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-30{opacity:.3}.dark\:block:is(.dark *){display:block}.dark\:inline-flex:is(.dark *){display:inline-flex}.dark\:hidden:is(.dark *){display:none}.dark\:divide-gray-800:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(40 42 54/var(--tw-divide-opacity,1))}.dark\:border:is(.dark *){border-width:1px}.dark\:border-\[0px\]:is(.dark *){border-width:0}.dark\:border-\[\#ffffff18\]:is(.dark *){border-color:#ffffff18}.dark\:border-gray-200:is(.dark *){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.dark\:border-gray-400:is(.dark *){--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(79 86 102/var(--tw-border-opacity,1))}.dark\:border-gray-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(59 63 75/var(--tw-border-opacity,1))}.dark\:border-gray-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(40 42 54/var(--tw-border-opacity,1))}.dark\:border-gray-800\/80:is(.dark *){border-color:rgba(40,42,54,.8)}.dark\:border-gray-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(20 21 26/var(--tw-border-opacity,1))}.dark\:border-b-gray-900:is(.dark *){--tw-border-opacity:1;border-bottom-color:rgb(20 21 26/var(--tw-border-opacity,1))}.dark\:border-t-gray-900:is(.dark *){--tw-border-opacity:1;border-top-color:rgb(20 21 26/var(--tw-border-opacity,1))}.dark\:bg-\[\#ffffff10\]:is(.dark *){background-color:#ffffff10}.dark\:bg-\[var\(--gray-700\)\]:is(.dark *){background-color:var(--gray-700)}.dark\:bg-black\/\[0\.96\]:is(.dark *){background-color:rgba(0,0,0,.96)}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(40 42 54/var(--tw-bg-opacity,1))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(20 21 26/var(--tw-bg-opacity,1))}.dark\:bg-gray-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(13 14 17/var(--tw-bg-opacity,1))}.dark\:bg-green-900\/40:is(.dark *){background-color:rgba(20,83,45,.4)}.dark\:bg-red-900\/40:is(.dark *){background-color:rgba(127,29,29,.4)}.dark\:from-pink-500\/10:is(.dark *){--tw-gradient-from:rgba(236,72,153,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(236,72,153,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:to-purple-500\/10:is(.dark *){--tw-gradient-to:rgba(168,85,247,.1) var(--tw-gradient-to-position)}.dark\:px-\[12px\]:is(.dark *){padding-left:12px;padding-right:12px}.dark\:py-\[7px\]:is(.dark *){padding-top:7px;padding-bottom:7px}.dark\:text-blue-400:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.dark\:text-cyan-400:is(.dark *){--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-50:is(.dark *){--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-gray-600:is(.dark *){--tw-text-opacity:1;color:rgb(79 86 102/var(--tw-text-opacity,1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.dark\:text-purple-400:is(.dark *){--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-white\/90:is(.dark *){color:hsla(0,0%,100%,.9)}.dark\:opacity-60:is(.dark *){opacity:.6}.dark\:visited\:text-gray-400:visited:is(.dark *){color:#9ca3af}.dark\:hover\:border-gray-400:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.dark\:hover\:border-gray-500:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity,1))}.dark\:hover\:border-gray-600:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(79 86 102/var(--tw-border-opacity,1))}.hover\:dark\:border-pink-900:is(.dark *):hover{--tw-border-opacity:1;border-color:rgb(131 24 67/var(--tw-border-opacity,1))}.dark\:hover\:bg-gray-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(40 42 54/var(--tw-bg-opacity,1))}.dark\:hover\:text-gray-200:hover:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:hover\:text-gray-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:hover\:text-gray-400:hover:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.hover\:dark\:text-gray-100:is(.dark *):hover{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.group:hover .dark\:group-hover\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(79 86 102/var(--tw-border-opacity,1))}.group:hover .dark\:group-hover\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(40 42 54/var(--tw-bg-opacity,1))}.group:hover .dark\:group-hover\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}@media not all and (min-width:768px){.max-md\:-ml-\[7px\]{margin-left:-7px}.max-md\:mb-0{margin-bottom:0}.max-md\:hidden{display:none}.max-md\:h-4{height:1rem}.max-md\:w-4{width:1rem}.max-md\:flex-row{flex-direction:row}.max-md\:gap-2{gap:.5rem}}@media (min-width:640px){.sm\:mx-0{margin-left:0;margin-right:0}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:mt-0{margin-top:0}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:h-6{height:1.5rem}.sm\:h-8{height:2rem}.sm\:h-80{height:20rem}.sm\:w-6{width:1.5rem}.sm\:w-\[140px\]{width:140px}.sm\:w-\[60\%\]{width:60%}.sm\:w-\[73\%\]{width:73%}.sm\:w-auto{width:auto}.sm\:w-full{width:100%}.sm\:min-w-0{min-width:0}.sm\:max-w-\[400px\]{max-width:400px}.sm\:max-w-none{max-width:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-\[300px_1fr\]{grid-template-columns:300px 1fr}.sm\:grid-cols-\[minmax\(360px\2c _1fr\)_100px_100px_100px\]{grid-template-columns:minmax(360px,1fr) 100px 100px 100px}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:items-baseline{align-items:baseline}.sm\:justify-around{justify-content:space-around}.sm\:gap-4{gap:1rem}.sm\:gap-\[0px\]{gap:0}.sm\:rounded-\[5px\]{border-radius:5px}.sm\:rounded-lg{border-radius:.5rem}.sm\:rounded-t-\[7px\]{border-top-left-radius:7px;border-top-right-radius:7px}.sm\:border{border-width:1px}.sm\:border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-\[5px\]{padding-left:5px;padding-right:5px}.sm\:py-\[16px\]{padding-top:16px;padding-bottom:16px}.sm\:text-left{text-align:left}.sm\:text-start{text-align:start}.sm\:text-\[16pt\]{font-size:16pt}.sm\:text-\[30pt\]{font-size:30pt}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:leading-\[34px\]{line-height:34px}.dark\:sm\:border-gray-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(40 42 54/var(--tw-border-opacity,1))}}@media (min-width:768px){.md\:fixed{position:fixed}.md\:mx-0{margin-left:0;margin-right:0}.md\:my-5{margin-top:1.25rem;margin-bottom:1.25rem}.md\:mb-1{margin-bottom:.25rem}.md\:mb-16{margin-bottom:4rem}.md\:mt-3{margin-top:.75rem}.md\:mt-4{margin-top:1rem}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:table-cell{display:table-cell}.md\:hidden{display:none}.md\:h-20{height:5rem}.md\:h-7{height:1.75rem}.md\:h-\[30px\]{height:30px}.md\:h-\[80px\]{height:80px}.md\:h-auto{height:auto}.md\:max-h-none{max-height:none}.md\:min-h-\[calc\(100vh-85px\)\]{min-height:calc(100vh - 85px)}.md\:w-0{width:0}.md\:w-7{width:1.75rem}.md\:w-\[250px\]{width:250px}.md\:min-w-\[200px\]{min-width:200px}.md\:min-w-\[400px\]{min-width:400px}.md\:max-w-\[80\%\]{max-width:80%}.md\:max-w-\[800px\]{max-width:800px}.md\:max-w-screen-sm{max-width:640px}.md\:basis-1{flex-basis:0.25rem}.md\:columns-2{-moz-columns:2;column-count:2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:flex-wrap{flex-wrap:wrap}.md\:justify-between{justify-content:space-between}.md\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.md\:rounded-\[5px\]{border-radius:5px}.md\:rounded-xl{border-radius:.75rem}.md\:rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.md\:rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.md\:border{border-width:1px}.md\:border-2{border-width:2px}.md\:border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.md\:bg-transparent{background-color:transparent}.md\:p-12{padding:3rem}.md\:p-4{padding:1rem}.md\:px-0{padding-left:0;padding-right:0}.md\:px-16{padding-left:4rem;padding-right:4rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-\[var\(--horizontal-padding\)\]{padding-left:var(--horizontal-padding);padding-right:var(--horizontal-padding)}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-\[13px\]{padding-top:13px;padding-bottom:13px}.md\:py-\[140px\]{padding-top:140px;padding-bottom:140px}.md\:py-\[40px\]{padding-top:40px;padding-bottom:40px}.md\:pb-\[8rem\]{padding-bottom:8rem}.md\:pt-\[6rem\]{padding-top:6rem}.md\:pt-\[90px\]{padding-top:90px}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[32pt\]{font-size:32pt}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.dark\:md\:border-gray-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(20 21 26/var(--tw-border-opacity,1))}}@media (min-width:1024px){.lg\:block{display:block}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-\[40px\]{height:40px}.lg\:w-2\/5{width:40%}.lg\:w-auto{width:auto}.lg\:w-full{width:100%}.lg\:min-w-\[300px\]{min-width:300px}.lg\:max-w-\[1200px\]{max-width:1200px}.lg\:max-w-\[400px\]{max-width:400px}.lg\:max-w-\[700px\]{max-width:700px}.lg\:max-w-\[var\(--max-width\)\]{max-width:var(--max-width)}.lg\:columns-2{-moz-columns:2;column-count:2}.lg\:grid-cols-\[2fr_3fr\]{grid-template-columns:2fr 3fr}.lg\:grid-cols-\[minmax\(auto\2c var\(--max-width\)\)_18rem\]{grid-template-columns:minmax(auto,var(--max-width)) 18rem}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-\[20px\]{gap:20px}.lg\:gap-\[80px\]{gap:80px}.lg\:rounded-lg{border-radius:.5rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:py-\[120px\]{padding-top:120px;padding-bottom:120px}.lg\:py-\[16px\]{padding-top:16px;padding-bottom:16px}.lg\:py-\[60px\]{padding-top:60px;padding-bottom:60px}.lg\:text-center{text-align:center}.lg\:text-\[38pt\]{font-size:38pt}}@media (min-width:1280px){.xl\:ml-auto{margin-left:auto}.xl\:h-\[50px\]{height:50px}.xl\:columns-3{-moz-columns:3;column-count:3}.xl\:text-\[40pt\]{font-size:40pt}}.\[\&\.active\]\:border-pink-500.active{--tw-border-opacity:1;border-color:rgb(236 72 153/var(--tw-border-opacity,1))}.\[\&\.active\]\:text-gray-900.active{--tw-text-opacity:1;color:rgb(20 21 26/var(--tw-text-opacity,1))}.\[\&\.active\]\:text-pink-500.active{--tw-text-opacity:1;color:rgb(236 72 153/var(--tw-text-opacity,1))}.dark\:\[\&\.active\]\:text-gray-200.active:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb{border-radius:9999px}.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-300::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-400::-webkit-scrollbar-thumb:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-800:is(.dark *)::-webkit-scrollbar-thumb{--tw-bg-opacity:1;background-color:rgb(40 42 54/var(--tw-bg-opacity,1))}.dark\:hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-700:is(.dark *)::-webkit-scrollbar-thumb:hover{--tw-bg-opacity:1;background-color:rgb(59 63 75/var(--tw-bg-opacity,1))}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}.\[\&\:\:-webkit-scrollbar\]\:w-1\.5::-webkit-scrollbar{width:.375rem}.hover\:\[\&\:\:-webkit-scrollbar\]\:block::-webkit-scrollbar:hover{display:block}.\[\&\>\*\]\:m-0>*{margin:0}</style><script defer="" data-domain="bun.sh" src="https://plausible.io/js/script.js"></script><style>:target{scroll-margin-top:10px}@media (min-width:640px){:target{scroll-margin-top:75px}}</style></head><body class="min-h-[100vh] bg-gray-50 dark:bg-gray-900"><div class="grid grid-flow-row grid-cols-1 gap-[15px] md:grid-cols-2" style="display:none"></div><div class="left-0 top-0 z-[1] block h-[60px] w-screen flex-row items-center justify-center border-b-[1px] border-gray-200 bg-gray-50 text-gray-900 dark:border-gray-700 dark:bg-gray-900 md:fixed md:flex" style="height:60px"><header class="w-screen-xl flex h-full w-full flex-row items-center justify-between px-[var(--horizontal-padding)] text-center"><div class="flex flex-row"><div id="doc-page-slider-open" class="inline cursor-pointer dark:bg-gray-900"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-10 w-10 rounded-[5px] border border-gray-200 p-1 dark:border-gray-700 dark:text-gray-300 md:hidden"><path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path></svg></div><div id="doc-page-slider-menu" class="fixed left-0 top-0 z-10 h-screen w-full select-none overflow-y-scroll bg-gray-50 text-gray-700 dark:bg-gray-900 dark:text-gray-200" style="transform:translate(0px, -110vh);transition-duration:0.3s;transition-timing-function:ease-in-out"><div class="flex h-[var(--navbar-height)] w-full flex-row items-center justify-start border-b border-gray-200 px-[16px] py-[24px] text-lg dark:border-gray-700"><div id="doc-page-slider-close" class="margin-auto cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-10 w-10 rounded border border-gray-200 p-1 dark:border-gray-700 "><path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></div></div><div class="h-6"></div><div class="flex w-full flex-row justify-center gap-2 px-6"><a class="block w-full flex-1 rounded-lg border border-gray-300 bg-gray-100 px-2 py-2 text-center text-lg font-medium hover:no-underline dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" href="/docs">Docs</a><a class="block w-full flex-1 rounded-lg border border-gray-300 bg-gray-100 px-2 py-2 text-center text-lg font-medium hover:no-underline dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" href="/guides">Guides</a><a class="block w-full flex-1 rounded-lg border border-gray-300 bg-gray-100 px-2 py-2 text-center text-lg font-medium hover:no-underline dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" href="/blog">Blog</a><a class="block w-full flex-1 rounded-lg border border-gray-300 bg-gray-100 px-2 py-2 text-center text-lg font-medium hover:no-underline dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" href="https://bun.sh/discord"><div class="flex flex-row items-center justify-center gap-2"><img src="data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZGlzY29yZCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTMuNTQ1IDIuOTA3YTEzLjIyNyAxMy4yMjcgMCAwIDAtMy4yNTctMS4wMTEuMDUuMDUgMCAwIDAtLjA1Mi4wMjVjLS4xNDEuMjUtLjI5Ny41NzctLjQwNi44MzNhMTIuMTkgMTIuMTkgMCAwIDAtMy42NTggMCA4LjI1OCA4LjI1OCAwIDAgMC0uNDEyLS44MzMuMDUxLjA1MSAwIDAgMC0uMDUyLS4wMjVjLTEuMTI1LjE5NC0yLjIyLjUzNC0zLjI1NyAxLjAxMWEuMDQxLjA0MSAwIDAgMC0uMDIxLjAxOEMuMzU2IDYuMDI0LS4yMTMgOS4wNDcuMDY2IDEyLjAzMmMuMDAxLjAxNC4wMS4wMjguMDIxLjAzN2ExMy4yNzYgMTMuMjc2IDAgMCAwIDMuOTk1IDIuMDIuMDUuMDUgMCAwIDAgLjA1Ni0uMDE5Yy4zMDgtLjQyLjU4Mi0uODYzLjgxOC0xLjMyOWEuMDUuMDUgMCAwIDAtLjAxLS4wNTkuMDUxLjA1MSAwIDAgMC0uMDE4LS4wMTEgOC44NzUgOC44NzUgMCAwIDEtMS4yNDgtLjU5NS4wNS4wNSAwIDAgMS0uMDItLjA2Ni4wNTEuMDUxIDAgMCAxIC4wMTUtLjAxOWMuMDg0LS4wNjMuMTY4LS4xMjkuMjQ4LS4xOTVhLjA1LjA1IDAgMCAxIC4wNTEtLjAwN2MyLjYxOSAxLjE5NiA1LjQ1NCAxLjE5NiA4LjA0MSAwYS4wNTIuMDUyIDAgMCAxIC4wNTMuMDA3Yy4wOC4wNjYuMTY0LjEzMi4yNDguMTk1YS4wNTEuMDUxIDAgMCAxLS4wMDQuMDg1IDguMjU0IDguMjU0IDAgMCAxLTEuMjQ5LjU5NC4wNS4wNSAwIDAgMC0uMDMuMDMuMDUyLjA1MiAwIDAgMCAuMDAzLjA0MWMuMjQuNDY1LjUxNS45MDkuODE3IDEuMzI5YS4wNS4wNSAwIDAgMCAuMDU2LjAxOSAxMy4yMzUgMTMuMjM1IDAgMCAwIDQuMDAxLTIuMDIuMDQ5LjA0OSAwIDAgMCAuMDIxLS4wMzdjLjMzNC0zLjQ1MS0uNTU5LTYuNDQ5LTIuMzY2LTkuMTA2YS4wMzQuMDM0IDAgMCAwLS4wMi0uMDE5Wm0tOC4xOTggNy4zMDdjLS43ODkgMC0xLjQzOC0uNzI0LTEuNDM4LTEuNjEyIDAtLjg4OS42MzctMS42MTMgMS40MzgtMS42MTMuODA3IDAgMS40NS43MyAxLjQzOCAxLjYxMyAwIC44ODgtLjYzNyAxLjYxMi0xLjQzOCAxLjYxMlptNS4zMTYgMGMtLjc4OCAwLTEuNDM4LS43MjQtMS40MzgtMS42MTIgMC0uODg5LjYzNy0xLjYxMyAxLjQzOC0xLjYxMy44MDcgMCAxLjQ1MS43MyAxLjQzOCAxLjYxMyAwIC44ODgtLjYzMSAxLjYxMi0xLjQzOCAxLjYxMloiLz4KPC9zdmc+" alt="Discord logo" class="block h-[26px] dark:hidden"/><img src="data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiIGNsYXNzPSJiaSBiaS1kaXNjb3JkIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0xMy41NDUgMi45MDdhMTMuMjI3IDEzLjIyNyAwIDAgMC0zLjI1Ny0xLjAxMS4wNS4wNSAwIDAgMC0uMDUyLjAyNWMtLjE0MS4yNS0uMjk3LjU3Ny0uNDA2LjgzM2ExMi4xOSAxMi4xOSAwIDAgMC0zLjY1OCAwIDguMjU4IDguMjU4IDAgMCAwLS40MTItLjgzMy4wNTEuMDUxIDAgMCAwLS4wNTItLjAyNWMtMS4xMjUuMTk0LTIuMjIuNTM0LTMuMjU3IDEuMDExYS4wNDEuMDQxIDAgMCAwLS4wMjEuMDE4Qy4zNTYgNi4wMjQtLjIxMyA5LjA0Ny4wNjYgMTIuMDMyYy4wMDEuMDE0LjAxLjAyOC4wMjEuMDM3YTEzLjI3NiAxMy4yNzYgMCAwIDAgMy45OTUgMi4wMi4wNS4wNSAwIDAgMCAuMDU2LS4wMTljLjMwOC0uNDIuNTgyLS44NjMuODE4LTEuMzI5YS4wNS4wNSAwIDAgMC0uMDEtLjA1OS4wNTEuMDUxIDAgMCAwLS4wMTgtLjAxMSA4Ljg3NSA4Ljg3NSAwIDAgMS0xLjI0OC0uNTk1LjA1LjA1IDAgMCAxLS4wMi0uMDY2LjA1MS4wNTEgMCAwIDEgLjAxNS0uMDE5Yy4wODQtLjA2My4xNjgtLjEyOS4yNDgtLjE5NWEuMDUuMDUgMCAwIDEgLjA1MS0uMDA3YzIuNjE5IDEuMTk2IDUuNDU0IDEuMTk2IDguMDQxIDBhLjA1Mi4wNTIgMCAwIDEgLjA1My4wMDdjLjA4LjA2Ni4xNjQuMTMyLjI0OC4xOTVhLjA1MS4wNTEgMCAwIDEtLjAwNC4wODUgOC4yNTQgOC4yNTQgMCAwIDEtMS4yNDkuNTk0LjA1LjA1IDAgMCAwLS4wMy4wMy4wNTIuMDUyIDAgMCAwIC4wMDMuMDQxYy4yNC40NjUuNTE1LjkwOS44MTcgMS4zMjlhLjA1LjA1IDAgMCAwIC4wNTYuMDE5IDEzLjIzNSAxMy4yMzUgMCAwIDAgNC4wMDEtMi4wMi4wNDkuMDQ5IDAgMCAwIC4wMjEtLjAzN2MuMzM0LTMuNDUxLS41NTktNi40NDktMi4zNjYtOS4xMDZhLjAzNC4wMzQgMCAwIDAtLjAyLS4wMTlabS04LjE5OCA3LjMwN2MtLjc4OSAwLTEuNDM4LS43MjQtMS40MzgtMS42MTIgMC0uODg5LjYzNy0xLjYxMyAxLjQzOC0xLjYxMy44MDcgMCAxLjQ1LjczIDEuNDM4IDEuNjEzIDAgLjg4OC0uNjM3IDEuNjEyLTEuNDM4IDEuNjEyWm01LjMxNiAwYy0uNzg4IDAtMS40MzgtLjcyNC0xLjQzOC0xLjYxMiAwLS44ODkuNjM3LTEuNjEzIDEuNDM4LTEuNjEzLjgwNyAwIDEuNDUxLjczIDEuNDM4IDEuNjEzIDAgLjg4OC0uNjMxIDEuNjEyLTEuNDM4IDEuNjEyWiIvPgo8L3N2Zz4=" alt="Discord logo" class="mr-2 hidden h-[26px] dark:block"/><div class="text-lg font-medium">Discord</div></div></a><a class="block w-full flex-1 rounded-lg border border-gray-300 bg-gray-100 px-2 py-2 text-center text-lg font-medium hover:no-underline dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" href="https://github.com/oven-sh/bun"><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSIjMUIxRjIzIi8+Cjwvc3ZnPgo=" alt="GitHub logo" class="m-auto block h-[24px] dark:hidden"/><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K" alt="GitHub logo" class="m-auto hidden h-[24px] dark:block"/></a></div><div class="min-w-[300px] overflow-y-scroll px-8 text-left" style="min-width:300px"><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Intro</p><a href="/docs/index" slug="index" id="menu-item-index" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">What is Bun?</p></a><a href="/docs/installation" slug="installation" id="menu-item-installation" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Installation</p></a><a href="/docs/quickstart" slug="quickstart" id="menu-item-quickstart" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Quickstart</p></a><a href="/docs/typescript" slug="typescript" id="menu-item-typescript" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">TypeScript</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Templating</p><a href="/docs/cli/init" slug="cli/init" id="menu-item-cli/init" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun init</code></p></a><a href="/docs/cli/bun-create" slug="cli/bun-create" id="menu-item-cli/bun-create" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun create</code></p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Runtime</p><a href="/docs/cli/run" slug="cli/run" id="menu-item-cli/run" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun run</code></p></a><a href="/docs/runtime/loaders" slug="runtime/loaders" id="menu-item-runtime/loaders" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">File types</p></a><a href="/docs/runtime/typescript" slug="runtime/typescript" id="menu-item-runtime/typescript" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">TypeScript</p></a><a href="/docs/runtime/jsx" slug="runtime/jsx" id="menu-item-runtime/jsx" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">JSX</p></a><a href="/docs/runtime/env" slug="runtime/env" id="menu-item-runtime/env" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Environment variables</p></a><a href="/docs/runtime/bun-apis" slug="runtime/bun-apis" id="menu-item-runtime/bun-apis" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Bun APIs</p></a><a href="/docs/runtime/web-apis" slug="runtime/web-apis" id="menu-item-runtime/web-apis" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Web APIs</p></a><a href="/docs/runtime/nodejs-apis" slug="runtime/nodejs-apis" id="menu-item-runtime/nodejs-apis" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Node.js compatibility</p></a><a href="/docs/bundler/executables" slug="bundler/executables" id="menu-item-bundler/executables" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Single-file executable</p></a><a href="/docs/runtime/plugins" slug="runtime/plugins" id="menu-item-runtime/plugins" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Plugins</p></a><a href="/docs/runtime/hot" slug="runtime/hot" id="menu-item-runtime/hot" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Watch mode</p></a><a href="/docs/runtime/modules" slug="runtime/modules" id="menu-item-runtime/modules" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Module resolution</p></a><a href="/docs/runtime/autoimport" slug="runtime/autoimport" id="menu-item-runtime/autoimport" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Auto-install</p></a><a href="/docs/runtime/bunfig" slug="runtime/bunfig" id="menu-item-runtime/bunfig" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">bunfig.toml</p></a><a href="/docs/runtime/debugger" slug="runtime/debugger" id="menu-item-runtime/debugger" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Debugger</p></a><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 !dark:text-gray-600 !hover: cursor-auto !text-gray-500"><span class="opacity-80">Framework API</span><span class="ml-[6px] inline-block rounded-[2px] border border-pink-400 bg-pink-100 px-[4px] pb-[1px] pt-[0px] align-middle text-xs leading-[16px] text-pink-600 opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:opacity-60" style="font-variant:all-small-caps">SOON</span></p><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Package manager</p><a href="/docs/cli/install" slug="cli/install" id="menu-item-cli/install" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun install</code></p></a><a href="/docs/cli/add" slug="cli/add" id="menu-item-cli/add" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun add</code></p></a><a href="/docs/cli/remove" slug="cli/remove" id="menu-item-cli/remove" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun remove</code></p></a><a href="/docs/cli/update" slug="cli/update" id="menu-item-cli/update" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun update</code></p></a><a href="/docs/cli/publish" slug="cli/publish" id="menu-item-cli/publish" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun publish</code></p></a><a href="/docs/cli/outdated" slug="cli/outdated" id="menu-item-cli/outdated" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun outdated</code></p></a><a href="/docs/cli/link" slug="cli/link" id="menu-item-cli/link" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun link</code></p></a><a href="/docs/cli/pm" slug="cli/pm" id="menu-item-cli/pm" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun pm</code></p></a><a href="/docs/install/cache" slug="install/cache" id="menu-item-install/cache" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Global cache</p></a><a href="/docs/install/workspaces" slug="install/workspaces" id="menu-item-install/workspaces" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Workspaces</p></a><a href="/docs/install/lifecycle" slug="install/lifecycle" id="menu-item-install/lifecycle" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Lifecycle scripts</p></a><a href="/docs/cli/filter" slug="cli/filter" id="menu-item-cli/filter" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Filter</p></a><a href="/docs/install/lockfile" slug="install/lockfile" id="menu-item-install/lockfile" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Lockfile</p></a><a href="/docs/install/registries" slug="install/registries" id="menu-item-install/registries" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Scopes and registries</p></a><a href="/docs/install/overrides" slug="install/overrides" id="menu-item-install/overrides" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Overrides and resolutions</p></a><a href="/docs/install/patch" slug="install/patch" id="menu-item-install/patch" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Patch dependencies</p></a><a href="/docs/install/npmrc" slug="install/npmrc" id="menu-item-install/npmrc" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">.npmrc support</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Bundler</p><a href="/docs/bundler" slug="bundler" id="menu-item-bundler" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">Bun.build</code></p></a><a href="/docs/bundler/html" slug="bundler/html" id="menu-item-bundler/html" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTML & static sites</p></a><a href="/docs/bundler/css" slug="bundler/css" id="menu-item-bundler/css" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-700 font-bold dark:border-gray-400 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">CSS</p></a><a href="/docs/bundler/fullstack" slug="bundler/fullstack" id="menu-item-bundler/fullstack" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Fullstack Dev Server</p></a><a href="/docs/bundler/hmr" slug="bundler/hmr" id="menu-item-bundler/hmr" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Hot reloading</p></a><a href="/docs/bundler/loaders" slug="bundler/loaders" id="menu-item-bundler/loaders" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Loaders</p></a><a href="/docs/bundler/plugins" slug="bundler/plugins" id="menu-item-bundler/plugins" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Plugins</p></a><a href="/docs/bundler/macros" slug="bundler/macros" id="menu-item-bundler/macros" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Macros</p></a><a href="/docs/bundler/vs-esbuild" slug="bundler/vs-esbuild" id="menu-item-bundler/vs-esbuild" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">vs esbuild</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Test runner</p><a href="/docs/cli/test" slug="cli/test" id="menu-item-cli/test" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun test</code></p></a><a href="/docs/test/writing" slug="test/writing" id="menu-item-test/writing" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Writing tests</p></a><a href="/docs/test/hot" slug="test/hot" id="menu-item-test/hot" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Watch mode</p></a><a href="/docs/test/lifecycle" slug="test/lifecycle" id="menu-item-test/lifecycle" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Lifecycle hooks</p></a><a href="/docs/test/mocks" slug="test/mocks" id="menu-item-test/mocks" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Mocks</p></a><a href="/docs/test/snapshots" slug="test/snapshots" id="menu-item-test/snapshots" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Snapshots</p></a><a href="/docs/test/time" slug="test/time" id="menu-item-test/time" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Dates and times</p></a><a href="/docs/test/coverage" slug="test/coverage" id="menu-item-test/coverage" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Code coverage</p></a><a href="/docs/test/reporters" slug="test/reporters" id="menu-item-test/reporters" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Test reporters</p></a><a href="/docs/test/configuration" slug="test/configuration" id="menu-item-test/configuration" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Test configuration</p></a><a href="/docs/test/runtime-behavior" slug="test/runtime-behavior" id="menu-item-test/runtime-behavior" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Runtime behavior</p></a><a href="/docs/test/discovery" slug="test/discovery" id="menu-item-test/discovery" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Finding tests</p></a><a href="/docs/test/dom" slug="test/dom" id="menu-item-test/dom" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">DOM testing</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Package runner</p><a href="/docs/cli/bunx" slug="cli/bunx" id="menu-item-cli/bunx" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bunx</code></p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">API</p><a href="/docs/api/http" slug="api/http" id="menu-item-api/http" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTTP server</p></a><a href="/docs/api/fetch" slug="api/fetch" id="menu-item-api/fetch" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTTP client</p></a><a href="/docs/api/websockets" slug="api/websockets" id="menu-item-api/websockets" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">WebSockets</p></a><a href="/docs/api/workers" slug="api/workers" id="menu-item-api/workers" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Workers</p></a><a href="/docs/api/binary-data" slug="api/binary-data" id="menu-item-api/binary-data" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Binary data</p></a><a href="/docs/api/streams" slug="api/streams" id="menu-item-api/streams" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Streams</p></a><a href="/docs/api/sql" slug="api/sql" id="menu-item-api/sql" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">SQL</p></a><a href="/docs/api/s3" slug="api/s3" id="menu-item-api/s3" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">S3 Object Storage</p></a><a href="/docs/api/file-io" slug="api/file-io" id="menu-item-api/file-io" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">File I/O</p></a><a href="/docs/api/import-meta" slug="api/import-meta" id="menu-item-api/import-meta" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">import.meta</p></a><a href="/docs/api/sqlite" slug="api/sqlite" id="menu-item-api/sqlite" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">SQLite</p></a><a href="/docs/api/file-system-router" slug="api/file-system-router" id="menu-item-api/file-system-router" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">FileSystemRouter</p></a><a href="/docs/api/tcp" slug="api/tcp" id="menu-item-api/tcp" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">TCP sockets</p></a><a href="/docs/api/udp" slug="api/udp" id="menu-item-api/udp" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">UDP sockets</p></a><a href="/docs/api/globals" slug="api/globals" id="menu-item-api/globals" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Globals</p></a><a href="/docs/runtime/shell" slug="runtime/shell" id="menu-item-runtime/shell" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">$ Shell</p></a><a href="/docs/api/spawn" slug="api/spawn" id="menu-item-api/spawn" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Child processes</p></a><a href="/docs/api/html-rewriter" slug="api/html-rewriter" id="menu-item-api/html-rewriter" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTMLRewriter</p></a><a href="/docs/api/hashing" slug="api/hashing" id="menu-item-api/hashing" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Hashing</p></a><a href="/docs/api/console" slug="api/console" id="menu-item-api/console" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Console</p></a><a href="/docs/api/cookie" slug="api/cookie" id="menu-item-api/cookie" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Cookie</p></a><a href="/docs/api/ffi" slug="api/ffi" id="menu-item-api/ffi" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">FFI</p></a><a href="/docs/api/cc" slug="api/cc" id="menu-item-api/cc" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">C Compiler</p></a><a href="/docs/api/test" slug="api/test" id="menu-item-api/test" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Testing</p></a><a href="/docs/api/utils" slug="api/utils" id="menu-item-api/utils" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Utils</p></a><a href="/docs/api/node-api" slug="api/node-api" id="menu-item-api/node-api" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Node-API</p></a><a href="/docs/api/glob" slug="api/glob" id="menu-item-api/glob" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Glob</p></a><a href="/docs/api/dns" slug="api/dns" id="menu-item-api/dns" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">DNS</p></a><a href="/docs/api/semver" slug="api/semver" id="menu-item-api/semver" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Semver</p></a><a href="/docs/api/color" slug="api/color" id="menu-item-api/color" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Color</p></a><a href="/docs/api/transpiler" slug="api/transpiler" id="menu-item-api/transpiler" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Transpiler</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 text-md" style="font-variant:all-petite-caps">Project</p><a href="/docs/project/roadmap" slug="project/roadmap" id="menu-item-project/roadmap" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Roadmap</p></a><a href="/docs/project/benchmarking" slug="project/benchmarking" id="menu-item-project/benchmarking" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Benchmarking</p></a><a href="/docs/project/contributing" slug="project/contributing" id="menu-item-project/contributing" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Contributing</p></a><a href="/docs/project/building-windows" slug="project/building-windows" id="menu-item-project/building-windows" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Building Windows</p></a><a href="/docs/project/bindgen" slug="project/bindgen" id="menu-item-project/bindgen" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Bindgen</p></a><a href="/docs/project/licensing" slug="project/licensing" id="menu-item-project/licensing" class="no-underline hover:no-underline text-md"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">License</p></a><div class="h-[50px]" style="height:50px"></div></div><script> document.getElementById('doc-page-slider-menu').addEventListener('click', () => { setTimeout(() => { document.getElementById('doc-page-slider-menu').style.transform = 'translate(0px, -110vh)'; }, 50); }) document.getElementById('doc-page-slider-open').addEventListener('click', () => { document.getElementById('doc-page-slider-menu').style.transform = 'translate(0px, 0px)'; }); document.getElementById('doc-page-slider-close').addEventListener('click', () => { document.getElementById('doc-page-slider-menu').style.transform = 'translate(0px, -110vh)'; }); </script></div><div class="w-[16px] md:hidden"></div><a href="/" aria-label="home" class="flex flex-row items-center gap-[12px]"><img src="data:image/svg+xml;base64, PHN2ZyBpZD0iQnVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA3MCI+PHRpdGxlPkJ1biBMb2dvPC90aXRsZT48cGF0aCBpZD0iU2hhZG93IiBkPSJNNzEuMDksMjAuNzRjLS4xNi0uMTctLjMzLS4zNC0uNS0uNXMtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjUtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjVBMjYuNDYsMjYuNDYsMCwwLDEsNzUuNSwzNS43YzAsMTYuNTctMTYuODIsMzAuMDUtMzcuNSwzMC4wNS0xMS41OCwwLTIxLjk0LTQuMjMtMjguODMtMTAuODZsLjUuNS41LjUuNS41LjUuNS41LjUuNS41LjUuNUMxOS41NSw2NS4zLDMwLjE0LDY5Ljc1LDQyLDY5Ljc1YzIwLjY4LDAsMzcuNS0xMy40OCwzNy41LTMwQzc5LjUsMzIuNjksNzYuNDYsMjYsNzEuMDksMjAuNzRaIi8+PGcgaWQ9IkJvZHkiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kIiBkPSJNNzMsMzUuN2MwLDE1LjIxLTE1LjY3LDI3LjU0LTM1LDI3LjU0UzMsNTAuOTEsMywzNS43QzMsMjYuMjcsOSwxNy45NCwxOC4yMiwxM1MzMy4xOCwzLDM4LDNzOC45NCw0LjEzLDE5Ljc4LDEwQzY3LDE3Ljk0LDczLDI2LjI3LDczLDM1LjdaIiBzdHlsZT0iZmlsbDojZmJmMGRmIi8+PHBhdGggaWQ9IkJvdHRvbV9TaGFkb3ciIGRhdGEtbmFtZT0iQm90dG9tIFNoYWRvdyIgZD0iTTczLDM1LjdhMjEuNjcsMjEuNjcsMCwwLDAtLjgtNS43OGMtMi43MywzMy4zLTQzLjM1LDM0LjktNTkuMzIsMjQuOTRBNDAsNDAsMCwwLDAsMzgsNjMuMjRDNTcuMyw2My4yNCw3Myw1MC44OSw3MywzNS43WiIgc3R5bGU9ImZpbGw6I2Y2ZGVjZSIvPjxwYXRoIGlkPSJMaWdodF9TaGluZSIgZGF0YS1uYW1lPSJMaWdodCBTaGluZSIgZD0iTTI0LjUzLDExLjE3QzI5LDguNDksMzQuOTQsMy40Niw0MC43OCwzLjQ1QTkuMjksOS4yOSwwLDAsMCwzOCwzYy0yLjQyLDAtNSwxLjI1LTguMjUsMy4xMy0xLjEzLjY2LTIuMywxLjM5LTMuNTQsMi4xNS0yLjMzLDEuNDQtNSwzLjA3LTgsNC43QzguNjksMTguMTMsMywyNi42MiwzLDM1LjdjMCwuNCwwLC44LDAsMS4xOUM5LjA2LDE1LjQ4LDIwLjA3LDEzLjg1LDI0LjUzLDExLjE3WiIgc3R5bGU9ImZpbGw6I2ZmZmVmYyIvPjxwYXRoIGlkPSJUb3AiIGQ9Ik0zNS4xMiw1LjUzQTE2LjQxLDE2LjQxLDAsMCwxLDI5LjQ5LDE4Yy0uMjguMjUtLjA2LjczLjMuNTksMy4zNy0xLjMxLDcuOTItNS4yMyw2LTEzLjE0QzM1LjcxLDUsMzUuMTIsNS4xMiwzNS4xMiw1LjUzWm0yLjI3LDBBMTYuMjQsMTYuMjQsMCwwLDEsMzksMTljLS4xMi4zNS4zMS42NS41NS4zNkM0MS43NCwxNi41Niw0My42NSwxMSwzNy45Myw1LDM3LjY0LDQuNzQsMzcuMTksNS4xNCwzNy4zOSw1LjQ5Wm0yLjc2LS4xN0ExNi40MiwxNi40MiwwLDAsMSw0NywxNy4xMmEuMzMuMzMsMCwwLDAsLjY1LjExYy45Mi0zLjQ5LjQtOS40NC03LjE3LTEyLjUzQzQwLjA4LDQuNTQsMzkuODIsNS4wOCw0MC4xNSw1LjMyWk0yMS42OSwxNS43NmExNi45NCwxNi45NCwwLDAsMCwxMC40Ny05Yy4xOC0uMzYuNzUtLjIyLjY2LjE4LTEuNzMsOC03LjUyLDkuNjctMTEuMTIsOS40NUMyMS4zMiwxNi40LDIxLjMzLDE1Ljg3LDIxLjY5LDE1Ljc2WiIgc3R5bGU9ImZpbGw6I2NjYmVhNztmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJPdXRsaW5lIiBkPSJNMzgsNjUuNzVDMTcuMzIsNjUuNzUuNSw1Mi4yNy41LDM1LjdjMC0xMCw2LjE4LTE5LjMzLDE2LjUzLTI0LjkyLDMtMS42LDUuNTctMy4yMSw3Ljg2LTQuNjIsMS4yNi0uNzgsMi40NS0xLjUxLDMuNi0yLjE5QzMyLDEuODksMzUsLjUsMzgsLjVzNS42MiwxLjIsOC45LDMuMTRjMSwuNTcsMiwxLjE5LDMuMDcsMS44NywyLjQ5LDEuNTQsNS4zLDMuMjgsOSw1LjI3QzY5LjMyLDE2LjM3LDc1LjUsMjUuNjksNzUuNSwzNS43LDc1LjUsNTIuMjcsNTguNjgsNjUuNzUsMzgsNjUuNzVaTTM4LDNjLTIuNDIsMC01LDEuMjUtOC4yNSwzLjEzLTEuMTMuNjYtMi4zLDEuMzktMy41NCwyLjE1LTIuMzMsMS40NC01LDMuMDctOCw0LjdDOC42OSwxOC4xMywzLDI2LjYyLDMsMzUuNywzLDUwLjg5LDE4LjcsNjMuMjUsMzgsNjMuMjVTNzMsNTAuODksNzMsMzUuN0M3MywyNi42Miw2Ny4zMSwxOC4xMyw1Ny43OCwxMyw1NCwxMSw1MS4wNSw5LjEyLDQ4LjY2LDcuNjRjLTEuMDktLjY3LTIuMDktMS4yOS0zLTEuODRDNDIuNjMsNCw0MC40MiwzLDM4LDNaIi8+PC9nPjxnIGlkPSJNb3V0aCI+PGcgaWQ9IkJhY2tncm91bmQtMiIgZGF0YS1uYW1lPSJCYWNrZ3JvdW5kIj48cGF0aCBkPSJNNDUuMDUsNDNhOC45Myw4LjkzLDAsMCwxLTIuOTIsNC43MSw2LjgxLDYuODEsMCwwLDEtNCwxLjg4QTYuODQsNi44NCwwLDAsMSwzNCw0Ny43MSw4LjkzLDguOTMsMCwwLDEsMzEuMTIsNDNhLjcyLjcyLDAsMCwxLC44LS44MUg0NC4yNkEuNzIuNzIsMCwwLDEsNDUuMDUsNDNaIiBzdHlsZT0iZmlsbDojYjcxNDIyIi8+PC9nPjxnIGlkPSJUb25ndWUiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kLTMiIGRhdGEtbmFtZT0iQmFja2dyb3VuZCIgZD0iTTM0LDQ3Ljc5YTYuOTEsNi45MSwwLDAsMCw0LjEyLDEuOSw2LjkxLDYuOTEsMCwwLDAsNC4xMS0xLjksMTAuNjMsMTAuNjMsMCwwLDAsMS0xLjA3LDYuODMsNi44MywwLDAsMC00LjktMi4zMSw2LjE1LDYuMTUsMCwwLDAtNSwyLjc4QzMzLjU2LDQ3LjQsMzMuNzYsNDcuNiwzNCw0Ny43OVoiIHN0eWxlPSJmaWxsOiNmZjYxNjQiLz48cGF0aCBpZD0iT3V0bGluZS0yIiBkYXRhLW5hbWU9Ik91dGxpbmUiIGQ9Ik0zNC4xNiw0N2E1LjM2LDUuMzYsMCwwLDEsNC4xOS0yLjA4LDYsNiwwLDAsMSw0LDEuNjljLjIzLS4yNS40NS0uNTEuNjYtLjc3YTcsNywwLDAsMC00LjcxLTEuOTMsNi4zNiw2LjM2LDAsMCwwLTQuODksMi4zNkE5LjUzLDkuNTMsMCwwLDAsMzQuMTYsNDdaIi8+PC9nPjxwYXRoIGlkPSJPdXRsaW5lLTMiIGRhdGEtbmFtZT0iT3V0bGluZSIgZD0iTTM4LjA5LDUwLjE5YTcuNDIsNy40MiwwLDAsMS00LjQ1LTIsOS41Miw5LjUyLDAsMCwxLTMuMTEtNS4wNSwxLjIsMS4yLDAsMCwxLC4yNi0xLDEuNDEsMS40MSwwLDAsMSwxLjEzLS41MUg0NC4yNmExLjQ0LDEuNDQsMCwwLDEsMS4xMy41MSwxLjE5LDEuMTksMCwwLDEsLjI1LDFoMGE5LjUyLDkuNTIsMCwwLDEtMy4xMSw1LjA1QTcuNDIsNy40MiwwLDAsMSwzOC4wOSw1MC4xOVptLTYuMTctNy40Yy0uMTYsMC0uMi4wNy0uMjEuMDlhOC4yOSw4LjI5LDAsMCwwLDIuNzMsNC4zN0E2LjIzLDYuMjMsMCwwLDAsMzguMDksNDlhNi4yOCw2LjI4LDAsMCwwLDMuNjUtMS43Myw4LjMsOC4zLDAsMCwwLDIuNzItNC4zNy4yMS4yMSwwLDAsMC0uMi0uMDlaIi8+PC9nPjxnIGlkPSJGYWNlIj48ZWxsaXBzZSBpZD0iUmlnaHRfQmx1c2giIGRhdGEtbmFtZT0iUmlnaHQgQmx1c2giIGN4PSI1My4yMiIgY3k9IjQwLjE4IiByeD0iNS44NSIgcnk9IjMuNDQiIHN0eWxlPSJmaWxsOiNmZWJiZDAiLz48ZWxsaXBzZSBpZD0iTGVmdF9CbHVjaCIgZGF0YS1uYW1lPSJMZWZ0IEJsdWNoIiBjeD0iMjIuOTUiIGN5PSI0MC4xOCIgcng9IjUuODUiIHJ5PSIzLjQ0IiBzdHlsZT0iZmlsbDojZmViYmQwIi8+PHBhdGggaWQ9IkV5ZXMiIGQ9Ik0yNS43LDM4LjhhNS41MSw1LjUxLDAsMSwwLTUuNS01LjUxQTUuNTEsNS41MSwwLDAsMCwyNS43LDM4LjhabTI0Ljc3LDBBNS41MSw1LjUxLDAsMSwwLDQ1LDMzLjI5LDUuNSw1LjUsMCwwLDAsNTAuNDcsMzguOFoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJJcmlzIiBkPSJNMjQsMzMuNjRhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsMjQsMzMuNjRabTI0Ljc3LDBhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsNDguNzUsMzMuNjRaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkIi8+PC9nPjwvc3ZnPg==" alt="Bun logo" id="logo" class="h-8"/><img alt="Bun" class="block h-5 dark:hidden" src="data:image/png;base64, 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" width="60"/><img alt="Bun" class="hidden h-5 dark:block" src="data:image/png;base64, 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" width="60"/></a></div><div class="w-[35px]"></div><div class="hidden flex-row md:flex"><div class="DocSearchBox text-md flex h-[40px] w-[250px] cursor-pointer flex-row items-center justify-start rounded bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400"><div class="w-[8px]"></div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="mt-[1px] h-[20px] w-[20px] "><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg><div class="w-[4px]"></div><p class="m-0 pt-[1px] text-sm leading-none">Search the docs...</p><p class="flex-1"></p><div class="m-0 flex h-[30px] items-center rounded-[3px] border border-dashed border-gray-400 px-[8px] text-gray-400 dark:border-gray-600"><p class="pb-[1px] font-light leading-none">/</p></div><div class="w-[4px]"></div></div></div><div class="flex-[10]"></div><div class="flex flex-row items-center justify-end md:hidden"><div class="flex flex-row items-center justify-center gap-[13px]"><div class="DocSearchBox inline-flex cursor-pointer select-none"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-[25px] w-[25px] text-black dark:text-white"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg></div><div class="sun m-[-2px] hidden cursor-pointer select-none dark:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[30px] w-[30px] text-black dark:text-white"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"></path></svg></div><div class="moon m-[-2px] inline-flex cursor-pointer select-none dark:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[27px] w-[30px] text-black dark:text-white"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd"></path></svg></div></div></div><nav class="hidden h-full list-none flex-row items-center justify-end gap-6 whitespace-nowrap md:flex"><a class="text-lg font-medium hover:no-underline dark:text-gray-300" href="/docs">Docs</a><a class="text-lg font-medium hover:no-underline dark:text-gray-300" href="/guides">Guides</a><a class="text-lg font-medium hover:no-underline dark:text-gray-300" href="/blog">Blog</a><a class="text-lg font-medium hover:no-underline dark:text-gray-300" href="https://bun.sh/discord"><div class="flex flex-row items-center justify-center gap-2"><img src="data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZGlzY29yZCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTMuNTQ1IDIuOTA3YTEzLjIyNyAxMy4yMjcgMCAwIDAtMy4yNTctMS4wMTEuMDUuMDUgMCAwIDAtLjA1Mi4wMjVjLS4xNDEuMjUtLjI5Ny41NzctLjQwNi44MzNhMTIuMTkgMTIuMTkgMCAwIDAtMy42NTggMCA4LjI1OCA4LjI1OCAwIDAgMC0uNDEyLS44MzMuMDUxLjA1MSAwIDAgMC0uMDUyLS4wMjVjLTEuMTI1LjE5NC0yLjIyLjUzNC0zLjI1NyAxLjAxMWEuMDQxLjA0MSAwIDAgMC0uMDIxLjAxOEMuMzU2IDYuMDI0LS4yMTMgOS4wNDcuMDY2IDEyLjAzMmMuMDAxLjAxNC4wMS4wMjguMDIxLjAzN2ExMy4yNzYgMTMuMjc2IDAgMCAwIDMuOTk1IDIuMDIuMDUuMDUgMCAwIDAgLjA1Ni0uMDE5Yy4zMDgtLjQyLjU4Mi0uODYzLjgxOC0xLjMyOWEuMDUuMDUgMCAwIDAtLjAxLS4wNTkuMDUxLjA1MSAwIDAgMC0uMDE4LS4wMTEgOC44NzUgOC44NzUgMCAwIDEtMS4yNDgtLjU5NS4wNS4wNSAwIDAgMS0uMDItLjA2Ni4wNTEuMDUxIDAgMCAxIC4wMTUtLjAxOWMuMDg0LS4wNjMuMTY4LS4xMjkuMjQ4LS4xOTVhLjA1LjA1IDAgMCAxIC4wNTEtLjAwN2MyLjYxOSAxLjE5NiA1LjQ1NCAxLjE5NiA4LjA0MSAwYS4wNTIuMDUyIDAgMCAxIC4wNTMuMDA3Yy4wOC4wNjYuMTY0LjEzMi4yNDguMTk1YS4wNTEuMDUxIDAgMCAxLS4wMDQuMDg1IDguMjU0IDguMjU0IDAgMCAxLTEuMjQ5LjU5NC4wNS4wNSAwIDAgMC0uMDMuMDMuMDUyLjA1MiAwIDAgMCAuMDAzLjA0MWMuMjQuNDY1LjUxNS45MDkuODE3IDEuMzI5YS4wNS4wNSAwIDAgMCAuMDU2LjAxOSAxMy4yMzUgMTMuMjM1IDAgMCAwIDQuMDAxLTIuMDIuMDQ5LjA0OSAwIDAgMCAuMDIxLS4wMzdjLjMzNC0zLjQ1MS0uNTU5LTYuNDQ5LTIuMzY2LTkuMTA2YS4wMzQuMDM0IDAgMCAwLS4wMi0uMDE5Wm0tOC4xOTggNy4zMDdjLS43ODkgMC0xLjQzOC0uNzI0LTEuNDM4LTEuNjEyIDAtLjg4OS42MzctMS42MTMgMS40MzgtMS42MTMuODA3IDAgMS40NS43MyAxLjQzOCAxLjYxMyAwIC44ODgtLjYzNyAxLjYxMi0xLjQzOCAxLjYxMlptNS4zMTYgMGMtLjc4OCAwLTEuNDM4LS43MjQtMS40MzgtMS42MTIgMC0uODg5LjYzNy0xLjYxMyAxLjQzOC0xLjYxMy44MDcgMCAxLjQ1MS43MyAxLjQzOCAxLjYxMyAwIC44ODgtLjYzMSAxLjYxMi0xLjQzOCAxLjYxMloiLz4KPC9zdmc+" alt="Discord logo" class="block h-[26px] dark:hidden"/><img src="data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiIGNsYXNzPSJiaSBiaS1kaXNjb3JkIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0xMy41NDUgMi45MDdhMTMuMjI3IDEzLjIyNyAwIDAgMC0zLjI1Ny0xLjAxMS4wNS4wNSAwIDAgMC0uMDUyLjAyNWMtLjE0MS4yNS0uMjk3LjU3Ny0uNDA2LjgzM2ExMi4xOSAxMi4xOSAwIDAgMC0zLjY1OCAwIDguMjU4IDguMjU4IDAgMCAwLS40MTItLjgzMy4wNTEuMDUxIDAgMCAwLS4wNTItLjAyNWMtMS4xMjUuMTk0LTIuMjIuNTM0LTMuMjU3IDEuMDExYS4wNDEuMDQxIDAgMCAwLS4wMjEuMDE4Qy4zNTYgNi4wMjQtLjIxMyA5LjA0Ny4wNjYgMTIuMDMyYy4wMDEuMDE0LjAxLjAyOC4wMjEuMDM3YTEzLjI3NiAxMy4yNzYgMCAwIDAgMy45OTUgMi4wMi4wNS4wNSAwIDAgMCAuMDU2LS4wMTljLjMwOC0uNDIuNTgyLS44NjMuODE4LTEuMzI5YS4wNS4wNSAwIDAgMC0uMDEtLjA1OS4wNTEuMDUxIDAgMCAwLS4wMTgtLjAxMSA4Ljg3NSA4Ljg3NSAwIDAgMS0xLjI0OC0uNTk1LjA1LjA1IDAgMCAxLS4wMi0uMDY2LjA1MS4wNTEgMCAwIDEgLjAxNS0uMDE5Yy4wODQtLjA2My4xNjgtLjEyOS4yNDgtLjE5NWEuMDUuMDUgMCAwIDEgLjA1MS0uMDA3YzIuNjE5IDEuMTk2IDUuNDU0IDEuMTk2IDguMDQxIDBhLjA1Mi4wNTIgMCAwIDEgLjA1My4wMDdjLjA4LjA2Ni4xNjQuMTMyLjI0OC4xOTVhLjA1MS4wNTEgMCAwIDEtLjAwNC4wODUgOC4yNTQgOC4yNTQgMCAwIDEtMS4yNDkuNTk0LjA1LjA1IDAgMCAwLS4wMy4wMy4wNTIuMDUyIDAgMCAwIC4wMDMuMDQxYy4yNC40NjUuNTE1LjkwOS44MTcgMS4zMjlhLjA1LjA1IDAgMCAwIC4wNTYuMDE5IDEzLjIzNSAxMy4yMzUgMCAwIDAgNC4wMDEtMi4wMi4wNDkuMDQ5IDAgMCAwIC4wMjEtLjAzN2MuMzM0LTMuNDUxLS41NTktNi40NDktMi4zNjYtOS4xMDZhLjAzNC4wMzQgMCAwIDAtLjAyLS4wMTlabS04LjE5OCA3LjMwN2MtLjc4OSAwLTEuNDM4LS43MjQtMS40MzgtMS42MTIgMC0uODg5LjYzNy0xLjYxMyAxLjQzOC0xLjYxMy44MDcgMCAxLjQ1LjczIDEuNDM4IDEuNjEzIDAgLjg4OC0uNjM3IDEuNjEyLTEuNDM4IDEuNjEyWm01LjMxNiAwYy0uNzg4IDAtMS40MzgtLjcyNC0xLjQzOC0xLjYxMiAwLS44ODkuNjM3LTEuNjEzIDEuNDM4LTEuNjEzLjgwNyAwIDEuNDUxLjczIDEuNDM4IDEuNjEzIDAgLjg4OC0uNjMxIDEuNjEyLTEuNDM4IDEuNjEyWiIvPgo8L3N2Zz4=" alt="Discord logo" class="mr-2 hidden h-[26px] dark:block"/><div class="text-lg font-medium">Discord</div></div></a><a class="text-lg font-medium hover:no-underline dark:text-gray-300" href="https://github.com/oven-sh/bun"><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSIjMUIxRjIzIi8+Cjwvc3ZnPgo=" alt="GitHub logo" class="m-auto block h-[24px] dark:hidden"/><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K" alt="GitHub logo" class="m-auto hidden h-[24px] dark:block"/></a><div class="sun m-[-2px] hidden cursor-pointer select-none dark:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[30px] w-[30px] text-black dark:text-white"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"></path></svg></div><div class="moon m-[-2px] inline-flex cursor-pointer select-none dark:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-[27px] w-[30px] text-black dark:text-white"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd"></path></svg></div></nav></header></div><div class="hidden" id="docsearchbox"></div><div id="inkeep-chat-button" class="h-0 p-0"></div><section class="mx-auto flex max-w-screen-xl flex-row justify-start px-0 md:px-[var(--horizontal-padding)]"><div class="sticky top-[var(--navbar-height)] hidden h-[calc(100vh-var(--navbar-height))] w-[300px] md:block md:min-w-[200px] lg:min-w-[300px]" style="left:0px;top:0px;height:calc(100vh - 60px)"><div class="h-[var(--navbar-height)]"></div><div id="doc-menu" class="invisible relative h-full w-full overflow-y-scroll border-r-[1px] border-gray-200 pb-[50px] pr-3 dark:border-gray-700"><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Intro</p><a href="/docs/index" slug="index" id="menu-item-index" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">What is Bun?</p></a><a href="/docs/installation" slug="installation" id="menu-item-installation" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Installation</p></a><a href="/docs/quickstart" slug="quickstart" id="menu-item-quickstart" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Quickstart</p></a><a href="/docs/typescript" slug="typescript" id="menu-item-typescript" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">TypeScript</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Templating</p><a href="/docs/cli/init" slug="cli/init" id="menu-item-cli/init" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun init</code></p></a><a href="/docs/cli/bun-create" slug="cli/bun-create" id="menu-item-cli/bun-create" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun create</code></p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Runtime</p><a href="/docs/cli/run" slug="cli/run" id="menu-item-cli/run" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun run</code></p></a><a href="/docs/runtime/loaders" slug="runtime/loaders" id="menu-item-runtime/loaders" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">File types</p></a><a href="/docs/runtime/typescript" slug="runtime/typescript" id="menu-item-runtime/typescript" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">TypeScript</p></a><a href="/docs/runtime/jsx" slug="runtime/jsx" id="menu-item-runtime/jsx" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">JSX</p></a><a href="/docs/runtime/env" slug="runtime/env" id="menu-item-runtime/env" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Environment variables</p></a><a href="/docs/runtime/bun-apis" slug="runtime/bun-apis" id="menu-item-runtime/bun-apis" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Bun APIs</p></a><a href="/docs/runtime/web-apis" slug="runtime/web-apis" id="menu-item-runtime/web-apis" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Web APIs</p></a><a href="/docs/runtime/nodejs-apis" slug="runtime/nodejs-apis" id="menu-item-runtime/nodejs-apis" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Node.js compatibility</p></a><a href="/docs/bundler/executables" slug="bundler/executables" id="menu-item-bundler/executables" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Single-file executable</p></a><a href="/docs/runtime/plugins" slug="runtime/plugins" id="menu-item-runtime/plugins" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Plugins</p></a><a href="/docs/runtime/hot" slug="runtime/hot" id="menu-item-runtime/hot" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Watch mode</p></a><a href="/docs/runtime/modules" slug="runtime/modules" id="menu-item-runtime/modules" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Module resolution</p></a><a href="/docs/runtime/autoimport" slug="runtime/autoimport" id="menu-item-runtime/autoimport" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Auto-install</p></a><a href="/docs/runtime/bunfig" slug="runtime/bunfig" id="menu-item-runtime/bunfig" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">bunfig.toml</p></a><a href="/docs/runtime/debugger" slug="runtime/debugger" id="menu-item-runtime/debugger" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Debugger</p></a><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 !dark:text-gray-600 !hover: cursor-auto !text-gray-500"><span class="opacity-80">Framework API</span><span class="ml-[6px] inline-block rounded-[2px] border border-pink-400 bg-pink-100 px-[4px] pb-[1px] pt-[0px] align-middle text-xs leading-[16px] text-pink-600 opacity-70 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:opacity-60" style="font-variant:all-small-caps">SOON</span></p><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Package manager</p><a href="/docs/cli/install" slug="cli/install" id="menu-item-cli/install" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun install</code></p></a><a href="/docs/cli/add" slug="cli/add" id="menu-item-cli/add" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun add</code></p></a><a href="/docs/cli/remove" slug="cli/remove" id="menu-item-cli/remove" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun remove</code></p></a><a href="/docs/cli/update" slug="cli/update" id="menu-item-cli/update" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun update</code></p></a><a href="/docs/cli/publish" slug="cli/publish" id="menu-item-cli/publish" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun publish</code></p></a><a href="/docs/cli/outdated" slug="cli/outdated" id="menu-item-cli/outdated" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun outdated</code></p></a><a href="/docs/cli/link" slug="cli/link" id="menu-item-cli/link" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun link</code></p></a><a href="/docs/cli/pm" slug="cli/pm" id="menu-item-cli/pm" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun pm</code></p></a><a href="/docs/install/cache" slug="install/cache" id="menu-item-install/cache" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Global cache</p></a><a href="/docs/install/workspaces" slug="install/workspaces" id="menu-item-install/workspaces" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Workspaces</p></a><a href="/docs/install/lifecycle" slug="install/lifecycle" id="menu-item-install/lifecycle" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Lifecycle scripts</p></a><a href="/docs/cli/filter" slug="cli/filter" id="menu-item-cli/filter" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Filter</p></a><a href="/docs/install/lockfile" slug="install/lockfile" id="menu-item-install/lockfile" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Lockfile</p></a><a href="/docs/install/registries" slug="install/registries" id="menu-item-install/registries" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Scopes and registries</p></a><a href="/docs/install/overrides" slug="install/overrides" id="menu-item-install/overrides" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Overrides and resolutions</p></a><a href="/docs/install/patch" slug="install/patch" id="menu-item-install/patch" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Patch dependencies</p></a><a href="/docs/install/npmrc" slug="install/npmrc" id="menu-item-install/npmrc" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">.npmrc support</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Bundler</p><a href="/docs/bundler" slug="bundler" id="menu-item-bundler" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">Bun.build</code></p></a><a href="/docs/bundler/html" slug="bundler/html" id="menu-item-bundler/html" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTML & static sites</p></a><a href="/docs/bundler/css" slug="bundler/css" id="menu-item-bundler/css" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-700 font-bold dark:border-gray-400 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">CSS</p></a><div id="doc-menu-in-page" class="doc-menu-in-page anchor-menu"><a href="#transpiling" class="no-underline hover:no-underline"><div anchor-id="transpiling" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[28px]">Transpiling</div></a><a href="#browser-compatibility" class="no-underline hover:no-underline"><div anchor-id="browser-compatibility" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[40px]">Browser Compatibility</div></a><a href="#syntax-lowering" class="no-underline hover:no-underline"><div anchor-id="syntax-lowering" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[40px]">Syntax Lowering</div></a><a href="#css-modules" class="no-underline hover:no-underline"><div anchor-id="css-modules" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[28px]">CSS Modules</div></a><a href="#getting-started" class="no-underline hover:no-underline"><div anchor-id="getting-started" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[28px]">Getting started</div></a><a href="#composition" class="no-underline hover:no-underline"><div anchor-id="composition" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[40px]">Composition</div></a><a href="#composing-from-a-separate-css-module-file" class="no-underline hover:no-underline"><div anchor-id="composing-from-a-separate-css-module-file" class="doc-menu-in-page-item cursor-pointer border-l-[1px] border-gray-200 py-[2px] text-[14px] text-gray-500 hover:border-gray-400 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-400 dark:hover:text-gray-300 pl-[40px]">Composing from a separate CSS module file</div></a><style> .doc-menu-in-page *{ text-align: left; } .doc-menu-in-page .doc-menu-in-page-item-active { border-color: var(--gray-400); /* gray-400 */ } .dark .doc-menu-in-page .doc-menu-in-page-item-active { // border-color: var(--gray-600); /* gray-400 */ } .doc-menu-in-page .doc-menu-in-page-item-active ~ .doc-menu-in-page-item-active { border-color: var(--gray-200); /* gray-200 */ } .dark .doc-menu-in-page .doc-menu-in-page-item-active ~ .doc-menu-in-page-item-active { // border-color: var(--gray-800); /* gray-200 */ } </style><script>(function(){let pageLoaded=false;window.addEventListener("DOMContentLoaded",(event)=>{pageLoaded=true});let options={root:null,rootMargin:"0px",threshold:1};const callback=(_entries,observer)=>{if(!pageLoaded)return;const entries=[..._entries];const activeCount=document.querySelectorAll(".doc-menu-in-page-item-active").length;const frame=document.documentElement||document.body;if(!frame)return;const allItems=[...document.querySelectorAll("h1.anchored, h2.anchored, h3.anchored")];const frameHeight=frame.offsetHeight;const frameTop=frame.scrollTop;const frameBottom=frameTop+frameHeight;const aboveViewport=[];const onViewport=[];for(const item of allItems){const itemTop=item.offsetTop;const itemHeight=item.offsetHeight;const itemBottom=item.offsetTop+item.offsetHeight;const isAboveViewport=itemTop<frameTop;const isBelowViewport=itemTop>frameBottom-item.offsetHeight;const isVisible=!isAboveViewport&&!isBelowViewport;if(isAboveViewport){aboveViewport.push(item)}else if(isVisible){onViewport.push(item)}}const activeItems=onViewport.length>0?onViewport:aboveViewport.slice(-1);for(const item of allItems){const hid=item.getAttribute("anchor-id");const menuItem=document.querySelector(".doc-menu-in-page-item[anchor-id='"+hid+"']");if(activeItems.includes(item)){try{menuItem.classList.add("doc-menu-in-page-item-active")}catch(err){console.log("error adding class "+hid)}const menuItemTop=menuItem.offsetTop;const menuItemHeight=menuItem.offsetHeight;const menuItemFrame=menuItem.offsetParent;if(!menuItemFrame)continue;const frameHeight=menuItemFrame.offsetHeight;const frameTop=menuItemFrame.scrollTop;const frameBottom=frameTop+frameHeight}else{try{menuItem.classList.remove("doc-menu-in-page-item-active")}catch(err){console.log("error adding class "+hid)}}}};window.addEventListener("DOMContentLoaded",(event)=>{let observer=new IntersectionObserver(callback,options);document.querySelectorAll("h1.anchored, h2.anchored, h3.anchored").forEach((item)=>{observer.observe(item)})})})();</script></div><a href="/docs/bundler/fullstack" slug="bundler/fullstack" id="menu-item-bundler/fullstack" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Fullstack Dev Server</p></a><a href="/docs/bundler/hmr" slug="bundler/hmr" id="menu-item-bundler/hmr" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Hot reloading</p></a><a href="/docs/bundler/loaders" slug="bundler/loaders" id="menu-item-bundler/loaders" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Loaders</p></a><a href="/docs/bundler/plugins" slug="bundler/plugins" id="menu-item-bundler/plugins" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Plugins</p></a><a href="/docs/bundler/macros" slug="bundler/macros" id="menu-item-bundler/macros" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Macros</p></a><a href="/docs/bundler/vs-esbuild" slug="bundler/vs-esbuild" id="menu-item-bundler/vs-esbuild" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">vs esbuild</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Test runner</p><a href="/docs/cli/test" slug="cli/test" id="menu-item-cli/test" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bun test</code></p></a><a href="/docs/test/writing" slug="test/writing" id="menu-item-test/writing" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Writing tests</p></a><a href="/docs/test/hot" slug="test/hot" id="menu-item-test/hot" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Watch mode</p></a><a href="/docs/test/lifecycle" slug="test/lifecycle" id="menu-item-test/lifecycle" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Lifecycle hooks</p></a><a href="/docs/test/mocks" slug="test/mocks" id="menu-item-test/mocks" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Mocks</p></a><a href="/docs/test/snapshots" slug="test/snapshots" id="menu-item-test/snapshots" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Snapshots</p></a><a href="/docs/test/time" slug="test/time" id="menu-item-test/time" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Dates and times</p></a><a href="/docs/test/coverage" slug="test/coverage" id="menu-item-test/coverage" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Code coverage</p></a><a href="/docs/test/reporters" slug="test/reporters" id="menu-item-test/reporters" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Test reporters</p></a><a href="/docs/test/configuration" slug="test/configuration" id="menu-item-test/configuration" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Test configuration</p></a><a href="/docs/test/runtime-behavior" slug="test/runtime-behavior" id="menu-item-test/runtime-behavior" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Runtime behavior</p></a><a href="/docs/test/discovery" slug="test/discovery" id="menu-item-test/discovery" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Finding tests</p></a><a href="/docs/test/dom" slug="test/dom" id="menu-item-test/dom" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">DOM testing</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Package runner</p><a href="/docs/cli/bunx" slug="cli/bunx" id="menu-item-cli/bunx" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200"><code class="undefined mono rounded border border-gray-300 bg-[var(--gray-200)] px-[3px] py-[2px] text-[93%] no-underline hover:no-underline dark:border-gray-700 dark:bg-[var(--gray-700)]">bunx</code></p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">API</p><a href="/docs/api/http" slug="api/http" id="menu-item-api/http" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTTP server</p></a><a href="/docs/api/fetch" slug="api/fetch" id="menu-item-api/fetch" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTTP client</p></a><a href="/docs/api/websockets" slug="api/websockets" id="menu-item-api/websockets" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">WebSockets</p></a><a href="/docs/api/workers" slug="api/workers" id="menu-item-api/workers" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Workers</p></a><a href="/docs/api/binary-data" slug="api/binary-data" id="menu-item-api/binary-data" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Binary data</p></a><a href="/docs/api/streams" slug="api/streams" id="menu-item-api/streams" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Streams</p></a><a href="/docs/api/sql" slug="api/sql" id="menu-item-api/sql" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">SQL</p></a><a href="/docs/api/s3" slug="api/s3" id="menu-item-api/s3" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">S3 Object Storage</p></a><a href="/docs/api/file-io" slug="api/file-io" id="menu-item-api/file-io" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">File I/O</p></a><a href="/docs/api/import-meta" slug="api/import-meta" id="menu-item-api/import-meta" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">import.meta</p></a><a href="/docs/api/sqlite" slug="api/sqlite" id="menu-item-api/sqlite" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">SQLite</p></a><a href="/docs/api/file-system-router" slug="api/file-system-router" id="menu-item-api/file-system-router" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">FileSystemRouter</p></a><a href="/docs/api/tcp" slug="api/tcp" id="menu-item-api/tcp" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">TCP sockets</p></a><a href="/docs/api/udp" slug="api/udp" id="menu-item-api/udp" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">UDP sockets</p></a><a href="/docs/api/globals" slug="api/globals" id="menu-item-api/globals" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Globals</p></a><a href="/docs/runtime/shell" slug="runtime/shell" id="menu-item-runtime/shell" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">$ Shell</p></a><a href="/docs/api/spawn" slug="api/spawn" id="menu-item-api/spawn" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Child processes</p></a><a href="/docs/api/html-rewriter" slug="api/html-rewriter" id="menu-item-api/html-rewriter" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">HTMLRewriter</p></a><a href="/docs/api/hashing" slug="api/hashing" id="menu-item-api/hashing" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Hashing</p></a><a href="/docs/api/console" slug="api/console" id="menu-item-api/console" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Console</p></a><a href="/docs/api/cookie" slug="api/cookie" id="menu-item-api/cookie" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Cookie</p></a><a href="/docs/api/ffi" slug="api/ffi" id="menu-item-api/ffi" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">FFI</p></a><a href="/docs/api/cc" slug="api/cc" id="menu-item-api/cc" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">C Compiler</p></a><a href="/docs/api/test" slug="api/test" id="menu-item-api/test" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Testing</p></a><a href="/docs/api/utils" slug="api/utils" id="menu-item-api/utils" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Utils</p></a><a href="/docs/api/node-api" slug="api/node-api" id="menu-item-api/node-api" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Node-API</p></a><a href="/docs/api/glob" slug="api/glob" id="menu-item-api/glob" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Glob</p></a><a href="/docs/api/dns" slug="api/dns" id="menu-item-api/dns" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">DNS</p></a><a href="/docs/api/semver" slug="api/semver" id="menu-item-api/semver" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Semver</p></a><a href="/docs/api/color" slug="api/color" id="menu-item-api/color" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Color</p></a><a href="/docs/api/transpiler" slug="api/transpiler" id="menu-item-api/transpiler" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Transpiler</p></a><p class="whitespace-nowrap py-2 pt-8 text-[15px] text-gray-400 dark:text-gray-400 " style="font-variant:all-petite-caps">Project</p><a href="/docs/project/roadmap" slug="project/roadmap" id="menu-item-project/roadmap" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Roadmap</p></a><a href="/docs/project/benchmarking" slug="project/benchmarking" id="menu-item-project/benchmarking" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Benchmarking</p></a><a href="/docs/project/contributing" slug="project/contributing" id="menu-item-project/contributing" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Contributing</p></a><a href="/docs/project/building-windows" slug="project/building-windows" id="menu-item-project/building-windows" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Building Windows</p></a><a href="/docs/project/bindgen" slug="project/bindgen" id="menu-item-project/bindgen" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">Bindgen</p></a><a href="/docs/project/licensing" slug="project/licensing" id="menu-item-project/licensing" class="no-underline hover:no-underline doc-menu-item"><p class="border-l-[1px] py-[2px] pl-4 text-[15px] text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-700 hover:text-gray-900 dark:hover:border-gray-400 dark:hover:text-gray-200">License</p></a></div><script>document.querySelectorAll(".doc-menu-item").forEach((el)=>{el.addEventListener("click",()=>{const menu=document.querySelector("#doc-menu");const inPageMenu=document.querySelector("#doc-menu-in-page");const A=menu.scrollTop;const B=el.offsetTop;const C=inPageMenu?inPageMenu.offsetTop:0;const D=inPageMenu?inPageMenu.offsetHeight:0;const E=B>C?A-D:A;localStorage.setItem("menu-clicked-offset",E)})});const menu=document.querySelector("#doc-menu");const offset=localStorage.getItem("menu-clicked-offset");if(!offset){menu.classList.remove("invisible")}else{menu.scrollTop=parseInt(offset,10);localStorage.removeItem("menu-clicked-offset");menu.classList.remove("invisible")}</script><div class="h-[50px]" style="height:50px"></div></div><div class="w-full overflow-x-hidden pb-8"><header class="ml-auto mr-auto w-full max-w-screen-md pt-[45px] md:pt-[90px]"><div class="mx-4 flex flex-row justify-between border-b border-gray-200 text-gray-900 dark:border-gray-700 dark:text-gray-200"><h1 class="mb-0 flex-1"><span class="text-[2.25em] font-extrabold">CSS</span></h1></div><div class="hidden px-4 pt-[6px] text-xs text-black sm:block"><a class="hover:no-underline" href="https://github.com/oven-sh/bun/edit/main/docs/bundler/css.md"><div class="inline-flex cursor-pointer flex-row items-center justify-start rounded-[3px] px-[4px] py-[3px] opacity-80 hover:bg-gray-200 hover:opacity-100 dark:text-white dark:hover:bg-gray-800"><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSIjMUIxRjIzIi8+Cjwvc3ZnPgo=" alt="GitHub logo" class="m-0 block h-[13px] p-0 dark:hidden"/><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K" alt="GitHub logo" class="m-[0] hidden h-[13px] p-[0] dark:block"/><div class="w-[4px] "></div><p class="m-[0] p-[0] text-gray-800 dark:text-gray-300">Edit on GitHub</p></div></a></div></header><div class="DocSearch-content prose ml-auto mr-auto w-full max-w-screen-md px-4 dark:prose-invert"><div class="h-4 whitespace-nowrap"></div><article><p>Bun's bundler has built-in support for CSS with the following features:</p><ul><li class="">Transpiling modern/future features to work on all browsers (including vendor prefixing)</li><li class="">Minification</li><li class="">CSS Modules</li><li class="">Tailwind (via a native bundler plugin)</li></ul><h2 level="2" anchor-id="transpiling" id="transpiling" class="anchored "><a name="transpiling" class="relative top-[-80px] h-0 invisible block"></a><a href="#transpiling" class="no-underline hover:no-underline font-bold hover:none cursor-default">Transpiling</a></h2><p>Bun's CSS bundler lets you use modern/future CSS features without having to worry about browser compatibility — all thanks to its transpiling and vendor prefixing features which are enabled by default.</p><p>Bun's CSS parser and bundler is a direct Rust → Zig port of <a href="https://lightningcss.dev/">LightningCSS</a>, with a bundling approach inspired by esbuild. The transpiler converts modern CSS syntax into backwards-compatible equivalents that work across browsers.</p><p>A huge thanks goes to the amazing work from the authors of <a href="https://lightningcss.dev/">LightningCSS</a> and <a href="https://esbuild.github.io/">esbuild</a>.</p><h3 level="3" anchor-id="browser-compatibility" id="browser-compatibility" class="anchored "><a name="browser-compatibility" class="relative top-[-80px] h-0 invisible block"></a><a href="#browser-compatibility" class="no-underline hover:no-underline font-bold hover:none cursor-default">Browser Compatibility</a></h3><p>By default, Bun's CSS bundler targets the following browsers:</p><ul><li class="">ES2020</li><li class="">Edge 88+</li><li class="">Firefox 78+</li><li class="">Chrome 87+</li><li class="">Safari 14+</li></ul><h3 level="3" anchor-id="syntax-lowering" id="syntax-lowering" class="anchored "><a name="syntax-lowering" class="relative top-[-80px] h-0 invisible block"></a><a href="#syntax-lowering" class="no-underline hover:no-underline font-bold hover:none cursor-default">Syntax Lowering</a></h3><h4 level="4" id="nesting">Nesting</h4><p>The CSS Nesting specification allows you to write more concise and intuitive stylesheets by nesting selectors inside one another. Instead of repeating parent selectors across your CSS file, you can write child styles directly within their parent blocks.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* With nesting */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.card</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">white</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-radius</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">4</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> .title {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.2</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-weight</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">bold</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.content</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="KvSvRtMHvqUA" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#KvSvRtMHvqUA");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* With nesting */ .card { background: white; border-radius: 4px; .title { font-size: 1.2rem; font-weight: bold; } .content { padding: 1rem; } }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler automatically converts this nested syntax into traditional flat CSS that works in all browsers:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Compiled output */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.card</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">white</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-radius</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">4</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.card</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.title</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.2</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-weight</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">bold</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.card</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.content</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="epPuGqnnskIc" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#epPuGqnnskIc");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Compiled output */ .card { background: white; border-radius: 4px; } .card .title { font-size: 1.2rem; font-weight: bold; } .card .content { padding: 1rem; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>You can also nest media queries and other at-rules inside selectors, eliminating the need to repeat selector patterns:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.responsive-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">block</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> @media (</span><span style="color: #8BE9FD">min-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">flex</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="QAqHhSbpGzKU" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#QAqHhSbpGzKU");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.responsive-element { display: block; @media (min-width: 768px) { display: flex; } }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This compiles to:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.responsive-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">block</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">min-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.responsive-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">flex</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="KMWmgBPtAEIU" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#KMWmgBPtAEIU");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.responsive-element { display: block; } @media (min-width: 768px) { .responsive-element { display: flex; } }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><h4 level="4" id="color-mix">Color mix</h4><p>The <code>color-mix()</code> function gives you an easy way to blend two colors together according to a specified ratio in a chosen color space. This powerful feature lets you create color variations without manually calculating the resulting values.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Mix blue and red in the RGB color space with a 30/70 proportion */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> color-mix(in </span><span style="color: #BD93F9">srgb</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Create a lighter variant for hover state */</span></span> <span class="line"><span style="color: #F8F8F2"> &</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2">hover {</span></span> <span class="line"><span style="color: #F8F8F2"> background-color: color-mix(in </span><span style="color: #BD93F9">srgb</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">white</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">20</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="KdDbdsoVxAsk" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#KdDbdsoVxAsk");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.button { /* Mix blue and red in the RGB color space with a 30/70 proportion */ background-color: color-mix(in srgb, blue 30%, red); /* Create a lighter variant for hover state */ &:hover { background-color: color-mix(in srgb, blue 30%, red, white 20%); } }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler evaluates these color mixes at build time when all color values are known (not CSS variables), generating static color values that work in all browsers:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Computed to the exact resulting color */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#b31a1a</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">hover</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#c54747</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="evljaEVBDiif" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#evljaEVBDiif");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.button { /* Computed to the exact resulting color */ background-color: #b31a1a; } .button:hover { background-color: #c54747; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This feature is particularly useful for creating color systems with programmatically derived shades, tints, and accents without needing preprocessors or custom tooling.</p><h4 level="4" id="relative-colors">Relative colors</h4><p>CSS now allows you to modify individual components of a color using relative color syntax. This powerful feature lets you create color variations by adjusting specific attributes like lightness, saturation, or individual channels without having to recalculate the entire color.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.theme-color</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Start with a base color and increase lightness by 15% */</span></span> <span class="line"><span style="color: #F8F8F2"> --accent</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> lch(from </span><span style="color: #BD93F9">purple</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">calc</span><span style="color: #F8F8F2">(l </span><span style="color: #FF79C6">+</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">15</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">) c h);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Take our brand blue and make a desaturated version */</span></span> <span class="line"><span style="color: #F8F8F2"> --subtle-blue</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> oklch(from </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--brand-blue) l </span><span style="color: #8BE9FD">calc</span><span style="color: #F8F8F2">(c </span><span style="color: #FF79C6">*</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.8</span><span style="color: #F8F8F2">) h);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="XLzQoOixzSFd" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#XLzQoOixzSFd");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.theme-color { /* Start with a base color and increase lightness by 15% */ --accent: lch(from purple calc(l + 15%) c h); /* Take our brand blue and make a desaturated version */ --subtle-blue: oklch(from var(--brand-blue) l calc(c * 0.8) h); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler computes these relative color modifications at build time (when not using CSS variables) and generates static color values for browser compatibility:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.theme-color</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> --accent</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> lch(</span><span style="color: #BD93F9">69.32</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">58.34</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">328.37</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> --subtle-blue</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> oklch(</span><span style="color: #BD93F9">60.92</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.112</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">240.01</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="sjaLNwkxeDuk" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#sjaLNwkxeDuk");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.theme-color { --accent: lch(69.32% 58.34 328.37); --subtle-blue: oklch(60.92% 0.112 240.01); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This approach is extremely useful for theme generation, creating accessible color variants, or building color scales based on mathematical relationships instead of hard-coding each value.</p><h4 level="4" id="lab-colors">LAB colors</h4><p>Modern CSS supports perceptually uniform color spaces like LAB, LCH, OKLAB, and OKLCH that offer significant advantages over traditional RGB. These color spaces can represent colors outside the standard RGB gamut, resulting in more vibrant and visually consistent designs.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.vibrant-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* A vibrant red that exceeds sRGB gamut boundaries */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> lab(</span><span style="color: #BD93F9">55</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">78</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">35</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* A smooth gradient using perceptual color space */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> oklch(</span><span style="color: #BD93F9">65</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.25</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">10</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">),</span></span> <span class="line"><span style="color: #F8F8F2"> oklch(</span><span style="color: #BD93F9">65</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.25</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">250</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">)</span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="lRuJJioebzoI" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#lRuJJioebzoI");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.vibrant-element { /* A vibrant red that exceeds sRGB gamut boundaries */ color: lab(55% 78 35); /* A smooth gradient using perceptual color space */ background: linear-gradient( to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg) ); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler automatically converts these advanced color formats to backwards-compatible alternatives for browsers that don't yet support them:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.vibrant-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Fallback to closest RGB approximation */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ff0f52</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* P3 fallback for browsers with wider gamut support */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">color</span><span style="color: #F8F8F2">(display-p3 </span><span style="color: #BD93F9">1</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.12</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.37</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Original value preserved for browsers that support it */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> lab(</span><span style="color: #BD93F9">55</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">78</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">35</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">#cd4e15</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">#3887ab</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> oklch(</span><span style="color: #BD93F9">65</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.25</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">10</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">),</span></span> <span class="line"><span style="color: #F8F8F2"> oklch(</span><span style="color: #BD93F9">65</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.25</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">250</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">)</span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="YrOfZzsMqmsC" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#YrOfZzsMqmsC");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.vibrant-element { /* Fallback to closest RGB approximation */ color: #ff0f52; /* P3 fallback for browsers with wider gamut support */ color: color(display-p3 1 0.12 0.37); /* Original value preserved for browsers that support it */ color: lab(55% 78 35); background: linear-gradient(to right, #cd4e15, #3887ab); background: linear-gradient( to right, oklch(65% 0.25 10deg), oklch(65% 0.25 250deg) ); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This layered approach ensures optimal color rendering across all browsers while allowing you to use the latest color technologies in your designs.</p><h4 level="4" id="color-function">Color function</h4><p>The <code>color()</code> function provides a standardized way to specify colors in various predefined color spaces, expanding your design options beyond the traditional RGB space. This allows you to access wider color gamuts and create more vibrant designs.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.vivid-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Using the Display P3 color space for wider gamut colors */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">color</span><span style="color: #F8F8F2">(display-p3 </span><span style="color: #BD93F9">1</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.1</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.3</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Using A98 RGB color space */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">color</span><span style="color: #F8F8F2">(a98-rgb </span><span style="color: #BD93F9">0.44</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.5</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.37</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="rltREUTrviqc" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#rltREUTrviqc");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.vivid-element { /* Using the Display P3 color space for wider gamut colors */ color: color(display-p3 1 0.1 0.3); /* Using A98 RGB color space */ background-color: color(a98-rgb 0.44 0.5 0.37); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support these advanced color functions yet, Bun's CSS bundler provides appropriate RGB fallbacks:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.vivid-element</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* RGB fallback first for maximum compatibility */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#fa1a4c</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Keep original for browsers that support it */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">color</span><span style="color: #F8F8F2">(display-p3 </span><span style="color: #BD93F9">1</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.1</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.3</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#6a805d</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">color</span><span style="color: #F8F8F2">(a98-rgb </span><span style="color: #BD93F9">0.44</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.5</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0.37</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="tBktadWVjAGe" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#tBktadWVjAGe");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.vivid-element { /* RGB fallback first for maximum compatibility */ color: #fa1a4c; /* Keep original for browsers that support it */ color: color(display-p3 1 0.1 0.3); background-color: #6a805d; background-color: color(a98-rgb 0.44 0.5 0.37); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This functionality lets you use modern color spaces immediately while ensuring your designs remain functional across all browsers, with optimal colors displayed in supporting browsers and reasonable approximations elsewhere.</p><h4 level="4" id="hwb-colors">HWB colors</h4><p>The HWB (Hue, Whiteness, Blackness) color model provides an intuitive way to express colors based on how much white or black is mixed with a pure hue. Many designers find this approach more natural for creating color variations compared to manipulating RGB or HSL values.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.easy-theming</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Pure cyan with no white or black added */</span></span> <span class="line"><span style="color: #F8F8F2"> --primary</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> hwb(</span><span style="color: #BD93F9">180</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Same hue, but with 20% white added (tint) */</span></span> <span class="line"><span style="color: #F8F8F2"> --primary-light</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> hwb(</span><span style="color: #BD93F9">180</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">20</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Same hue, but with 30% black added (shade) */</span></span> <span class="line"><span style="color: #F8F8F2"> --primary-dark</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> hwb(</span><span style="color: #BD93F9">180</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Muted version with both white and black added */</span></span> <span class="line"><span style="color: #F8F8F2"> --primary-muted</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> hwb(</span><span style="color: #BD93F9">180</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">20</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="AYuIWNDAcKBC" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#AYuIWNDAcKBC");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.easy-theming { /* Pure cyan with no white or black added */ --primary: hwb(180 0% 0%); /* Same hue, but with 20% white added (tint) */ --primary-light: hwb(180 20% 0%); /* Same hue, but with 30% black added (shade) */ --primary-dark: hwb(180 0% 30%); /* Muted version with both white and black added */ --primary-muted: hwb(180 30% 20%); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler automatically converts HWB colors to RGB for compatibility with all browsers:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.easy-theming</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> --primary</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#00ffff</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> --primary-light</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#33ffff</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> --primary-dark</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#00b3b3</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> --primary-muted</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#339999</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="gNkvxAThpQrW" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#gNkvxAThpQrW");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.easy-theming { --primary: #00ffff; --primary-light: #33ffff; --primary-dark: #00b3b3; --primary-muted: #339999; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>The HWB model makes it particularly easy to create systematic color variations for design systems, providing a more intuitive approach to creating consistent tints and shades than working directly with RGB or HSL values.</p><h4 level="4" id="color-notation">Color notation</h4><p>Modern CSS has introduced more intuitive and concise ways to express colors. Space-separated color syntax eliminates the need for commas in RGB and HSL values, while hex colors with alpha channels provide a compact way to specify transparency.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.modern-styling</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Space-separated RGB notation (no commas) */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rgb</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">50</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">100</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">200</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Space-separated RGB with alpha */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rgba</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">100</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">50</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">200</span><span style="color: #F8F8F2"> / </span><span style="color: #BD93F9">75</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Hex with alpha channel (8 digits) */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#00aaff80</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* HSL with simplified notation */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">box-shadow</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">5</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">10</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">hsl</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">200</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> / </span><span style="color: #BD93F9">40</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="xZUrvmfiwuXD" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#xZUrvmfiwuXD");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.modern-styling { /* Space-separated RGB notation (no commas) */ color: rgb(50 100 200); /* Space-separated RGB with alpha */ border-color: rgba(100 50 200 / 75%); /* Hex with alpha channel (8 digits) */ background-color: #00aaff80; /* HSL with simplified notation */ box-shadow: 0 5px 10px hsl(200 50% 30% / 40%); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler automatically converts these modern color formats to ensure compatibility with older browsers:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.modern-styling</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Converted to comma format for older browsers */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rgb</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">50</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">100</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">200</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Alpha channels handled appropriately */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rgba</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">100</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">50</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">200</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">0.75</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Hex+alpha converted to rgba when needed */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rgba</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">0</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">170</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">255</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">0.5</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">box-shadow</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">5</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">10</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rgba</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">38</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">115</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">153</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">0.4</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="JlZZtCcgilvw" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#JlZZtCcgilvw");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.modern-styling { /* Converted to comma format for older browsers */ color: rgb(50, 100, 200); /* Alpha channels handled appropriately */ border-color: rgba(100, 50, 200, 0.75); /* Hex+alpha converted to rgba when needed */ background-color: rgba(0, 170, 255, 0.5); box-shadow: 0 5px 10px rgba(38, 115, 153, 0.4); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This conversion process lets you write cleaner, more modern CSS while ensuring your styles work correctly across all browsers.</p><h4 level="4" id="light-dark-color-function">light-dark() color function</h4><p>The <code>light-dark()</code> function provides an elegant solution for implementing color schemes that respect the user's system preference without requiring complex media queries. This function accepts two color values and automatically selects the appropriate one based on the current color scheme context.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">root</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Define color scheme support */</span></span> <span class="line"><span style="color: #F8F8F2"> color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light dark;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.themed-component</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Automatically picks the right color based on system preference */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light-dark(</span><span style="color: #BD93F9">#ffffff</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">#121212</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light-dark(</span><span style="color: #BD93F9">#333333</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">#eeeeee</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light-dark(</span><span style="color: #BD93F9">#dddddd</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">#555555</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Override system preference when needed */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.light-theme</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.dark-theme</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> dark;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="lTaUGUBwiPRI" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#lTaUGUBwiPRI");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`:root { /* Define color scheme support */ color-scheme: light dark; } .themed-component { /* Automatically picks the right color based on system preference */ background-color: light-dark(#ffffff, #121212); color: light-dark(#333333, #eeeeee); border-color: light-dark(#dddddd, #555555); } /* Override system preference when needed */ .light-theme { color-scheme: light; } .dark-theme { color-scheme: dark; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support this feature yet, Bun's CSS bundler converts it to use CSS variables with proper fallbacks:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">root</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-light</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">initial</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-dark</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> ;</span></span> <span class="line"><span style="color: #F8F8F2"> color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light dark;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (prefers-color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> dark) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">root</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-light</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> ;</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-dark</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">initial</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.light-theme</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-light</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">initial</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-dark</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> ;</span></span> <span class="line"><span style="color: #F8F8F2"> color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> light;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.dark-theme</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-light</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> ;</span></span> <span class="line"><span style="color: #F8F8F2"> --lightningcss-dark</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">initial</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> color-scheme</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> dark;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.themed-component</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--lightningcss-light, </span><span style="color: #BD93F9">#ffffff</span><span style="color: #F8F8F2">)</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--lightningcss-dark, </span><span style="color: #BD93F9">#121212</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--lightningcss-light, </span><span style="color: #BD93F9">#333333</span><span style="color: #F8F8F2">) </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--lightningcss-dark, </span><span style="color: #BD93F9">#eeeeee</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--lightningcss-light, </span><span style="color: #BD93F9">#dddddd</span><span style="color: #F8F8F2">)</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--lightningcss-dark, </span><span style="color: #BD93F9">#555555</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="aQkTdrjlumng" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#aQkTdrjlumng");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`:root { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --lightningcss-light: ; --lightningcss-dark: initial; } } .light-theme { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; } .dark-theme { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; } .themed-component { background-color: var(--lightningcss-light, #ffffff) var(--lightningcss-dark, #121212); color: var(--lightningcss-light, #333333) var(--lightningcss-dark, #eeeeee); border-color: var(--lightningcss-light, #dddddd) var(--lightningcss-dark, #555555); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This approach gives you a clean way to handle light and dark themes without duplicating styles or writing complex media queries, while maintaining compatibility with browsers that don't yet support the feature natively.</p><h4 level="4" id="logical-properties">Logical properties</h4><p>CSS logical properties let you define layout, spacing, and sizing relative to the document's writing mode and text direction rather than physical screen directions. This is crucial for creating truly international layouts that automatically adapt to different writing systems.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.multilingual-component</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Margin that adapts to writing direction */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-inline-start</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Padding that makes sense regardless of text direction */</span></span> <span class="line"><span style="color: #F8F8F2"> padding-block</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Border radius for the starting corner at the top */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-start-start-radius</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">4</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Size that respects the writing mode */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">inline-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">80</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">block-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">auto</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="JvIyXEKrDTCB" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#JvIyXEKrDTCB");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.multilingual-component { /* Margin that adapts to writing direction */ margin-inline-start: 1rem; /* Padding that makes sense regardless of text direction */ padding-block: 1rem 2rem; /* Border radius for the starting corner at the top */ border-start-start-radius: 4px; /* Size that respects the writing mode */ inline-size: 80%; block-size: auto; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't fully support logical properties, Bun's CSS bundler compiles them to physical properties with appropriate directional adjustments:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* For left-to-right languages */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.multilingual-component</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">dir</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ltr</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-left</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding-bottom</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-top-left-radius</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">4</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">80</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">height</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">auto</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* For right-to-left languages */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.multilingual-component</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">dir</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">rtl</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-right</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding-bottom</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">rem</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-top-right-radius</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">4</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">80</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">height</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">auto</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="TNfkgaASosEc" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#TNfkgaASosEc");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* For left-to-right languages */ .multilingual-component:dir(ltr) { margin-left: 1rem; padding-top: 1rem; padding-bottom: 2rem; border-top-left-radius: 4px; width: 80%; height: auto; } /* For right-to-left languages */ .multilingual-component:dir(rtl) { margin-right: 1rem; padding-top: 1rem; padding-bottom: 2rem; border-top-right-radius: 4px; width: 80%; height: auto; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>If the <code>:dir()</code> selector isn't supported, additional fallbacks are automatically generated to ensure your layouts work properly across all browsers and writing systems. This makes creating internationalized designs much simpler while maintaining compatibility with older browsers.</p><h4 level="4" id="dir-selector">:dir() selector</h4><p>The <code>:dir()</code> pseudo-class selector allows you to style elements based on their text direction (RTL or LTR), providing a powerful way to create direction-aware designs without JavaScript. This selector matches elements based on their directionality as determined by the document or explicit direction attributes.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Apply different styles based on text direction */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.nav-arrow</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">dir</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ltr</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">transform</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rotate</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.nav-arrow</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">dir</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">rtl</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">transform</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rotate</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">180</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Position elements based on text flow */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">dir</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ltr</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-right</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">dir</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">rtl</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-left</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="nWQTjfOKjhjg" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#nWQTjfOKjhjg");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Apply different styles based on text direction */ .nav-arrow:dir(ltr) { transform: rotate(0deg); } .nav-arrow:dir(rtl) { transform: rotate(180deg); } /* Position elements based on text flow */ .sidebar:dir(ltr) { border-right: 1px solid #ddd; } .sidebar:dir(rtl) { border-left: 1px solid #ddd; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support the <code>:dir()</code> selector yet, Bun's CSS bundler converts it to the more widely supported <code>:lang()</code> selector with appropriate language mappings:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Converted to use language-based selectors as fallback */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.nav-arrow</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">en</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">fr</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">de</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">es</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">it</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">pt</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">nl</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">transform</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rotate</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.nav-arrow</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ar</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">he</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">fa</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">ur</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">transform</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rotate</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">180</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">en</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">fr</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">de</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">es</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">it</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">pt</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">nl</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-right</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ar</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">he</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">fa</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">ur</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border-left</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="EQdXLYrqWOZg" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#EQdXLYrqWOZg");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Converted to use language-based selectors as fallback */ .nav-arrow:lang(en, fr, de, es, it, pt, nl) { transform: rotate(0deg); } .nav-arrow:lang(ar, he, fa, ur) { transform: rotate(180deg); } .sidebar:lang(en, fr, de, es, it, pt, nl) { border-right: 1px solid #ddd; } .sidebar:lang(ar, he, fa, ur) { border-left: 1px solid #ddd; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This conversion lets you write direction-aware CSS that works reliably across browsers, even those that don't yet support the <code>:dir()</code> selector natively. If multiple arguments to <code>:lang()</code> aren't supported, further fallbacks are automatically provided.</p><h4 level="4" id="lang-selector">:lang() selector</h4><p>The <code>:lang()</code> pseudo-class selector allows you to target elements based on the language they're in, making it easy to apply language-specific styling. Modern CSS allows the <code>:lang()</code> selector to accept multiple language codes, letting you group language-specific rules more efficiently.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Typography adjustments for CJK languages */</span></span> <span class="line"><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">zh</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">ja</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">ko</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">line-height</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.8</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.05</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Different quote styles by language group */</span></span> <span class="line"><span style="color: #FF79C6">blockquote</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">fr</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">it</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">es</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">pt</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-style</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">italic</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">blockquote</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">de</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">nl</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">da</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #BD93F9">sv</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-weight</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">500</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="jEPTBjEolGzq" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#jEPTBjEolGzq");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Typography adjustments for CJK languages */ :lang(zh, ja, ko) { line-height: 1.8; font-size: 1.05em; } /* Different quote styles by language group */ blockquote:lang(fr, it, es, pt) { font-style: italic; } blockquote:lang(de, nl, da, sv) { font-weight: 500; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support multiple arguments in the <code>:lang()</code> selector, Bun's CSS bundler converts this syntax to use the <code>:is()</code> selector to maintain the same behavior:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Multiple languages grouped with :is() for better browser support */</span></span> <span class="line"><span style="color: #FF79C6">:is(</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">zh</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ja</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">ko</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">line-height</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.8</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.05</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">blockquote:is(</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">fr</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">it</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">es</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">pt</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-style</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">italic</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">blockquote:is(</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">de</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">nl</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">da</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">lang</span><span style="color: #FF79C6">(</span><span style="color: #BD93F9">sv</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-weight</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">500</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="ipIrjeyTEsFI" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#ipIrjeyTEsFI");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Multiple languages grouped with :is() for better browser support */ :is(:lang(zh), :lang(ja), :lang(ko)) { line-height: 1.8; font-size: 1.05em; } blockquote:is(:lang(fr), :lang(it), :lang(es), :lang(pt)) { font-style: italic; } blockquote:is(:lang(de), :lang(nl), :lang(da), :lang(sv)) { font-weight: 500; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>If needed, Bun can provide additional fallbacks for <code>:is()</code> as well, ensuring your language-specific styles work across all browsers. This approach simplifies creating internationalized designs with distinct typographic and styling rules for different language groups.</p><h4 level="4" id="is-selector">:is() selector</h4><p>The <code>:is()</code> pseudo-class function (formerly <code>:matches()</code>) allows you to create more concise and readable selectors by grouping multiple selectors together. It accepts a selector list as its argument and matches if any of the selectors in that list match, significantly reducing repetition in your CSS.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Instead of writing these separately */</span></span> <span class="line"><span style="color: #6272A4">/* </span></span> <span class="line"><span style="color: #6272A4">.article h1,</span></span> <span class="line"><span style="color: #6272A4">.article h2,</span></span> <span class="line"><span style="color: #6272A4">.article h3 {</span></span> <span class="line"><span style="color: #6272A4"> margin-top: 1.5em;</span></span> <span class="line"><span style="color: #6272A4">}</span></span> <span class="line"><span style="color: #6272A4">*/</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* You can write this */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.article</span><span style="color: #FF79C6"> :is(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h3</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.5</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Complex example with multiple groups */</span></span> <span class="line"><span style="color: #FF79C6">:is(header</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> main</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> footer</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6">:is(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.title</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Heading Font</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">sans-serif</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="VLLnIraNeCAD" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#VLLnIraNeCAD");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Instead of writing these separately */ /* .article h1, .article h2, .article h3 { margin-top: 1.5em; } */ /* You can write this */ .article :is(h1, h2, h3) { margin-top: 1.5em; } /* Complex example with multiple groups */ :is(header, main, footer) :is(h1, h2, .title) { font-family: "Heading Font", sans-serif; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support <code>:is()</code>, Bun's CSS bundler provides fallbacks using vendor-prefixed alternatives:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Fallback using -webkit-any */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.article</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-webkit-any</span><span style="color: #FF79C6">(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h3</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.5</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Fallback using -moz-any */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.article</span><span style="color: #FF79C6"> </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-moz-any</span><span style="color: #FF79C6">(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h3</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.5</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Original preserved for modern browsers */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.article</span><span style="color: #FF79C6"> :is(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h3</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.5</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Complex example with fallbacks */</span></span> <span class="line"><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-webkit-any</span><span style="color: #FF79C6">(header</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> main</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> footer</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-webkit-any</span><span style="color: #FF79C6">(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.title</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Heading Font</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">sans-serif</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-moz-any</span><span style="color: #FF79C6">(header</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> main</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> footer</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-moz-any</span><span style="color: #FF79C6">(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.title</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Heading Font</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">sans-serif</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">:is(header</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> main</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> footer</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6">:is(h1</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> h2</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.title</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Heading Font</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">sans-serif</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="zPDVNHMDSxeC" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#zPDVNHMDSxeC");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Fallback using -webkit-any */ .article :-webkit-any(h1, h2, h3) { margin-top: 1.5em; } /* Fallback using -moz-any */ .article :-moz-any(h1, h2, h3) { margin-top: 1.5em; } /* Original preserved for modern browsers */ .article :is(h1, h2, h3) { margin-top: 1.5em; } /* Complex example with fallbacks */ :-webkit-any(header, main, footer) :-webkit-any(h1, h2, .title) { font-family: "Heading Font", sans-serif; } :-moz-any(header, main, footer) :-moz-any(h1, h2, .title) { font-family: "Heading Font", sans-serif; } :is(header, main, footer) :is(h1, h2, .title) { font-family: "Heading Font", sans-serif; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>It's worth noting that the vendor-prefixed versions have some limitations compared to the standardized <code>:is()</code> selector, particularly with complex selectors. Bun handles these limitations intelligently, only using prefixed versions when they'll work correctly.</p><h4 level="4" id="not-selector">:not() selector</h4><p>The <code>:not()</code> pseudo-class allows you to exclude elements that match a specific selector. The modern version of this selector accepts multiple arguments, letting you exclude multiple patterns with a single, concise selector.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Select all buttons except primary and secondary variants */</span></span> <span class="line"><span style="color: #FF79C6">button</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(</span><span style="color: #50FA7B; font-style: italic">.primary</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.secondary</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#f5f5f5</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Apply styles to all headings except those inside sidebars or footers */</span></span> <span class="line"><span style="color: #FF79C6">h2</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(</span><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #FF79C6"> *</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> footer *)</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="yIkrciwbOtoJ" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#yIkrciwbOtoJ");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Select all buttons except primary and secondary variants */ button:not(.primary, .secondary) { background-color: #f5f5f5; border: 1px solid #ddd; } /* Apply styles to all headings except those inside sidebars or footers */ h2:not(.sidebar *, footer *) { margin-top: 2em; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support multiple arguments in <code>:not()</code>, Bun's CSS bundler converts this syntax to a more compatible form while preserving the same behavior:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Converted to use :not with :is() for compatibility */</span></span> <span class="line"><span style="color: #FF79C6">button</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(:is(</span><span style="color: #50FA7B; font-style: italic">.primary</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.secondary</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#f5f5f5</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">h2</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(:is(</span><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #FF79C6"> *</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> footer *)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">margin-top</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">em</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="LxPKhphgeJyc" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#LxPKhphgeJyc");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Converted to use :not with :is() for compatibility */ button:not(:is(.primary, .secondary)) { background-color: #f5f5f5; border: 1px solid #ddd; } h2:not(:is(.sidebar *, footer *)) { margin-top: 2em; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>And if <code>:is()</code> isn't supported, Bun can generate further fallbacks:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Even more fallbacks for maximum compatibility */</span></span> <span class="line"><span style="color: #FF79C6">button</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-webkit-any</span><span style="color: #FF79C6">(</span><span style="color: #50FA7B; font-style: italic">.primary</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.secondary</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#f5f5f5</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">button</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">-moz-any</span><span style="color: #FF79C6">(</span><span style="color: #50FA7B; font-style: italic">.primary</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.secondary</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#f5f5f5</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">button</span><span style="color: #FF79C6; font-style: italic">:</span><span style="color: #50FA7B; font-style: italic">not</span><span style="color: #FF79C6">(:is(</span><span style="color: #50FA7B; font-style: italic">.primary</span><span style="color: #F8F8F2">,</span><span style="color: #FF79C6"> </span><span style="color: #50FA7B; font-style: italic">.secondary</span><span style="color: #FF79C6">)</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#f5f5f5</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">border</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">solid</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ddd</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="PpMyrUmSCkzg" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#PpMyrUmSCkzg");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Even more fallbacks for maximum compatibility */ button:not(:-webkit-any(.primary, .secondary)) { background-color: #f5f5f5; border: 1px solid #ddd; } button:not(:-moz-any(.primary, .secondary)) { background-color: #f5f5f5; border: 1px solid #ddd; } button:not(:is(.primary, .secondary)) { background-color: #f5f5f5; border: 1px solid #ddd; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This conversion ensures your negative selectors work correctly across all browsers while maintaining the correct specificity and behavior of the original selector.</p><h4 level="4" id="math-functions">Math functions</h4><p>CSS now includes a rich set of mathematical functions that let you perform complex calculations directly in your stylesheets. These include standard math functions (<code>round()</code>, <code>mod()</code>, <code>rem()</code>, <code>abs()</code>, <code>sign()</code>), trigonometric functions (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>), and exponential functions (<code>pow()</code>, <code>sqrt()</code>, <code>exp()</code>, <code>log()</code>, <code>hypot()</code>).</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.dynamic-sizing</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Clamp a value between minimum and maximum */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> clamp(</span><span style="color: #BD93F9">200</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">800</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Round to the nearest multiple */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">round</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">14.8</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">5</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">);</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Trigonometry for animations or layouts */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">transform</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rotate</span><span style="color: #F8F8F2">(</span><span style="color: #8BE9FD">calc</span><span style="color: #F8F8F2">(sin(</span><span style="color: #BD93F9">45</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">) * </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">));</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Complex math with multiple functions */</span></span> <span class="line"><span style="color: #F8F8F2"> --scale-factor</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> pow(</span><span style="color: #BD93F9">1.25</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">3</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">calc</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">16</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">*</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--scale-factor));</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="OQcQfasmaGvB" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#OQcQfasmaGvB");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.dynamic-sizing { /* Clamp a value between minimum and maximum */ width: clamp(200px, 50%, 800px); /* Round to the nearest multiple */ padding: round(14.8px, 5px); /* Trigonometry for animations or layouts */ transform: rotate(calc(sin(45deg) * 50deg)); /* Complex math with multiple functions */ --scale-factor: pow(1.25, 3); font-size: calc(16px * var(--scale-factor)); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler evaluates these mathematical expressions at build time when all values are known constants (not variables), resulting in optimized output:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.dynamic-sizing</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> clamp(</span><span style="color: #BD93F9">200</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">800</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">padding</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">15</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">transform</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">rotate</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">35.36</span><span style="color: #FF79C6">deg</span><span style="color: #F8F8F2">);</span></span> <span class="line"><span style="color: #F8F8F2"> --scale-factor</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1.953125</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-size</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">calc</span><span style="color: #F8F8F2">(</span><span style="color: #BD93F9">16</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">*</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">var</span><span style="color: #F8F8F2">(--scale-factor));</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="eRVeugwssWLh" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#eRVeugwssWLh");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.dynamic-sizing { width: clamp(200px, 50%, 800px); padding: 15px; transform: rotate(35.36deg); --scale-factor: 1.953125; font-size: calc(16px * var(--scale-factor)); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This approach lets you write more expressive and maintainable CSS with meaningful mathematical relationships, which then gets compiled to optimized values for maximum browser compatibility and performance.</p><h4 level="4" id="media-query-ranges">Media query ranges</h4><p>Modern CSS supports intuitive range syntax for media queries, allowing you to specify breakpoints using comparison operators like <code><</code>, <code>></code>, <code><=</code>, and <code>>=</code> instead of the more verbose <code>min-</code> and <code>max-</code> prefixes. This syntax is more readable and matches how we normally think about values and ranges.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Modern syntax with comparison operators */</span></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">width</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">>=</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.container</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">max-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">720</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Inclusive range using <= and >= */</span></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6"><=</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">width</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6"><=</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1199</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">flex</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Exclusive range using < and > */</span></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">width</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">></span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">320</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6">and</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">width</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6"><</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.mobile-only</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">block</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="OfGenGiVwhmA" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#OfGenGiVwhmA");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Modern syntax with comparison operators */ @media (width >= 768px) { .container { max-width: 720px; } } /* Inclusive range using <= and >= */ @media (768px <= width <= 1199px) { .sidebar { display: flex; } } /* Exclusive range using < and > */ @media (width > 320px) and (width < 768px) { .mobile-only { display: block; } }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Bun's CSS bundler converts these modern range queries to traditional media query syntax for compatibility with all browsers:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Converted to traditional min/max syntax */</span></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">min-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.container</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">max-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">720</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">min-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">768</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6">and</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">max-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">1199</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.sidebar</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">flex</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">@media</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">min-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">321</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) </span><span style="color: #FF79C6">and</span><span style="color: #F8F8F2"> (</span><span style="color: #8BE9FD">max-width</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">767</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">) {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">.mobile-only</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">block</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> }</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="roMVZsbNgqEE" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#roMVZsbNgqEE");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Converted to traditional min/max syntax */ @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 768px) and (max-width: 1199px) { .sidebar { display: flex; } } @media (min-width: 321px) and (max-width: 767px) { .mobile-only { display: block; } }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This lets you write more intuitive and mathematical media queries while ensuring your stylesheets work correctly across all browsers, including those that don't support the modern range syntax.</p><h4 level="4" id="shorthands">Shorthands</h4><p>CSS has introduced several modern shorthand properties that improve code readability and maintainability. Bun's CSS bundler ensures these convenient shorthands work on all browsers by converting them to their longhand equivalents when needed.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* Alignment shorthands */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.flex-container</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Shorthand for align-items and justify-items */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">place-items</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">center</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">start</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Shorthand for align-content and justify-content */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">place-content</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">space-between</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">center</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.grid-item</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Shorthand for align-self and justify-self */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">place-self</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">end</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">center</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Two-value overflow */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.content-box</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* First value for horizontal, second for vertical */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">overflow</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">hidden</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">auto</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Enhanced text-decoration */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.fancy-link</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Combines multiple text decoration properties */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">text-decoration</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">underline</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">dotted</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* Two-value display syntax */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.component</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Outer display type + inner display type */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">inline</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">flex</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="FmCdRCpJNQiH" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#FmCdRCpJNQiH");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* Alignment shorthands */ .flex-container { /* Shorthand for align-items and justify-items */ place-items: center start; /* Shorthand for align-content and justify-content */ place-content: space-between center; } .grid-item { /* Shorthand for align-self and justify-self */ place-self: end center; } /* Two-value overflow */ .content-box { /* First value for horizontal, second for vertical */ overflow: hidden auto; } /* Enhanced text-decoration */ .fancy-link { /* Combines multiple text decoration properties */ text-decoration: underline dotted blue 2px; } /* Two-value display syntax */ .component { /* Outer display type + inner display type */ display: inline flex; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support these modern shorthands, Bun converts them to their component longhand properties:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.flex-container</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Expanded alignment properties */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">align-items</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">center</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">justify-items</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">start</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">align-content</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">space-between</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">justify-content</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">center</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.grid-item</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">align-self</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">end</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">justify-self</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">center</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.content-box</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Separate overflow properties */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">overflow-x</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">hidden</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">overflow-y</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">auto</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.fancy-link</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Individual text decoration properties */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">text-decoration-line</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">underline</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">text-decoration-style</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">dotted</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">text-decoration-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> text-decoration-thickness</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">2</span><span style="color: #FF79C6">px</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.component</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Single value display */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">display</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">inline-flex</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="ZNBGAKZpTbeF" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#ZNBGAKZpTbeF");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.flex-container { /* Expanded alignment properties */ align-items: center; justify-items: start; align-content: space-between; justify-content: center; } .grid-item { align-self: end; justify-self: center; } .content-box { /* Separate overflow properties */ overflow-x: hidden; overflow-y: auto; } .fancy-link { /* Individual text decoration properties */ text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: blue; text-decoration-thickness: 2px; } .component { /* Single value display */ display: inline-flex; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This conversion ensures your stylesheets remain clean and maintainable while providing the broadest possible browser compatibility.</p><h4 level="4" id="double-position-gradients">Double position gradients</h4><p>The double position gradient syntax is a modern CSS feature that allows you to create hard color stops in gradients by specifying the same color at two adjacent positions. This creates a sharp transition rather than a smooth fade, which is useful for creating stripes, color bands, and other multi-color designs.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.striped-background</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Creates a sharp transition from green to red at 30%-40% */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">yellow</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">green</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">20</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">green</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Double position creates hard stop */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">70</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">70</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">100</span><span style="color: #FF79C6">%</span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.progress-bar</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Creates distinct color sections */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#4caf50</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">25</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Green from 0% to 25% */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ffc107</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">25</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Yellow from 25% to 50% */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#2196f3</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">75</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Blue from 50% to 75% */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#9c27b0</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">75</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">100</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Purple from 75% to 100% */</span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="znHqbocVTfPS" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#znHqbocVTfPS");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.striped-background { /* Creates a sharp transition from green to red at 30%-40% */ background: linear-gradient( to right, yellow 0%, green 20%, green 30%, red 30%, /* Double position creates hard stop */ red 70%, blue 70%, blue 100% ); } .progress-bar { /* Creates distinct color sections */ background: linear-gradient( to right, #4caf50 0% 25%, /* Green from 0% to 25% */ #ffc107 25% 50%, /* Yellow from 25% to 50% */ #2196f3 50% 75%, /* Blue from 50% to 75% */ #9c27b0 75% 100% /* Purple from 75% to 100% */ ); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support this syntax, Bun's CSS bundler automatically converts it to the traditional format by duplicating color stops:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.striped-background</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">yellow</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">green</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">20</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">green</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">30</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Split into two color stops */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">70</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">70</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">100</span><span style="color: #FF79C6">%</span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.progress-bar</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">linear-gradient</span><span style="color: #F8F8F2">(</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">to</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">right</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#4caf50</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">0</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#4caf50</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">25</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Two stops for green section */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ffc107</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">25</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#ffc107</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Two stops for yellow section */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#2196f3</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">50</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#2196f3</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">75</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Two stops for blue section */</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#9c27b0</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">75</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">#9c27b0</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">100</span><span style="color: #FF79C6">%</span><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Two stops for purple section */</span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="AmANKrHHhDQd" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#AmANKrHHhDQd");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.striped-background { background: linear-gradient( to right, yellow 0%, green 20%, green 30%, red 30%, /* Split into two color stops */ red 70%, blue 70%, blue 100% ); } .progress-bar { background: linear-gradient( to right, #4caf50 0%, #4caf50 25%, /* Two stops for green section */ #ffc107 25%, #ffc107 50%, /* Two stops for yellow section */ #2196f3 50%, #2196f3 75%, /* Two stops for blue section */ #9c27b0 75%, #9c27b0 100% /* Two stops for purple section */ ); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This conversion lets you use the cleaner double position syntax in your source code while ensuring gradients display correctly in all browsers.</p><h4 level="4" id="system-ui-font">system-ui font</h4><p>The <code>system-ui</code> generic font family lets you use the device's native UI font, creating interfaces that feel more integrated with the operating system. This provides a more native look and feel without having to specify different font stacks for each platform.</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.native-interface</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Use the system's default UI font */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">system-ui</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.fallback-aware</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* System UI font with explicit fallbacks */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">system-ui</span><span style="color: #F8F8F2">, </span><span style="color: #BD93F9">sans-serif</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="NJszlcKJjvjm" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#NJszlcKJjvjm");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.native-interface { /* Use the system's default UI font */ font-family: system-ui; } .fallback-aware { /* System UI font with explicit fallbacks */ font-family: system-ui, sans-serif; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>For browsers that don't support <code>system-ui</code>, Bun's CSS bundler automatically expands it to a comprehensive cross-platform font stack:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.native-interface</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Expanded to support all major platforms */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">system-ui</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">-apple-system</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> BlinkMacSystemFont,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Segoe UI</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> Roboto,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Noto Sans</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> Ubuntu,</span></span> <span class="line"><span style="color: #F8F8F2"> Cantarell,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Helvetica Neue</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.fallback-aware</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Preserves the original fallback after the expanded stack */</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">font-family</span><span style="color: #FF79C6">:</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">system-ui</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">-apple-system</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> BlinkMacSystemFont,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Segoe UI</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> Roboto,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Noto Sans</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> Ubuntu,</span></span> <span class="line"><span style="color: #F8F8F2"> Cantarell,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">Helvetica Neue</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">sans-serif</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="LohoSwCEfHfO" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#LohoSwCEfHfO");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.native-interface { /* Expanded to support all major platforms */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue"; } .fallback-aware { /* Preserves the original fallback after the expanded stack */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This approach gives you the simplicity of writing just <code>system-ui</code> in your source code while ensuring your interface adapts correctly to all operating systems and browsers. The expanded font stack includes appropriate system fonts for macOS/iOS, Windows, Android, Linux, and fallbacks for older browsers.</p><h2 level="2" anchor-id="css-modules" id="css-modules" class="anchored "><a name="css-modules" class="relative top-[-80px] h-0 invisible block"></a><a href="#css-modules" class="no-underline hover:no-underline font-bold hover:none cursor-default">CSS Modules</a></h2><p>Bun's bundler also supports bundling <a href="https://css-tricks.com/css-modules-part-1-need/">CSS modules</a> in addition to <a href="/docs/bundler/css">regular CSS</a> with support for the following features:</p><ul><li class="">Automatically detecting CSS module files (<code>.module.css</code>) with zero configuration</li><li class="">Composition (<code>composes</code> property)</li><li class="">Importing CSS modules into JSX/TSX</li><li class="">Warnings/errors for invalid usages of CSS modules</li></ul><p>A CSS module is a CSS file (with the <code>.module.css</code> extension) where are all class names and animations are scoped to the file. This helps you avoid class name collisions as CSS declarations are globally scoped by default.</p><p>Under the hood, Bun's bundler transforms locally scoped class names into unique identifiers.</p><h2 level="2" anchor-id="getting-started" id="getting-started" class="anchored "><a name="getting-started" class="relative top-[-80px] h-0 invisible block"></a><a href="#getting-started" class="no-underline hover:no-underline font-bold hover:none cursor-default">Getting started</a></h2><p>Create a CSS file with the <code>.module.css</code> extension:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* styles.module.css */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* other-styles.module.css */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="eMRevyayseRx" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#eMRevyayseRx");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* styles.module.css */ .button { color: red; } /* other-styles.module.css */ .button { color: blue; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>You can then import this file, for example into a TSX file:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #FF79C6">import</span><span style="color: #F8F8F2"> styles </span><span style="color: #FF79C6">from</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./styles.module.css</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #FF79C6">import</span><span style="color: #F8F8F2"> otherStyles </span><span style="color: #FF79C6">from</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./other-styles.module.css</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #FF79C6">export</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">default</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">function</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B">App</span><span style="color: #F8F8F2">() {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">return</span><span style="color: #F8F8F2"> (</span></span> <span class="line"><span style="color: #F8F8F2"> <></span></span> <span class="line"><span style="color: #F8F8F2"> <</span><span style="color: #FF79C6">button</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">className</span><span style="color: #FF79C6">=</span><span style="color: #F8F8F2">{styles.button}>Red button!</</span><span style="color: #FF79C6">button</span><span style="color: #F8F8F2">></span></span> <span class="line"><span style="color: #F8F8F2"> <</span><span style="color: #FF79C6">button</span><span style="color: #F8F8F2"> </span><span style="color: #50FA7B; font-style: italic">className</span><span style="color: #FF79C6">=</span><span style="color: #F8F8F2">{otherStyles.button}>Blue button!</</span><span style="color: #FF79C6">button</span><span style="color: #F8F8F2">></span></span> <span class="line"><span style="color: #F8F8F2"> </></span></span> <span class="line"><span style="color: #F8F8F2"> );</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="jrAQQABSlvyf" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#jrAQQABSlvyf");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`import styles from "./styles.module.css"; import otherStyles from "./other-styles.module.css"; export default function App() { return ( <> <button className={styles.button}>Red button!</button> <button className={otherStyles.button}>Blue button!</button> </> ); }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>The <code>styles</code> object from importing the CSS module file will be an object with all class names as keys and their unique identifiers as values:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #FF79C6">import</span><span style="color: #F8F8F2"> styles </span><span style="color: #FF79C6">from</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./styles.module.css</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #FF79C6">import</span><span style="color: #F8F8F2"> otherStyles </span><span style="color: #FF79C6">from</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./other-styles.module.css</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2">console.</span><span style="color: #50FA7B">log</span><span style="color: #F8F8F2">(styles);</span></span> <span class="line"><span style="color: #F8F8F2">console.</span><span style="color: #50FA7B">log</span><span style="color: #F8F8F2">(otherStyles);</span></span> <span class="line"></span></code></pre></div><div id="ONyvUQPzgklc" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#ONyvUQPzgklc");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`import styles from "./styles.module.css"; import otherStyles from "./other-styles.module.css"; console.log(styles); console.log(otherStyles);`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>This will output:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #F8F8F2">{</span></span> <span class="line"><span style="color: #F8F8F2"> button: </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">button_123</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #F8F8F2">{</span></span> <span class="line"><span style="color: #F8F8F2"> button: </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">button_456</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="OAysqixawgqi" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#OAysqixawgqi");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`{ button: "button_123"; } { button: "button_456"; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>As you can see, the class names are unique to each file, avoiding any collisions!</p><h3 level="3" anchor-id="composition" id="composition" class="anchored "><a name="composition" class="relative top-[-80px] h-0 invisible block"></a><a href="#composition" class="no-underline hover:no-underline font-bold hover:none cursor-default">Composition</a></h3><p>CSS modules allow you to <em>compose</em> class selectors together. This lets you reuse style rules across multiple classes.</p><p>For example:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* styles.module.css */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> composes</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #F8F8F2; font-style: italic; text-decoration: underline">background</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.background</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="rVkbfGBqXWQt" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#rVkbfGBqXWQt");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* styles.module.css */ .button { composes: background; color: red; } .background { background-color: blue; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><p>Would be the same as writing:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.background</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="BhTuwRjevUeP" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#BhTuwRjevUeP");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`.button { background-color: blue; color: red; } .background { background-color: blue; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><div class="callout dark mx-[calc(-1*var(--horizontal-padding))] my-0 border-b border-t border-b-gray-200 border-t-gray-200 bg-gray-100 px-4 py-[13px] text-[92%] leading-6 dark:border-b-gray-900 dark:border-t-gray-900 dark:bg-gray-800 md:mx-0 md:my-5 md:rounded-[5px] md:border md:border-gray-200 md:py-[13px] dark:md:border-gray-900"><p>There are a couple rules to keep in mind when using <code>composes</code>:</p><ul><li class="">A <code>composes</code> property must come before any regular CSS properties or declarations</li><li class="">You can only use <code>composes</code> on a <strong>simple selector with a single class name</strong>:</li></ul><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #50FA7B; font-style: italic">#button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Invalid! `#button` is not a class selector */</span></span> <span class="line"><span style="color: #F8F8F2"> composes</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #F8F8F2; font-style: italic; text-decoration: underline">background</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2">,</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button-secondary</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #6272A4">/* Invalid! `.button, .button-secondary` is not a simple selector */</span></span> <span class="line"><span style="color: #F8F8F2"> composes</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #F8F8F2; font-style: italic; text-decoration: underline">background</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="IqFRFzAqCkGN" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#IqFRFzAqCkGN");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`#button { /* Invalid! \`#button\` is not a class selector */ composes: background; } .button, .button-secondary { /* Invalid! \`.button, .button-secondary\` is not a simple selector */ composes: background; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div></div><h3 level="3" anchor-id="composing-from-a-separate-css-module-file" id="composing-from-a-separate-css-module-file" class="anchored "><a name="composing-from-a-separate-css-module-file" class="relative top-[-80px] h-0 invisible block"></a><a href="#composing-from-a-separate-css-module-file" class="no-underline hover:no-underline font-bold hover:none cursor-default">Composing from a separate CSS module file</a></h3><p>You can also compose from a separate CSS module file:</p><div class="CodeBlock "><div class="relative "><div><pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #6272A4">/* background.module.css */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.background</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">background-color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">blue</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color: #6272A4">/* styles.module.css */</span></span> <span class="line"><span style="color: #50FA7B; font-style: italic">.button</span><span style="color: #F8F8F2"> {</span></span> <span class="line"><span style="color: #F8F8F2"> composes</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #F8F8F2; font-style: italic; text-decoration: underline">background</span><span style="color: #F8F8F2"> from </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./background.module.css</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #8BE9FD">color</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> </span><span style="color: #BD93F9">red</span><span style="color: #F8F8F2">;</span></span> <span class="line"><span style="color: #F8F8F2">}</span></span> <span class="line"></span></code></pre></div><div id="IsLxcWSudDVz" class="CopyIcon copy absolute right-[6px] "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="clipboard h-7 w-7 cursor-pointer p-1 text-white opacity-70 hover:opacity-100 "><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="check hidden h-7 w-7 p-1 text-white "><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg><script>document.addEventListener("DOMContentLoaded",()=>{const clicker=document.querySelector("#IsLxcWSudDVz");clicker.addEventListener("click",(ev)=>{navigator.clipboard.writeText(`/* background.module.css */ .background { background-color: blue; } /* styles.module.css */ .button { composes: background from "./background.module.css"; color: red; }`).then(()=>{clicker.querySelector(".clipboard").classList.add("hidden");clicker.querySelector(".check").classList.remove("hidden");setTimeout(()=>{clicker.querySelector(".clipboard").classList.remove("hidden");clicker.querySelector(".check").classList.add("hidden")},2500)})})});</script></div></div></div><div class="callout dark mx-[calc(-1*var(--horizontal-padding))] my-0 border-b border-t border-b-gray-200 border-t-gray-200 bg-gray-100 px-4 py-[13px] text-[92%] leading-6 dark:border-b-gray-900 dark:border-t-gray-900 dark:bg-gray-800 md:mx-0 md:my-5 md:rounded-[5px] md:border md:border-gray-200 md:py-[13px] dark:md:border-gray-900"><p>When composing classes from separate files, be sure that they do not contain the same properties.</p><p>The CSS module spec says that composing classes from separate files with conflicting properties is undefined behavior, meaning that the output may differ and be unreliable.</p></div></article><div class="h-12"></div></div><div class="ml-auto mr-auto w-full max-w-screen-md px-4"><div class="flex flex-row justify-between gap-2"><a href="/docs/bundler/html" class="hover group flex-1 no-underline hover:transform-none hover:no-underline"><div class="button flex items-center justify-between rounded-lg border border-gray-300 px-3 py-3 text-lg no-underline group-hover:border-gray-400 group-hover:bg-gray-100 dark:border-gray-600 dark:group-hover:border-gray-600 dark:group-hover:bg-gray-800 flex-row"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="icon h-6 w-6 text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"></path></svg><div class="text-right"><p class="text-xs uppercase text-gray-400 dark:text-gray-500 ">Previous</p><p class="text-gray-700 dark:text-gray-200 ">HTML & static sites</p></div></div></a><a href="/docs/bundler/fullstack" class="hover group flex-1 no-underline hover:transform-none hover:no-underline"><div class="button flex items-center justify-between rounded-lg border border-gray-300 px-3 py-3 text-lg no-underline group-hover:border-gray-400 group-hover:bg-gray-100 dark:border-gray-600 dark:group-hover:border-gray-600 dark:group-hover:bg-gray-800 flex-row-reverse"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="icon h-6 w-6 text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path></svg><div class="text-left"><p class="text-xs uppercase text-gray-400 dark:text-gray-500 ">Next</p><p class="text-gray-700 dark:text-gray-200 ">Fullstack Dev Server</p></div></div></a></div><div class="h-12"></div><div class="h-0 border-b border-gray-200 dark:border-gray-700"></div><div class="h-6"></div><div class="text-md flex-column flex items-end px-0 text-black"><a class="ml-auto hover:transform-none hover:no-underline" href="https://github.com/oven-sh/bun/edit/main/docs/bundler/css.md"><div class="inline-flex cursor-pointer flex-row items-center justify-start rounded-[5px] px-[10px] py-[4px] opacity-80 hover:bg-gray-200 hover:bg-gray-200 hover:opacity-100 dark:text-white dark:hover:bg-gray-800"><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSIjMUIxRjIzIi8+Cjwvc3ZnPgo=" alt="GitHub logo" class="block h-[18px] dark:hidden"/><img src="data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIxMDI0IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMEMzLjU4IDAgMCAzLjU4IDAgOEMwIDExLjU0IDIuMjkgMTQuNTMgNS40NyAxNS41OUM1Ljg3IDE1LjY2IDYuMDIgMTUuNDIgNi4wMiAxNS4yMUM2LjAyIDE1LjAyIDYuMDEgMTQuMzkgNi4wMSAxMy43MkM0IDE0LjA5IDMuNDggMTMuMjMgMy4zMiAxMi43OEMzLjIzIDEyLjU1IDIuODQgMTEuODQgMi41IDExLjY1QzIuMjIgMTEuNSAxLjgyIDExLjEzIDIuNDkgMTEuMTJDMy4xMiAxMS4xMSAzLjU3IDExLjcgMy43MiAxMS45NEM0LjQ0IDEzLjE1IDUuNTkgMTIuODEgNi4wNSAxMi42QzYuMTIgMTIuMDggNi4zMyAxMS43MyA2LjU2IDExLjUzQzQuNzggMTEuMzMgMi45MiAxMC42NCAyLjkyIDcuNThDMi45MiA2LjcxIDMuMjMgNS45OSAzLjc0IDUuNDNDMy42NiA1LjIzIDMuMzggNC40MSAzLjgyIDMuMzFDMy44MiAzLjMxIDQuNDkgMy4xIDYuMDIgNC4xM0M2LjY2IDMuOTUgNy4zNCAzLjg2IDguMDIgMy44NkM4LjcgMy44NiA5LjM4IDMuOTUgMTAuMDIgNC4xM0MxMS41NSAzLjA5IDEyLjIyIDMuMzEgMTIuMjIgMy4zMUMxMi42NiA0LjQxIDEyLjM4IDUuMjMgMTIuMyA1LjQzQzEyLjgxIDUuOTkgMTMuMTIgNi43IDEzLjEyIDcuNThDMTMuMTIgMTAuNjUgMTEuMjUgMTEuMzMgOS40NyAxMS41M0M5Ljc2IDExLjc4IDEwLjAxIDEyLjI2IDEwLjAxIDEzLjAxQzEwLjAxIDE0LjA4IDEwIDE0Ljk0IDEwIDE1LjIxQzEwIDE1LjQyIDEwLjE1IDE1LjY3IDEwLjU1IDE1LjU5QzEzLjcxIDE0LjUzIDE2IDExLjUzIDE2IDhDMTYgMy41OCAxMi40MiAwIDggMFoiIHRyYW5zZm9ybT0ic2NhbGUoNjQpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K" alt="GitHub logo" class="hidden h-[18px] dark:block"/><div class="w-[8px]"></div><p class="text-gray-800 dark:text-gray-300">Edit on GitHub</p></div></a></div></div></div></section><script>const sun=document.querySelectorAll(".sun");const moon=document.querySelectorAll(".moon");sun.forEach((node)=>node.addEventListener("click",()=>{globalThis.__setTheme("light")}));moon.forEach((node)=>node.addEventListener("click",()=>{globalThis.__setTheme("dark")}));</script><script>const scrollPositionKey="scroll-position-"+window.location.pathname;window.addEventListener("beforeunload",()=>{localStorage.setItem(scrollPositionKey,document.querySelector("html").scrollTop)});const oldScrollPosition=localStorage.getItem(scrollPositionKey);if(oldScrollPosition){localStorage.removeItem(scrollPositionKey)}</script><script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script><script type="text/javascript">docsearch({appId:"2527C13E0N",apiKey:"4efc87205e1fce4a1f267cadcab42cb2",indexName:"bun",container:"#docsearchbox"});</script><script type="module" src="/inkeep.min.js" defer=""></script></body> </html>