[{"data":1,"prerenderedAt":935},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Ftailwind-on-lynx":455,"\u002Fguides\u002Ftailwind-on-lynx-surround":930},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,436,441,445,450],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":433,"path":434,"stem":435,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":437,"path":438,"stem":439,"package":11,"icon":440},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":442,"path":443,"stem":444,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":446,"path":447,"stem":448,"package":11,"icon":449},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":456,"title":446,"body":457,"description":922,"extension":923,"links":11,"meta":924,"navigation":925,"package":11,"path":447,"seo":926,"stem":448,"__hash__":929},"docs\u002F8.guides\u002F8.tailwind-on-lynx.md",{"type":458,"value":459,"toc":915},"minimark",[460,469,480,485,496,532,559,586,590,600,622,633,636,640,643,706,709,713,716,822,834,856,870,888,892,911],[461,462,463,464,468],"p",{},"Lynx apps have to use Tailwind v3. Every current tutorial and ",[465,466,467],"code",{},"npm create"," template hands you v4, which then either errors on the Lynx preset or builds a stylesheet missing most of what you wrote.",[461,470,471,472,475,476,479],{},"As of 25 July 2026 the latest ",[465,473,474],{},"@lynx-js\u002Ftailwind-preset"," on npm is 0.5.0, and it still declares ",[465,477,478],{},"peerDependencies: { tailwindcss: \"^3.4.0\" }",", unchanged from 0.4.0. The next two sections explain why, and the fix itself is further down.",[481,482,484],"h2",{"id":483},"what-the-lynx-preset-actually-does","What the Lynx preset actually does",[461,486,487,488,491,492,495],{},"Lynx renders through its own CSS engine, which implements a subset of CSS. A class emitting ",[465,489,490],{},"float: left"," or ",[465,493,494],{},"--tw-ring-shadow"," becomes a silent no-op rather than an error, so the preset uses an allowlist to stop those utilities existing:",[497,498,503],"pre",{"className":499,"code":500,"language":501,"meta":502,"style":502},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F inside @lynx-js\u002Ftailwind-preset\ncorePlugins: DEFAULT_CORE_PLUGINS  \u002F\u002F an array, not an object\n","js","",[465,504,505,514],{"__ignoreMap":502},[506,507,510],"span",{"class":508,"line":509},"line",1,[506,511,513],{"class":512},"sHwdD","\u002F\u002F inside @lynx-js\u002Ftailwind-preset\n",[506,515,517,521,525,529],{"class":508,"line":516},2,[506,518,520],{"class":519},"sBMFI","corePlugins",[506,522,524],{"class":523},"sMK4o",":",[506,526,528],{"class":527},"sTEyZ"," DEFAULT_CORE_PLUGINS  ",[506,530,531],{"class":512},"\u002F\u002F an array, not an object\n",[461,533,534,535,537,538,542,543,546,547,550,551,554,555,558],{},"Passing an array to ",[465,536,520],{}," in Tailwind v3 means ",[539,540,541],"em",{},"enable only these",". ",[465,544,545],{},"DEFAULT_CORE_PLUGINS"," holds 57 entries against the 179 core plugins v3 ships, so roughly two thirds of Tailwind is off before your config is read. Flexbox, sizing, spacing, colors, typography, borders, opacity, and z-index survive. Floats, most positioning, and the whole ",[465,548,549],{},"ring"," family do not, which is why a focus ring on Lynx comes from a spread-only ",[465,552,553],{},"box-shadow"," instead of ",[465,556,557],{},"ring-2",".",[461,560,561,562,565,566,569,570,573,574,577,578,581,582,585],{},"Everything else sits on ordinary plugin APIs, with ",[465,563,564],{},"matchUtilities"," and ",[465,567,568],{},"addUtilities"," called around 28 times each, ",[465,571,572],{},"matchVariant"," five times, and ",[465,575,576],{},"addBase"," twice, adding Lynx-specific utilities and the ",[465,579,580],{},"ui-*"," variants that stand in for ",[465,583,584],{},"data-[state]"," selectors.",[481,587,589],{"id":588},"why-the-preset-has-not-been-ported-to-v4","Why the preset has not been ported to v4",[461,591,592,593,595,596,599],{},"Tailwind v4 removed ",[465,594,520],{},". Searching the published ",[465,597,598],{},"tailwindcss@4.3.0"," package for the string finds nothing, because v4 has no way to disable parts of the utility set, so every utility is always available.",[461,601,602,603,605,606,605,608,610,611,613,614,617,618,621],{},"The rest would mostly port, since ",[465,604,564],{},", ",[465,607,568],{},[465,609,572],{},", and ",[465,612,576],{}," all still exist in v4, and moving configuration from a JavaScript ",[465,615,616],{},"presets"," array to CSS-first ",[465,619,620],{},"@theme"," blocks is disruptive but tractable. The allowlist has no successor, so the preset's central job cannot be expressed in v4 as it stands.",[461,623,624,625,632],{},"The Lynx side cannot fix that alone. Either Tailwind reintroduces a way to restrict the emitted utility set, or the preset post-processes the generated CSS to strip what the engine will not understand, and both are real work rather than a version bump. ",[626,627,631],"a",{"href":628,"rel":629},"https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fissues\u002F5",[630],"nofollow","The tracking issue"," has stayed open since May.",[461,634,635],{},"This answer has a shelf life, so check that issue before assuming v4 is still blocked.",[481,637,639],{"id":638},"running-both-versions-in-one-repo","Running both versions in one repo",[461,641,642],{},"The constraint follows the rendering engine rather than the repository, so a monorepo does not have to pick one version. Vy UI runs both:",[644,645,646,662],"table",{},[647,648,649],"thead",{},[650,651,652,656,659],"tr",{},[653,654,655],"th",{},"Package",[653,657,658],{},"Tailwind",[653,660,661],{},"Why",[663,664,665,680,693],"tbody",{},[650,666,667,672,677],{},[668,669,670],"td",{},[465,671,46],{},[668,673,674],{},[465,675,676],{},"^3.4.0",[668,678,679],{},"Compiles for the Lynx CSS engine",[650,681,682,685,690],{},[668,683,684],{},"Example apps (7)",[668,686,687],{},[465,688,689],{},"^3.4.17",[668,691,692],{},"Lynx apps",[650,694,695,698,703],{},[668,696,697],{},"Docs site",[668,699,700],{},[465,701,702],{},"^4.0.0",[668,704,705],{},"A browser target, so no preset",[461,707,708],{},"pnpm and other content-addressed installers handle the duplication without complaint, since the two versions never meet in a single module graph.",[481,710,712],{"id":711},"what-to-do-today","What to do today",[461,714,715],{},"Pin v3 explicitly in any package that builds for Lynx, and use the v3 PostCSS pipeline rather than v4's:",[497,717,722],{"className":718,"code":719,"filename":720,"language":721,"meta":502,"style":502},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"devDependencies\": {\n    \"tailwindcss\": \"^3.4.17\",\n    \"@lynx-js\u002Ftailwind-preset\": \"^0.5.0\",\n    \"rsbuild-plugin-tailwindcss\": \"^0.2.4\"\n  }\n}\n","package.json","json",[465,723,724,729,746,770,790,810,816],{"__ignoreMap":502},[506,725,726],{"class":508,"line":509},[506,727,728],{"class":523},"{\n",[506,730,731,734,738,741,743],{"class":508,"line":516},[506,732,733],{"class":523},"  \"",[506,735,737],{"class":736},"spNyl","devDependencies",[506,739,740],{"class":523},"\"",[506,742,524],{"class":523},[506,744,745],{"class":523}," {\n",[506,747,749,752,755,757,759,762,765,767],{"class":508,"line":748},3,[506,750,751],{"class":523},"    \"",[506,753,754],{"class":519},"tailwindcss",[506,756,740],{"class":523},[506,758,524],{"class":523},[506,760,761],{"class":523}," \"",[506,763,689],{"class":764},"sfazB",[506,766,740],{"class":523},[506,768,769],{"class":523},",\n",[506,771,773,775,777,779,781,783,786,788],{"class":508,"line":772},4,[506,774,751],{"class":523},[506,776,474],{"class":519},[506,778,740],{"class":523},[506,780,524],{"class":523},[506,782,761],{"class":523},[506,784,785],{"class":764},"^0.5.0",[506,787,740],{"class":523},[506,789,769],{"class":523},[506,791,793,795,798,800,802,804,807],{"class":508,"line":792},5,[506,794,751],{"class":523},[506,796,797],{"class":519},"rsbuild-plugin-tailwindcss",[506,799,740],{"class":523},[506,801,524],{"class":523},[506,803,761],{"class":523},[506,805,806],{"class":764},"^0.2.4",[506,808,809],{"class":523},"\"\n",[506,811,813],{"class":508,"line":812},6,[506,814,815],{"class":523},"  }\n",[506,817,819],{"class":508,"line":818},7,[506,820,821],{"class":523},"}\n",[461,823,824,605,827,610,830,833],{},[465,825,826],{},"@tailwindcss\u002Fpostcss",[465,828,829],{},"@tailwindcss\u002Fvite",[465,831,832],{},"@tailwindcss\u002Fcli"," are the usual accidental route back to v4, because they are v4-only and pull it in behind you.",[461,835,836,837,840,841,565,844,847,848,851,852,855],{},"Spacing in v3 has no half-steps above ",[465,838,839],{},"3.5",", so ",[465,842,843],{},"size-4.5",[465,845,846],{},"p-6.5"," compile to nothing rather than failing, and an arbitrary value like ",[465,849,850],{},"size-[18px]"," is the fix. Classes built dynamically, such as ",[465,853,854],{},"`bg-${color}-500`",", need a safelist because they cannot be statically extracted, and a missing class on Lynx is invisible rather than merely unstyled.",[461,857,858,859,862,863,866,867,869],{},"Our ",[626,860,861],{"href":15},"installation guide"," covers the preset wiring, including the ",[465,864,865],{},"uiVariants"," registration behind the ",[465,868,580],{}," state classes.",[871,872,874],"callout",{"icon":873},"i-lucide-info",[461,875,876,877,565,880,882,883,887],{},"Verified against ",[465,878,879],{},"@lynx-js\u002Ftailwind-preset@0.5.0",[465,881,598],{}," on 25 July 2026. ",[626,884,886],{"href":628,"rel":885},[630],"Issue #5"," tracks any movement.",[481,889,891],{"id":890},"related","Related",[893,894,895,901,906],"card-group",{},[896,897,898],"card",{"icon":17,"title":14,"to":15},[461,899,900],{},"Wiring the Lynx and Vy UI presets together.",[896,902,903],{"icon":307,"title":302,"to":303},[461,904,905],{},"Semantic tokens, and the single-level var() constraint on device.",[896,907,908],{"icon":84,"title":433,"to":434},[461,909,910],{},"Where styling that works in the browser stops working on device.",[912,913,914],"style",{},"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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":502,"searchDepth":509,"depth":516,"links":916},[917,918,919,920,921],{"id":483,"depth":516,"text":484},{"id":588,"depth":516,"text":589},{"id":638,"depth":516,"text":639},{"id":711,"depth":516,"text":712},{"id":890,"depth":516,"text":891},"Why Lynx apps are pinned to Tailwind v3, what the Lynx preset actually does to your utility set, and how to run v3 and v4 in the same repository.","md",{},{"icon":449},{"title":927,"description":928},"Tailwind CSS on Lynx — why v3 and not v4","Lynx requires Tailwind v3 because @lynx-js\u002Ftailwind-preset depends on corePlugins, which Tailwind v4 removed. What the preset does, what breaks, and how to run both versions in one repo.","pJdzWrii4j9qZWkIwjpUoHA8DpOgJFoxWqFBFnogyac",[931,933],{"title":442,"path":443,"stem":444,"description":932,"icon":-1,"children":-1,"navigation":-1},"What rspeedy dev prints, how to cycle the QR code between entries and URL schemas from the terminal, and which of the three URLs to use when.",{"title":451,"path":452,"stem":453,"description":934,"icon":-1,"children":-1,"navigation":-1},"Why the same CSS behaves differently on a Lynx device than in a browser, and the engine constraints that shape every theme decision in Vy UI.",1785008680651]