[{"data":1,"prerenderedAt":1052},["ShallowReactive",2],{"navigation_docs":3,"-guide-writing-blocks":52,"-guide-writing-blocks-surround":1047},[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":28,"body":54,"description":1038,"extension":1039,"links":1040,"meta":1041,"navigation":1042,"path":29,"seo":1043,"stem":30,"__hash__":1046},"docs\u002F2.guide\u002F1.writing-blocks.md",{"type":55,"value":56,"toc":1028},"minimark",[57,62,71,201,218,222,225,288,292,299,327,340,344,347,647,662,669,681,838,842,861,939,942,960,967,971,974,1013,1024],[58,59,61],"h2",{"id":60},"keys","Keys",[63,64,65,66,70],"p",{},"Each key names a part of the component, and its value holds the classes\nfor that part. The template reads them from ",[67,68,69],"code",{},"classes",":",[72,73,79],"pre",{"className":74,"code":75,"filename":76,"language":77,"meta":78,"style":78},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cbutton :class=\"classes.root\">\n    \u003Cslot \u002F>\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Ctailwind lang=\"yaml\">\nroot: inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm\n\u003C\u002Ftailwind>\n","Button.vue","vue","",[67,80,81,97,124,136,146,156,163,185,192],{"__ignoreMap":78},[82,83,86,90,94],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"sMK4o","\u003C",[82,91,93],{"class":92},"swJcz","template",[82,95,96],{"class":88},">\n",[82,98,100,103,106,110,113,116,120,122],{"class":84,"line":99},2,[82,101,102],{"class":88},"  \u003C",[82,104,105],{"class":92},"button",[82,107,109],{"class":108},"spNyl"," :class",[82,111,112],{"class":88},"=",[82,114,115],{"class":88},"\"",[82,117,119],{"class":118},"sfazB","classes.root",[82,121,115],{"class":88},[82,123,96],{"class":88},[82,125,127,130,133],{"class":84,"line":126},3,[82,128,129],{"class":88},"    \u003C",[82,131,132],{"class":92},"slot",[82,134,135],{"class":88}," \u002F>\n",[82,137,139,142,144],{"class":84,"line":138},4,[82,140,141],{"class":88},"  \u003C\u002F",[82,143,105],{"class":92},[82,145,96],{"class":88},[82,147,149,152,154],{"class":84,"line":148},5,[82,150,151],{"class":88},"\u003C\u002F",[82,153,93],{"class":92},[82,155,96],{"class":88},[82,157,159],{"class":84,"line":158},6,[82,160,162],{"emptyLinePlaceholder":161},true,"\n",[82,164,166,168,171,174,176,178,181,183],{"class":84,"line":165},7,[82,167,89],{"class":88},[82,169,170],{"class":92},"tailwind",[82,172,173],{"class":108}," lang",[82,175,112],{"class":88},[82,177,115],{"class":88},[82,179,180],{"class":118},"yaml",[82,182,115],{"class":88},[82,184,96],{"class":88},[82,186,188],{"class":84,"line":187},8,[82,189,191],{"class":190},"sTEyZ","root: inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm\n",[82,193,195,197,199],{"class":84,"line":194},9,[82,196,151],{"class":88},[82,198,170],{"class":92},[82,200,96],{"class":88},[202,203,204,207,208,210,211,214,215,217],"note",{},[67,205,206],{},"lang"," can be ",[67,209,180],{},", ",[67,212,213],{},"yml"," or left out. Prefer ",[67,216,180],{},", because VS Code\nhighlights the block as YAML only then. A component holds one block.",[58,219,221],{"id":220},"lists","Lists",[63,223,224],{},"A list is joined into one class string, with each entry trimmed. Use one\nwhen the classes no longer fit on a line:",[226,227,228,264],"code-group",{},[72,229,232],{"className":230,"code":231,"filename":76,"language":180,"meta":78,"style":78},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","root:\n  - inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm\n  - disabled:pointer-events-none disabled:opacity-50\n  - focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500\n",[67,233,234,242,250,257],{"__ignoreMap":78},[82,235,236,239],{"class":84,"line":85},[82,237,238],{"class":92},"root",[82,240,241],{"class":88},":\n",[82,243,244,247],{"class":84,"line":99},[82,245,246],{"class":88},"  -",[82,248,249],{"class":118}," inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm\n",[82,251,252,254],{"class":84,"line":126},[82,253,246],{"class":88},[82,255,256],{"class":118}," disabled:pointer-events-none disabled:opacity-50\n",[82,258,259,261],{"class":84,"line":138},[82,260,246],{"class":88},[82,262,263],{"class":118}," focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500\n",[72,265,270],{"className":266,"code":267,"filename":268,"language":269,"meta":78,"style":78},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","classes.root\n\u002F\u002F 'inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500'\n","Compiled","ts",[67,271,272,282],{"__ignoreMap":78},[82,273,274,276,279],{"class":84,"line":85},[82,275,69],{"class":190},[82,277,278],{"class":88},".",[82,280,281],{"class":190},"root\n",[82,283,284],{"class":84,"line":99},[82,285,287],{"class":286},"sHwdD","\u002F\u002F 'inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500'\n",[58,289,291],{"id":290},"comments","Comments",[63,293,294,295,298],{},"A ",[67,296,297],{},"#"," after a space starts a comment, on its own line or after an entry:",[72,300,302],{"className":230,"code":301,"filename":76,"language":180,"meta":78,"style":78},"root:\n  - inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm\n  # without pointer-events-none, a disabled button still shows hover styles\n  - disabled:pointer-events-none disabled:opacity-50\n",[67,303,304,310,316,321],{"__ignoreMap":78},[82,305,306,308],{"class":84,"line":85},[82,307,238],{"class":92},[82,309,241],{"class":88},[82,311,312,314],{"class":84,"line":99},[82,313,246],{"class":88},[82,315,249],{"class":118},[82,317,318],{"class":84,"line":126},[82,319,320],{"class":286},"  # without pointer-events-none, a disabled button still shows hover styles\n",[82,322,323,325],{"class":84,"line":138},[82,324,246],{"class":88},[82,326,256],{"class":118},[63,328,294,329,331,332,335,336,339],{},[67,330,297],{}," written without a preceding space is treated as part of the class name.\nThis means arbitrary hex values like ",[67,333,334],{},"bg-[#1da1f2]"," or ",[67,337,338],{},"text-[#333]"," work\nunquoted without being parsed as comments.",[58,341,343],{"id":342},"groups","Groups",[63,345,346],{},"A key can hold other keys instead of classes, to any depth. The template\npicks an entry from each group with its props:",[72,348,350],{"className":74,"code":349,"filename":76,"language":77,"meta":78,"style":78},"\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  variant: 'solid' | 'outline'\n  size: 'sm' | 'lg'\n  disabled?: boolean\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    :class=\"[\n      classes.root,\n      classes.variants[variant],\n      classes.sizes[size],\n      disabled && classes.states.disabled,\n    ]\"\n  >\n    \u003Cslot \u002F>\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Ctailwind lang=\"yaml\">\nroot: inline-flex items-center gap-2 rounded-md text-sm\nvariants:\n  solid: bg-sky-600 text-white hover:bg-sky-500\n  outline: border border-zinc-300 hover:bg-zinc-50\nsizes:\n  sm: h-8 px-3\n  lg: h-10 px-6\nstates:\n  disabled: pointer-events-none opacity-50\n\u003C\u002Ftailwind>\n",[67,351,352,374,383,410,433,445,453,461,465,473,481,494,500,506,512,518,527,533,542,551,560,565,584,590,596,602,608,614,620,626,632,638],{"__ignoreMap":78},[82,353,354,356,359,362,364,366,368,370,372],{"class":84,"line":85},[82,355,89],{"class":88},[82,357,358],{"class":92},"script",[82,360,361],{"class":108}," setup",[82,363,173],{"class":108},[82,365,112],{"class":88},[82,367,115],{"class":88},[82,369,269],{"class":118},[82,371,115],{"class":88},[82,373,96],{"class":88},[82,375,376,380],{"class":84,"line":99},[82,377,379],{"class":378},"s2Zo4","defineProps",[82,381,382],{"class":88},"\u003C{\n",[82,384,385,388,390,393,396,399,402,404,407],{"class":84,"line":126},[82,386,387],{"class":92},"  variant",[82,389,70],{"class":88},[82,391,392],{"class":88}," '",[82,394,395],{"class":118},"solid",[82,397,398],{"class":88},"'",[82,400,401],{"class":88}," |",[82,403,392],{"class":88},[82,405,406],{"class":118},"outline",[82,408,409],{"class":88},"'\n",[82,411,412,415,417,419,422,424,426,428,431],{"class":84,"line":138},[82,413,414],{"class":92},"  size",[82,416,70],{"class":88},[82,418,392],{"class":88},[82,420,421],{"class":118},"sm",[82,423,398],{"class":88},[82,425,401],{"class":88},[82,427,392],{"class":88},[82,429,430],{"class":118},"lg",[82,432,409],{"class":88},[82,434,435,438,441],{"class":84,"line":148},[82,436,437],{"class":92},"  disabled",[82,439,440],{"class":88},"?:",[82,442,444],{"class":443},"sBMFI"," boolean\n",[82,446,447,450],{"class":84,"line":158},[82,448,449],{"class":88},"}>",[82,451,452],{"class":190},"()\n",[82,454,455,457,459],{"class":84,"line":165},[82,456,151],{"class":88},[82,458,358],{"class":92},[82,460,96],{"class":88},[82,462,463],{"class":84,"line":187},[82,464,162],{"emptyLinePlaceholder":161},[82,466,467,469,471],{"class":84,"line":194},[82,468,89],{"class":88},[82,470,93],{"class":92},[82,472,96],{"class":88},[82,474,476,478],{"class":84,"line":475},10,[82,477,102],{"class":88},[82,479,480],{"class":92},"button\n",[82,482,484,487,489,491],{"class":84,"line":483},11,[82,485,486],{"class":108},"    :class",[82,488,112],{"class":88},[82,490,115],{"class":88},[82,492,493],{"class":118},"[\n",[82,495,497],{"class":84,"line":496},12,[82,498,499],{"class":118},"      classes.root,\n",[82,501,503],{"class":84,"line":502},13,[82,504,505],{"class":118},"      classes.variants[variant],\n",[82,507,509],{"class":84,"line":508},14,[82,510,511],{"class":118},"      classes.sizes[size],\n",[82,513,515],{"class":84,"line":514},15,[82,516,517],{"class":118},"      disabled && classes.states.disabled,\n",[82,519,521,524],{"class":84,"line":520},16,[82,522,523],{"class":118},"    ]",[82,525,526],{"class":88},"\"\n",[82,528,530],{"class":84,"line":529},17,[82,531,532],{"class":88},"  >\n",[82,534,536,538,540],{"class":84,"line":535},18,[82,537,129],{"class":88},[82,539,132],{"class":92},[82,541,135],{"class":88},[82,543,545,547,549],{"class":84,"line":544},19,[82,546,141],{"class":88},[82,548,105],{"class":92},[82,550,96],{"class":88},[82,552,554,556,558],{"class":84,"line":553},20,[82,555,151],{"class":88},[82,557,93],{"class":92},[82,559,96],{"class":88},[82,561,563],{"class":84,"line":562},21,[82,564,162],{"emptyLinePlaceholder":161},[82,566,568,570,572,574,576,578,580,582],{"class":84,"line":567},22,[82,569,89],{"class":88},[82,571,170],{"class":92},[82,573,173],{"class":108},[82,575,112],{"class":88},[82,577,115],{"class":88},[82,579,180],{"class":118},[82,581,115],{"class":88},[82,583,96],{"class":88},[82,585,587],{"class":84,"line":586},23,[82,588,589],{"class":190},"root: inline-flex items-center gap-2 rounded-md text-sm\n",[82,591,593],{"class":84,"line":592},24,[82,594,595],{"class":190},"variants:\n",[82,597,599],{"class":84,"line":598},25,[82,600,601],{"class":190},"  solid: bg-sky-600 text-white hover:bg-sky-500\n",[82,603,605],{"class":84,"line":604},26,[82,606,607],{"class":190},"  outline: border border-zinc-300 hover:bg-zinc-50\n",[82,609,611],{"class":84,"line":610},27,[82,612,613],{"class":190},"sizes:\n",[82,615,617],{"class":84,"line":616},28,[82,618,619],{"class":190},"  sm: h-8 px-3\n",[82,621,623],{"class":84,"line":622},29,[82,624,625],{"class":190},"  lg: h-10 px-6\n",[82,627,629],{"class":84,"line":628},30,[82,630,631],{"class":190},"states:\n",[82,633,635],{"class":84,"line":634},31,[82,636,637],{"class":190},"  disabled: pointer-events-none opacity-50\n",[82,639,641,643,645],{"class":84,"line":640},32,[82,642,151],{"class":88},[82,644,170],{"class":92},[82,646,96],{"class":88},[63,648,649,210,651,210,654,657,658,661],{},[67,650,238],{},[67,652,653],{},"variants",[67,655,656],{},"sizes",", and ",[67,659,660],{},"states"," are arbitrary names you choose.\nName the groups after the visual parts or states of your component.",[58,663,665,666],{"id":664},"reading-classes-in-script-setup","Reading classes in ",[67,667,668],{},"\u003Cscript setup>",[63,670,671,673,674,676,677,680],{},[67,672,69],{}," is available in ",[67,675,668],{}," just like in the template. You\ncan pass it to child components or use it in ",[67,678,679],{},"computed"," properties:",[72,682,684],{"className":74,"code":683,"filename":76,"language":77,"meta":78,"style":78},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = defineProps\u003C{ fullWidth?: boolean }>()\n\nconst buttonClasses = computed(() => [\n  classes.root,\n  props.fullWidth && classes.fullWidth,\n])\n\u003C\u002Fscript>\n",[67,685,686,706,730,734,763,767,790,802,825,830],{"__ignoreMap":78},[82,687,688,690,692,694,696,698,700,702,704],{"class":84,"line":85},[82,689,89],{"class":88},[82,691,358],{"class":92},[82,693,361],{"class":108},[82,695,173],{"class":108},[82,697,112],{"class":88},[82,699,115],{"class":88},[82,701,269],{"class":118},[82,703,115],{"class":88},[82,705,96],{"class":88},[82,707,708,712,715,718,721,724,726,728],{"class":84,"line":99},[82,709,711],{"class":710},"s7zQu","import",[82,713,714],{"class":88}," {",[82,716,717],{"class":190}," computed",[82,719,720],{"class":88}," }",[82,722,723],{"class":710}," from",[82,725,392],{"class":88},[82,727,77],{"class":118},[82,729,409],{"class":88},[82,731,732],{"class":84,"line":126},[82,733,162],{"emptyLinePlaceholder":161},[82,735,736,739,742,744,747,750,753,755,758,761],{"class":84,"line":138},[82,737,738],{"class":108},"const",[82,740,741],{"class":190}," props ",[82,743,112],{"class":88},[82,745,746],{"class":378}," defineProps",[82,748,749],{"class":88},"\u003C{",[82,751,752],{"class":92}," fullWidth",[82,754,440],{"class":88},[82,756,757],{"class":443}," boolean",[82,759,760],{"class":88}," }>",[82,762,452],{"class":190},[82,764,765],{"class":84,"line":148},[82,766,162],{"emptyLinePlaceholder":161},[82,768,769,771,774,776,778,781,784,787],{"class":84,"line":158},[82,770,738],{"class":108},[82,772,773],{"class":190}," buttonClasses ",[82,775,112],{"class":88},[82,777,717],{"class":378},[82,779,780],{"class":190},"(",[82,782,783],{"class":88},"()",[82,785,786],{"class":108}," =>",[82,788,789],{"class":190}," [\n",[82,791,792,795,797,799],{"class":84,"line":165},[82,793,794],{"class":190},"  classes",[82,796,278],{"class":88},[82,798,238],{"class":190},[82,800,801],{"class":88},",\n",[82,803,804,807,809,812,815,818,820,823],{"class":84,"line":187},[82,805,806],{"class":190},"  props",[82,808,278],{"class":88},[82,810,811],{"class":190},"fullWidth ",[82,813,814],{"class":88},"&&",[82,816,817],{"class":190}," classes",[82,819,278],{"class":88},[82,821,822],{"class":190},"fullWidth",[82,824,801],{"class":88},[82,826,827],{"class":84,"line":194},[82,828,829],{"class":190},"])\n",[82,831,832,834,836],{"class":84,"line":475},[82,833,151],{"class":88},[82,835,358],{"class":92},[82,837,96],{"class":88},[58,839,841],{"id":840},"quoting","Quoting",[63,843,844,845,210,848,210,851,210,854,857,858,70],{},"Classes need no quotes, even with characters YAML treats as syntax, such\nas ",[67,846,847],{},"!",[67,849,850],{},"@",[67,852,853],{},"*",[67,855,856],{},"["," and ",[67,859,860],{},"&",[72,862,864],{"className":230,"code":863,"language":180,"meta":78,"style":78},"root:\n  - \"!bg-red-500 *:rounded-md\"\n  - @container\u002Fcard:p-4\n  - [&>svg]:size-4 w-[calc(100%-1rem)]\n  - bg-[color:var(--brand)]\u002F10\n",[67,865,866,872,884,894,920],{"__ignoreMap":78},[82,867,868,870],{"class":84,"line":85},[82,869,238],{"class":92},[82,871,241],{"class":88},[82,873,874,876,879,882],{"class":84,"line":99},[82,875,246],{"class":88},[82,877,878],{"class":88}," \"",[82,880,881],{"class":118},"!bg-red-500 *:rounded-md",[82,883,526],{"class":88},[82,885,886,888,891],{"class":84,"line":126},[82,887,246],{"class":88},[82,889,890],{"class":190}," @",[82,892,893],{"class":118},"container\u002Fcard:p-4\n",[82,895,896,898,901,903,906,909,912,914,917],{"class":84,"line":138},[82,897,246],{"class":88},[82,899,900],{"class":88}," [",[82,902,860],{"class":710},[82,904,905],{"class":443},">svg",[82,907,908],{"class":190},"]:size-4 ",[82,910,911],{"class":118},"w-",[82,913,856],{"class":88},[82,915,916],{"class":118},"calc(100%-1rem)",[82,918,919],{"class":88},"]\n",[82,921,922,925,928,930,933,936],{"class":84,"line":148},[82,923,924],{"class":190},"  - ",[82,926,927],{"class":118},"bg-",[82,929,856],{"class":88},[82,931,932],{"class":118},"color:var(--brand)",[82,934,935],{"class":88},"]",[82,937,938],{"class":118},"\u002F10\n",[63,940,941],{},"Quoted entries work too.",[943,944,945,946,948,949,952,953,956,957,959],"warning",{},"Quote an entry only if it contains a space before ",[67,947,297],{}," (",[67,950,951],{}," #","), such as\n",[67,954,955],{},"content-['hello # world']",". Otherwise, YAML treats the ",[67,958,297],{}," as the start\nof a comment.",[63,961,962,963,966],{},"Stick to standard key-value mappings and bulleted lists. Advanced YAML\nfeatures like flow lists (",[67,964,965],{},"[a, b]",") or anchors and aliases are treated as\nplain text strings.",[58,968,970],{"id":969},"errors","Errors",[63,972,973],{},"Every value must be a string, a list of strings or a group of keys.\nAnything else fails the build with an error that names the key:",[226,975,976,1004],{},[72,977,979],{"className":230,"code":978,"filename":76,"language":180,"meta":78,"style":78},"variants:\n  solid:\n  outline: border border-zinc-300 hover:bg-zinc-50\n",[67,980,981,987,994],{"__ignoreMap":78},[82,982,983,985],{"class":84,"line":85},[82,984,653],{"class":92},[82,986,241],{"class":88},[82,988,989,992],{"class":84,"line":99},[82,990,991],{"class":92},"  solid",[82,993,241],{"class":88},[82,995,996,999,1001],{"class":84,"line":126},[82,997,998],{"class":92},"  outline",[82,1000,70],{"class":88},[82,1002,1003],{"class":118}," border border-zinc-300 hover:bg-zinc-50\n",[72,1005,1011],{"className":1006,"code":1008,"filename":1009,"language":1010,"meta":78},[1007],"language-text","Expected a class string, list or group at variants.solid, got null\n","Build error","text",[67,1012,1008],{"__ignoreMap":78},[63,1014,1015,1016,1018,1019,335,1021,1023],{},"YAML syntax errors and a ",[67,1017,206],{}," other than ",[67,1020,180],{},[67,1022,213],{}," fail the build\ntoo.",[1025,1026,1027],"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 .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 .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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}",{"title":78,"searchDepth":99,"depth":99,"links":1029},[1030,1031,1032,1033,1034,1036,1037],{"id":60,"depth":99,"text":61},{"id":220,"depth":99,"text":221},{"id":290,"depth":99,"text":291},{"id":342,"depth":99,"text":343},{"id":664,"depth":99,"text":1035},"Reading classes in \u003Cscript setup>",{"id":840,"depth":99,"text":841},{"id":969,"depth":99,"text":970},"Lists, groups, comments, and the YAML a block accepts.","md",null,{},{"icon":31},{"title":1044,"description":1045},"Write Tailwind classes in a YAML block","Group Tailwind classes in a tailwind YAML block, wrap long class lists, add comments and index variants from a Vue template.","zgTiZ0PRto8SElPDB4ky1QkgsiUsO0cHH5MXVQ4fJkU",[1048,1050],{"title":16,"path":17,"stem":18,"description":1049,"icon":19,"children":-1},"Add the build plugin and the editor types to a Nuxt or Vite project.",{"title":33,"path":34,"stem":35,"description":1051,"icon":36,"children":-1},"Typed classes in the editor and in vue-tsc.",1791485569128]