[{"data":1,"prerenderedAt":498},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-introduction":52,"-getting-started-introduction-surround":495},[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":11,"body":54,"description":486,"extension":487,"links":488,"meta":489,"navigation":490,"path":12,"seo":491,"stem":13,"__hash__":494},"docs\u002F1.getting-started\u002F1.introduction.md",{"type":55,"value":56,"toc":483},"minimark",[57,73,76,445,459,468,473,479],[58,59,60,64,65,68,69,72],"p",{},[61,62,63],"code",{},"vue-tailwind-block"," lets a Vue component keep its Tailwind classes in a\n",[61,66,67],{},"\u003Ctailwind>"," block instead of in the template. The block is YAML, grouped\nunder names you choose, and the template reads it from a variable called\n",[61,70,71],{},"classes",".",[58,74,75],{},"This alert has a box, a title and a body, and two tones. Each tone changes\nthe colors of the box and the title, so the block groups the tone classes\nunder the part they style:",[77,78,79,98],"code-preview",{},[80,81,87,93],"div",{"className":82},[83,84,85,86],"flex","w-full","flex-col","gap-3",[88,89,92],"example-alert",{"title":90,"tone":91},"Update available","info","Version 2.0 is ready to install.",[88,94,97],{"title":95,"tone":96},"Payment failed","danger","Your card was declined. Check the details and try again.",[99,100,102],"template",{"v-slot:code":101},"",[103,104,109],"pre",{"className":105,"code":106,"filename":107,"language":108,"meta":101,"style":101},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ tone: 'info' | 'danger', title: string }>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv role=\"alert\" :class=\"[classes.root, classes.tones[tone].root]\">\n    \u003Cp :class=\"[classes.title, classes.tones[tone].title]\">{{ title }}\u003C\u002Fp>\n    \u003Cp :class=\"classes.body\">\u003Cslot \u002F>\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Ctailwind lang=\"yaml\">\nroot: flex flex-col gap-1 rounded-lg border px-4 py-3 text-sm\ntitle: font-medium\nbody: opacity-80\n\n# each tone colors the box and the title, the body stays neutral\ntones:\n  info:\n    root: border-sky-500\u002F30 bg-sky-500\u002F10\n    title: text-sky-500\n  danger:\n    root: border-red-500\u002F30 bg-red-500\u002F10\n    title: text-red-500\n\u003C\u002Ftailwind>\n","Alert.vue","vue",[61,110,111,146,198,208,215,224,258,289,320,330,339,344,365,371,377,383,388,394,400,406,412,418,424,430,436],{"__ignoreMap":101},[112,113,116,120,124,128,131,134,137,141,143],"span",{"class":114,"line":115},"line",1,[112,117,119],{"class":118},"sMK4o","\u003C",[112,121,123],{"class":122},"swJcz","script",[112,125,127],{"class":126},"spNyl"," setup",[112,129,130],{"class":126}," lang",[112,132,133],{"class":118},"=",[112,135,136],{"class":118},"\"",[112,138,140],{"class":139},"sfazB","ts",[112,142,136],{"class":118},[112,144,145],{"class":118},">\n",[112,147,149,153,156,159,162,165,167,170,173,175,177,179,182,185,187,191,194],{"class":114,"line":148},2,[112,150,152],{"class":151},"s2Zo4","defineProps",[112,154,155],{"class":118},"\u003C{",[112,157,158],{"class":122}," tone",[112,160,161],{"class":118},":",[112,163,164],{"class":118}," '",[112,166,91],{"class":139},[112,168,169],{"class":118},"'",[112,171,172],{"class":118}," |",[112,174,164],{"class":118},[112,176,96],{"class":139},[112,178,169],{"class":118},[112,180,181],{"class":118},",",[112,183,184],{"class":122}," title",[112,186,161],{"class":118},[112,188,190],{"class":189},"sBMFI"," string",[112,192,193],{"class":118}," }>",[112,195,197],{"class":196},"sTEyZ","()\n",[112,199,201,204,206],{"class":114,"line":200},3,[112,202,203],{"class":118},"\u003C\u002F",[112,205,123],{"class":122},[112,207,145],{"class":118},[112,209,211],{"class":114,"line":210},4,[112,212,214],{"emptyLinePlaceholder":213},true,"\n",[112,216,218,220,222],{"class":114,"line":217},5,[112,219,119],{"class":118},[112,221,99],{"class":122},[112,223,145],{"class":118},[112,225,227,230,232,235,237,239,242,244,247,249,251,254,256],{"class":114,"line":226},6,[112,228,229],{"class":118},"  \u003C",[112,231,80],{"class":122},[112,233,234],{"class":126}," role",[112,236,133],{"class":118},[112,238,136],{"class":118},[112,240,241],{"class":139},"alert",[112,243,136],{"class":118},[112,245,246],{"class":126}," :class",[112,248,133],{"class":118},[112,250,136],{"class":118},[112,252,253],{"class":139},"[classes.root, classes.tones[tone].root]",[112,255,136],{"class":118},[112,257,145],{"class":118},[112,259,261,264,266,268,270,272,275,277,280,283,285,287],{"class":114,"line":260},7,[112,262,263],{"class":118},"    \u003C",[112,265,58],{"class":122},[112,267,246],{"class":126},[112,269,133],{"class":118},[112,271,136],{"class":118},[112,273,274],{"class":139},"[classes.title, classes.tones[tone].title]",[112,276,136],{"class":118},[112,278,279],{"class":118},">",[112,281,282],{"class":196},"{{ title }}",[112,284,203],{"class":118},[112,286,58],{"class":122},[112,288,145],{"class":118},[112,290,292,294,296,298,300,302,305,307,310,313,316,318],{"class":114,"line":291},8,[112,293,263],{"class":118},[112,295,58],{"class":122},[112,297,246],{"class":126},[112,299,133],{"class":118},[112,301,136],{"class":118},[112,303,304],{"class":139},"classes.body",[112,306,136],{"class":118},[112,308,309],{"class":118},">\u003C",[112,311,312],{"class":122},"slot",[112,314,315],{"class":118}," \u002F>\u003C\u002F",[112,317,58],{"class":122},[112,319,145],{"class":118},[112,321,323,326,328],{"class":114,"line":322},9,[112,324,325],{"class":118},"  \u003C\u002F",[112,327,80],{"class":122},[112,329,145],{"class":118},[112,331,333,335,337],{"class":114,"line":332},10,[112,334,203],{"class":118},[112,336,99],{"class":122},[112,338,145],{"class":118},[112,340,342],{"class":114,"line":341},11,[112,343,214],{"emptyLinePlaceholder":213},[112,345,347,349,352,354,356,358,361,363],{"class":114,"line":346},12,[112,348,119],{"class":118},[112,350,351],{"class":122},"tailwind",[112,353,130],{"class":126},[112,355,133],{"class":118},[112,357,136],{"class":118},[112,359,360],{"class":139},"yaml",[112,362,136],{"class":118},[112,364,145],{"class":118},[112,366,368],{"class":114,"line":367},13,[112,369,370],{"class":196},"root: flex flex-col gap-1 rounded-lg border px-4 py-3 text-sm\n",[112,372,374],{"class":114,"line":373},14,[112,375,376],{"class":196},"title: font-medium\n",[112,378,380],{"class":114,"line":379},15,[112,381,382],{"class":196},"body: opacity-80\n",[112,384,386],{"class":114,"line":385},16,[112,387,214],{"emptyLinePlaceholder":213},[112,389,391],{"class":114,"line":390},17,[112,392,393],{"class":196},"# each tone colors the box and the title, the body stays neutral\n",[112,395,397],{"class":114,"line":396},18,[112,398,399],{"class":196},"tones:\n",[112,401,403],{"class":114,"line":402},19,[112,404,405],{"class":196},"  info:\n",[112,407,409],{"class":114,"line":408},20,[112,410,411],{"class":196},"    root: border-sky-500\u002F30 bg-sky-500\u002F10\n",[112,413,415],{"class":114,"line":414},21,[112,416,417],{"class":196},"    title: text-sky-500\n",[112,419,421],{"class":114,"line":420},22,[112,422,423],{"class":196},"  danger:\n",[112,425,427],{"class":114,"line":426},23,[112,428,429],{"class":196},"    root: border-red-500\u002F30 bg-red-500\u002F10\n",[112,431,433],{"class":114,"line":432},24,[112,434,435],{"class":196},"    title: text-red-500\n",[112,437,439,441,443],{"class":114,"line":438},25,[112,440,203],{"class":118},[112,442,351],{"class":122},[112,444,145],{"class":118},[58,446,447,448,450,451,454,455,458],{},"Adding a new tone only requires adding a key in the YAML—no template\nchanges or manual lookup objects needed. The ",[61,449,71],{}," variable is\navailable in both ",[61,452,453],{},"\u003Ctemplate>"," and ",[61,456,457],{},"\u003Cscript setup>"," with zero imports\nrequired.",[58,460,461,462,464,465,72],{},"The block never reaches the browser: it has zero runtime overhead (0 kB).\nThe build compiles it into a plain JavaScript object at the top of\n",[61,463,457],{},", and a plugin for the Vue language tools types that\nobject in the editor and in ",[61,466,467],{},"vue-tsc",[469,470,472],"h2",{"id":471},"when-to-use-it","When to use it",[58,474,475,476,478],{},"A ",[61,477,67],{}," block works best for multi-part components, variant\nmatrices, and reusable design system elements where styling logic\nwould otherwise clutter the template or script. For simple single-element\ncomponents with two or three static classes, leaving them inline in the\ntemplate is usually simpler.",[480,481,482],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}",{"title":101,"searchDepth":148,"depth":148,"links":484},[485],{"id":471,"depth":148,"text":472},"A Tailwind block for Vue single file components.","md",null,{},{"icon":14},{"title":492,"description":493},"Introduction: Tailwind classes in a Vue custom block","vue-tailwind-block moves the Tailwind classes of a Vue component into a YAML block at the bottom of the file, and the template reads them from a typed classes object.","Ejg0OZvk_MAao_dyvjQBwaoBwA4q0qyTTSZzbPPyNpY",[488,496],{"title":16,"path":17,"stem":18,"description":497,"icon":19,"children":-1},"Add the build plugin and the editor types to a Nuxt or Vite project.",1791485568741]