[{"data":1,"prerenderedAt":1246},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":52,"-getting-started-installation-surround":1241},[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":16,"body":54,"description":1232,"extension":1233,"links":1234,"meta":1235,"navigation":1236,"path":17,"seo":1237,"stem":18,"__hash__":1240},"docs\u002F1.getting-started\u002F2.installation.md",{"type":55,"value":56,"toc":1224},"minimark",[57,73,78,111,115,675,679,694,812,820,828,1035,1051,1055,1061,1175,1181,1220],[58,59,60,61,65,66,69,70,72],"p",{},"A project needs two pieces: the build plugin, which turns each block into\n",[62,63,64],"code",{},"classes",", and the editor plugin, which tells the editor and ",[62,67,68],{},"vue-tsc","\nwhat ",[62,71,64],{}," holds. In Nuxt, the module sets up both.",[74,75,77],"h2",{"id":76},"requirements","Requirements",[79,80,81,85,88,91,105],"ul",{},[82,83,84],"li",{},"Vue 3.3 or newer",[82,86,87],{},"Nuxt 3.10 or newer, or Vite 5 or newer",[82,89,90],{},"Tailwind CSS v3 or v4",[82,92,93,101,102,104],{},[94,95,100],"a",{"href":96,"rel":97,"target":99},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Vue.volar",[98],"nofollow","_blank","Vue - Official"," VS Code extension and ",[62,103,68],{}," 3.2 or newer, for editor types",[82,106,107,108],{},"ESLint 9 or 10 with flat config, for ",[94,109,110],{"href":39},"linting",[74,112,114],{"id":113},"install","Install",[116,117,118,303],"tabs",{},[119,120,123],"tabs-item",{"icon":121,"label":122},"i-simple-icons-nuxt","Nuxt",[124,125,126,131,211,215,280,287],"steps",{},[127,128,130],"h3",{"id":129},"add-the-package","Add the package",[132,133,134,162,179,195],"code-group",{},[135,136,142],"pre",{"className":137,"code":138,"filename":139,"language":140,"meta":141,"style":141},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D vue-tailwind-block\n","pnpm","bash","",[62,143,144],{"__ignoreMap":141},[145,146,149,152,156,159],"span",{"class":147,"line":148},"line",1,[145,150,139],{"class":151},"sBMFI",[145,153,155],{"class":154},"sfazB"," add",[145,157,158],{"class":154}," -D",[145,160,161],{"class":154}," vue-tailwind-block\n",[135,163,166],{"className":137,"code":164,"filename":165,"language":140,"meta":141,"style":141},"npm install -D vue-tailwind-block\n","npm",[62,167,168],{"__ignoreMap":141},[145,169,170,172,175,177],{"class":147,"line":148},[145,171,165],{"class":151},[145,173,174],{"class":154}," install",[145,176,158],{"class":154},[145,178,161],{"class":154},[135,180,183],{"className":137,"code":181,"filename":182,"language":140,"meta":141,"style":141},"yarn add -D vue-tailwind-block\n","yarn",[62,184,185],{"__ignoreMap":141},[145,186,187,189,191,193],{"class":147,"line":148},[145,188,182],{"class":151},[145,190,155],{"class":154},[145,192,158],{"class":154},[145,194,161],{"class":154},[135,196,199],{"className":137,"code":197,"filename":198,"language":140,"meta":141,"style":141},"bun add -D vue-tailwind-block\n","bun",[62,200,201],{"__ignoreMap":141},[145,202,203,205,207,209],{"class":147,"line":148},[145,204,198],{"class":151},[145,206,155],{"class":154},[145,208,158],{"class":154},[145,210,161],{"class":154},[127,212,214],{"id":213},"register-the-module","Register the module",[135,216,221],{"className":217,"code":218,"filename":219,"language":220,"meta":141,"style":141},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['vue-tailwind-block\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[62,222,223,244,271],{"__ignoreMap":141},[145,224,225,229,232,236,240],{"class":147,"line":148},[145,226,228],{"class":227},"s7zQu","export",[145,230,231],{"class":227}," default",[145,233,235],{"class":234},"s2Zo4"," defineNuxtConfig",[145,237,239],{"class":238},"sTEyZ","(",[145,241,243],{"class":242},"sMK4o","{\n",[145,245,247,251,254,257,260,263,265,268],{"class":147,"line":246},2,[145,248,250],{"class":249},"swJcz","  modules",[145,252,253],{"class":242},":",[145,255,256],{"class":238}," [",[145,258,259],{"class":242},"'",[145,261,262],{"class":154},"vue-tailwind-block\u002Fnuxt",[145,264,259],{"class":242},[145,266,267],{"class":238},"]",[145,269,270],{"class":242},",\n",[145,272,274,277],{"class":147,"line":273},3,[145,275,276],{"class":242},"}",[145,278,279],{"class":238},")\n",[58,281,282,283,286],{},"The module automatically configures the Vite build plugin and injects the\neditor types into the ",[62,284,285],{},"tsconfig"," Nuxt generates.",[58,288,289,290,293,294,297,298,302],{},"Run ",[62,291,292],{},"npx nuxi prepare"," (or start the dev server), then reload your editor\nwindow (",[62,295,296],{},"Cmd\u002FCtrl + Shift + P"," → ",[299,300,301],"strong",{},"Developer: Reload Window",") so the\nlanguage server loads the plugin.",[119,304,307],{"icon":305,"label":306},"i-simple-icons-vite","Vite",[124,308,309,312,370,374,392,542,563,567,589,663],{},[127,310,130],{"id":311},"add-the-package-1",[132,313,314,328,342,356],{},[135,315,316],{"className":137,"code":138,"filename":139,"language":140,"meta":141,"style":141},[62,317,318],{"__ignoreMap":141},[145,319,320,322,324,326],{"class":147,"line":148},[145,321,139],{"class":151},[145,323,155],{"class":154},[145,325,158],{"class":154},[145,327,161],{"class":154},[135,329,330],{"className":137,"code":164,"filename":165,"language":140,"meta":141,"style":141},[62,331,332],{"__ignoreMap":141},[145,333,334,336,338,340],{"class":147,"line":148},[145,335,165],{"class":151},[145,337,174],{"class":154},[145,339,158],{"class":154},[145,341,161],{"class":154},[135,343,344],{"className":137,"code":181,"filename":182,"language":140,"meta":141,"style":141},[62,345,346],{"__ignoreMap":141},[145,347,348,350,352,354],{"class":147,"line":148},[145,349,182],{"class":151},[145,351,155],{"class":154},[145,353,158],{"class":154},[145,355,161],{"class":154},[135,357,358],{"className":137,"code":197,"filename":198,"language":140,"meta":141,"style":141},[62,359,360],{"__ignoreMap":141},[145,361,362,364,366,368],{"class":147,"line":148},[145,363,198],{"class":151},[145,365,155],{"class":154},[145,367,158],{"class":154},[145,369,161],{"class":154},[127,371,373],{"id":372},"register-the-plugin","Register the plugin",[58,375,376,377,380,381,380,384,387,388,391],{},"Register ",[62,378,379],{},"tailwindBlock()"," ",[299,382,383],{},"before",[62,385,386],{},"vue()",". Vite runs plugins in order;\nthe Vue plugin does not recognize ",[62,389,390],{},"\u003Ctailwind>"," blocks and must receive the\nfile after it has been transformed.",[135,393,396],{"className":217,"code":394,"filename":395,"language":220,"meta":141,"style":141},"import tailwindcss from '@tailwindcss\u002Fvite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport { defineConfig } from 'vite'\nimport tailwindBlock from 'vue-tailwind-block\u002Fvite'\n\nexport default defineConfig({\n  \u002F\u002F tailwindBlock() must come before vue()\n  plugins: [tailwindBlock(), vue(), tailwindcss()],\n})\n","vite.config.ts",[62,397,398,418,434,457,474,481,494,501,535],{"__ignoreMap":141},[145,399,400,403,406,409,412,415],{"class":147,"line":148},[145,401,402],{"class":227},"import",[145,404,405],{"class":238}," tailwindcss ",[145,407,408],{"class":227},"from",[145,410,411],{"class":242}," '",[145,413,414],{"class":154},"@tailwindcss\u002Fvite",[145,416,417],{"class":242},"'\n",[145,419,420,422,425,427,429,432],{"class":147,"line":246},[145,421,402],{"class":227},[145,423,424],{"class":238}," vue ",[145,426,408],{"class":227},[145,428,411],{"class":242},[145,430,431],{"class":154},"@vitejs\u002Fplugin-vue",[145,433,417],{"class":242},[145,435,436,438,441,444,447,450,452,455],{"class":147,"line":273},[145,437,402],{"class":227},[145,439,440],{"class":242}," {",[145,442,443],{"class":238}," defineConfig",[145,445,446],{"class":242}," }",[145,448,449],{"class":227}," from",[145,451,411],{"class":242},[145,453,454],{"class":154},"vite",[145,456,417],{"class":242},[145,458,460,462,465,467,469,472],{"class":147,"line":459},4,[145,461,402],{"class":227},[145,463,464],{"class":238}," tailwindBlock ",[145,466,408],{"class":227},[145,468,411],{"class":242},[145,470,471],{"class":154},"vue-tailwind-block\u002Fvite",[145,473,417],{"class":242},[145,475,477],{"class":147,"line":476},5,[145,478,480],{"emptyLinePlaceholder":479},true,"\n",[145,482,484,486,488,490,492],{"class":147,"line":483},6,[145,485,228],{"class":227},[145,487,231],{"class":227},[145,489,443],{"class":234},[145,491,239],{"class":238},[145,493,243],{"class":242},[145,495,497],{"class":147,"line":496},7,[145,498,500],{"class":499},"sHwdD","  \u002F\u002F tailwindBlock() must come before vue()\n",[145,502,504,507,509,511,514,517,520,523,525,527,530,533],{"class":147,"line":503},8,[145,505,506],{"class":249},"  plugins",[145,508,253],{"class":242},[145,510,256],{"class":238},[145,512,513],{"class":234},"tailwindBlock",[145,515,516],{"class":238},"()",[145,518,519],{"class":242},",",[145,521,522],{"class":234}," vue",[145,524,516],{"class":238},[145,526,519],{"class":242},[145,528,529],{"class":234}," tailwindcss",[145,531,532],{"class":238},"()]",[145,534,270],{"class":242},[145,536,538,540],{"class":147,"line":537},9,[145,539,276],{"class":242},[145,541,279],{"class":238},[543,544,545,547,548,551,552,555,556,558,559,562],"note",{},[62,546,414],{}," is used with ",[299,549,550],{},"Tailwind CSS v4",". If your project uses\n",[299,553,554],{},"Tailwind CSS v3",", omit ",[62,557,414],{}," and configure PostCSS via\n",[62,560,561],{},"postcss.config.js"," as usual.",[127,564,566],{"id":565},"add-the-editor-types","Add the editor types",[58,568,569,570,572,573,576,577,580,581,584,585,588],{},"Add the editor plugin to the ",[62,571,285],{}," that includes your ",[62,574,575],{},".vue"," files\n(",[62,578,579],{},"tsconfig.app.json"," in a ",[62,582,583],{},"create-vue"," project, or ",[62,586,587],{},"tsconfig.json","):",[135,590,594],{"className":591,"code":592,"filename":579,"language":593,"meta":141,"style":141},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"vueCompilerOptions\": {\n    \"plugins\": [{ \"name\": \"vue-tailwind-block\u002Fvolar\" }]\n  }\n}\n","json",[62,595,596,600,617,653,658],{"__ignoreMap":141},[145,597,598],{"class":147,"line":148},[145,599,243],{"class":242},[145,601,602,605,609,612,614],{"class":147,"line":246},[145,603,604],{"class":242},"  \"",[145,606,608],{"class":607},"spNyl","vueCompilerOptions",[145,610,611],{"class":242},"\"",[145,613,253],{"class":242},[145,615,616],{"class":242}," {\n",[145,618,619,622,625,627,629,632,635,639,641,643,645,648,650],{"class":147,"line":273},[145,620,621],{"class":242},"    \"",[145,623,624],{"class":151},"plugins",[145,626,611],{"class":242},[145,628,253],{"class":242},[145,630,631],{"class":242}," [{",[145,633,634],{"class":242}," \"",[145,636,638],{"class":637},"sbssI","name",[145,640,611],{"class":242},[145,642,253],{"class":242},[145,644,634],{"class":242},[145,646,647],{"class":154},"vue-tailwind-block\u002Fvolar",[145,649,611],{"class":242},[145,651,652],{"class":242}," }]\n",[145,654,655],{"class":147,"line":459},[145,656,657],{"class":242},"  }\n",[145,659,660],{"class":147,"line":476},[145,661,662],{"class":242},"}\n",[58,664,665,666,297,668,671,672,674],{},"Restart the language server (",[62,667,296],{},[299,669,670],{},"Vue: Restart Vue Language Server","\nor ",[299,673,301],{},").",[74,676,678],{"id":677},"tailwind-css-intellisense","Tailwind CSS IntelliSense",[58,680,681,682,686,687,690,691,693],{},"The ",[94,683,678],{"href":684,"rel":685,"target":99},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=bradlc.vscode-tailwindcss",[98],"\nextension only inspects standard class attributes by default. Add this\nsetting to ",[62,688,689],{},".vscode\u002Fsettings.json"," so it scans ",[62,692,390],{}," blocks for\nautocomplete, color swatches, and hovers:",[135,695,697],{"className":591,"code":696,"filename":689,"language":593,"meta":141,"style":141},"{\n  \"tailwindCSS.experimental.classRegex\": [\n    [\"\u003Ctailwind[^>]*>([\\\\s\\\\S]*?)\u003C\u002Ftailwind>\", \"(?:^|\\\\n)[ \\\\t]*(?:-[ \\\\t]+|[^\\\\s:#\\\"'][^:\\\\n]*:[ \\\\t]+)[\\\"']?([^\\\\n#\\\"']+)\"]\n  ]\n}\n",[62,698,699,703,717,803,808],{"__ignoreMap":141},[145,700,701],{"class":147,"line":148},[145,702,243],{"class":242},[145,704,705,707,710,712,714],{"class":147,"line":246},[145,706,604],{"class":242},[145,708,709],{"class":607},"tailwindCSS.experimental.classRegex",[145,711,611],{"class":242},[145,713,253],{"class":242},[145,715,716],{"class":242}," [\n",[145,718,719,722,724,727,730,733,735,738,740,742,744,747,749,752,754,757,759,762,764,767,770,773,775,778,780,783,785,788,790,793,795,798,800],{"class":147,"line":273},[145,720,721],{"class":242},"    [",[145,723,611],{"class":242},[145,725,726],{"class":154},"\u003Ctailwind[^>]*>([",[145,728,729],{"class":238},"\\\\",[145,731,732],{"class":154},"s",[145,734,729],{"class":238},[145,736,737],{"class":154},"S]*?)\u003C\u002Ftailwind>",[145,739,611],{"class":242},[145,741,519],{"class":242},[145,743,634],{"class":242},[145,745,746],{"class":154},"(?:^|",[145,748,729],{"class":238},[145,750,751],{"class":154},"n)[ ",[145,753,729],{"class":238},[145,755,756],{"class":154},"t]*(?:-[ ",[145,758,729],{"class":238},[145,760,761],{"class":154},"t]+|[^",[145,763,729],{"class":238},[145,765,766],{"class":154},"s:#",[145,768,769],{"class":238},"\\\"",[145,771,772],{"class":154},"'][^:",[145,774,729],{"class":238},[145,776,777],{"class":154},"n]*:[ ",[145,779,729],{"class":238},[145,781,782],{"class":154},"t]+)[",[145,784,769],{"class":238},[145,786,787],{"class":154},"']?([^",[145,789,729],{"class":238},[145,791,792],{"class":154},"n#",[145,794,769],{"class":238},[145,796,797],{"class":154},"']+)",[145,799,611],{"class":242},[145,801,802],{"class":242},"]\n",[145,804,805],{"class":147,"line":459},[145,806,807],{"class":242},"  ]\n",[145,809,810],{"class":147,"line":476},[145,811,662],{"class":242},[74,813,815,816,819],{"id":814},"renaming-the-variable-binding","Renaming the variable (",[62,817,818],{},"binding",")",[58,821,822,823,825,826,253],{},"By default, the block compiles to a variable called ",[62,824,64],{},". If a prop or\nanother identifier already uses that name, customize it with ",[62,827,818],{},[132,829,830,901,962],{},[135,831,833],{"className":217,"code":832,"filename":219,"language":220,"meta":141,"style":141},"export default defineNuxtConfig({\n  modules: ['vue-tailwind-block\u002Fnuxt'],\n  tailwindBlock: {\n    binding: 'styles',\n  },\n})\n",[62,834,835,847,865,874,890,895],{"__ignoreMap":141},[145,836,837,839,841,843,845],{"class":147,"line":148},[145,838,228],{"class":227},[145,840,231],{"class":227},[145,842,235],{"class":234},[145,844,239],{"class":238},[145,846,243],{"class":242},[145,848,849,851,853,855,857,859,861,863],{"class":147,"line":246},[145,850,250],{"class":249},[145,852,253],{"class":242},[145,854,256],{"class":238},[145,856,259],{"class":242},[145,858,262],{"class":154},[145,860,259],{"class":242},[145,862,267],{"class":238},[145,864,270],{"class":242},[145,866,867,870,872],{"class":147,"line":273},[145,868,869],{"class":249},"  tailwindBlock",[145,871,253],{"class":242},[145,873,616],{"class":242},[145,875,876,879,881,883,886,888],{"class":147,"line":459},[145,877,878],{"class":249},"    binding",[145,880,253],{"class":242},[145,882,411],{"class":242},[145,884,885],{"class":154},"styles",[145,887,259],{"class":242},[145,889,270],{"class":242},[145,891,892],{"class":147,"line":476},[145,893,894],{"class":242},"  },\n",[145,896,897,899],{"class":147,"line":483},[145,898,276],{"class":242},[145,900,279],{"class":238},[135,902,904],{"className":217,"code":903,"filename":395,"language":220,"meta":141,"style":141},"export default defineConfig({\n  plugins: [tailwindBlock({ binding: 'styles' }), vue()],\n})\n",[62,905,906,918,956],{"__ignoreMap":141},[145,907,908,910,912,914,916],{"class":147,"line":148},[145,909,228],{"class":227},[145,911,231],{"class":227},[145,913,443],{"class":234},[145,915,239],{"class":238},[145,917,243],{"class":242},[145,919,920,922,924,926,928,930,933,936,938,940,942,944,946,948,950,952,954],{"class":147,"line":246},[145,921,506],{"class":249},[145,923,253],{"class":242},[145,925,256],{"class":238},[145,927,513],{"class":234},[145,929,239],{"class":238},[145,931,932],{"class":242},"{",[145,934,935],{"class":249}," binding",[145,937,253],{"class":242},[145,939,411],{"class":242},[145,941,885],{"class":154},[145,943,259],{"class":242},[145,945,446],{"class":242},[145,947,819],{"class":238},[145,949,519],{"class":242},[145,951,522],{"class":234},[145,953,532],{"class":238},[145,955,270],{"class":242},[145,957,958,960],{"class":147,"line":273},[145,959,276],{"class":242},[145,961,279],{"class":238},[135,963,965],{"className":591,"code":964,"filename":579,"language":593,"meta":141,"style":141},"{\n  \"vueCompilerOptions\": {\n    \"plugins\": [{ \"name\": \"vue-tailwind-block\u002Fvolar\", \"binding\": \"styles\" }]\n  }\n}\n",[62,966,967,971,983,1027,1031],{"__ignoreMap":141},[145,968,969],{"class":147,"line":148},[145,970,243],{"class":242},[145,972,973,975,977,979,981],{"class":147,"line":246},[145,974,604],{"class":242},[145,976,608],{"class":607},[145,978,611],{"class":242},[145,980,253],{"class":242},[145,982,616],{"class":242},[145,984,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025],{"class":147,"line":273},[145,986,621],{"class":242},[145,988,624],{"class":151},[145,990,611],{"class":242},[145,992,253],{"class":242},[145,994,631],{"class":242},[145,996,634],{"class":242},[145,998,638],{"class":637},[145,1000,611],{"class":242},[145,1002,253],{"class":242},[145,1004,634],{"class":242},[145,1006,647],{"class":154},[145,1008,611],{"class":242},[145,1010,519],{"class":242},[145,1012,634],{"class":242},[145,1014,818],{"class":637},[145,1016,611],{"class":242},[145,1018,253],{"class":242},[145,1020,634],{"class":242},[145,1022,885],{"class":154},[145,1024,611],{"class":242},[145,1026,652],{"class":242},[145,1028,1029],{"class":147,"line":459},[145,1030,657],{"class":242},[145,1032,1033],{"class":147,"line":476},[145,1034,662],{"class":242},[1036,1037,1038,1039,1041,1042,1044,1045,1047,1048,1050],"warning",{},"In Vite projects, ensure the same ",[62,1040,818],{}," is configured in both\n",[62,1043,395],{}," and your ",[62,1046,285],{},". In Nuxt, setting it in ",[62,1049,219],{},"\nconfigures both automatically.",[74,1052,1054],{"id":1053},"verify","Verify",[58,1056,1057,1058,1060],{},"Add a block to any component and use ",[62,1059,64],{}," in its template:",[135,1062,1067],{"className":1063,"code":1064,"filename":1065,"language":1066,"meta":141,"style":141},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv :class=\"classes.root\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Ctailwind lang=\"yaml\">\nroot: rounded-lg border p-6 shadow-sm\n\u003C\u002Ftailwind>\n","Card.vue","vue",[62,1068,1069,1080,1103,1114,1123,1132,1136,1157,1167],{"__ignoreMap":141},[145,1070,1071,1074,1077],{"class":147,"line":148},[145,1072,1073],{"class":242},"\u003C",[145,1075,1076],{"class":249},"template",[145,1078,1079],{"class":242},">\n",[145,1081,1082,1085,1088,1091,1094,1096,1099,1101],{"class":147,"line":246},[145,1083,1084],{"class":242},"  \u003C",[145,1086,1087],{"class":249},"div",[145,1089,1090],{"class":607}," :class",[145,1092,1093],{"class":242},"=",[145,1095,611],{"class":242},[145,1097,1098],{"class":154},"classes.root",[145,1100,611],{"class":242},[145,1102,1079],{"class":242},[145,1104,1105,1108,1111],{"class":147,"line":273},[145,1106,1107],{"class":242},"    \u003C",[145,1109,1110],{"class":249},"slot",[145,1112,1113],{"class":242}," \u002F>\n",[145,1115,1116,1119,1121],{"class":147,"line":459},[145,1117,1118],{"class":242},"  \u003C\u002F",[145,1120,1087],{"class":249},[145,1122,1079],{"class":242},[145,1124,1125,1128,1130],{"class":147,"line":476},[145,1126,1127],{"class":242},"\u003C\u002F",[145,1129,1076],{"class":249},[145,1131,1079],{"class":242},[145,1133,1134],{"class":147,"line":483},[145,1135,480],{"emptyLinePlaceholder":479},[145,1137,1138,1140,1143,1146,1148,1150,1153,1155],{"class":147,"line":496},[145,1139,1073],{"class":242},[145,1141,1142],{"class":249},"tailwind",[145,1144,1145],{"class":607}," lang",[145,1147,1093],{"class":242},[145,1149,611],{"class":242},[145,1151,1152],{"class":154},"yaml",[145,1154,611],{"class":242},[145,1156,1079],{"class":242},[145,1158,1159,1162,1164],{"class":147,"line":503},[145,1160,1161],{"class":249},"root",[145,1163,253],{"class":242},[145,1165,1166],{"class":154}," rounded-lg border p-6 shadow-sm\n",[145,1168,1169,1171,1173],{"class":147,"line":537},[145,1170,1127],{"class":242},[145,1172,1142],{"class":249},[145,1174,1079],{"class":242},[58,1176,1177,1178,1180],{},"If the card renders with styling, the build plugin is active. If your editor\nunderlines ",[62,1179,64],{}," as undefined:",[1182,1183,1184,1197,1210,1216],"ol",{},[82,1185,1186,1187,1190,1191,1193,1194,674],{},"Verify the component uses ",[62,1188,1189],{},"\u003Cscript setup lang=\"ts\">"," (in plain JavaScript, ",[62,1192,64],{}," is typed as ",[62,1195,1196],{},"any",[82,1198,1199,1200,1202,1203,1205,1206,1209],{},"Verify that your ",[62,1201,285],{}," includes the ",[62,1204,575],{}," file and contains the ",[62,1207,1208],{},"vueCompilerOptions.plugins"," entry.",[82,1211,1212,1213,1215],{},"In Nuxt, run ",[62,1214,292],{},".",[82,1217,665,1218,674],{},[299,1219,670],{},[1221,1222,1223],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":141,"searchDepth":246,"depth":246,"links":1225},[1226,1227,1228,1229,1231],{"id":76,"depth":246,"text":77},{"id":113,"depth":246,"text":114},{"id":677,"depth":246,"text":678},{"id":814,"depth":246,"text":1230},"Renaming the variable (binding)",{"id":1053,"depth":246,"text":1054},"Add the build plugin and the editor types to a Nuxt or Vite project.","md",null,{},{"icon":19},{"title":1238,"description":1239},"Install vue-tailwind-block in Nuxt or Vite","Install vue-tailwind-block, register the Nuxt module or the Vite plugin, and turn on editor types for the classes object.","FoL0sCyFBo-vOzEDldZXCCwj9SSHf1nXTmoA6HSLPoI",[1242,1244],{"title":11,"path":12,"stem":13,"description":1243,"icon":14,"children":-1},"A Tailwind block for Vue single file components.",{"title":28,"path":29,"stem":30,"description":1245,"icon":31,"children":-1},"Lists, groups, comments, and the YAML a block accepts.",1791485568741]