[{"data":1,"prerenderedAt":3587},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-comparisons-tailwind":407,"-docs-getting-started-comparisons-tailwind-surround":3586},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3577,"extension":3578,"links":3579,"meta":3580,"navigation":7,"path":3581,"seo":3582,"sitemap":3583,"stem":3584,"__hash__":3585},"docs_gettingStarted/docs/getting-started/04.comparisons/02.tailwind.md","Styleframe vs. Tailwind CSS",{"type":411,"value":412,"toc":3554},"minimark",[413,417,442,460,463,469,473,476,499,503,507,510,543,547,550,594,598,739,743,750,756,761,794,797,803,807,812,817,820,831,834,848,851,873,877,880,891,894,897,1222,1225,1466,1469,1472,1485,1535,1538,1561,1564,1576,1580,1583,1594,1598,1601,2117,2121,2124,2323,2326,2330,2333,2347,2350,2356,2361,2716,2730,2796,2802,3072,3082,3087,3123,3129,3132,3135,3174,3187,3192,3216,3220,3223,3226,3237,3240,3243,3254,3258,3261,3272,3275,3285,3288,3291,3295,3298,3309,3312,3318,3321,3324,3328,3331,3359,3362,3366,3369,3418,3460,3468,3471,3475,3478,3484,3488,3524,3528,3550],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433,434,437,438,441],"p",{},"Both ",[422,423,424],"strong",{},"Styleframe"," and ",[422,427,428],{},"Tailwind CSS"," compile to ",[422,431,432],{},"static CSS at build time"," with ",[422,435,436],{},"zero runtime cost"," on the client. The main difference is ",[422,439,440],{},"where the system lives",":",[443,444,445,451],"ul",{},[446,447,448,450],"li",{},[422,449,424],{},": a type-safe TypeScript CSS API for building a design system via primitives (tokens, themes, utilities, recipes).",[446,452,453,455,456,459],{},[422,454,428],{},": a utility-first CSS framework where styling is typically composed from classes in markup, with a modern ",[422,457,458],{},"CSS-first configuration"," model and a fast build engine.",[418,461,462],{},"Rather than \"which one can style a button\", this comparison focuses on how each approach helps (or challenges) teams building a system that has to scale.",[418,464,465,468],{},[422,466,467],{},"A key insight:"," Styleframe operates at a meta-level - it's a toolkit for building CSS systems (including utility-first ones), while Tailwind is a specific implementation of one. You can build a Tailwind-like utility system in Styleframe.",[414,470,472],{"id":471},"who-this-comparison-is-for","Who this comparison is for",[418,474,475],{},"This document is written for teams who are:",[443,477,478,485,492],{},[446,479,480,481,484],{},"Building or formalizing a ",[422,482,483],{},"design system"," (not just styling a single app).",[446,486,487,488,491],{},"Managing ",[422,489,490],{},"tokens + theming"," (light/dark, brand themes, product variants).",[446,493,494,495,498],{},"Coordinating patterns across ",[422,496,497],{},"multiple contributors",", repos, and UI surfaces.",[500,501,502],"note",{},"If your main goal is \"move fast with an established utility workflow\", Tailwind is often a strong default. If your main goal is \"encode a coherent design system with compile-time constraints\", a design-system-first toolkit like styleframe will be a better fit.",[414,504,506],{"id":505},"scope-of-comparison","Scope of comparison",[418,508,509],{},"Where relevant, this comparison considers:",[443,511,512,521,536],{},[446,513,514,516,517,520],{},[422,515,424],{},", compared primarily as an ",[422,518,519],{},"integrated toolkit"," (tokens/themes/utilities/recipes) authored in TypeScript.",[446,522,523,524,526,527,531,532,535],{},"versus ",[422,525,428],{}," (utilities, variants, ",[528,529,530],"code",{},"@theme",", ",[528,533,534],{},"@utility",", arbitrary values, etc.), and",[446,537,538,539,542],{},"common additions teams layer in for component patterns (e.g., ",[422,540,541],{},"CVA"," / Tailwind Variants for variants) and governance practices (conventions, linting).",[414,544,546],{"id":545},"decision-criteria","Decision criteria",[418,548,549],{},"We’ll compare across the things that tend to matter most in large-scale systems:",[443,551,552,558,564,570,576,582,588],{},[446,553,554,557],{},[422,555,556],{},"System structure & governance"," (how easy it is to standardize patterns)",[446,559,560,563],{},[422,561,562],{},"Tokens & theming"," (how tokens are defined, referenced, and evolved)",[446,565,566,569],{},[422,567,568],{},"Variants & component recipes"," (component variant ergonomics and type safety)",[446,571,572,575],{},[422,573,574],{},"Utilities / atomics"," (how utility layers are created, extended, and constrained)",[446,577,578,581],{},[422,579,580],{},"Developer experience & onboarding"," (how quickly teams converge on shared practices)",[446,583,584,587],{},[422,585,586],{},"Build process & performance"," (feedback loop, incremental builds, predictability)",[446,589,590,593],{},[422,591,592],{},"Scaling over time"," (what you typically add as the system grows)",[414,595,597],{"id":596},"at-a-glance","At a glance",[599,600,601,615],"table",{},[602,603,604],"thead",{},[605,606,607,611,613],"tr",{},[608,609,610],"th",{},"Area",[608,612,424],{},[608,614,428],{},[616,617,618,630,641,655,666,687,700,717,728],"tbody",{},[605,619,620,624,627],{},[621,622,623],"td",{},"Core philosophy",[621,625,626],{},"Design system toolkit (tokens + patterns)",[621,628,629],{},"Utility-first CSS framework",[605,631,632,635,638],{},[621,633,634],{},"Architecture",[621,636,637],{},"Transpiler-first (dual CSS + TS output)",[621,639,640],{},"CSS generation from utility scanning",[605,642,643,646,649],{},[621,644,645],{},"Configuration",[621,647,648],{},"TypeScript-native",[621,650,651,652,654],{},"CSS-first (",[528,653,530],{},") by default; optional config if needed",[605,656,657,660,663],{},[621,658,659],{},"Type safety",[621,661,662],{},"Compile-time checking (TS)",[621,664,665],{},"Class strings + IDE tooling (optional)",[605,667,668,671,678],{},[621,669,670],{},"Tokens",[621,672,673,674,677],{},"Built-in ",[528,675,676],{},"variable()"," + composables",[621,679,680,681,683,684],{},"Theme values via ",[528,682,530],{}," → published as CSS vars on ",[528,685,686],{},":root",[605,688,689,692,697],{},[621,690,691],{},"Variants",[621,693,673,694],{},[528,695,696],{},"recipe()",[621,698,699],{},"Typically external (CVA, Tailwind Variants)",[605,701,702,704,711],{},[621,703,102],{},[621,705,706,707,710],{},"Programmatic ",[528,708,709],{},"utility()"," API",[621,712,713,714,716],{},"Large predefined set + ",[528,715,534],{}," extensions; broad arbitrary value support",[605,718,719,722,725],{},[621,720,721],{},"Styling locus",[621,723,724],{},"Define in TS, apply classes in markup or via recipes",[621,726,727],{},"Compose utilities directly in markup",[605,729,730,733,736],{},[621,731,732],{},"Best for",[621,734,735],{},"Multi-team Design System consistency and governance",[621,737,738],{},"Rapid iteration + familiar utility workflow",[414,740,742],{"id":741},"architectural-differences","Architectural differences",[418,744,745,746,749],{},"The key insight mentioned above - that Styleframe operates at a \"meta-level\" - comes from its ",[422,747,748],{},"transpiler-first architecture",".",[418,751,752,755],{},[422,753,754],{},"Tailwind"," scans your templates for class names and generates CSS for the utilities it finds. It's a specific implementation of a utility-first CSS system with predefined naming conventions, a curated set of utilities, and opinionated defaults. This works extremely well for rapid development.",[418,757,758,760],{},[422,759,424],{}," is built differently: your TypeScript is first tokenized into an internal AST, and then transpile functions generate the final output. This means:",[443,762,763,778,788],{},[446,764,765,768,769,772,773,777],{},[422,766,767],{},"Dual output",": From one ",[528,770,771],{},".styleframe.ts"," file, you get both static CSS ",[774,775,776],"em",{},"and"," typed TypeScript runtime functions (e.g., recipe functions for component variants).",[446,779,780,783,784,787],{},[422,781,782],{},"Customizable naming",": The default ",[528,785,786],{},"_property:value"," format is just a default - you can configure utility class naming, variable naming, and theme selectors to match any convention, including Tailwind's.",[446,789,790,793],{},[422,791,792],{},"Build your own Tailwind",": Because Styleframe is a toolkit for building CSS systems, you could recreate Tailwind's entire utility vocabulary (same class names, spacing scale, color palette) while adding type safety, theme management, and recipe patterns.",[418,795,796],{},"This is why the comparison positions Styleframe as a toolkit and Tailwind as a framework: Tailwind gives you a great system ready to use, while Styleframe gives you the tools to build exactly the system you need.",[500,798,799,802],{"icon":105},[422,800,801],{},"Coming soon:"," Styleframe will support template scanning to auto-generate utility classes from your markup, similar to Tailwind's approach, while preserving all the benefits of the transpiler-first architecture (type safety, dual output, customizable naming).",[414,804,806],{"id":805},"detailed-comparison","Detailed comparison",[808,809,811],"h3",{"id":810},"_1-system-structure-governance","1. System structure & governance",[813,814,816],"h4",{"id":815},"what-teams-typically-need","What teams typically need",[418,818,819],{},"As systems grow, the hard part becomes consistency:",[443,821,822,825,828],{},[446,823,824],{},"A clear source of truth for tokens and patterns",[446,826,827],{},"A standard way to express variants (size, tone, intent)",[446,829,830],{},"Guardrails that prevent drift (or at least make drift visible)",[813,832,424],{"id":833},"styleframe",[443,835,836,839,842,845],{},[446,837,838],{},"Convention-driven primitives: tokens, themes, variants, and utilities share one mental model.",[446,840,841],{},"Inter-connected, type-safe tokens, recipes and utilities with complete control over utility class naming format",[446,843,844],{},"Encourages a \"design system package\" shape: you define system concerns in code and export what apps should use.",[446,846,847],{},"Centralizes changes: system updates are applied by changing tokens/recipes/utilities in one place and rebuilding.",[813,849,428],{"id":850},"tailwind-css",[443,852,853,867,870],{},[446,854,855,856],{},"Tailwind’s system is expressed as:\n",[443,857,858,861],{},[446,859,860],{},"a large, stable vocabulary of utilities, and",[446,862,863,864,866],{},"theme values configured via CSS-first ",[528,865,530],{}," blocks.",[446,868,869],{},"Teams can standardize usage via conventions (semantic design tokens, component wrappers, patterns like CVA for variants).",[446,871,872],{},"Tailwind is highly flexible - sometimes a benefit, sometimes a governance challenge - because it’s easy to deviate using ad-hoc utility combinations or arbitrary values.",[808,874,876],{"id":875},"_2-tokens-and-theming","2. Tokens and theming",[813,878,816],{"id":879},"what-teams-typically-need-1",[443,881,882,885,888],{},[446,883,884],{},"Central token definitions (color, spacing, type, radii)",[446,886,887],{},"Theme switching (light/dark, brand)",[446,889,890],{},"Safe refactoring and discoverability",[813,892,424],{"id":893},"styleframe-1",[418,895,896],{},"Styleframe treats tokens as first-class TypeScript values:",[898,899,905],"pre",{"className":900,"code":901,"filename":902,"language":903,"meta":904,"style":904},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, ref, selector } = s;\n\nconst colorPrimary = variable(\"color.primary\", \"#006cff\");\nconst colorPrimaryDark = variable(\"color.primary.dark\", \"#0052cc\");\nconst spacingMd = variable(\"spacing.md\", \"1rem\");\n\nselector(\".button\", {\n  backgroundColor: ref(colorPrimary),\n  padding: ref(spacingMd),\n  \"&:hover\": { backgroundColor: ref(colorPrimaryDark) },\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[528,906,907,942,948,969,1001,1006,1042,1076,1110,1115,1135,1152,1167,1195,1204,1209],{"__ignoreMap":904},[908,909,912,916,920,924,927,930,933,936,939],"span",{"class":910,"line":911},"line",1,[908,913,915],{"class":914},"s7zQu","import",[908,917,919],{"class":918},"sMK4o"," {",[908,921,923],{"class":922},"sTEyZ"," styleframe",[908,925,926],{"class":918}," }",[908,928,929],{"class":914}," from",[908,931,932],{"class":918}," \"",[908,934,833],{"class":935},"sfazB",[908,937,938],{"class":918},"\"",[908,940,941],{"class":918},";\n",[908,943,945],{"class":910,"line":944},2,[908,946,947],{"emptyLinePlaceholder":206},"\n",[908,949,951,955,958,961,964,967],{"class":910,"line":950},3,[908,952,954],{"class":953},"spNyl","const",[908,956,957],{"class":922}," s ",[908,959,960],{"class":918},"=",[908,962,923],{"class":963},"s2Zo4",[908,965,966],{"class":922},"()",[908,968,941],{"class":918},[908,970,972,974,976,979,982,985,987,990,993,996,999],{"class":910,"line":971},4,[908,973,954],{"class":953},[908,975,919],{"class":918},[908,977,978],{"class":922}," variable",[908,980,981],{"class":918},",",[908,983,984],{"class":922}," ref",[908,986,981],{"class":918},[908,988,989],{"class":922}," selector ",[908,991,992],{"class":918},"}",[908,994,995],{"class":918}," =",[908,997,998],{"class":922}," s",[908,1000,941],{"class":918},[908,1002,1004],{"class":910,"line":1003},5,[908,1005,947],{"emptyLinePlaceholder":206},[908,1007,1009,1011,1014,1016,1018,1021,1023,1026,1028,1030,1032,1035,1037,1040],{"class":910,"line":1008},6,[908,1010,954],{"class":953},[908,1012,1013],{"class":922}," colorPrimary ",[908,1015,960],{"class":918},[908,1017,978],{"class":963},[908,1019,1020],{"class":922},"(",[908,1022,938],{"class":918},[908,1024,1025],{"class":935},"color.primary",[908,1027,938],{"class":918},[908,1029,981],{"class":918},[908,1031,932],{"class":918},[908,1033,1034],{"class":935},"#006cff",[908,1036,938],{"class":918},[908,1038,1039],{"class":922},")",[908,1041,941],{"class":918},[908,1043,1045,1047,1050,1052,1054,1056,1058,1061,1063,1065,1067,1070,1072,1074],{"class":910,"line":1044},7,[908,1046,954],{"class":953},[908,1048,1049],{"class":922}," colorPrimaryDark ",[908,1051,960],{"class":918},[908,1053,978],{"class":963},[908,1055,1020],{"class":922},[908,1057,938],{"class":918},[908,1059,1060],{"class":935},"color.primary.dark",[908,1062,938],{"class":918},[908,1064,981],{"class":918},[908,1066,932],{"class":918},[908,1068,1069],{"class":935},"#0052cc",[908,1071,938],{"class":918},[908,1073,1039],{"class":922},[908,1075,941],{"class":918},[908,1077,1079,1081,1084,1086,1088,1090,1092,1095,1097,1099,1101,1104,1106,1108],{"class":910,"line":1078},8,[908,1080,954],{"class":953},[908,1082,1083],{"class":922}," spacingMd ",[908,1085,960],{"class":918},[908,1087,978],{"class":963},[908,1089,1020],{"class":922},[908,1091,938],{"class":918},[908,1093,1094],{"class":935},"spacing.md",[908,1096,938],{"class":918},[908,1098,981],{"class":918},[908,1100,932],{"class":918},[908,1102,1103],{"class":935},"1rem",[908,1105,938],{"class":918},[908,1107,1039],{"class":922},[908,1109,941],{"class":918},[908,1111,1113],{"class":910,"line":1112},9,[908,1114,947],{"emptyLinePlaceholder":206},[908,1116,1118,1121,1123,1125,1128,1130,1132],{"class":910,"line":1117},10,[908,1119,1120],{"class":963},"selector",[908,1122,1020],{"class":922},[908,1124,938],{"class":918},[908,1126,1127],{"class":935},".button",[908,1129,938],{"class":918},[908,1131,981],{"class":918},[908,1133,1134],{"class":918}," {\n",[908,1136,1138,1142,1144,1146,1149],{"class":910,"line":1137},11,[908,1139,1141],{"class":1140},"swJcz","  backgroundColor",[908,1143,441],{"class":918},[908,1145,984],{"class":963},[908,1147,1148],{"class":922},"(colorPrimary)",[908,1150,1151],{"class":918},",\n",[908,1153,1155,1158,1160,1162,1165],{"class":910,"line":1154},12,[908,1156,1157],{"class":1140},"  padding",[908,1159,441],{"class":918},[908,1161,984],{"class":963},[908,1163,1164],{"class":922},"(spacingMd)",[908,1166,1151],{"class":918},[908,1168,1170,1173,1176,1178,1180,1182,1185,1187,1189,1192],{"class":910,"line":1169},13,[908,1171,1172],{"class":918},"  \"",[908,1174,1175],{"class":1140},"&:hover",[908,1177,938],{"class":918},[908,1179,441],{"class":918},[908,1181,919],{"class":918},[908,1183,1184],{"class":1140}," backgroundColor",[908,1186,441],{"class":918},[908,1188,984],{"class":963},[908,1190,1191],{"class":922},"(colorPrimaryDark) ",[908,1193,1194],{"class":918},"},\n",[908,1196,1198,1200,1202],{"class":910,"line":1197},14,[908,1199,992],{"class":918},[908,1201,1039],{"class":922},[908,1203,941],{"class":918},[908,1205,1207],{"class":910,"line":1206},15,[908,1208,947],{"emptyLinePlaceholder":206},[908,1210,1212,1215,1218,1220],{"class":910,"line":1211},16,[908,1213,1214],{"class":914},"export",[908,1216,1217],{"class":914}," default",[908,1219,998],{"class":922},[908,1221,941],{"class":918},[418,1223,1224],{},"For theming, Styleframe provides a native theming API where you override token values within a theme context and keep component rules referencing the same tokens.",[898,1226,1228],{"className":900,"code":1227,"filename":902,"language":903,"meta":904,"style":904},"import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, theme } = s;\n\nconst colorPrimary = variable(\"color.primary\", \"#006cff\");\nconst colorBackground = variable(\"color.background\", \"#ffffff\");\n\ntheme(\"dark\", (ctx) => {\n  ctx.variable(colorPrimary, \"#60a5fa\");\n  ctx.variable(colorBackground, \"#1a1a1a\");\n});\n\nexport default s;\n",[528,1229,1230,1250,1254,1268,1289,1293,1323,1356,1360,1390,1418,1444,1452,1456],{"__ignoreMap":904},[908,1231,1232,1234,1236,1238,1240,1242,1244,1246,1248],{"class":910,"line":911},[908,1233,915],{"class":914},[908,1235,919],{"class":918},[908,1237,923],{"class":922},[908,1239,926],{"class":918},[908,1241,929],{"class":914},[908,1243,932],{"class":918},[908,1245,833],{"class":935},[908,1247,938],{"class":918},[908,1249,941],{"class":918},[908,1251,1252],{"class":910,"line":944},[908,1253,947],{"emptyLinePlaceholder":206},[908,1255,1256,1258,1260,1262,1264,1266],{"class":910,"line":950},[908,1257,954],{"class":953},[908,1259,957],{"class":922},[908,1261,960],{"class":918},[908,1263,923],{"class":963},[908,1265,966],{"class":922},[908,1267,941],{"class":918},[908,1269,1270,1272,1274,1276,1278,1281,1283,1285,1287],{"class":910,"line":971},[908,1271,954],{"class":953},[908,1273,919],{"class":918},[908,1275,978],{"class":922},[908,1277,981],{"class":918},[908,1279,1280],{"class":922}," theme ",[908,1282,992],{"class":918},[908,1284,995],{"class":918},[908,1286,998],{"class":922},[908,1288,941],{"class":918},[908,1290,1291],{"class":910,"line":1003},[908,1292,947],{"emptyLinePlaceholder":206},[908,1294,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321],{"class":910,"line":1008},[908,1296,954],{"class":953},[908,1298,1013],{"class":922},[908,1300,960],{"class":918},[908,1302,978],{"class":963},[908,1304,1020],{"class":922},[908,1306,938],{"class":918},[908,1308,1025],{"class":935},[908,1310,938],{"class":918},[908,1312,981],{"class":918},[908,1314,932],{"class":918},[908,1316,1034],{"class":935},[908,1318,938],{"class":918},[908,1320,1039],{"class":922},[908,1322,941],{"class":918},[908,1324,1325,1327,1330,1332,1334,1336,1338,1341,1343,1345,1347,1350,1352,1354],{"class":910,"line":1044},[908,1326,954],{"class":953},[908,1328,1329],{"class":922}," colorBackground ",[908,1331,960],{"class":918},[908,1333,978],{"class":963},[908,1335,1020],{"class":922},[908,1337,938],{"class":918},[908,1339,1340],{"class":935},"color.background",[908,1342,938],{"class":918},[908,1344,981],{"class":918},[908,1346,932],{"class":918},[908,1348,1349],{"class":935},"#ffffff",[908,1351,938],{"class":918},[908,1353,1039],{"class":922},[908,1355,941],{"class":918},[908,1357,1358],{"class":910,"line":1078},[908,1359,947],{"emptyLinePlaceholder":206},[908,1361,1362,1365,1367,1369,1372,1374,1376,1379,1383,1385,1388],{"class":910,"line":1112},[908,1363,1364],{"class":963},"theme",[908,1366,1020],{"class":922},[908,1368,938],{"class":918},[908,1370,1371],{"class":935},"dark",[908,1373,938],{"class":918},[908,1375,981],{"class":918},[908,1377,1378],{"class":918}," (",[908,1380,1382],{"class":1381},"sHdIc","ctx",[908,1384,1039],{"class":918},[908,1386,1387],{"class":953}," =>",[908,1389,1134],{"class":918},[908,1391,1392,1395,1397,1400,1402,1405,1407,1409,1412,1414,1416],{"class":910,"line":1117},[908,1393,1394],{"class":922},"  ctx",[908,1396,749],{"class":918},[908,1398,1399],{"class":963},"variable",[908,1401,1020],{"class":1140},[908,1403,1404],{"class":922},"colorPrimary",[908,1406,981],{"class":918},[908,1408,932],{"class":918},[908,1410,1411],{"class":935},"#60a5fa",[908,1413,938],{"class":918},[908,1415,1039],{"class":1140},[908,1417,941],{"class":918},[908,1419,1420,1422,1424,1426,1428,1431,1433,1435,1438,1440,1442],{"class":910,"line":1137},[908,1421,1394],{"class":922},[908,1423,749],{"class":918},[908,1425,1399],{"class":963},[908,1427,1020],{"class":1140},[908,1429,1430],{"class":922},"colorBackground",[908,1432,981],{"class":918},[908,1434,932],{"class":918},[908,1436,1437],{"class":935},"#1a1a1a",[908,1439,938],{"class":918},[908,1441,1039],{"class":1140},[908,1443,941],{"class":918},[908,1445,1446,1448,1450],{"class":910,"line":1154},[908,1447,992],{"class":918},[908,1449,1039],{"class":922},[908,1451,941],{"class":918},[908,1453,1454],{"class":910,"line":1169},[908,1455,947],{"emptyLinePlaceholder":206},[908,1457,1458,1460,1462,1464],{"class":910,"line":1197},[908,1459,1214],{"class":914},[908,1461,1217],{"class":914},[908,1463,998],{"class":922},[908,1465,941],{"class":918},[418,1467,1468],{},"Tailwind’s shift to CSS variables brings it closer to \"design token\" ergonomics, but the way themes are structured and enforced still tends to be convention-led. Styleframe bakes theme structuring into the same API surface as token definition and usage.",[813,1470,428],{"id":1471},"tailwind-css-1",[418,1473,1474,1475,1477,1478,1481,1482,1484],{},"Tailwind uses CSS-first theming via ",[528,1476,530],{},", and theme values are published as CSS custom properties (e.g., ",[528,1479,1480],{},"--color-*",") on ",[528,1483,686],{}," by default.",[898,1486,1491],{"className":1487,"code":1488,"filename":1489,"language":1490,"meta":904,"style":904},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@theme {\n  --color-primary: #006cff;\n  --color-primary-dark: #0052cc;\n  --radius-sm: 0.375rem;\n  --spacing: 0.25rem;\n}\n","tailwind.css","css",[528,1492,1493,1499,1510,1520,1525,1530],{"__ignoreMap":904},[908,1494,1495,1497],{"class":910,"line":911},[908,1496,530],{"class":914},[908,1498,1134],{"class":918},[908,1500,1501,1504,1507],{"class":910,"line":944},[908,1502,1503],{"class":922},"  --color-primary: ",[908,1505,1506],{"class":918},"#",[908,1508,1509],{"class":922},"006cff;\n",[908,1511,1512,1515,1517],{"class":910,"line":950},[908,1513,1514],{"class":922},"  --color-primary-dark: ",[908,1516,1506],{"class":918},[908,1518,1519],{"class":922},"0052cc;\n",[908,1521,1522],{"class":910,"line":971},[908,1523,1524],{"class":922},"  --radius-sm: 0.375rem;\n",[908,1526,1527],{"class":910,"line":1003},[908,1528,1529],{"class":922},"  --spacing: 0.25rem;\n",[908,1531,1532],{"class":910,"line":1008},[908,1533,1534],{"class":922},"}\n",[418,1536,1537],{},"Notable behavior/ergonomics:",[443,1539,1540,1547,1554],{},[446,1541,1542,1543,1546],{},"Many utilities can accept arbitrary values out-of-the-box, and many numeric utilities can be generated without pre-extending config (e.g., ",[528,1544,1545],{},"grid-cols-15",").",[446,1548,1549,1550,1553],{},"Spacing-derived values can be computed from a base spacing variable (by default ",[528,1551,1552],{},"--spacing: 0.25rem","), making it possible to use \"new\" numbers without adding them to a config scale.",[446,1555,1556,1557,1560],{},"CSS variable arbitrary syntax is simpler in (e.g., ",[528,1558,1559],{},"bg-(--my-color)"," rather than older bracket forms).",[418,1562,1563],{},"For theming:",[443,1565,1566,1573],{},[446,1567,1568,1569,1572],{},"Tailwind commonly handles light/dark with variants (e.g., ",[528,1570,1571],{},"dark:"," strategies).",[446,1574,1575],{},"For multiple themes beyond dark mode, teams typically layer in data attributes and custom variants/patterns; this is doable, but usually convention-led rather than a single built-in \"theme management\" API.",[808,1577,1579],{"id":1578},"_3-variants-and-component-recipes","3. Variants and component recipes",[813,1581,816],{"id":1582},"what-teams-typically-need-2",[443,1584,1585,1588,1591],{},[446,1586,1587],{},"A standard way to model component variants (size, intent, tone)",[446,1589,1590],{},"Type-safe variant selection",[446,1592,1593],{},"Clear defaults and compound variants",[813,1595,1597],{"id":1596},"styleframe-recipes","Styleframe (recipes)",[418,1599,1600],{},"Styleframe ships recipes as part of the core toolkit:",[898,1602,1604],{"className":900,"code":1603,"filename":902,"language":903,"meta":904,"style":904},"import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, ref, recipe } = s;\n\nconst colorPrimary = variable(\"color.primary\", \"#006cff\");\nconst colorPrimaryDark = variable(\"color.primary.dark\", \"#0052cc\");\nconst colorWhite = variable(\"color.white\", \"#ffffff\");\n\nrecipe({\n  name: \"button\",\n  base: {\n    borderRadius: \"0.375rem\",\n    fontWeight: 500,\n  },\n  variants: {\n    color: {\n      primary: {\n        background: ref(colorPrimary),\n        color: ref(colorWhite),\n        \"&:hover\": { background: ref(colorPrimaryDark) },\n      },\n    },\n    size: {\n      sm: { fontSize: \"0.875rem\", paddingX: \"0.75rem\", paddingY: \"0.5rem\" },\n      lg: { fontSize: \"1.125rem\", paddingX: \"1.5rem\", paddingY: \"1rem\" },\n    },\n  },\n  defaultVariants: { color: \"primary\", size: \"sm\" },\n});\n\nexport default s;\n",[528,1605,1606,1626,1630,1644,1669,1673,1703,1733,1765,1769,1779,1795,1804,1820,1833,1838,1847,1857,1867,1881,1896,1921,1927,1933,1943,1996,2044,2049,2054,2092,2101,2106],{"__ignoreMap":904},[908,1607,1608,1610,1612,1614,1616,1618,1620,1622,1624],{"class":910,"line":911},[908,1609,915],{"class":914},[908,1611,919],{"class":918},[908,1613,923],{"class":922},[908,1615,926],{"class":918},[908,1617,929],{"class":914},[908,1619,932],{"class":918},[908,1621,833],{"class":935},[908,1623,938],{"class":918},[908,1625,941],{"class":918},[908,1627,1628],{"class":910,"line":944},[908,1629,947],{"emptyLinePlaceholder":206},[908,1631,1632,1634,1636,1638,1640,1642],{"class":910,"line":950},[908,1633,954],{"class":953},[908,1635,957],{"class":922},[908,1637,960],{"class":918},[908,1639,923],{"class":963},[908,1641,966],{"class":922},[908,1643,941],{"class":918},[908,1645,1646,1648,1650,1652,1654,1656,1658,1661,1663,1665,1667],{"class":910,"line":971},[908,1647,954],{"class":953},[908,1649,919],{"class":918},[908,1651,978],{"class":922},[908,1653,981],{"class":918},[908,1655,984],{"class":922},[908,1657,981],{"class":918},[908,1659,1660],{"class":922}," recipe ",[908,1662,992],{"class":918},[908,1664,995],{"class":918},[908,1666,998],{"class":922},[908,1668,941],{"class":918},[908,1670,1671],{"class":910,"line":1003},[908,1672,947],{"emptyLinePlaceholder":206},[908,1674,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701],{"class":910,"line":1008},[908,1676,954],{"class":953},[908,1678,1013],{"class":922},[908,1680,960],{"class":918},[908,1682,978],{"class":963},[908,1684,1020],{"class":922},[908,1686,938],{"class":918},[908,1688,1025],{"class":935},[908,1690,938],{"class":918},[908,1692,981],{"class":918},[908,1694,932],{"class":918},[908,1696,1034],{"class":935},[908,1698,938],{"class":918},[908,1700,1039],{"class":922},[908,1702,941],{"class":918},[908,1704,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729,1731],{"class":910,"line":1044},[908,1706,954],{"class":953},[908,1708,1049],{"class":922},[908,1710,960],{"class":918},[908,1712,978],{"class":963},[908,1714,1020],{"class":922},[908,1716,938],{"class":918},[908,1718,1060],{"class":935},[908,1720,938],{"class":918},[908,1722,981],{"class":918},[908,1724,932],{"class":918},[908,1726,1069],{"class":935},[908,1728,938],{"class":918},[908,1730,1039],{"class":922},[908,1732,941],{"class":918},[908,1734,1735,1737,1740,1742,1744,1746,1748,1751,1753,1755,1757,1759,1761,1763],{"class":910,"line":1078},[908,1736,954],{"class":953},[908,1738,1739],{"class":922}," colorWhite ",[908,1741,960],{"class":918},[908,1743,978],{"class":963},[908,1745,1020],{"class":922},[908,1747,938],{"class":918},[908,1749,1750],{"class":935},"color.white",[908,1752,938],{"class":918},[908,1754,981],{"class":918},[908,1756,932],{"class":918},[908,1758,1349],{"class":935},[908,1760,938],{"class":918},[908,1762,1039],{"class":922},[908,1764,941],{"class":918},[908,1766,1767],{"class":910,"line":1112},[908,1768,947],{"emptyLinePlaceholder":206},[908,1770,1771,1774,1776],{"class":910,"line":1117},[908,1772,1773],{"class":963},"recipe",[908,1775,1020],{"class":922},[908,1777,1778],{"class":918},"{\n",[908,1780,1781,1784,1786,1788,1791,1793],{"class":910,"line":1137},[908,1782,1783],{"class":1140},"  name",[908,1785,441],{"class":918},[908,1787,932],{"class":918},[908,1789,1790],{"class":935},"button",[908,1792,938],{"class":918},[908,1794,1151],{"class":918},[908,1796,1797,1800,1802],{"class":910,"line":1154},[908,1798,1799],{"class":1140},"  base",[908,1801,441],{"class":918},[908,1803,1134],{"class":918},[908,1805,1806,1809,1811,1813,1816,1818],{"class":910,"line":1169},[908,1807,1808],{"class":1140},"    borderRadius",[908,1810,441],{"class":918},[908,1812,932],{"class":918},[908,1814,1815],{"class":935},"0.375rem",[908,1817,938],{"class":918},[908,1819,1151],{"class":918},[908,1821,1822,1825,1827,1831],{"class":910,"line":1197},[908,1823,1824],{"class":1140},"    fontWeight",[908,1826,441],{"class":918},[908,1828,1830],{"class":1829},"sbssI"," 500",[908,1832,1151],{"class":918},[908,1834,1835],{"class":910,"line":1206},[908,1836,1837],{"class":918},"  },\n",[908,1839,1840,1843,1845],{"class":910,"line":1211},[908,1841,1842],{"class":1140},"  variants",[908,1844,441],{"class":918},[908,1846,1134],{"class":918},[908,1848,1850,1853,1855],{"class":910,"line":1849},17,[908,1851,1852],{"class":1140},"    color",[908,1854,441],{"class":918},[908,1856,1134],{"class":918},[908,1858,1860,1863,1865],{"class":910,"line":1859},18,[908,1861,1862],{"class":1140},"      primary",[908,1864,441],{"class":918},[908,1866,1134],{"class":918},[908,1868,1870,1873,1875,1877,1879],{"class":910,"line":1869},19,[908,1871,1872],{"class":1140},"        background",[908,1874,441],{"class":918},[908,1876,984],{"class":963},[908,1878,1148],{"class":922},[908,1880,1151],{"class":918},[908,1882,1884,1887,1889,1891,1894],{"class":910,"line":1883},20,[908,1885,1886],{"class":1140},"        color",[908,1888,441],{"class":918},[908,1890,984],{"class":963},[908,1892,1893],{"class":922},"(colorWhite)",[908,1895,1151],{"class":918},[908,1897,1899,1902,1904,1906,1908,1910,1913,1915,1917,1919],{"class":910,"line":1898},21,[908,1900,1901],{"class":918},"        \"",[908,1903,1175],{"class":1140},[908,1905,938],{"class":918},[908,1907,441],{"class":918},[908,1909,919],{"class":918},[908,1911,1912],{"class":1140}," background",[908,1914,441],{"class":918},[908,1916,984],{"class":963},[908,1918,1191],{"class":922},[908,1920,1194],{"class":918},[908,1922,1924],{"class":910,"line":1923},22,[908,1925,1926],{"class":918},"      },\n",[908,1928,1930],{"class":910,"line":1929},23,[908,1931,1932],{"class":918},"    },\n",[908,1934,1936,1939,1941],{"class":910,"line":1935},24,[908,1937,1938],{"class":1140},"    size",[908,1940,441],{"class":918},[908,1942,1134],{"class":918},[908,1944,1946,1949,1951,1953,1956,1958,1960,1963,1965,1967,1970,1972,1974,1977,1979,1981,1984,1986,1988,1991,1993],{"class":910,"line":1945},25,[908,1947,1948],{"class":1140},"      sm",[908,1950,441],{"class":918},[908,1952,919],{"class":918},[908,1954,1955],{"class":1140}," fontSize",[908,1957,441],{"class":918},[908,1959,932],{"class":918},[908,1961,1962],{"class":935},"0.875rem",[908,1964,938],{"class":918},[908,1966,981],{"class":918},[908,1968,1969],{"class":1140}," paddingX",[908,1971,441],{"class":918},[908,1973,932],{"class":918},[908,1975,1976],{"class":935},"0.75rem",[908,1978,938],{"class":918},[908,1980,981],{"class":918},[908,1982,1983],{"class":1140}," paddingY",[908,1985,441],{"class":918},[908,1987,932],{"class":918},[908,1989,1990],{"class":935},"0.5rem",[908,1992,938],{"class":918},[908,1994,1995],{"class":918}," },\n",[908,1997,1999,2002,2004,2006,2008,2010,2012,2015,2017,2019,2021,2023,2025,2028,2030,2032,2034,2036,2038,2040,2042],{"class":910,"line":1998},26,[908,2000,2001],{"class":1140},"      lg",[908,2003,441],{"class":918},[908,2005,919],{"class":918},[908,2007,1955],{"class":1140},[908,2009,441],{"class":918},[908,2011,932],{"class":918},[908,2013,2014],{"class":935},"1.125rem",[908,2016,938],{"class":918},[908,2018,981],{"class":918},[908,2020,1969],{"class":1140},[908,2022,441],{"class":918},[908,2024,932],{"class":918},[908,2026,2027],{"class":935},"1.5rem",[908,2029,938],{"class":918},[908,2031,981],{"class":918},[908,2033,1983],{"class":1140},[908,2035,441],{"class":918},[908,2037,932],{"class":918},[908,2039,1103],{"class":935},[908,2041,938],{"class":918},[908,2043,1995],{"class":918},[908,2045,2047],{"class":910,"line":2046},27,[908,2048,1932],{"class":918},[908,2050,2052],{"class":910,"line":2051},28,[908,2053,1837],{"class":918},[908,2055,2057,2060,2062,2064,2067,2069,2071,2074,2076,2078,2081,2083,2085,2088,2090],{"class":910,"line":2056},29,[908,2058,2059],{"class":1140},"  defaultVariants",[908,2061,441],{"class":918},[908,2063,919],{"class":918},[908,2065,2066],{"class":1140}," color",[908,2068,441],{"class":918},[908,2070,932],{"class":918},[908,2072,2073],{"class":935},"primary",[908,2075,938],{"class":918},[908,2077,981],{"class":918},[908,2079,2080],{"class":1140}," size",[908,2082,441],{"class":918},[908,2084,932],{"class":918},[908,2086,2087],{"class":935},"sm",[908,2089,938],{"class":918},[908,2091,1995],{"class":918},[908,2093,2095,2097,2099],{"class":910,"line":2094},30,[908,2096,992],{"class":918},[908,2098,1039],{"class":922},[908,2100,941],{"class":918},[908,2102,2104],{"class":910,"line":2103},31,[908,2105,947],{"emptyLinePlaceholder":206},[908,2107,2109,2111,2113,2115],{"class":910,"line":2108},32,[908,2110,1214],{"class":914},[908,2112,1217],{"class":914},[908,2114,998],{"class":922},[908,2116,941],{"class":918},[813,2118,2120],{"id":2119},"tailwind-css-common-pattern-tailwind-cva","Tailwind CSS (common pattern: Tailwind + CVA)",[418,2122,2123],{},"Tailwind doesn’t ship a canonical \"component variants\" abstraction; teams commonly adopt external helpers like CVA.",[898,2125,2128],{"className":900,"code":2126,"filename":2127,"language":903,"meta":904,"style":904},"// Tailwind + CVA (external dependency)\nimport { cva } from \"class-variance-authority\";\n\nconst button = cva(\"px-4 py-2 rounded font-medium\", {\n  variants: {\n    color: {\n      primary: \"bg-blue-500 text-white hover:bg-blue-600\",\n      secondary: \"bg-gray-200 text-gray-800 hover:bg-gray-300\",\n    },\n    size: {\n      sm: \"text-sm px-3 py-1\",\n      lg: \"text-lg px-6 py-3\",\n    },\n  },\n  defaultVariants: { color: \"primary\", size: \"sm\" },\n});\n","button.ts",[528,2129,2130,2136,2158,2162,2186,2194,2202,2217,2233,2237,2245,2260,2275,2279,2283,2315],{"__ignoreMap":904},[908,2131,2132],{"class":910,"line":911},[908,2133,2135],{"class":2134},"sHwdD","// Tailwind + CVA (external dependency)\n",[908,2137,2138,2140,2142,2145,2147,2149,2151,2154,2156],{"class":910,"line":944},[908,2139,915],{"class":914},[908,2141,919],{"class":918},[908,2143,2144],{"class":922}," cva",[908,2146,926],{"class":918},[908,2148,929],{"class":914},[908,2150,932],{"class":918},[908,2152,2153],{"class":935},"class-variance-authority",[908,2155,938],{"class":918},[908,2157,941],{"class":918},[908,2159,2160],{"class":910,"line":950},[908,2161,947],{"emptyLinePlaceholder":206},[908,2163,2164,2166,2169,2171,2173,2175,2177,2180,2182,2184],{"class":910,"line":971},[908,2165,954],{"class":953},[908,2167,2168],{"class":922}," button ",[908,2170,960],{"class":918},[908,2172,2144],{"class":963},[908,2174,1020],{"class":922},[908,2176,938],{"class":918},[908,2178,2179],{"class":935},"px-4 py-2 rounded font-medium",[908,2181,938],{"class":918},[908,2183,981],{"class":918},[908,2185,1134],{"class":918},[908,2187,2188,2190,2192],{"class":910,"line":1003},[908,2189,1842],{"class":1140},[908,2191,441],{"class":918},[908,2193,1134],{"class":918},[908,2195,2196,2198,2200],{"class":910,"line":1008},[908,2197,1852],{"class":1140},[908,2199,441],{"class":918},[908,2201,1134],{"class":918},[908,2203,2204,2206,2208,2210,2213,2215],{"class":910,"line":1044},[908,2205,1862],{"class":1140},[908,2207,441],{"class":918},[908,2209,932],{"class":918},[908,2211,2212],{"class":935},"bg-blue-500 text-white hover:bg-blue-600",[908,2214,938],{"class":918},[908,2216,1151],{"class":918},[908,2218,2219,2222,2224,2226,2229,2231],{"class":910,"line":1078},[908,2220,2221],{"class":1140},"      secondary",[908,2223,441],{"class":918},[908,2225,932],{"class":918},[908,2227,2228],{"class":935},"bg-gray-200 text-gray-800 hover:bg-gray-300",[908,2230,938],{"class":918},[908,2232,1151],{"class":918},[908,2234,2235],{"class":910,"line":1112},[908,2236,1932],{"class":918},[908,2238,2239,2241,2243],{"class":910,"line":1117},[908,2240,1938],{"class":1140},[908,2242,441],{"class":918},[908,2244,1134],{"class":918},[908,2246,2247,2249,2251,2253,2256,2258],{"class":910,"line":1137},[908,2248,1948],{"class":1140},[908,2250,441],{"class":918},[908,2252,932],{"class":918},[908,2254,2255],{"class":935},"text-sm px-3 py-1",[908,2257,938],{"class":918},[908,2259,1151],{"class":918},[908,2261,2262,2264,2266,2268,2271,2273],{"class":910,"line":1154},[908,2263,2001],{"class":1140},[908,2265,441],{"class":918},[908,2267,932],{"class":918},[908,2269,2270],{"class":935},"text-lg px-6 py-3",[908,2272,938],{"class":918},[908,2274,1151],{"class":918},[908,2276,2277],{"class":910,"line":1169},[908,2278,1932],{"class":918},[908,2280,2281],{"class":910,"line":1197},[908,2282,1837],{"class":918},[908,2284,2285,2287,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309,2311,2313],{"class":910,"line":1206},[908,2286,2059],{"class":1140},[908,2288,441],{"class":918},[908,2290,919],{"class":918},[908,2292,2066],{"class":1140},[908,2294,441],{"class":918},[908,2296,932],{"class":918},[908,2298,2073],{"class":935},[908,2300,938],{"class":918},[908,2302,981],{"class":918},[908,2304,2080],{"class":1140},[908,2306,441],{"class":918},[908,2308,932],{"class":918},[908,2310,2087],{"class":935},[908,2312,938],{"class":918},[908,2314,1995],{"class":918},[908,2316,2317,2319,2321],{"class":910,"line":1211},[908,2318,992],{"class":918},[908,2320,1039],{"class":922},[908,2322,941],{"class":918},[418,2324,2325],{},"This can be a great fit for teams who like Tailwind’s \"compose in markup\" style but want a structured way to define component-level contracts.",[808,2327,2329],{"id":2328},"_4-utilities-atomics","4. Utilities / atomics",[813,2331,816],{"id":2332},"what-teams-typically-need-3",[443,2334,2335,2338,2341,2344],{},[446,2336,2337],{},"A productive baseline for layout, spacing, typography",[446,2339,2340],{},"An extension mechanism that doesn't become \"anything goes\"",[446,2342,2343],{},"A way to keep utility vocabulary aligned with tokens",[446,2345,2346],{},"Conditional styling (hover, focus, responsive) with minimal boilerplate",[813,2348,424],{"id":2349},"styleframe-2",[418,2351,2352,2353,2355],{},"Styleframe provides a programmatic ",[528,2354,709],{}," API that gives you full control over which utilities exist and how they map to your design tokens. This approach offers several key advantages:",[418,2357,2358],{},[422,2359,2360],{},"Type-safe utility creation with factory functions:",[898,2362,2364],{"className":900,"code":2363,"filename":902,"language":903,"meta":904,"style":904},"import { styleframe } from \"styleframe\";\n\nconst s = styleframe();\nconst { variable, utility, ref, modifier } = s;\n\nconst spacing = variable(\"spacing\", \"1rem\");\nconst spacingSm = variable(\"spacing.sm\", \"0.5rem\");\nconst spacingMd = variable(\"spacing.md\", \"1rem\");\nconst spacingLg = variable(\"spacing.lg\", \"2rem\");\n\nconst createMarginUtility = utility(\"margin\", ({ value }) => ({\n    margin: value,\n}));\n\ncreateMarginUtility({\n    default: ref(spacing),\n    sm: ref(spacingSm),\n    md: ref(spacingMd),\n    lg: ref(spacingLg),\n});\n\nexport default s;\n",[528,2365,2366,2386,2390,2404,2434,2438,2470,2502,2532,2565,2569,2606,2617,2626,2630,2639,2653,2667,2680,2694,2702,2706],{"__ignoreMap":904},[908,2367,2368,2370,2372,2374,2376,2378,2380,2382,2384],{"class":910,"line":911},[908,2369,915],{"class":914},[908,2371,919],{"class":918},[908,2373,923],{"class":922},[908,2375,926],{"class":918},[908,2377,929],{"class":914},[908,2379,932],{"class":918},[908,2381,833],{"class":935},[908,2383,938],{"class":918},[908,2385,941],{"class":918},[908,2387,2388],{"class":910,"line":944},[908,2389,947],{"emptyLinePlaceholder":206},[908,2391,2392,2394,2396,2398,2400,2402],{"class":910,"line":950},[908,2393,954],{"class":953},[908,2395,957],{"class":922},[908,2397,960],{"class":918},[908,2399,923],{"class":963},[908,2401,966],{"class":922},[908,2403,941],{"class":918},[908,2405,2406,2408,2410,2412,2414,2417,2419,2421,2423,2426,2428,2430,2432],{"class":910,"line":971},[908,2407,954],{"class":953},[908,2409,919],{"class":918},[908,2411,978],{"class":922},[908,2413,981],{"class":918},[908,2415,2416],{"class":922}," utility",[908,2418,981],{"class":918},[908,2420,984],{"class":922},[908,2422,981],{"class":918},[908,2424,2425],{"class":922}," modifier ",[908,2427,992],{"class":918},[908,2429,995],{"class":918},[908,2431,998],{"class":922},[908,2433,941],{"class":918},[908,2435,2436],{"class":910,"line":1003},[908,2437,947],{"emptyLinePlaceholder":206},[908,2439,2440,2442,2445,2447,2449,2451,2453,2456,2458,2460,2462,2464,2466,2468],{"class":910,"line":1008},[908,2441,954],{"class":953},[908,2443,2444],{"class":922}," spacing ",[908,2446,960],{"class":918},[908,2448,978],{"class":963},[908,2450,1020],{"class":922},[908,2452,938],{"class":918},[908,2454,2455],{"class":935},"spacing",[908,2457,938],{"class":918},[908,2459,981],{"class":918},[908,2461,932],{"class":918},[908,2463,1103],{"class":935},[908,2465,938],{"class":918},[908,2467,1039],{"class":922},[908,2469,941],{"class":918},[908,2471,2472,2474,2477,2479,2481,2483,2485,2488,2490,2492,2494,2496,2498,2500],{"class":910,"line":1044},[908,2473,954],{"class":953},[908,2475,2476],{"class":922}," spacingSm ",[908,2478,960],{"class":918},[908,2480,978],{"class":963},[908,2482,1020],{"class":922},[908,2484,938],{"class":918},[908,2486,2487],{"class":935},"spacing.sm",[908,2489,938],{"class":918},[908,2491,981],{"class":918},[908,2493,932],{"class":918},[908,2495,1990],{"class":935},[908,2497,938],{"class":918},[908,2499,1039],{"class":922},[908,2501,941],{"class":918},[908,2503,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530],{"class":910,"line":1078},[908,2505,954],{"class":953},[908,2507,1083],{"class":922},[908,2509,960],{"class":918},[908,2511,978],{"class":963},[908,2513,1020],{"class":922},[908,2515,938],{"class":918},[908,2517,1094],{"class":935},[908,2519,938],{"class":918},[908,2521,981],{"class":918},[908,2523,932],{"class":918},[908,2525,1103],{"class":935},[908,2527,938],{"class":918},[908,2529,1039],{"class":922},[908,2531,941],{"class":918},[908,2533,2534,2536,2539,2541,2543,2545,2547,2550,2552,2554,2556,2559,2561,2563],{"class":910,"line":1112},[908,2535,954],{"class":953},[908,2537,2538],{"class":922}," spacingLg ",[908,2540,960],{"class":918},[908,2542,978],{"class":963},[908,2544,1020],{"class":922},[908,2546,938],{"class":918},[908,2548,2549],{"class":935},"spacing.lg",[908,2551,938],{"class":918},[908,2553,981],{"class":918},[908,2555,932],{"class":918},[908,2557,2558],{"class":935},"2rem",[908,2560,938],{"class":918},[908,2562,1039],{"class":922},[908,2564,941],{"class":918},[908,2566,2567],{"class":910,"line":1117},[908,2568,947],{"emptyLinePlaceholder":206},[908,2570,2571,2573,2576,2578,2580,2582,2584,2587,2589,2591,2594,2597,2600,2602,2604],{"class":910,"line":1137},[908,2572,954],{"class":953},[908,2574,2575],{"class":922}," createMarginUtility ",[908,2577,960],{"class":918},[908,2579,2416],{"class":963},[908,2581,1020],{"class":922},[908,2583,938],{"class":918},[908,2585,2586],{"class":935},"margin",[908,2588,938],{"class":918},[908,2590,981],{"class":918},[908,2592,2593],{"class":918}," ({",[908,2595,2596],{"class":1381}," value",[908,2598,2599],{"class":918}," })",[908,2601,1387],{"class":953},[908,2603,1378],{"class":922},[908,2605,1778],{"class":918},[908,2607,2608,2611,2613,2615],{"class":910,"line":1154},[908,2609,2610],{"class":1140},"    margin",[908,2612,441],{"class":918},[908,2614,2596],{"class":922},[908,2616,1151],{"class":918},[908,2618,2619,2621,2624],{"class":910,"line":1169},[908,2620,992],{"class":918},[908,2622,2623],{"class":922},"))",[908,2625,941],{"class":918},[908,2627,2628],{"class":910,"line":1197},[908,2629,947],{"emptyLinePlaceholder":206},[908,2631,2632,2635,2637],{"class":910,"line":1206},[908,2633,2634],{"class":963},"createMarginUtility",[908,2636,1020],{"class":922},[908,2638,1778],{"class":918},[908,2640,2641,2644,2646,2648,2651],{"class":910,"line":1211},[908,2642,2643],{"class":1140},"    default",[908,2645,441],{"class":918},[908,2647,984],{"class":963},[908,2649,2650],{"class":922},"(spacing)",[908,2652,1151],{"class":918},[908,2654,2655,2658,2660,2662,2665],{"class":910,"line":1849},[908,2656,2657],{"class":1140},"    sm",[908,2659,441],{"class":918},[908,2661,984],{"class":963},[908,2663,2664],{"class":922},"(spacingSm)",[908,2666,1151],{"class":918},[908,2668,2669,2672,2674,2676,2678],{"class":910,"line":1859},[908,2670,2671],{"class":1140},"    md",[908,2673,441],{"class":918},[908,2675,984],{"class":963},[908,2677,1164],{"class":922},[908,2679,1151],{"class":918},[908,2681,2682,2685,2687,2689,2692],{"class":910,"line":1869},[908,2683,2684],{"class":1140},"    lg",[908,2686,441],{"class":918},[908,2688,984],{"class":963},[908,2690,2691],{"class":922},"(spacingLg)",[908,2693,1151],{"class":918},[908,2695,2696,2698,2700],{"class":910,"line":1883},[908,2697,992],{"class":918},[908,2699,1039],{"class":922},[908,2701,941],{"class":918},[908,2703,2704],{"class":910,"line":1898},[908,2705,947],{"emptyLinePlaceholder":206},[908,2707,2708,2710,2712,2714],{"class":910,"line":1923},[908,2709,1214],{"class":914},[908,2711,1217],{"class":914},[908,2713,998],{"class":922},[908,2715,941],{"class":918},[418,2717,2718,2721,2722,2725,2726,2729],{},[422,2719,2720],{},"Flexible value syntax:"," Styleframe supports both explicit key-value pairs and auto-generated utilities from arrays. The array syntax accepts token references (",[528,2723,2724],{},"@color.primary","), ref objects (",[528,2727,2728],{},"ref(variable)","), and arbitrary values:",[898,2731,2733],{"className":900,"code":2732,"filename":902,"language":903,"meta":904,"style":904},"// Auto-generate utility class names from token references\ncreateBackgroundUtility([\n    ref(colorPrimary),      // => _background:color.primary\n    \"@color.secondary\",     // => _background:color.secondary\n    \"red\",                  // => _background:[red]\n]);\n",[528,2734,2735,2740,2748,2760,2775,2789],{"__ignoreMap":904},[908,2736,2737],{"class":910,"line":911},[908,2738,2739],{"class":2134},"// Auto-generate utility class names from token references\n",[908,2741,2742,2745],{"class":910,"line":944},[908,2743,2744],{"class":963},"createBackgroundUtility",[908,2746,2747],{"class":922},"([\n",[908,2749,2750,2753,2755,2757],{"class":910,"line":950},[908,2751,2752],{"class":963},"    ref",[908,2754,1148],{"class":922},[908,2756,981],{"class":918},[908,2758,2759],{"class":2134},"      // => _background:color.primary\n",[908,2761,2762,2765,2768,2770,2772],{"class":910,"line":971},[908,2763,2764],{"class":918},"    \"",[908,2766,2767],{"class":935},"@color.secondary",[908,2769,938],{"class":918},[908,2771,981],{"class":918},[908,2773,2774],{"class":2134},"     // => _background:color.secondary\n",[908,2776,2777,2779,2782,2784,2786],{"class":910,"line":1003},[908,2778,2764],{"class":918},[908,2780,2781],{"class":935},"red",[908,2783,938],{"class":918},[908,2785,981],{"class":918},[908,2787,2788],{"class":2134},"                  // => _background:[red]\n",[908,2790,2791,2794],{"class":910,"line":1008},[908,2792,2793],{"class":922},"])",[908,2795,941],{"class":918},[418,2797,2798,2801],{},[422,2799,2800],{},"Powerful modifier system:"," Unlike Tailwind's variant syntax which is baked into the framework, Styleframe lets you define custom modifiers as JavaScript functions with full access to the utility's declarations:",[898,2803,2805],{"className":900,"code":2804,"filename":902,"language":903,"meta":904,"style":904},"const hover = modifier(\"hover\", ({ declarations }) => ({\n    \"&:hover\": declarations,\n}));\n\n// Multi-key modifiers for mutually exclusive states (breakpoints, themes)\nconst breakpointsMax = modifier(\n    [\"max-sm\", \"max-md\", \"max-lg\"],\n    ({ key, declarations }) => ({\n        [`@media screen and (max-width: ${breakpoints[key.replace(\"max-\", \"\")]})`]: declarations,\n    }),\n);\n\n// Apply modifiers to utilities\ncreateBackgroundUtility(\n    { primary: ref(colorPrimary), secondary: ref(colorSecondary) },\n    [hover, breakpointsMax],\n);\n",[528,2806,2807,2843,2857,2865,2869,2874,2888,2923,2943,2996,3005,3011,3015,3020,3026,3054,3066],{"__ignoreMap":904},[908,2808,2809,2811,2814,2816,2819,2821,2823,2826,2828,2830,2832,2835,2837,2839,2841],{"class":910,"line":911},[908,2810,954],{"class":953},[908,2812,2813],{"class":922}," hover ",[908,2815,960],{"class":918},[908,2817,2818],{"class":963}," modifier",[908,2820,1020],{"class":922},[908,2822,938],{"class":918},[908,2824,2825],{"class":935},"hover",[908,2827,938],{"class":918},[908,2829,981],{"class":918},[908,2831,2593],{"class":918},[908,2833,2834],{"class":1381}," declarations",[908,2836,2599],{"class":918},[908,2838,1387],{"class":953},[908,2840,1378],{"class":922},[908,2842,1778],{"class":918},[908,2844,2845,2847,2849,2851,2853,2855],{"class":910,"line":944},[908,2846,2764],{"class":918},[908,2848,1175],{"class":1140},[908,2850,938],{"class":918},[908,2852,441],{"class":918},[908,2854,2834],{"class":922},[908,2856,1151],{"class":918},[908,2858,2859,2861,2863],{"class":910,"line":950},[908,2860,992],{"class":918},[908,2862,2623],{"class":922},[908,2864,941],{"class":918},[908,2866,2867],{"class":910,"line":971},[908,2868,947],{"emptyLinePlaceholder":206},[908,2870,2871],{"class":910,"line":1003},[908,2872,2873],{"class":2134},"// Multi-key modifiers for mutually exclusive states (breakpoints, themes)\n",[908,2875,2876,2878,2881,2883,2885],{"class":910,"line":1008},[908,2877,954],{"class":953},[908,2879,2880],{"class":922}," breakpointsMax ",[908,2882,960],{"class":918},[908,2884,2818],{"class":963},[908,2886,2887],{"class":922},"(\n",[908,2889,2890,2893,2895,2898,2900,2902,2904,2907,2909,2911,2913,2916,2918,2921],{"class":910,"line":1044},[908,2891,2892],{"class":922},"    [",[908,2894,938],{"class":918},[908,2896,2897],{"class":935},"max-sm",[908,2899,938],{"class":918},[908,2901,981],{"class":918},[908,2903,932],{"class":918},[908,2905,2906],{"class":935},"max-md",[908,2908,938],{"class":918},[908,2910,981],{"class":918},[908,2912,932],{"class":918},[908,2914,2915],{"class":935},"max-lg",[908,2917,938],{"class":918},[908,2919,2920],{"class":922},"]",[908,2922,1151],{"class":918},[908,2924,2925,2928,2931,2933,2935,2937,2939,2941],{"class":910,"line":1078},[908,2926,2927],{"class":918},"    ({",[908,2929,2930],{"class":1381}," key",[908,2932,981],{"class":918},[908,2934,2834],{"class":1381},[908,2936,2599],{"class":918},[908,2938,1387],{"class":953},[908,2940,1378],{"class":922},[908,2942,1778],{"class":918},[908,2944,2945,2948,2951,2954,2957,2960,2962,2965,2967,2969,2972,2974,2976,2979,2982,2984,2986,2988,2990,2992,2994],{"class":910,"line":1112},[908,2946,2947],{"class":1140},"        [",[908,2949,2950],{"class":918},"`",[908,2952,2953],{"class":1140},"@media screen and (max-width: ",[908,2955,2956],{"class":918},"${",[908,2958,2959],{"class":922},"breakpoints[key",[908,2961,749],{"class":918},[908,2963,2964],{"class":963},"replace",[908,2966,1020],{"class":922},[908,2968,938],{"class":918},[908,2970,2971],{"class":1140},"max-",[908,2973,938],{"class":918},[908,2975,981],{"class":918},[908,2977,2978],{"class":918}," \"\"",[908,2980,2981],{"class":922},")]",[908,2983,992],{"class":918},[908,2985,1039],{"class":1140},[908,2987,2950],{"class":918},[908,2989,2920],{"class":1140},[908,2991,441],{"class":918},[908,2993,2834],{"class":922},[908,2995,1151],{"class":918},[908,2997,2998,3001,3003],{"class":910,"line":1117},[908,2999,3000],{"class":918},"    }",[908,3002,1039],{"class":922},[908,3004,1151],{"class":918},[908,3006,3007,3009],{"class":910,"line":1137},[908,3008,1039],{"class":922},[908,3010,941],{"class":918},[908,3012,3013],{"class":910,"line":1154},[908,3014,947],{"emptyLinePlaceholder":206},[908,3016,3017],{"class":910,"line":1169},[908,3018,3019],{"class":2134},"// Apply modifiers to utilities\n",[908,3021,3022,3024],{"class":910,"line":1197},[908,3023,2744],{"class":963},[908,3025,2887],{"class":922},[908,3027,3028,3031,3034,3036,3038,3040,3042,3045,3047,3049,3052],{"class":910,"line":1206},[908,3029,3030],{"class":918},"    {",[908,3032,3033],{"class":1140}," primary",[908,3035,441],{"class":918},[908,3037,984],{"class":963},[908,3039,1148],{"class":922},[908,3041,981],{"class":918},[908,3043,3044],{"class":1140}," secondary",[908,3046,441],{"class":918},[908,3048,984],{"class":963},[908,3050,3051],{"class":922},"(colorSecondary) ",[908,3053,1194],{"class":918},[908,3055,3056,3059,3061,3064],{"class":910,"line":1211},[908,3057,3058],{"class":922},"    [hover",[908,3060,981],{"class":918},[908,3062,3063],{"class":922}," breakpointsMax]",[908,3065,1151],{"class":918},[908,3067,3068,3070],{"class":910,"line":1849},[908,3069,1039],{"class":922},[908,3071,941],{"class":918},[418,3073,3074,3075,531,3078,3081],{},"When multiple modifiers are combined, Styleframe automatically generates all valid permutations (",[528,3076,3077],{},"_hover:background:primary",[528,3079,3080],{},"_max-sm:hover:background:primary",", etc.), giving you fine-grained control over conditional styling.",[418,3083,3084],{},[422,3085,3086],{},"Key advantages:",[443,3088,3089,3095,3101,3114],{},[446,3090,3091,3094],{},[422,3092,3093],{},"Intentional utility surface area:"," You define exactly which utilities exist, preventing arbitrary value drift",[446,3096,3097,3100],{},[422,3098,3099],{},"Token alignment:"," Utilities reference the same variables as your themes and recipes",[446,3102,3103,3106,3107,3109,3110,3113],{},[422,3104,3105],{},"Customizable class naming:"," The default ",[528,3108,786],{}," format is CSS-like and intuitive, but can be customized via ",[528,3111,3112],{},"autogenerate"," functions",[446,3115,3116,3119,3120,1039],{},[422,3117,3118],{},"Composable patterns:"," Group related utilities into reusable composable functions (e.g., ",[528,3121,3122],{},"useSpacingUtilities()",[418,3124,3125,3126,3128],{},"Because Styleframe's ",[528,3127,709],{}," API is programmatic, you could recreate Tailwind's entire utility vocabulary, including its naming conventions, spacing scale, and color palette, while gaining type safety and token integration.",[813,3130,428],{"id":3131},"tailwind-css-2",[418,3133,3134],{},"Tailwind ships with a large predefined utility set and expands flexibility:",[443,3136,3137,3146,3151,3157],{},[446,3138,3139,3140,531,3143,1039],{},"Broad support for arbitrary values (e.g., ",[528,3141,3142],{},"bg-[#1da1f2]",[528,3144,3145],{},"p-[17px]",[446,3147,3148,3149,1039],{},"Many numeric utilities generated without pre-extending config (e.g., ",[528,3150,1545],{},[446,3152,3153,3154,1039],{},"Spacing-derived values computed from a base spacing variable (",[528,3155,3156],{},"--spacing",[446,3158,3159,3160,531,3163,3166,3167,531,3170,3173],{},"Built-in variants for states (",[528,3161,3162],{},"hover:",[528,3164,3165],{},"focus:","), responsive (",[528,3168,3169],{},"sm:",[528,3171,3172],{},"md:","), and more",[418,3175,3176,3177,3179,3180,531,3183,3186],{},"Tailwind also leans into modern CSS features and directives (e.g., custom utilities via ",[528,3178,534],{},", and utilities powered by features like cascade layers, ",[528,3181,3182],{},"@property",[528,3184,3185],{},"color-mix()",", etc.).",[418,3188,3189],{},[422,3190,3191],{},"Key trade-offs:",[443,3193,3194,3204,3210],{},[446,3195,3196,3199,3200,3203],{},[422,3197,3198],{},"Flexibility vs. governance:"," Tailwind's arbitrary value support (",[528,3201,3202],{},"bg-[#hex]",") is powerful for rapid prototyping but can undermine token consistency. Teams often add linting rules to restrict arbitrary values in system code.",[446,3205,3206,3209],{},[422,3207,3208],{},"Variants are predefined:"," While Tailwind's variant system is comprehensive, creating truly custom variant logic (e.g., multi-key modifiers for mutual exclusivity) requires workarounds.",[446,3211,3212,3215],{},[422,3213,3214],{},"String-based utilities:"," Class names are strings, so typos fail silently. IDE tooling helps, but compile-time guarantees aren't built in.",[808,3217,3219],{"id":3218},"_5-developer-experience-and-onboarding","5. Developer experience and onboarding",[813,3221,428],{"id":3222},"tailwind-css-3",[418,3224,3225],{},"Tailwind’s DX strengths are well-known (fast iteration, styling in markup), and improves the \"getting started\" and feedback loop experience:",[443,3227,3228,3231,3234],{},[446,3229,3230],{},"A redesigned high-speed \"Oxide\" engine with large speedups for full builds and especially for no-op incremental builds.",[446,3232,3233],{},"Simplified setup: CSS-first configuration, often requiring little or no separate config to start; content detection is more automatic.",[446,3235,3236],{},"Massive ecosystem: IDE extensions, component libraries, templates, and community knowledge.",[813,3238,424],{"id":3239},"styleframe-3",[418,3241,3242],{},"Styleframe’s DX is centered on correctness and structured reuse:",[443,3244,3245,3248,3251],{},[446,3246,3247],{},"Type-safe CSS authoring in TypeScript (autocomplete + compile-time checks for properties and values).",[446,3249,3250],{},"A centralized \"system definition\" (tokens, utilities, recipes) that can be packaged and shared across projects/frameworks.",[446,3252,3253],{},"Predictable organization: styling logic lives in structured config + composables rather than being distributed across markup.",[808,3255,3257],{"id":3256},"_6-type-safety-and-reliability","6. Type safety and reliability",[813,3259,816],{"id":3260},"what-teams-typically-need-4",[443,3262,3263,3266,3269],{},[446,3264,3265],{},"Confidence that style references are valid and won't fail silently",[446,3267,3268],{},"Refactoring safety when renaming tokens or changing values",[446,3270,3271],{},"Early feedback on errors (ideally at compile time)",[813,3273,424],{"id":3274},"styleframe-4",[418,3276,3277,3278,3280,3281,3284],{},"Styleframe emphasizes TypeScript validation of token references (",[528,3279,676],{}," + ",[528,3282,3283],{},"ref()","), selectors, and generated utilities. Mistyped styles surface as TypeScript issues rather than silent missing styles.",[813,3286,428],{"id":3287},"tailwind-css-4",[418,3289,3290],{},"Class names are strings. IDE tooling helps a lot, but typos can still silently fail if a class doesn't exist or isn't generated.",[808,3292,3294],{"id":3293},"_7-build-process-ssr-and-performance","7. Build process, SSR, and performance",[813,3296,816],{"id":3297},"what-teams-typically-need-5",[443,3299,3300,3303,3306],{},[446,3301,3302],{},"Zero runtime cost in production",[446,3304,3305],{},"Fast build times and incremental compilation",[446,3307,3308],{},"Predictable output that scales with the system",[813,3310,424],{"id":3311},"styleframe-5",[418,3313,3314,3315,3317],{},"Compiles from ",[528,3316,902],{}," into CSS (and optionally TS exports). Because styles are explicitly defined, cost tends to scale with the system definition rather than template scanning, which can make build behavior more predictable at scale.",[813,3319,428],{"id":3320},"tailwind-css-5",[418,3322,3323],{},"Emphasizes fast builds via its new \"Oxide\" engine and optimized scanning/build pipeline. Both are \"zero runtime\" in production: CSS is emitted at build time and served as static styles.",[808,3325,3327],{"id":3326},"_8-scaling-over-time","8. Scaling over time",[418,3329,3330],{},"A practical way to think about the difference is how each approach tends to evolve:",[443,3332,3333,3339,3345],{},[446,3334,3335,3338],{},[422,3336,3337],{},"Day 1:"," Tailwind often feels faster (style where you build). Styleframe feels more like \"system first.\"",[446,3340,3341,3344],{},[422,3342,3343],{},"Month 3:"," teams introduce conventions: token naming, shared component patterns, variant helpers, utility boundaries.",[446,3346,3347,3350,3351],{},[422,3348,3349],{},"Year 1:"," the dominant concerns are governance and redesign resilience:",[443,3352,3353,3356],{},[446,3354,3355],{},"Tailwind changes can be distributed across many files (class strings in markup).",[446,3357,3358],{},"Styleframe changes are centralized (tokens/recipes/utilities in system code), which will be advantageous for systematic updates.",[418,3360,3361],{},"Tailwind’s shift to CSS variables can reduce redesign pain if teams standardize on semantic tokens/variables, but enforcement still depends largely on team discipline and conventions.",[414,3363,3365],{"id":3364},"class-naming-and-syntax","Class naming and syntax",[418,3367,3368],{},"The frameworks take different approaches to class naming:",[898,3370,3375],{"className":3371,"code":3372,"filename":3373,"language":3374,"meta":904,"style":904},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Styleframe: semantic, customizable class names -->\n\u003Cbutton class=\"_padding-x:4 _padding-y:2 _background:blue-500 _color:white _font-weight:semibold _border-radius:md _hover:background:blue-600\">\n  Save Changes\n\u003C/button>\n\n","styleframe.html","html",[528,3376,3377,3382,3404,3409],{"__ignoreMap":904},[908,3378,3379],{"class":910,"line":911},[908,3380,3381],{"class":2134},"\u003C!-- Styleframe: semantic, customizable class names -->\n",[908,3383,3384,3387,3389,3392,3394,3396,3399,3401],{"class":910,"line":944},[908,3385,3386],{"class":918},"\u003C",[908,3388,1790],{"class":1140},[908,3390,3391],{"class":953}," class",[908,3393,960],{"class":918},[908,3395,938],{"class":918},[908,3397,3398],{"class":935},"_padding-x:4 _padding-y:2 _background:blue-500 _color:white _font-weight:semibold _border-radius:md _hover:background:blue-600",[908,3400,938],{"class":918},[908,3402,3403],{"class":918},">\n",[908,3405,3406],{"class":910,"line":950},[908,3407,3408],{"class":922},"  Save Changes\n",[908,3410,3411,3414,3416],{"class":910,"line":971},[908,3412,3413],{"class":918},"\u003C/",[908,3415,1790],{"class":1140},[908,3417,3403],{"class":918},[898,3419,3422],{"className":3371,"code":3420,"filename":3421,"language":3374,"meta":904,"style":904},"\u003C!-- Tailwind: terse, predefined class names -->\n\u003Cbutton class=\"px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600\">\n  Save Changes\n\u003C/button>\n\n","tailwind.html",[528,3423,3424,3429,3448,3452],{"__ignoreMap":904},[908,3425,3426],{"class":910,"line":911},[908,3427,3428],{"class":2134},"\u003C!-- Tailwind: terse, predefined class names -->\n",[908,3430,3431,3433,3435,3437,3439,3441,3444,3446],{"class":910,"line":944},[908,3432,3386],{"class":918},[908,3434,1790],{"class":1140},[908,3436,3391],{"class":953},[908,3438,960],{"class":918},[908,3440,938],{"class":918},[908,3442,3443],{"class":935},"px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600",[908,3445,938],{"class":918},[908,3447,3403],{"class":918},[908,3449,3450],{"class":910,"line":950},[908,3451,3408],{"class":922},[908,3453,3454,3456,3458],{"class":910,"line":971},[908,3455,3413],{"class":918},[908,3457,1790],{"class":1140},[908,3459,3403],{"class":918},[443,3461,3462,3465],{},[446,3463,3464],{},"Tailwind’s naming is compact and systematic",[446,3466,3467],{},"Styleframe’s generated class names are typically more explicit (and can be customized).",[418,3469,3470],{},"Tailwind also updates defaults like its OKLCH-based color palette, while Styleframe encourages semantic naming because you define tokens up-front.",[414,3472,3474],{"id":3473},"choosing-between-them","Choosing between them",[418,3476,3477],{},"A practical heuristic: if your system needs strong guarantees around tokens/themes/variants across many consumers, a design-system-first toolkit can reduce drift. If your priority is shipping UI quickly with a widely understood utility vocabulary, Tailwind is hard to beat—especially now that theme values are first-class CSS variables.",[418,3479,3480,3483],{},[422,3481,3482],{},"The fundamental difference:"," Styleframe is a toolkit for building CSS systems and Tailwind is a CSS system. You can use Styleframe to build a Tailwind-like utility layer (even with the same class names, spacing scale, and conventions) while adding type safety, theme management, and recipe patterns.",[808,3485,3487],{"id":3486},"choose-styleframe-if","Choose Styleframe if…",[443,3489,3490,3497,3504,3507,3510,3517],{},[446,3491,3492,3493,3496],{},"You're building a ",[422,3494,3495],{},"large-scale design system"," or UI library that needs to be stable, type-safe, and shared.",[446,3498,3499,3500,3503],{},"You want ",[422,3501,3502],{},"organized, explicit CSS"," where design decisions (tokens, themes, recipes) are centralized.",[446,3505,3506],{},"You need a system that spans multiple frameworks or multiple projects and want to distribute a cohesive DS package (tokens/utilities/recipes) as code.",[446,3508,3509],{},"Compile-time validation and refactoring safety matter (e.g., avoiding silent style failures).",[446,3511,3512,3513,3516],{},"You plan to use your design tokens for ",[422,3514,3515],{},"more than just CSS"," - like generating documentation, design specs, or custom tooling.",[446,3518,3519,3520,3523],{},"You want complete control and customization over ",[422,3521,3522],{},"how your code is output"," (naming conventions, output formats) without forking or workarounds, whether you prefer Tailwind-style shorthand, BEM, or something custom.",[808,3525,3527],{"id":3526},"choose-tailwind-css-if","Choose Tailwind CSS if…",[443,3529,3530,3537,3544,3547],{},[446,3531,3532,3533,3536],{},"You want to ",[422,3534,3535],{},"move fast"," with a utility-first workflow and prefer styling in markup.",[446,3538,3539,3540,3543],{},"Your team is already ",[422,3541,3542],{},"familiar with Tailwind"," and benefits from its ecosystem (tooling, examples, component libraries).",[446,3545,3546],{},"You value Tailwind’s newer ergonomics: CSS-first theme configuration, modern CSS integration, and improved build performance.",[446,3548,3549],{},"You’re comfortable relying on conventions (and optionally linting/patterns like CVA) to keep large codebases consistent.",[3551,3552,3553],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":904,"searchDepth":944,"depth":944,"links":3555},[3556,3557,3558,3559,3560,3561,3562,3572,3573],{"id":416,"depth":944,"text":64},{"id":471,"depth":944,"text":472},{"id":505,"depth":944,"text":506},{"id":545,"depth":944,"text":546},{"id":596,"depth":944,"text":597},{"id":741,"depth":944,"text":742},{"id":805,"depth":944,"text":806,"children":3563},[3564,3565,3566,3567,3568,3569,3570,3571],{"id":810,"depth":950,"text":811},{"id":875,"depth":950,"text":876},{"id":1578,"depth":950,"text":1579},{"id":2328,"depth":950,"text":2329},{"id":3218,"depth":950,"text":3219},{"id":3256,"depth":950,"text":3257},{"id":3293,"depth":950,"text":3294},{"id":3326,"depth":950,"text":3327},{"id":3364,"depth":944,"text":3365},{"id":3473,"depth":944,"text":3474,"children":3574},[3575,3576],{"id":3486,"depth":950,"text":3487},{"id":3526,"depth":950,"text":3527},"Compare Styleframe's type-safe design system approach with Tailwind CSS's utility-first framework.","md",null,{},"/docs/getting-started/comparisons/tailwind",{"title":409,"description":3577},{"loc":3581},"docs/getting-started/04.comparisons/02.tailwind","vbB1stQG8A60tV45nzJCjcUaoCLTjrvlmO2w86ASlfw",[3579,3579],1776621141589]