[{"data":1,"prerenderedAt":1187},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fcomponents\u002Ftailwind":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":135,"body":318,"description":1181,"extension":1182,"meta":1183,"navigation":14,"order":136,"path":134,"section":31,"seo":1184,"sidebar":14,"stem":1185,"toc":14,"__hash__":1186},"docs\u002Fdocs\u002Fcomponents\u002Ftailwind.md",{"type":319,"value":320,"toc":1171},"minimark",[321,325,329,334,342,546,557,561,572,735,741,745,762,983,1000,1021,1025,1040,1143,1147,1151,1158,1160,1167],[322,323,135],"h1",{"id":324},"tailwind",[326,327,328],"p",{},"Explicitly use Tailwind CSS in your email templates.",[330,331,333],"h2",{"id":332},"usage","Usage",[326,335,336,337,341],{},"Wrap any region of your template with ",[338,339,340],"code",{},"\u003CTailwind>",".",[343,344,350],"pre",{"className":345,"code":346,"filename":347,"language":348,"meta":349,"style":349},"language-vue shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CTailwind>\n      \u003CBody class=\"font-sans bg-slate-100\">\n        \u003CContainer class=\"max-w-xl\">\n          \u003Ch1 class=\"m-0 mb-6 text-lg\">Hello, welcome aboard!\u003C\u002Fh1>\n          \u003CButton href=\"https:\u002F\u002Fexample.com\">Get Started\u003C\u002FButton>\n        \u003C\u002FContainer>\n      \u003C\u002FBody>\n    \u003C\u002FTailwind>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fexample.vue","vue","",[338,351,352,367,376,389,397,422,442,473,502,511,520,529,538],{"__ignoreMap":349},[353,354,356,360,364],"span",{"class":355,"line":18},"line",[353,357,359],{"class":358},"sGGKt","\u003C",[353,361,363],{"class":362},"sb4Pa","template",[353,365,366],{"class":358},">\n",[353,368,369,372,374],{"class":355,"line":13},[353,370,371],{"class":358},"  \u003C",[353,373,69],{"class":362},[353,375,366],{"class":358},[353,377,378,381,383,387],{"class":355,"line":32},[353,379,380],{"class":358},"    \u003C",[353,382,59],{"class":362},[353,384,386],{"class":385},"sLaUg"," \u002F",[353,388,366],{"class":358},[353,390,391,393,395],{"class":355,"line":27},[353,392,380],{"class":358},[353,394,135],{"class":362},[353,396,366],{"class":358},[353,398,399,402,404,408,411,414,418,420],{"class":355,"line":52},[353,400,401],{"class":358},"      \u003C",[353,403,30],{"class":362},[353,405,407],{"class":406},"sZNF3"," class",[353,409,410],{"class":358},"=",[353,412,413],{"class":358},"\"",[353,415,417],{"class":416},"sXiT_","font-sans bg-slate-100",[353,419,413],{"class":358},[353,421,366],{"class":358},[353,423,424,427,429,431,433,435,438,440],{"class":355,"line":128},[353,425,426],{"class":358},"        \u003C",[353,428,51],{"class":362},[353,430,407],{"class":406},[353,432,410],{"class":358},[353,434,413],{"class":358},[353,436,437],{"class":416},"max-w-xl",[353,439,413],{"class":358},[353,441,366],{"class":358},[353,443,444,447,449,451,453,455,458,460,463,466,469,471],{"class":355,"line":124},[353,445,446],{"class":358},"          \u003C",[353,448,322],{"class":362},[353,450,407],{"class":406},[353,452,410],{"class":358},[353,454,413],{"class":358},[353,456,457],{"class":416},"m-0 mb-6 text-lg",[353,459,413],{"class":358},[353,461,462],{"class":358},">",[353,464,465],{"class":385},"Hello, welcome aboard!",[353,467,468],{"class":358},"\u003C\u002F",[353,470,322],{"class":362},[353,472,366],{"class":358},[353,474,475,477,479,482,484,486,489,491,493,496,498,500],{"class":355,"line":48},[353,476,446],{"class":358},[353,478,35],{"class":362},[353,480,481],{"class":406}," href",[353,483,410],{"class":358},[353,485,413],{"class":358},[353,487,488],{"class":416},"https:\u002F\u002Fexample.com",[353,490,413],{"class":358},[353,492,462],{"class":358},[353,494,495],{"class":385},"Get Started",[353,497,468],{"class":358},[353,499,35],{"class":362},[353,501,366],{"class":358},[353,503,504,507,509],{"class":355,"line":23},[353,505,506],{"class":358},"        \u003C\u002F",[353,508,51],{"class":362},[353,510,366],{"class":358},[353,512,513,516,518],{"class":355,"line":140},[353,514,515],{"class":358},"      \u003C\u002F",[353,517,30],{"class":362},[353,519,366],{"class":358},[353,521,522,525,527],{"class":355,"line":56},[353,523,524],{"class":358},"    \u003C\u002F",[353,526,135],{"class":362},[353,528,366],{"class":358},[353,530,531,534,536],{"class":355,"line":80},[353,532,533],{"class":358},"  \u003C\u002F",[353,535,69],{"class":362},[353,537,366],{"class":358},[353,539,540,542,544],{"class":355,"line":36},[353,541,468],{"class":358},[353,543,363],{"class":362},[353,545,366],{"class":358},[547,548,550],"callout",{"type":549},"info",[326,551,552,553,556],{},"A ",[338,554,555],{},"\u003CHead \u002F>"," component must be present in the template. If it's missing, you'll get an error.",[330,558,560],{"id":559},"custom-config","Custom config",[326,562,563,564,567,568,571],{},"Use the ",[338,565,566],{},"#config"," slot to pass raw CSS that replaces the default ",[338,569,570],{},"@maizzle\u002Ftailwindcss"," import. This is the entry point the Tailwind compiler sees, so it's where you customize tokens, register variants, or import additional layers:",[343,573,575],{"className":345,"code":574,"filename":347,"language":348,"meta":349,"style":349},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CTailwind>\n      \u003Ctemplate #config>\n        @import \"@maizzle\u002Ftailwindcss\";\n\n        @theme {\n          --color-brand: #6366f1;\n          --font-display: \"Inter\", sans-serif;\n        }\n      \u003C\u002Ftemplate>\n\n      \u003CBody>\n        \u003Ch1 class=\"font-display text-brand\">Hello\u003C\u002Fh1>\n      \u003C\u002FBody>\n    \u003C\u002FTailwind>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[338,576,577,585,593,603,611,625,630,635,640,645,650,655,663,667,675,703,711,719,727],{"__ignoreMap":349},[353,578,579,581,583],{"class":355,"line":18},[353,580,359],{"class":358},[353,582,363],{"class":362},[353,584,366],{"class":358},[353,586,587,589,591],{"class":355,"line":13},[353,588,371],{"class":358},[353,590,69],{"class":362},[353,592,366],{"class":358},[353,594,595,597,599,601],{"class":355,"line":32},[353,596,380],{"class":358},[353,598,59],{"class":362},[353,600,386],{"class":385},[353,602,366],{"class":358},[353,604,605,607,609],{"class":355,"line":27},[353,606,380],{"class":358},[353,608,135],{"class":362},[353,610,366],{"class":358},[353,612,613,615,617,620,623],{"class":355,"line":52},[353,614,401],{"class":358},[353,616,363],{"class":362},[353,618,619],{"class":358}," #",[353,621,622],{"class":406},"config",[353,624,366],{"class":358},[353,626,627],{"class":355,"line":128},[353,628,629],{"class":385},"        @import \"@maizzle\u002Ftailwindcss\";\n",[353,631,632],{"class":355,"line":124},[353,633,634],{"emptyLinePlaceholder":14},"\n",[353,636,637],{"class":355,"line":48},[353,638,639],{"class":385},"        @theme {\n",[353,641,642],{"class":355,"line":23},[353,643,644],{"class":385},"          --color-brand: #6366f1;\n",[353,646,647],{"class":355,"line":140},[353,648,649],{"class":385},"          --font-display: \"Inter\", sans-serif;\n",[353,651,652],{"class":355,"line":56},[353,653,654],{"class":385},"        }\n",[353,656,657,659,661],{"class":355,"line":80},[353,658,515],{"class":358},[353,660,363],{"class":362},[353,662,366],{"class":358},[353,664,665],{"class":355,"line":36},[353,666,634],{"emptyLinePlaceholder":14},[353,668,669,671,673],{"class":355,"line":73},[353,670,401],{"class":358},[353,672,30],{"class":362},[353,674,366],{"class":358},[353,676,677,679,681,683,685,687,690,692,694,697,699,701],{"class":355,"line":132},[353,678,426],{"class":358},[353,680,322],{"class":362},[353,682,407],{"class":406},[353,684,410],{"class":358},[353,686,413],{"class":358},[353,688,689],{"class":416},"font-display text-brand",[353,691,413],{"class":358},[353,693,462],{"class":358},[353,695,696],{"class":385},"Hello",[353,698,468],{"class":358},[353,700,322],{"class":362},[353,702,366],{"class":358},[353,704,705,707,709],{"class":355,"line":66},[353,706,515],{"class":358},[353,708,30],{"class":362},[353,710,366],{"class":358},[353,712,713,715,717],{"class":355,"line":112},[353,714,524],{"class":358},[353,716,135],{"class":362},[353,718,366],{"class":358},[353,720,721,723,725],{"class":355,"line":40},[353,722,533],{"class":358},[353,724,69],{"class":362},[353,726,366],{"class":358},[353,728,729,731,733],{"class":355,"line":44},[353,730,468],{"class":358},[353,732,363],{"class":362},[353,734,366],{"class":358},[326,736,737,738,740],{},"The ",[338,739,566],{}," slot is read once at setup time and never rendered into the document — it's only used as the CSS input to the compiler.",[330,742,744],{"id":743},"multiple-blocks","Multiple blocks",[326,746,747,748,750,751,754,755,757,758,761],{},"Use a single ",[338,749,340],{}," block per template. Multiple sibling blocks compile, but they share the same Tailwind class names — ",[338,752,753],{},".text-brand"," from block A and ",[338,756,753],{}," from block B both end up in ",[338,759,760],{},"\u003Chead>"," targeting the same selector. After CSS inlining, every matching element receives every matching rule and the cascade resolves to whichever block appears last, so all elements end up styled by the final block:",[343,763,765],{"className":345,"code":764,"filename":347,"language":348,"meta":349,"style":349},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003Ctemplate #config>\n          @import \"@maizzle\u002Ftailwindcss\";\n          @theme { --color-brand: #6366f1; }\n        \u003C\u002Ftemplate>\n\n        \u003CContainer class=\"text-brand\">Block A\u003C\u002FContainer>\n      \u003C\u002FTailwind>\n\n      \u003CTailwind>\n        \u003Ctemplate #config>\n          @import \"@maizzle\u002Ftailwindcss\";\n          @theme { --color-brand: #ef4444; }\n        \u003C\u002Ftemplate>\n\n        \u003CContainer class=\"text-brand\">Block B\u003C\u002FContainer>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[338,766,767,775,783,793,801,809,821,826,831,839,843,871,879,883,891,903,907,912,920,924,951,959,967,975],{"__ignoreMap":349},[353,768,769,771,773],{"class":355,"line":18},[353,770,359],{"class":358},[353,772,363],{"class":362},[353,774,366],{"class":358},[353,776,777,779,781],{"class":355,"line":13},[353,778,371],{"class":358},[353,780,69],{"class":362},[353,782,366],{"class":358},[353,784,785,787,789,791],{"class":355,"line":32},[353,786,380],{"class":358},[353,788,59],{"class":362},[353,790,386],{"class":385},[353,792,366],{"class":358},[353,794,795,797,799],{"class":355,"line":27},[353,796,380],{"class":358},[353,798,30],{"class":362},[353,800,366],{"class":358},[353,802,803,805,807],{"class":355,"line":52},[353,804,401],{"class":358},[353,806,135],{"class":362},[353,808,366],{"class":358},[353,810,811,813,815,817,819],{"class":355,"line":128},[353,812,426],{"class":358},[353,814,363],{"class":362},[353,816,619],{"class":358},[353,818,622],{"class":406},[353,820,366],{"class":358},[353,822,823],{"class":355,"line":124},[353,824,825],{"class":385},"          @import \"@maizzle\u002Ftailwindcss\";\n",[353,827,828],{"class":355,"line":48},[353,829,830],{"class":385},"          @theme { --color-brand: #6366f1; }\n",[353,832,833,835,837],{"class":355,"line":23},[353,834,506],{"class":358},[353,836,363],{"class":362},[353,838,366],{"class":358},[353,840,841],{"class":355,"line":140},[353,842,634],{"emptyLinePlaceholder":14},[353,844,845,847,849,851,853,855,858,860,862,865,867,869],{"class":355,"line":56},[353,846,426],{"class":358},[353,848,51],{"class":362},[353,850,407],{"class":406},[353,852,410],{"class":358},[353,854,413],{"class":358},[353,856,857],{"class":416},"text-brand",[353,859,413],{"class":358},[353,861,462],{"class":358},[353,863,864],{"class":385},"Block A",[353,866,468],{"class":358},[353,868,51],{"class":362},[353,870,366],{"class":358},[353,872,873,875,877],{"class":355,"line":80},[353,874,515],{"class":358},[353,876,135],{"class":362},[353,878,366],{"class":358},[353,880,881],{"class":355,"line":36},[353,882,634],{"emptyLinePlaceholder":14},[353,884,885,887,889],{"class":355,"line":73},[353,886,401],{"class":358},[353,888,135],{"class":362},[353,890,366],{"class":358},[353,892,893,895,897,899,901],{"class":355,"line":132},[353,894,426],{"class":358},[353,896,363],{"class":362},[353,898,619],{"class":358},[353,900,622],{"class":406},[353,902,366],{"class":358},[353,904,905],{"class":355,"line":66},[353,906,825],{"class":385},[353,908,909],{"class":355,"line":112},[353,910,911],{"class":385},"          @theme { --color-brand: #ef4444; }\n",[353,913,914,916,918],{"class":355,"line":40},[353,915,506],{"class":358},[353,917,363],{"class":362},[353,919,366],{"class":358},[353,921,922],{"class":355,"line":44},[353,923,634],{"emptyLinePlaceholder":14},[353,925,926,928,930,932,934,936,938,940,942,945,947,949],{"class":355,"line":84},[353,927,426],{"class":358},[353,929,51],{"class":362},[353,931,407],{"class":406},[353,933,410],{"class":358},[353,935,413],{"class":358},[353,937,857],{"class":416},[353,939,413],{"class":358},[353,941,462],{"class":358},[353,943,944],{"class":385},"Block B",[353,946,468],{"class":358},[353,948,51],{"class":362},[353,950,366],{"class":358},[353,952,953,955,957],{"class":355,"line":96},[353,954,515],{"class":358},[353,956,135],{"class":362},[353,958,366],{"class":358},[353,960,961,963,965],{"class":355,"line":88},[353,962,524],{"class":358},[353,964,30],{"class":362},[353,966,366],{"class":358},[353,968,969,971,973],{"class":355,"line":100},[353,970,533],{"class":358},[353,972,69],{"class":362},[353,974,366],{"class":358},[353,976,977,979,981],{"class":355,"line":144},[353,978,468],{"class":358},[353,980,363],{"class":362},[353,982,366],{"class":358},[326,984,985,986,988,989,991,992,995,996,999],{},"Both ",[338,987,864],{}," and ",[338,990,944],{}," render with ",[338,993,994],{},"color: #ef4444"," — the ",[338,997,998],{},"#6366f1"," rule from block A is shadowed by block B's identically-named class.",[326,1001,1002,1003,1005,1006,988,1009,1012,1013,1016,1017,1020],{},"If you need different theme tokens in different parts of a template, define them once in a single ",[338,1004,340],{}," block and use distinct utility class names per region (for example, expose two custom tokens like ",[338,1007,1008],{},"--color-brand-a",[338,1010,1011],{},"--color-brand-b"," and reference ",[338,1014,1015],{},"text-brand-a"," \u002F ",[338,1018,1019],{},"text-brand-b",").",[330,1022,1024],{"id":1023},"nested-blocks","Nested blocks",[326,1026,1027,1028,1030,1031,1033,1034,1036,1037,341],{},"Nesting ",[338,1029,340],{}," inside another ",[338,1032,340],{}," is allowed but flattened: the inner block's classes flow up into the outer block's stylesheet, and the inner ",[338,1035,566],{}," slot is ignored. Only the outermost block produces a ",[338,1038,1039],{},"\u003Cstyle>",[343,1041,1043],{"className":345,"code":1042,"language":348,"meta":349,"style":349},"\u003Ctemplate>\n  \u003CTailwind>\n    \u003CBody>\n      \u003CTailwind>\n        \u003C!-- These classes are compiled into the outer block's stylesheet. -->\n        \u003CContainer class=\"bg-slate-100\">…\u003C\u002FContainer>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FTailwind>\n\u003C\u002Ftemplate>\n",[338,1044,1045,1053,1061,1069,1077,1083,1111,1119,1127,1135],{"__ignoreMap":349},[353,1046,1047,1049,1051],{"class":355,"line":18},[353,1048,359],{"class":358},[353,1050,363],{"class":362},[353,1052,366],{"class":358},[353,1054,1055,1057,1059],{"class":355,"line":13},[353,1056,371],{"class":358},[353,1058,135],{"class":362},[353,1060,366],{"class":358},[353,1062,1063,1065,1067],{"class":355,"line":32},[353,1064,380],{"class":358},[353,1066,30],{"class":362},[353,1068,366],{"class":358},[353,1070,1071,1073,1075],{"class":355,"line":27},[353,1072,401],{"class":358},[353,1074,135],{"class":362},[353,1076,366],{"class":358},[353,1078,1079],{"class":355,"line":52},[353,1080,1082],{"class":1081},"sVsQ9","        \u003C!-- These classes are compiled into the outer block's stylesheet. -->\n",[353,1084,1085,1087,1089,1091,1093,1095,1098,1100,1102,1105,1107,1109],{"class":355,"line":128},[353,1086,426],{"class":358},[353,1088,51],{"class":362},[353,1090,407],{"class":406},[353,1092,410],{"class":358},[353,1094,413],{"class":358},[353,1096,1097],{"class":416},"bg-slate-100",[353,1099,413],{"class":358},[353,1101,462],{"class":358},[353,1103,1104],{"class":385},"…",[353,1106,468],{"class":358},[353,1108,51],{"class":362},[353,1110,366],{"class":358},[353,1112,1113,1115,1117],{"class":355,"line":124},[353,1114,515],{"class":358},[353,1116,135],{"class":362},[353,1118,366],{"class":358},[353,1120,1121,1123,1125],{"class":355,"line":48},[353,1122,524],{"class":358},[353,1124,30],{"class":362},[353,1126,366],{"class":358},[353,1128,1129,1131,1133],{"class":355,"line":23},[353,1130,533],{"class":358},[353,1132,135],{"class":362},[353,1134,366],{"class":358},[353,1136,1137,1139,1141],{"class":355,"line":140},[353,1138,468],{"class":358},[353,1140,363],{"class":362},[353,1142,366],{"class":358},[330,1144,1146],{"id":1145},"slots","Slots",[1148,1149,1150],"h3",{"id":1150},"default",[326,1152,1153,1154,1157],{},"The content rendered into the document. Every ",[338,1155,1156],{},"class"," attribute on elements inside it is fed to the Tailwind compiler for this block.",[1148,1159,622],{"id":622},[326,1161,1162,1163,1166],{},"Optional. Raw CSS used as the input for the Tailwind compiler instead of the default ",[338,1164,1165],{},"@import \"@maizzle\u002Ftailwindcss\";"," seed. Read once at setup, not rendered into the document.",[1168,1169,1170],"style",{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}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 pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}",{"title":349,"searchDepth":13,"depth":13,"links":1172},[1173,1174,1175,1176,1177],{"id":332,"depth":13,"text":333},{"id":559,"depth":13,"text":560},{"id":743,"depth":13,"text":744},{"id":1023,"depth":13,"text":1024},{"id":1145,"depth":13,"text":1146,"children":1178},[1179,1180],{"id":1150,"depth":32,"text":1150},{"id":622,"depth":32,"text":622},"Compile a Tailwind stylesheet from the classes used inside a block and inject it into \u003Chead>.","md",{},{"title":135,"description":1181},"docs\u002Fcomponents\u002Ftailwind","dcVsVfa3gajVUltco7CYiBcgmFdMLHtZkJN0vO4tiBU",1781015441478]