[{"data":1,"prerenderedAt":633},["ShallowReactive",2],{"navigation_docs":3,"-guide-type-checking":52,"-guide-type-checking-surround":628},[4,21,42],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guide","i-lucide-book-open","\u002Fguide","2.guide",[27,32,37],{"title":28,"path":29,"stem":30,"icon":31},"Writing blocks","\u002Fguide\u002Fwriting-blocks","2.guide\u002F1.writing-blocks","i-lucide-square-pen",{"title":33,"path":34,"stem":35,"icon":36},"Type checking","\u002Fguide\u002Ftype-checking","2.guide\u002F2.type-checking","i-lucide-shield-check",{"title":38,"path":39,"stem":40,"icon":41},"Linting","\u002Fguide\u002Flinting","2.guide\u002F3.linting","i-lucide-list-checks",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"API","i-lucide-code","\u002Fapi","3.api",[48],{"title":49,"path":50,"stem":51,"icon":44},"Core","\u002Fapi\u002Fcore","3.api\u002F1.core",{"id":53,"title":33,"body":54,"description":619,"extension":620,"links":621,"meta":622,"navigation":623,"path":34,"seo":624,"stem":35,"__hash__":627},"docs\u002F2.guide\u002F2.type-checking.md",{"type":55,"value":56,"toc":612},"minimark",[57,70,75,86,90,98,127,130,188,289,292,441,455,459,462,492,502,514,518,524,581,585,590,608],[58,59,60,61,65,66,69],"p",{},"The editor and ",[62,63,64],"code",{},"vue-tsc"," read the block directly to type the ",[62,67,68],{},"classes","\nobject—no build step required.",[71,72,74],"h2",{"id":73},"setup","Setup",[58,76,77,78,81,82,85],{},"Setup is automatic in Nuxt via the module. In Vite projects, ensure the Volar\nplugin is registered in your ",[62,79,80],{},"tsconfig"," as shown in\n",[83,84,16],"a",{"href":17},".",[71,87,89],{"id":88},"autocomplete-hover","Autocomplete & Hover",[58,91,92,94,95,85],{},[62,93,68],{}," contains the exact keys defined in your block, and each leaf\nproperty is typed as ",[62,96,97],{},"string",[99,100,101,121],"ul",{},[102,103,104,108,109,112,113,116,117,120],"li",{},[105,106,107],"strong",{},"Autocomplete",": Typing ",[62,110,111],{},"classes."," in either ",[62,114,115],{},"\u003Ctemplate>"," or ",[62,118,119],{},"\u003Cscript setup>","\nimmediately suggests all defined keys and groups.",[102,122,123,126],{},[105,124,125],{},"Hover previews",": Every key is typed with a JSDoc tooltip containing the\nexact compiled Tailwind classes.",[58,128,129],{},"For this block:",[131,132,138],"pre",{"className":133,"code":134,"filename":135,"language":136,"meta":137,"style":137},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","root: inline-flex items-center rounded-md\nvariants:\n  solid: bg-sky-600 text-white hover:bg-sky-500\n  outline: border border-zinc-300 hover:bg-zinc-50\n","Button.vue","yaml","",[62,139,140,157,166,177],{"__ignoreMap":137},[141,142,145,149,153],"span",{"class":143,"line":144},"line",1,[141,146,148],{"class":147},"swJcz","root",[141,150,152],{"class":151},"sMK4o",":",[141,154,156],{"class":155},"sfazB"," inline-flex items-center rounded-md\n",[141,158,160,163],{"class":143,"line":159},2,[141,161,162],{"class":147},"variants",[141,164,165],{"class":151},":\n",[141,167,169,172,174],{"class":143,"line":168},3,[141,170,171],{"class":147},"  solid",[141,173,152],{"class":151},[141,175,176],{"class":155}," bg-sky-600 text-white hover:bg-sky-500\n",[141,178,180,183,185],{"class":143,"line":179},4,[141,181,182],{"class":147},"  outline",[141,184,152],{"class":151},[141,186,187],{"class":155}," border border-zinc-300 hover:bg-zinc-50\n",[189,190,191,265],"code-group",{},[131,192,197],{"className":193,"code":194,"filename":195,"language":196,"meta":137,"style":137},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const classes: {\n  root: string\n  variants: {\n    solid: string\n    outline: string\n  }\n}\n","Hover on classes","ts",[62,198,199,214,225,234,243,253,259],{"__ignoreMap":137},[141,200,201,205,209,211],{"class":143,"line":144},[141,202,204],{"class":203},"spNyl","const",[141,206,208],{"class":207},"sTEyZ"," classes",[141,210,152],{"class":151},[141,212,213],{"class":151}," {\n",[141,215,216,219,221],{"class":143,"line":159},[141,217,218],{"class":147},"  root",[141,220,152],{"class":151},[141,222,224],{"class":223},"sBMFI"," string\n",[141,226,227,230,232],{"class":143,"line":168},[141,228,229],{"class":147},"  variants",[141,231,152],{"class":151},[141,233,213],{"class":151},[141,235,236,239,241],{"class":143,"line":179},[141,237,238],{"class":147},"    solid",[141,240,152],{"class":151},[141,242,224],{"class":223},[141,244,246,249,251],{"class":143,"line":245},5,[141,247,248],{"class":147},"    outline",[141,250,152],{"class":151},[141,252,224],{"class":223},[141,254,256],{"class":143,"line":255},6,[141,257,258],{"class":151},"  }\n",[141,260,262],{"class":143,"line":261},7,[141,263,264],{"class":151},"}\n",[131,266,269],{"className":193,"code":267,"filename":268,"language":196,"meta":137,"style":137},"(property) solid: string\n\u002F\u002F bg-sky-600 text-white hover:bg-sky-500\n","Hover on classes.variants.solid",[62,270,271,283],{"__ignoreMap":137},[141,272,273,276,279,281],{"class":143,"line":144},[141,274,275],{"class":207},"(property) ",[141,277,278],{"class":223},"solid",[141,280,152],{"class":151},[141,282,224],{"class":207},[141,284,285],{"class":143,"line":159},[141,286,288],{"class":287},"sHwdD","\u002F\u002F bg-sky-600 text-white hover:bg-sky-500\n",[58,290,291],{},"A key that is not in the block is a type error, in both the template and the\nscript. This includes any prop union used as a dynamic index:",[131,293,297],{"className":294,"code":295,"filename":135,"language":296,"meta":137,"style":137},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ variant: 'solid' | 'outline' | 'ghost' }>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- error: 'ghost' is not a key of classes.variants -->\n  \u003Cbutton :class=\"classes.variants[props.variant]\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[62,298,299,326,380,389,395,404,409,432],{"__ignoreMap":137},[141,300,301,304,307,310,313,316,319,321,323],{"class":143,"line":144},[141,302,303],{"class":151},"\u003C",[141,305,306],{"class":147},"script",[141,308,309],{"class":203}," setup",[141,311,312],{"class":203}," lang",[141,314,315],{"class":151},"=",[141,317,318],{"class":151},"\"",[141,320,196],{"class":155},[141,322,318],{"class":151},[141,324,325],{"class":151},">\n",[141,327,328,330,333,335,339,342,345,347,350,352,355,358,360,363,365,367,369,372,374,377],{"class":143,"line":159},[141,329,204],{"class":203},[141,331,332],{"class":207}," props ",[141,334,315],{"class":151},[141,336,338],{"class":337},"s2Zo4"," defineProps",[141,340,341],{"class":151},"\u003C{",[141,343,344],{"class":147}," variant",[141,346,152],{"class":151},[141,348,349],{"class":151}," '",[141,351,278],{"class":155},[141,353,354],{"class":151},"'",[141,356,357],{"class":151}," |",[141,359,349],{"class":151},[141,361,362],{"class":155},"outline",[141,364,354],{"class":151},[141,366,357],{"class":151},[141,368,349],{"class":151},[141,370,371],{"class":155},"ghost",[141,373,354],{"class":151},[141,375,376],{"class":151}," }>",[141,378,379],{"class":207},"()\n",[141,381,382,385,387],{"class":143,"line":168},[141,383,384],{"class":151},"\u003C\u002F",[141,386,306],{"class":147},[141,388,325],{"class":151},[141,390,391],{"class":143,"line":179},[141,392,394],{"emptyLinePlaceholder":393},true,"\n",[141,396,397,399,402],{"class":143,"line":245},[141,398,303],{"class":151},[141,400,401],{"class":147},"template",[141,403,325],{"class":151},[141,405,406],{"class":143,"line":255},[141,407,408],{"class":287},"  \u003C!-- error: 'ghost' is not a key of classes.variants -->\n",[141,410,411,414,417,420,422,424,427,429],{"class":143,"line":261},[141,412,413],{"class":151},"  \u003C",[141,415,416],{"class":147},"button",[141,418,419],{"class":203}," :class",[141,421,315],{"class":151},[141,423,318],{"class":151},[141,425,426],{"class":155},"classes.variants[props.variant]",[141,428,318],{"class":151},[141,430,431],{"class":151}," \u002F>\n",[141,433,435,437,439],{"class":143,"line":434},8,[141,436,384],{"class":151},[141,438,401],{"class":147},[141,440,325],{"class":151},[58,442,443,444,447,448,450,451,454],{},"Index checking requires ",[62,445,446],{},"strict"," mode in ",[62,449,80],{},", which ",[62,452,453],{},"create-vue"," and\nNuxt enable by default.",[71,456,458],{"id":457},"diagnostics","Diagnostics",[58,460,461],{},"Problems in the block are highlighted directly on the YAML:",[99,463,464,470,476],{},[102,465,466,469],{},[105,467,468],{},"YAML syntax errors"," (such as duplicate keys or bad indentation) underline\nthe specific line.",[102,471,472,475],{},[105,473,474],{},"Invalid values"," (such as an empty key or unsupported scalar) underline the\nblock and name the path in the message.",[102,477,478,485,486,116,488,491],{},[105,479,480,481,484],{},"Unsupported ",[62,482,483],{},"lang"," attributes"," (anything other than ",[62,487,136],{},[62,489,490],{},"yml",")\nunderline the block.",[58,493,494,495,497,498,501],{},"While a block has errors, ",[62,496,68],{}," falls back to ",[62,499,500],{},"any"," so that diagnostics are\nreported once on the block itself, rather than cascading as errors across every\ntemplate reference.",[503,504,505,507,508,511,512,85],"note",{},[62,506,68],{}," is strictly typed in ",[62,509,510],{},"\u003Cscript setup lang=\"ts\">"," components. In a\nplain JavaScript component, it is typed as ",[62,513,500],{},[71,515,517],{"id":516},"troubleshooting","Troubleshooting",[58,519,520,521,523],{},"If ",[62,522,68],{}," is underlined as an unknown variable in your editor:",[525,526,527,535,551,568],"ol",{},[102,528,529,532,533,85],{},[105,530,531],{},"Verify language",": Ensure the component has ",[62,534,510],{},[102,536,537,540,541,543,544,547,548,85],{},[105,538,539],{},"Verify TSConfig",": Check that your ",[62,542,80],{}," covers the ",[62,545,546],{},".vue"," file and\nincludes ",[62,549,550],{},"\"plugins\": [{ \"name\": \"vue-tailwind-block\u002Fvolar\" }]",[102,552,553,556,557,560,561,564,565,85],{},[105,554,555],{},"Restart Language Server",": In VS Code, open the Command Palette\n(",[62,558,559],{},"Cmd\u002FCtrl + Shift + P",") and run ",[105,562,563],{},"Vue: Restart Vue Language Server"," or\n",[105,566,567],{},"Developer: Reload Window",[102,569,570,573,574,577,578,85],{},[105,571,572],{},"Nuxt",": Run ",[62,575,576],{},"npx nuxi prepare"," to regenerate ",[62,579,580],{},".nuxt\u002Ftsconfig.json",[71,582,584],{"id":583},"ci","CI",[58,586,587,589],{},[62,588,64],{}," loads the same plugin, so the same errors fail CI builds:",[131,591,595],{"className":592,"code":593,"language":594,"meta":137,"style":137},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm vue-tsc --noEmit\n","bash",[62,596,597],{"__ignoreMap":137},[141,598,599,602,605],{"class":143,"line":144},[141,600,601],{"class":223},"pnpm",[141,603,604],{"class":155}," vue-tsc",[141,606,607],{"class":155}," --noEmit\n",[609,610,611],"style",{},"html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":137,"searchDepth":159,"depth":159,"links":613},[614,615,616,617,618],{"id":73,"depth":159,"text":74},{"id":88,"depth":159,"text":89},{"id":457,"depth":159,"text":458},{"id":516,"depth":159,"text":517},{"id":583,"depth":159,"text":584},"Typed classes in the editor and in vue-tsc.","md",null,{},{"icon":36},{"title":625,"description":626},"Type check tailwind blocks in the editor and vue-tsc","The vue-tailwind-block editor plugin types the classes object from the block, catches misspelled keys in vue-tsc and shows YAML errors on the block.","FPA5ze2qpskEzD8m4pEyV66UgX4gAlOua5jwma-J3Zc",[629,631],{"title":28,"path":29,"stem":30,"description":630,"icon":31,"children":-1},"Lists, groups, comments, and the YAML a block accepts.",{"title":38,"path":39,"stem":40,"description":632,"icon":41,"children":-1},"Check and fix the classes in a block with your Tailwind ESLint rules.",1791485568741]