[{"data":1,"prerenderedAt":4531},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Ftailwindcss":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":255,"body":318,"description":4525,"extension":4526,"meta":4527,"navigation":14,"order":18,"path":254,"section":256,"seo":4528,"sidebar":14,"stem":4529,"toc":14,"__hash__":4530},"docs\u002Fdocs\u002Ftailwindcss.md",{"type":319,"value":320,"toc":4499},"minimark",[321,325,329,332,337,345,513,527,545,868,881,895,904,993,997,1000,1088,1093,1107,1111,1131,1135,1150,1156,1420,1424,1427,1622,1626,1636,1666,1678,1681,1686,1690,1699,1705,1881,1888,1975,1978,2328,2332,2339,2344,2464,2467,2554,2573,2577,2582,2585,2705,2708,2935,2949,2953,2966,3004,3027,3039,3432,3438,3445,3465,3568,3579,3734,3743,3747,3766,3770,3777,3935,3950,3954,3965,4010,4014,4025,4318,4322,4330,4457,4461,4477,4496],[322,323,255],"h1",{"id":324},"tailwind-css",[326,327,328],"p",{},"Maizzle uses Tailwind CSS 4, configured and optimized for email client compatibility.",[326,330,331],{},"You style your templates or components with Tailwind like you're used to, and the framework compiles and lowers the modern CSS syntax so that it works across all major email clients.",[333,334,336],"h2",{"id":335},"usage","Usage",[326,338,339,340,344],{},"Use the ",[341,342,343],"code",{},"\u003CTailwind>"," component to wrap any part of your template:",[346,347,353],"pre",{"className":348,"code":349,"filename":350,"language":351,"meta":352,"style":352},"language-vue shiki shiki-themes laserwave has-diff","\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind> \u002F\u002F [!code ++]\n        \u003CContainer class=\"bg-slate-100 p-4\">\n          \u003CText class=\"text-lg text-slate-800\">Hello!\u003C\u002FText>\n        \u003C\u002FContainer>\n      \u003C\u002FTailwind> \u002F\u002F [!code ++]\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fexample.vue","vue","",[341,354,355,370,379,392,400,413,438,468,477,487,496,505],{"__ignoreMap":352},[356,357,359,363,367],"span",{"class":358,"line":18},"line",[356,360,362],{"class":361},"sGGKt","\u003C",[356,364,366],{"class":365},"sb4Pa","template",[356,368,369],{"class":361},">\n",[356,371,372,375,377],{"class":358,"line":13},[356,373,374],{"class":361},"  \u003C",[356,376,69],{"class":365},[356,378,369],{"class":361},[356,380,381,384,386,390],{"class":358,"line":32},[356,382,383],{"class":361},"    \u003C",[356,385,59],{"class":365},[356,387,389],{"class":388},"sLaUg"," \u002F",[356,391,369],{"class":361},[356,393,394,396,398],{"class":358,"line":27},[356,395,383],{"class":361},[356,397,30],{"class":365},[356,399,369],{"class":361},[356,401,405,408,410],{"class":402,"line":52},[358,403,404],"diff","add",[356,406,407],{"class":361},"      \u003C",[356,409,135],{"class":365},[356,411,412],{"class":361},">",[356,414,415,418,420,424,427,430,434,436],{"class":358,"line":128},[356,416,417],{"class":361},"        \u003C",[356,419,51],{"class":365},[356,421,423],{"class":422},"sZNF3"," class",[356,425,426],{"class":361},"=",[356,428,429],{"class":361},"\"",[356,431,433],{"class":432},"sXiT_","bg-slate-100 p-4",[356,435,429],{"class":361},[356,437,369],{"class":361},[356,439,440,443,445,447,449,451,454,456,458,461,464,466],{"class":358,"line":124},[356,441,442],{"class":361},"          \u003C",[356,444,139],{"class":365},[356,446,423],{"class":422},[356,448,426],{"class":361},[356,450,429],{"class":361},[356,452,453],{"class":432},"text-lg text-slate-800",[356,455,429],{"class":361},[356,457,412],{"class":361},[356,459,460],{"class":388},"Hello!",[356,462,463],{"class":361},"\u003C\u002F",[356,465,139],{"class":365},[356,467,369],{"class":361},[356,469,470,473,475],{"class":358,"line":48},[356,471,472],{"class":361},"        \u003C\u002F",[356,474,51],{"class":365},[356,476,369],{"class":361},[356,478,480,483,485],{"class":479,"line":23},[358,403,404],[356,481,482],{"class":361},"      \u003C\u002F",[356,484,135],{"class":365},[356,486,412],{"class":361},[356,488,489,492,494],{"class":358,"line":140},[356,490,491],{"class":361},"    \u003C\u002F",[356,493,30],{"class":365},[356,495,369],{"class":361},[356,497,498,501,503],{"class":358,"line":56},[356,499,500],{"class":361},"  \u003C\u002F",[356,502,69],{"class":365},[356,504,369],{"class":361},[356,506,507,509,511],{"class":358,"line":80},[356,508,463],{"class":361},[356,510,366],{"class":365},[356,512,369],{"class":361},[514,515,517],"callout",{"type":516},"warning",[326,518,519,520,523,524,526],{},"A ",[341,521,522],{},"\u003CHead>"," component must be present in the template when using ",[341,525,343],{},".",[326,528,529,530,533,534,537,538,541,542,544],{},"If you prefer a more hands-on approach, you may pull ",[341,531,532],{},"@maizzle\u002Ftailwindcss"," into your template yourself, either inline in a ",[341,535,536],{},"\u003Cstyle>"," tag or from an external stylesheet via a ",[341,539,540],{},"\u003Clink>"," tag inside your template's ",[341,543,522],{},":",[546,547,548,711],"code-tabs",{},[549,550,552],"code-tab",{"label":551},"style tag",[346,553,556],{"className":554,"code":555,"filename":350,"language":351,"meta":352,"style":352},"language-vue shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead>\n      \u003Cstyle>\n        @import \"@maizzle\u002Ftailwindcss\";\n      \u003C\u002Fstyle>\n    \u003C\u002FHead>\n    \u003CBody class=\"bg-slate-100\">\n      \u003CContainer>\n        \u003CText class=\"text-lg text-slate-800\">Hello!\u003C\u002FText>\n      \u003C\u002FContainer>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[341,557,558,566,574,582,591,610,618,626,645,653,679,687,695,703],{"__ignoreMap":352},[356,559,560,562,564],{"class":358,"line":18},[356,561,362],{"class":361},[356,563,366],{"class":365},[356,565,369],{"class":361},[356,567,568,570,572],{"class":358,"line":13},[356,569,374],{"class":361},[356,571,69],{"class":365},[356,573,369],{"class":361},[356,575,576,578,580],{"class":358,"line":32},[356,577,383],{"class":361},[356,579,59],{"class":365},[356,581,369],{"class":361},[356,583,584,586,589],{"class":358,"line":27},[356,585,407],{"class":361},[356,587,588],{"class":365},"style",[356,590,369],{"class":361},[356,592,593,596,600,603,605,607],{"class":358,"line":52},[356,594,595],{"class":361},"        @",[356,597,599],{"class":598},"s0ZPN","import",[356,601,602],{"class":361}," \"",[356,604,532],{"class":432},[356,606,429],{"class":361},[356,608,609],{"class":361},";\n",[356,611,612,614,616],{"class":358,"line":128},[356,613,482],{"class":361},[356,615,588],{"class":365},[356,617,369],{"class":361},[356,619,620,622,624],{"class":358,"line":124},[356,621,491],{"class":361},[356,623,59],{"class":365},[356,625,369],{"class":361},[356,627,628,630,632,634,636,638,641,643],{"class":358,"line":48},[356,629,383],{"class":361},[356,631,30],{"class":365},[356,633,423],{"class":422},[356,635,426],{"class":361},[356,637,429],{"class":361},[356,639,640],{"class":432},"bg-slate-100",[356,642,429],{"class":361},[356,644,369],{"class":361},[356,646,647,649,651],{"class":358,"line":23},[356,648,407],{"class":361},[356,650,51],{"class":365},[356,652,369],{"class":361},[356,654,655,657,659,661,663,665,667,669,671,673,675,677],{"class":358,"line":140},[356,656,417],{"class":361},[356,658,139],{"class":365},[356,660,423],{"class":422},[356,662,426],{"class":361},[356,664,429],{"class":361},[356,666,453],{"class":432},[356,668,429],{"class":361},[356,670,412],{"class":361},[356,672,460],{"class":388},[356,674,463],{"class":361},[356,676,139],{"class":365},[356,678,369],{"class":361},[356,680,681,683,685],{"class":358,"line":56},[356,682,482],{"class":361},[356,684,51],{"class":365},[356,686,369],{"class":361},[356,688,689,691,693],{"class":358,"line":80},[356,690,491],{"class":361},[356,692,30],{"class":365},[356,694,369],{"class":361},[356,696,697,699,701],{"class":358,"line":36},[356,698,500],{"class":361},[356,700,69],{"class":365},[356,702,369],{"class":361},[356,704,705,707,709],{"class":358,"line":73},[356,706,463],{"class":361},[356,708,366],{"class":365},[356,710,369],{"class":361},[549,712,714],{"label":713},"link tag",[346,715,717],{"className":554,"code":716,"filename":350,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead>\n      \u003Clink rel=\"stylesheet\" href=\"..\u002Ftailwind.css\">\n    \u003C\u002FHead>\n    \u003CBody class=\"bg-slate-100\">\n      \u003CContainer>\n        \u003CText class=\"text-lg text-slate-800\">Hello!\u003C\u002FText>\n      \u003C\u002FContainer>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[341,718,719,727,735,743,776,784,802,810,836,844,852,860],{"__ignoreMap":352},[356,720,721,723,725],{"class":358,"line":18},[356,722,362],{"class":361},[356,724,366],{"class":365},[356,726,369],{"class":361},[356,728,729,731,733],{"class":358,"line":13},[356,730,374],{"class":361},[356,732,69],{"class":365},[356,734,369],{"class":361},[356,736,737,739,741],{"class":358,"line":32},[356,738,383],{"class":361},[356,740,59],{"class":365},[356,742,369],{"class":361},[356,744,745,747,750,753,755,757,760,762,765,767,769,772,774],{"class":358,"line":27},[356,746,407],{"class":361},[356,748,749],{"class":365},"link",[356,751,752],{"class":422}," rel",[356,754,426],{"class":361},[356,756,429],{"class":361},[356,758,759],{"class":432},"stylesheet",[356,761,429],{"class":361},[356,763,764],{"class":422}," href",[356,766,426],{"class":361},[356,768,429],{"class":361},[356,770,771],{"class":432},"..\u002Ftailwind.css",[356,773,429],{"class":361},[356,775,369],{"class":361},[356,777,778,780,782],{"class":358,"line":52},[356,779,491],{"class":361},[356,781,59],{"class":365},[356,783,369],{"class":361},[356,785,786,788,790,792,794,796,798,800],{"class":358,"line":128},[356,787,383],{"class":361},[356,789,30],{"class":365},[356,791,423],{"class":422},[356,793,426],{"class":361},[356,795,429],{"class":361},[356,797,640],{"class":432},[356,799,429],{"class":361},[356,801,369],{"class":361},[356,803,804,806,808],{"class":358,"line":124},[356,805,407],{"class":361},[356,807,51],{"class":365},[356,809,369],{"class":361},[356,811,812,814,816,818,820,822,824,826,828,830,832,834],{"class":358,"line":48},[356,813,417],{"class":361},[356,815,139],{"class":365},[356,817,423],{"class":422},[356,819,426],{"class":361},[356,821,429],{"class":361},[356,823,453],{"class":432},[356,825,429],{"class":361},[356,827,412],{"class":361},[356,829,460],{"class":388},[356,831,463],{"class":361},[356,833,139],{"class":365},[356,835,369],{"class":361},[356,837,838,840,842],{"class":358,"line":23},[356,839,482],{"class":361},[356,841,51],{"class":365},[356,843,369],{"class":361},[356,845,846,848,850],{"class":358,"line":140},[356,847,491],{"class":361},[356,849,30],{"class":365},[356,851,369],{"class":361},[356,853,854,856,858],{"class":358,"line":56},[356,855,500],{"class":361},[356,857,69],{"class":365},[356,859,369],{"class":361},[356,861,862,864,866],{"class":358,"line":80},[356,863,463],{"class":361},[356,865,366],{"class":365},[356,867,369],{"class":361},[514,869,871],{"type":870},"info",[326,872,873,874,876,877,880],{},"With the ",[341,875,540],{}," approach, point ",[341,878,879],{},"href"," at a CSS file that imports the preset using a path relative to the template file.",[326,882,883,884,888,889,891,892,894],{},"At build time the ",[885,886,887],"a",{"href":280},"inline-link transformer"," replaces the ",[341,890,540],{}," with a ",[341,893,536],{}," tag containing the file's contents, which then goes through normal CSS processing.",[326,896,897,898,903],{},"Or just use our ",[885,899,900],{"href":75},[341,901,902],{},"\u003CLayout>"," component, it has everything set up for you:",[346,905,907],{"className":554,"code":906,"filename":350,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"bg-slate-100 p-4\">\n      \u003CText class=\"text-lg text-slate-800\">Hello!\u003C\u002FText>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[341,908,909,917,925,943,969,977,985],{"__ignoreMap":352},[356,910,911,913,915],{"class":358,"line":18},[356,912,362],{"class":361},[356,914,366],{"class":365},[356,916,369],{"class":361},[356,918,919,921,923],{"class":358,"line":13},[356,920,374],{"class":361},[356,922,76],{"class":365},[356,924,369],{"class":361},[356,926,927,929,931,933,935,937,939,941],{"class":358,"line":32},[356,928,383],{"class":361},[356,930,51],{"class":365},[356,932,423],{"class":422},[356,934,426],{"class":361},[356,936,429],{"class":361},[356,938,433],{"class":432},[356,940,429],{"class":361},[356,942,369],{"class":361},[356,944,945,947,949,951,953,955,957,959,961,963,965,967],{"class":358,"line":27},[356,946,407],{"class":361},[356,948,139],{"class":365},[356,950,423],{"class":422},[356,952,426],{"class":361},[356,954,429],{"class":361},[356,956,453],{"class":432},[356,958,429],{"class":361},[356,960,412],{"class":361},[356,962,460],{"class":388},[356,964,463],{"class":361},[356,966,139],{"class":365},[356,968,369],{"class":361},[356,970,971,973,975],{"class":358,"line":52},[356,972,491],{"class":361},[356,974,51],{"class":365},[356,976,369],{"class":361},[356,978,979,981,983],{"class":358,"line":128},[356,980,500],{"class":361},[356,982,76],{"class":365},[356,984,369],{"class":361},[356,986,987,989,991],{"class":358,"line":124},[356,988,463],{"class":361},[356,990,366],{"class":365},[356,992,369],{"class":361},[333,994,996],{"id":995},"web-vs-email","Web vs. email",[326,998,999],{},"Email clients have limited and inconsistent CSS support. Maizzle uses several strategies to bridge the gap between the modern Tailwind CSS and email client rendering engines.",[1001,1002,1003,1019],"table",{},[1004,1005,1006],"thead",{},[1007,1008,1009,1013,1016],"tr",{},[1010,1011,1012],"th",{},"Feature",[1010,1014,1015],{},"Web",[1010,1017,1018],{},"Maizzle",[1020,1021,1022,1034,1047,1068],"tbody",{},[1007,1023,1024,1028,1031],{},[1025,1026,1027],"td",{},"CSS variables",[1025,1029,1030],{},"Supported",[1025,1032,1033],{},"Supported (resolved at build time)",[1007,1035,1036,1042,1044],{},[1025,1037,1038,1041],{},[341,1039,1040],{},"oklch()"," colors",[1025,1043,1030],{},[1025,1045,1046],{},"Supported (lowered to HEX)",[1007,1048,1049,1063,1065],{},[1025,1050,1051,1052,1055,1058,1059,1062],{},"CSS nesting like in ",[1053,1054],"br",{},[341,1056,1057],{},":hover"," or ",[341,1060,1061],{},"@media"," queries",[1025,1064,1030],{},[1025,1066,1067],{},"Supported (flattened)",[1007,1069,1070,1075,1077],{},[1025,1071,1072,1073],{},"Class names with ",[341,1074,544],{},[1025,1076,1030],{},[1025,1078,1079,1080,1083,1084,1087],{},"Rewritten (",[341,1081,1082],{},"sm:block"," → ",[341,1085,1086],{},"sm-block",")",[1089,1090,1092],"h3",{"id":1091},"modern-syntax","Modern syntax",[326,1094,1095,1096,1098,1099,1106],{},"Tailwind CSS 4 uses modern CSS features like ",[341,1097,1040],{}," colors, CSS nesting, and custom properties. Most email clients don't support these, but Maizzle uses ",[885,1100,1105],{"href":1101,"rel":1102,"target":1104},"https:\u002F\u002Flightningcss.dev\u002F",[1103],"nofollow","_blank","Lightning CSS"," and a few custom tools to lower this modern syntax to simpler CSS that works everywhere.",[1089,1108,1110],{"id":1109},"safe-class-names","Safe class names",[326,1112,1113,1114,1058,1116,1119,1120,1122,1123,1126,1127,1130],{},"Some email clients (notably Gmail) strip class names that contain special characters like ",[341,1115,544],{},[341,1117,1118],{},"\u002F",". The ",[885,1121,298],{"href":297}," transformer rewrites those cool-looking Tailwind selectors like ",[341,1124,1125],{},"sm:text-lg"," to ",[341,1128,1129],{},"sm-text-lg"," so they work everywhere.",[1089,1132,1134],{"id":1133},"css-inlining","CSS inlining",[326,1136,1137,1138,1142,1143,1145,1146,1149],{},"Gmail Android with an IMAP email address (aka ",[885,1139,1141],{"href":1140},"\u002Fdocs\u002Fglossary#ganga","GANGA",") ignores ",[341,1144,536],{}," tags. Other clients, like older Outlooks, only use the first class in a ",[341,1147,1148],{},"class=\"\""," attribute, ignoring the rest.",[326,1151,1152,1153,1155],{},"Maizzle inlines Tailwind CSS utilities into ",[341,1154,588],{}," attributes, so your styling stays consistent.",[546,1157,1158,1269],{},[549,1159,1161],{"label":1160},"Source",[346,1162,1165],{"className":554,"code":1163,"filename":1164,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CText class=\"text-lg hover:text-blue-600\">Hello\u003C\u002FText>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fwelcome.vue",[341,1166,1167,1175,1183,1193,1201,1209,1237,1245,1253,1261],{"__ignoreMap":352},[356,1168,1169,1171,1173],{"class":358,"line":18},[356,1170,362],{"class":361},[356,1172,366],{"class":365},[356,1174,369],{"class":361},[356,1176,1177,1179,1181],{"class":358,"line":13},[356,1178,374],{"class":361},[356,1180,69],{"class":365},[356,1182,369],{"class":361},[356,1184,1185,1187,1189,1191],{"class":358,"line":32},[356,1186,383],{"class":361},[356,1188,59],{"class":365},[356,1190,389],{"class":388},[356,1192,369],{"class":361},[356,1194,1195,1197,1199],{"class":358,"line":27},[356,1196,383],{"class":361},[356,1198,30],{"class":365},[356,1200,369],{"class":361},[356,1202,1203,1205,1207],{"class":358,"line":52},[356,1204,407],{"class":361},[356,1206,135],{"class":365},[356,1208,369],{"class":361},[356,1210,1211,1213,1215,1217,1219,1221,1224,1226,1228,1231,1233,1235],{"class":358,"line":128},[356,1212,417],{"class":361},[356,1214,139],{"class":365},[356,1216,423],{"class":422},[356,1218,426],{"class":361},[356,1220,429],{"class":361},[356,1222,1223],{"class":432},"text-lg hover:text-blue-600",[356,1225,429],{"class":361},[356,1227,412],{"class":361},[356,1229,1230],{"class":388},"Hello",[356,1232,463],{"class":361},[356,1234,139],{"class":365},[356,1236,369],{"class":361},[356,1238,1239,1241,1243],{"class":358,"line":124},[356,1240,482],{"class":361},[356,1242,135],{"class":365},[356,1244,369],{"class":361},[356,1246,1247,1249,1251],{"class":358,"line":48},[356,1248,491],{"class":361},[356,1250,30],{"class":365},[356,1252,369],{"class":361},[356,1254,1255,1257,1259],{"class":358,"line":23},[356,1256,500],{"class":361},[356,1258,69],{"class":365},[356,1260,369],{"class":361},[356,1262,1263,1265,1267],{"class":358,"line":140},[356,1264,463],{"class":361},[356,1266,366],{"class":365},[356,1268,369],{"class":361},[549,1270,1272],{"label":1271},"Compiled",[346,1273,1277],{"className":1274,"code":1275,"language":1276,"meta":352,"style":352},"language-html shiki shiki-themes laserwave","\u003Chead>\n  \u003Cstyle>\n    .hover-text-blue-600:hover {\n      color: #2563eb !important;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cp \n    class=\"hover-text-blue-600\" \n    style=\"margin: 16px 0; font-size: 18px; line-height: 28px;\"\n  >Hello\u003C\u002Fp>\n\u003C\u002Fbody>\n","html",[341,1278,1279,1288,1296,1312,1330,1335,1343,1351,1360,1369,1384,1399,1412],{"__ignoreMap":352},[356,1280,1281,1283,1286],{"class":358,"line":18},[356,1282,362],{"class":361},[356,1284,1285],{"class":365},"head",[356,1287,369],{"class":361},[356,1289,1290,1292,1294],{"class":358,"line":13},[356,1291,374],{"class":361},[356,1293,588],{"class":365},[356,1295,369],{"class":361},[356,1297,1298,1301,1304,1306,1309],{"class":358,"line":32},[356,1299,1300],{"class":361},"    .",[356,1302,1303],{"class":422},"hover-text-blue-600",[356,1305,544],{"class":361},[356,1307,1308],{"class":422},"hover",[356,1310,1311],{"class":361}," {\n",[356,1313,1314,1317,1319,1322,1325,1328],{"class":358,"line":27},[356,1315,1316],{"class":598},"      color",[356,1318,544],{"class":361},[356,1320,1321],{"class":361}," #",[356,1323,1324],{"class":388},"2563eb ",[356,1326,1327],{"class":598},"!important",[356,1329,609],{"class":361},[356,1331,1332],{"class":358,"line":52},[356,1333,1334],{"class":361},"    }\n",[356,1336,1337,1339,1341],{"class":358,"line":128},[356,1338,500],{"class":361},[356,1340,588],{"class":365},[356,1342,369],{"class":361},[356,1344,1345,1347,1349],{"class":358,"line":124},[356,1346,463],{"class":361},[356,1348,1285],{"class":365},[356,1350,369],{"class":361},[356,1352,1353,1355,1358],{"class":358,"line":48},[356,1354,362],{"class":361},[356,1356,1357],{"class":365},"body",[356,1359,369],{"class":361},[356,1361,1362,1364,1366],{"class":358,"line":23},[356,1363,374],{"class":361},[356,1365,326],{"class":365},[356,1367,1368],{"class":388}," \n",[356,1370,1371,1374,1376,1378,1380,1382],{"class":358,"line":140},[356,1372,1373],{"class":422},"    class",[356,1375,426],{"class":361},[356,1377,429],{"class":361},[356,1379,1303],{"class":432},[356,1381,429],{"class":361},[356,1383,1368],{"class":388},[356,1385,1386,1389,1391,1393,1396],{"class":358,"line":56},[356,1387,1388],{"class":422},"    style",[356,1390,426],{"class":361},[356,1392,429],{"class":361},[356,1394,1395],{"class":432},"margin: 16px 0; font-size: 18px; line-height: 28px;",[356,1397,1398],{"class":361},"\"\n",[356,1400,1401,1404,1406,1408,1410],{"class":358,"line":80},[356,1402,1403],{"class":361},"  >",[356,1405,1230],{"class":388},[356,1407,463],{"class":361},[356,1409,326],{"class":365},[356,1411,369],{"class":361},[356,1413,1414,1416,1418],{"class":358,"line":36},[356,1415,463],{"class":361},[356,1417,1357],{"class":365},[356,1419,369],{"class":361},[333,1421,1423],{"id":1422},"custom-css","Custom CSS",[326,1425,1426],{},"If you really have to, you can combine Tailwind with your own custom or inline CSS:",[346,1428,1430],{"className":1274,"code":1429,"filename":350,"language":1276,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead>\n      \u003Cstyle>\n        @import \"@maizzle\u002Ftailwindcss\";\n\n        .custom-border {\n          @apply rounded-lg;\n          border: 2px solid #e2e8f0;\n        }\n      \u003C\u002Fstyle>\n    \u003C\u002FHead>\n    \u003CBody>\n      \u003CContainer class=\"custom-border p-4\" style=\"background-color: #facade;\">\n        ...\n      \u003C\u002FContainer>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[341,1431,1432,1440,1448,1456,1464,1478,1483,1493,1500,1525,1530,1538,1546,1554,1585,1590,1598,1606,1614],{"__ignoreMap":352},[356,1433,1434,1436,1438],{"class":358,"line":18},[356,1435,362],{"class":361},[356,1437,366],{"class":365},[356,1439,369],{"class":361},[356,1441,1442,1444,1446],{"class":358,"line":13},[356,1443,374],{"class":361},[356,1445,69],{"class":365},[356,1447,369],{"class":361},[356,1449,1450,1452,1454],{"class":358,"line":32},[356,1451,383],{"class":361},[356,1453,59],{"class":365},[356,1455,369],{"class":361},[356,1457,1458,1460,1462],{"class":358,"line":27},[356,1459,407],{"class":361},[356,1461,588],{"class":365},[356,1463,369],{"class":361},[356,1465,1466,1468,1470,1472,1474,1476],{"class":358,"line":52},[356,1467,595],{"class":361},[356,1469,599],{"class":598},[356,1471,602],{"class":361},[356,1473,532],{"class":432},[356,1475,429],{"class":361},[356,1477,609],{"class":361},[356,1479,1480],{"class":358,"line":128},[356,1481,1482],{"emptyLinePlaceholder":14},"\n",[356,1484,1485,1488,1491],{"class":358,"line":124},[356,1486,1487],{"class":361},"        .",[356,1489,1490],{"class":422},"custom-border",[356,1492,1311],{"class":361},[356,1494,1495,1498],{"class":358,"line":48},[356,1496,1497],{"class":388},"          @apply rounded-lg",[356,1499,609],{"class":361},[356,1501,1502,1505,1507,1511,1514,1517,1520,1523],{"class":358,"line":23},[356,1503,1504],{"class":598},"          border",[356,1506,544],{"class":361},[356,1508,1510],{"class":1509},"s0EtI"," 2",[356,1512,1513],{"class":598},"px",[356,1515,1516],{"class":388}," solid ",[356,1518,1519],{"class":361},"#",[356,1521,1522],{"class":388},"e2e8f0",[356,1524,609],{"class":361},[356,1526,1527],{"class":358,"line":140},[356,1528,1529],{"class":361},"        }\n",[356,1531,1532,1534,1536],{"class":358,"line":56},[356,1533,482],{"class":361},[356,1535,588],{"class":365},[356,1537,369],{"class":361},[356,1539,1540,1542,1544],{"class":358,"line":80},[356,1541,491],{"class":361},[356,1543,59],{"class":365},[356,1545,369],{"class":361},[356,1547,1548,1550,1552],{"class":358,"line":36},[356,1549,383],{"class":361},[356,1551,30],{"class":365},[356,1553,369],{"class":361},[356,1555,1556,1558,1560,1562,1564,1566,1569,1571,1574,1576,1578,1581,1583],{"class":358,"line":73},[356,1557,407],{"class":361},[356,1559,51],{"class":365},[356,1561,423],{"class":422},[356,1563,426],{"class":361},[356,1565,429],{"class":361},[356,1567,1568],{"class":432},"custom-border p-4",[356,1570,429],{"class":361},[356,1572,1573],{"class":422}," style",[356,1575,426],{"class":361},[356,1577,429],{"class":361},[356,1579,1580],{"class":432},"background-color: #facade;",[356,1582,429],{"class":361},[356,1584,369],{"class":361},[356,1586,1587],{"class":358,"line":132},[356,1588,1589],{"class":388},"        ...\n",[356,1591,1592,1594,1596],{"class":358,"line":66},[356,1593,482],{"class":361},[356,1595,51],{"class":365},[356,1597,369],{"class":361},[356,1599,1600,1602,1604],{"class":358,"line":112},[356,1601,491],{"class":361},[356,1603,30],{"class":365},[356,1605,369],{"class":361},[356,1607,1608,1610,1612],{"class":358,"line":40},[356,1609,500],{"class":361},[356,1611,69],{"class":365},[356,1613,369],{"class":361},[356,1615,1616,1618,1620],{"class":358,"line":44},[356,1617,463],{"class":361},[356,1619,366],{"class":365},[356,1621,369],{"class":361},[333,1623,1625],{"id":1624},"raw-styles","Raw styles",[326,1627,1628,1629,1631,1632,1635],{},"To prevent CSS inside a ",[341,1630,536],{}," tag from being compiled, use the ",[341,1633,1634],{},"raw"," attribute:",[346,1637,1639],{"className":1274,"code":1638,"language":1276,"meta":352,"style":352},"\u003Cstyle raw>\n  \u002F* Tailwind compilation disabled here, but may still be inlined *\u002F\n\u003C\u002Fstyle>\n",[341,1640,1641,1652,1658],{"__ignoreMap":352},[356,1642,1643,1645,1647,1650],{"class":358,"line":18},[356,1644,362],{"class":361},[356,1646,588],{"class":365},[356,1648,1649],{"class":422}," raw",[356,1651,369],{"class":361},[356,1653,1654],{"class":358,"line":13},[356,1655,1657],{"class":1656},"sVsQ9","  \u002F* Tailwind compilation disabled here, but may still be inlined *\u002F\n",[356,1659,1660,1662,1664],{"class":358,"line":32},[356,1661,463],{"class":361},[356,1663,588],{"class":365},[356,1665,369],{"class":361},[514,1667,1668],{"type":870},[326,1669,1670,1673,1674,1677],{},[341,1671,1672],{},"\u003Cstyle raw>"," doesn't prevent CSS inlining or purging, use ",[341,1675,1676],{},"\u003Cstyle embed>"," for that.",[333,1679,173],{"id":1680},"configuration",[326,1682,1683,1685],{},[341,1684,532],{}," is the email-friendly Tailwind CSS 4 configuration that ships with Maizzle. Besides adjusting Tailwind's defaults, it adds prose styles for HTML content, MSO utilities for Outlook on Windows, and variants for targeting specific email clients.",[1089,1687,1689],{"id":1688},"prose","Prose",[326,1691,1692,1694,1695,1698],{},[341,1693,532],{}," ships with email-safe typography styles, similar to the ",[341,1696,1697],{},"@tailwindcss\u002Ftypography"," plugin but tuned for email rendering quirks (no margin collapse, table-friendly defaults, no descendant selectors that break in Outlook).",[326,1700,1701,1702,1704],{},"Wrap rendered HTML or Markdown content in ",[341,1703,1688],{}," to get nicely styled headings, paragraphs, lists, blockquotes, and more out of the box:",[346,1706,1709],{"className":554,"code":1707,"filename":1708,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"prose\">\n      \u003Ch1>Hello world\u003C\u002Fh1>\n      \u003Cp>Body copy with a \u003Ca href=\"#\">link\u003C\u002Fa>.\u003C\u002Fp>\n      \u003Cul>\n        \u003Cli>Item one\u003C\u002Fli>\n        \u003Cli>Item two\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","emails\u002Farticle.vue",[341,1710,1711,1719,1727,1745,1762,1805,1814,1832,1849,1857,1865,1873],{"__ignoreMap":352},[356,1712,1713,1715,1717],{"class":358,"line":18},[356,1714,362],{"class":361},[356,1716,366],{"class":365},[356,1718,369],{"class":361},[356,1720,1721,1723,1725],{"class":358,"line":13},[356,1722,374],{"class":361},[356,1724,76],{"class":365},[356,1726,369],{"class":361},[356,1728,1729,1731,1733,1735,1737,1739,1741,1743],{"class":358,"line":32},[356,1730,383],{"class":361},[356,1732,51],{"class":365},[356,1734,423],{"class":422},[356,1736,426],{"class":361},[356,1738,429],{"class":361},[356,1740,1688],{"class":432},[356,1742,429],{"class":361},[356,1744,369],{"class":361},[356,1746,1747,1749,1751,1753,1756,1758,1760],{"class":358,"line":27},[356,1748,407],{"class":361},[356,1750,322],{"class":365},[356,1752,412],{"class":361},[356,1754,1755],{"class":388},"Hello world",[356,1757,463],{"class":361},[356,1759,322],{"class":365},[356,1761,369],{"class":361},[356,1763,1764,1766,1768,1770,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803],{"class":358,"line":52},[356,1765,407],{"class":361},[356,1767,326],{"class":365},[356,1769,412],{"class":361},[356,1771,1772],{"class":388},"Body copy with a ",[356,1774,362],{"class":361},[356,1776,885],{"class":365},[356,1778,764],{"class":422},[356,1780,426],{"class":361},[356,1782,429],{"class":361},[356,1784,1519],{"class":432},[356,1786,429],{"class":361},[356,1788,412],{"class":361},[356,1790,749],{"class":388},[356,1792,463],{"class":361},[356,1794,885],{"class":365},[356,1796,412],{"class":361},[356,1798,526],{"class":388},[356,1800,463],{"class":361},[356,1802,326],{"class":365},[356,1804,369],{"class":361},[356,1806,1807,1809,1812],{"class":358,"line":128},[356,1808,407],{"class":361},[356,1810,1811],{"class":365},"ul",[356,1813,369],{"class":361},[356,1815,1816,1818,1821,1823,1826,1828,1830],{"class":358,"line":124},[356,1817,417],{"class":361},[356,1819,1820],{"class":365},"li",[356,1822,412],{"class":361},[356,1824,1825],{"class":388},"Item one",[356,1827,463],{"class":361},[356,1829,1820],{"class":365},[356,1831,369],{"class":361},[356,1833,1834,1836,1838,1840,1843,1845,1847],{"class":358,"line":48},[356,1835,417],{"class":361},[356,1837,1820],{"class":365},[356,1839,412],{"class":361},[356,1841,1842],{"class":388},"Item two",[356,1844,463],{"class":361},[356,1846,1820],{"class":365},[356,1848,369],{"class":361},[356,1850,1851,1853,1855],{"class":358,"line":23},[356,1852,482],{"class":361},[356,1854,1811],{"class":365},[356,1856,369],{"class":361},[356,1858,1859,1861,1863],{"class":358,"line":140},[356,1860,491],{"class":361},[356,1862,51],{"class":365},[356,1864,369],{"class":361},[356,1866,1867,1869,1871],{"class":358,"line":56},[356,1868,500],{"class":361},[356,1870,76],{"class":365},[356,1872,369],{"class":361},[356,1874,1875,1877,1879],{"class":358,"line":80},[356,1876,463],{"class":361},[356,1878,366],{"class":365},[356,1880,369],{"class":361},[326,1882,1883,1884,1887],{},"Style individual element types via ",[341,1885,1886],{},"prose-*"," variants:",[346,1889,1891],{"className":1274,"code":1890,"language":1276,"meta":352,"style":352},"\u002F\u002F [!code word:prose-headings\\:text-brand] \n\u002F\u002F [!code word:prose-a\\:underline]\n\u003Cdiv class=\"prose prose-headings:text-brand prose-a:underline\">\n  \u003Ch2>Headings inherit brand color\u003C\u002Fh2>\n  \u003Ca href=\"#\">Links get an underline.\u003C\u002Fa>\n\u003C\u002Fdiv>\n",[341,1892,1893,1923,1940,1967],{"__ignoreMap":352},[356,1894,1895,1897,1900,1902,1904,1906,1909,1913,1916,1919,1921],{"class":358,"line":32},[356,1896,362],{"class":361},[356,1898,1899],{"class":365},"div",[356,1901,423],{"class":422},[356,1903,426],{"class":361},[356,1905,429],{"class":361},[356,1907,1908],{"class":432},"prose ",[356,1910,1912],{"class":1911},"highlighted-word sXiT_","prose-headings:text-brand",[356,1914,1915],{"class":432}," ",[356,1917,1918],{"class":1911},"prose-a:underline",[356,1920,429],{"class":361},[356,1922,369],{"class":361},[356,1924,1925,1927,1929,1931,1934,1936,1938],{"class":358,"line":27},[356,1926,374],{"class":361},[356,1928,333],{"class":365},[356,1930,412],{"class":361},[356,1932,1933],{"class":388},"Headings inherit brand color",[356,1935,463],{"class":361},[356,1937,333],{"class":365},[356,1939,369],{"class":361},[356,1941,1942,1944,1946,1948,1950,1952,1954,1956,1958,1961,1963,1965],{"class":358,"line":52},[356,1943,374],{"class":361},[356,1945,885],{"class":365},[356,1947,764],{"class":422},[356,1949,426],{"class":361},[356,1951,429],{"class":361},[356,1953,1519],{"class":432},[356,1955,429],{"class":361},[356,1957,412],{"class":361},[356,1959,1960],{"class":388},"Links get an underline.",[356,1962,463],{"class":361},[356,1964,885],{"class":365},[356,1966,369],{"class":361},[356,1968,1969,1971,1973],{"class":358,"line":128},[356,1970,463],{"class":361},[356,1972,1899],{"class":365},[356,1974,369],{"class":361},[326,1976,1977],{},"Available variants:",[1979,1980,1982],"content-wrap",{"max-height":1981},"350",[1001,1983,1984,1994],{},[1004,1985,1986],{},[1007,1987,1988,1991],{},[1010,1989,1990],{},"Variant",[1010,1992,1993],{},"Targets",[1020,1995,1996,2008,2026,2038,2049,2060,2072,2084,2096,2108,2119,2131,2142,2154,2165,2177,2189,2201,2212,2223,2234,2245,2256,2268,2280,2292,2304,2316],{},[1007,1997,1998,2003],{},[1025,1999,2000],{},[341,2001,2002],{},"prose-headings",[1025,2004,2005],{},[341,2006,2007],{},"h1, h2, h3, h4, h5, h6",[1007,2009,2010,2019],{},[1025,2011,2012,2015,2016],{},[341,2013,2014],{},"prose-h1"," … ",[341,2017,2018],{},"prose-h6",[1025,2020,2021,2015,2023],{},[341,2022,322],{},[341,2024,2025],{},"h6",[1007,2027,2028,2033],{},[1025,2029,2030],{},[341,2031,2032],{},"prose-lead",[1025,2034,2035],{},[341,2036,2037],{},"[class~=\"lead\"]",[1007,2039,2040,2045],{},[1025,2041,2042],{},[341,2043,2044],{},"prose-p",[1025,2046,2047],{},[341,2048,326],{},[1007,2050,2051,2056],{},[1025,2052,2053],{},[341,2054,2055],{},"prose-a",[1025,2057,2058],{},[341,2059,885],{},[1007,2061,2062,2067],{},[1025,2063,2064],{},[341,2065,2066],{},"prose-strong",[1025,2068,2069],{},[341,2070,2071],{},"strong",[1007,2073,2074,2079],{},[1025,2075,2076],{},[341,2077,2078],{},"prose-em",[1025,2080,2081],{},[341,2082,2083],{},"em",[1007,2085,2086,2091],{},[1025,2087,2088],{},[341,2089,2090],{},"prose-kbd",[1025,2092,2093],{},[341,2094,2095],{},"kbd",[1007,2097,2098,2103],{},[1025,2099,2100],{},[341,2101,2102],{},"prose-code",[1025,2104,2105],{},[341,2106,2107],{},":not(pre) > code",[1007,2109,2110,2115],{},[1025,2111,2112],{},[341,2113,2114],{},"prose-pre",[1025,2116,2117],{},[341,2118,346],{},[1007,2120,2121,2126],{},[1025,2122,2123],{},[341,2124,2125],{},"prose-blockquote",[1025,2127,2128],{},[341,2129,2130],{},"blockquote",[1007,2132,2133,2138],{},[1025,2134,2135],{},[341,2136,2137],{},"prose-ul",[1025,2139,2140],{},[341,2141,1811],{},[1007,2143,2144,2149],{},[1025,2145,2146],{},[341,2147,2148],{},"prose-ol",[1025,2150,2151],{},[341,2152,2153],{},"ol",[1007,2155,2156,2161],{},[1025,2157,2158],{},[341,2159,2160],{},"prose-li",[1025,2162,2163],{},[341,2164,1820],{},[1007,2166,2167,2172],{},[1025,2168,2169],{},[341,2170,2171],{},"prose-dl",[1025,2173,2174],{},[341,2175,2176],{},"dl",[1007,2178,2179,2184],{},[1025,2180,2181],{},[341,2182,2183],{},"prose-dt",[1025,2185,2186],{},[341,2187,2188],{},"dt",[1007,2190,2191,2196],{},[1025,2192,2193],{},[341,2194,2195],{},"prose-dd",[1025,2197,2198],{},[341,2199,2200],{},"dd",[1007,2202,2203,2208],{},[1025,2204,2205],{},[341,2206,2207],{},"prose-table",[1025,2209,2210],{},[341,2211,1001],{},[1007,2213,2214,2219],{},[1025,2215,2216],{},[341,2217,2218],{},"prose-thead",[1025,2220,2221],{},[341,2222,1004],{},[1007,2224,2225,2230],{},[1025,2226,2227],{},[341,2228,2229],{},"prose-tr",[1025,2231,2232],{},[341,2233,1007],{},[1007,2235,2236,2241],{},[1025,2237,2238],{},[341,2239,2240],{},"prose-th",[1025,2242,2243],{},[341,2244,1010],{},[1007,2246,2247,2252],{},[1025,2248,2249],{},[341,2250,2251],{},"prose-td",[1025,2253,2254],{},[341,2255,1025],{},[1007,2257,2258,2263],{},[1025,2259,2260],{},[341,2261,2262],{},"prose-img",[1025,2264,2265],{},[341,2266,2267],{},"img",[1007,2269,2270,2275],{},[1025,2271,2272],{},[341,2273,2274],{},"prose-picture",[1025,2276,2277],{},[341,2278,2279],{},"picture",[1007,2281,2282,2287],{},[1025,2283,2284],{},[341,2285,2286],{},"prose-video",[1025,2288,2289],{},[341,2290,2291],{},"video",[1007,2293,2294,2299],{},[1025,2295,2296],{},[341,2297,2298],{},"prose-figure",[1025,2300,2301],{},[341,2302,2303],{},"figure",[1007,2305,2306,2311],{},[1025,2307,2308],{},[341,2309,2310],{},"prose-figcaption",[1025,2312,2313],{},[341,2314,2315],{},"figcaption",[1007,2317,2318,2323],{},[1025,2319,2320],{},[341,2321,2322],{},"prose-hr",[1025,2324,2325],{},[341,2326,2327],{},"hr",[1089,2329,2331],{"id":2330},"mso-utilities","MSO utilities",[326,2333,2334,2335,2338],{},"Outlook on Windows uses Microsoft Word as its rendering engine and supports a family of ",[341,2336,2337],{},"mso-*"," CSS properties for fine-tuning spacing, fonts, and layout that other clients ignore.",[326,2340,2341,2343],{},[341,2342,532],{}," exposes these as utilities:",[346,2345,2347],{"className":1274,"code":2346,"language":1276,"meta":352,"style":352},"\u003C!-- Font tweaks for Outlook only -->\n\u003Cp class=\"mso-ansi-font-size-16 mso-ansi-font-weight-bold\">\n  Outlook only font styling\n\u003C\u002Fp>\n\n\u003C!-- Control line-height in Outlook -->\n\u003Cp class=\"leading-6 mso-line-height-rule-exactly mso-line-height-alt-8\">\n  Outlook uses a line-height of 8px instead of 24px here.\n\u003C\u002Fp>\n\n\u003C!-- Force-hide content in Outlook -->\n\u003Cdiv class=\"mso-hide-all\">Hidden in Outlook\u003C\u002Fdiv>\n",[341,2348,2349,2354,2373,2378,2386,2390,2395,2414,2419,2427,2431,2436],{"__ignoreMap":352},[356,2350,2351],{"class":358,"line":18},[356,2352,2353],{"class":1656},"\u003C!-- Font tweaks for Outlook only -->\n",[356,2355,2356,2358,2360,2362,2364,2366,2369,2371],{"class":358,"line":13},[356,2357,362],{"class":361},[356,2359,326],{"class":365},[356,2361,423],{"class":422},[356,2363,426],{"class":361},[356,2365,429],{"class":361},[356,2367,2368],{"class":432},"mso-ansi-font-size-16 mso-ansi-font-weight-bold",[356,2370,429],{"class":361},[356,2372,369],{"class":361},[356,2374,2375],{"class":358,"line":32},[356,2376,2377],{"class":388},"  Outlook only font styling\n",[356,2379,2380,2382,2384],{"class":358,"line":27},[356,2381,463],{"class":361},[356,2383,326],{"class":365},[356,2385,369],{"class":361},[356,2387,2388],{"class":358,"line":52},[356,2389,1482],{"emptyLinePlaceholder":14},[356,2391,2392],{"class":358,"line":128},[356,2393,2394],{"class":1656},"\u003C!-- Control line-height in Outlook -->\n",[356,2396,2397,2399,2401,2403,2405,2407,2410,2412],{"class":358,"line":124},[356,2398,362],{"class":361},[356,2400,326],{"class":365},[356,2402,423],{"class":422},[356,2404,426],{"class":361},[356,2406,429],{"class":361},[356,2408,2409],{"class":432},"leading-6 mso-line-height-rule-exactly mso-line-height-alt-8",[356,2411,429],{"class":361},[356,2413,369],{"class":361},[356,2415,2416],{"class":358,"line":48},[356,2417,2418],{"class":388},"  Outlook uses a line-height of 8px instead of 24px here.\n",[356,2420,2421,2423,2425],{"class":358,"line":23},[356,2422,463],{"class":361},[356,2424,326],{"class":365},[356,2426,369],{"class":361},[356,2428,2429],{"class":358,"line":140},[356,2430,1482],{"emptyLinePlaceholder":14},[356,2432,2433],{"class":358,"line":56},[356,2434,2435],{"class":1656},"\u003C!-- Force-hide content in Outlook -->\n",[356,2437,2438,2440,2442,2444,2446,2448,2451,2453,2455,2458,2460,2462],{"class":358,"line":80},[356,2439,362],{"class":361},[356,2441,1899],{"class":365},[356,2443,423],{"class":422},[356,2445,426],{"class":361},[356,2447,429],{"class":361},[356,2449,2450],{"class":432},"mso-hide-all",[356,2452,429],{"class":361},[356,2454,412],{"class":361},[356,2456,2457],{"class":388},"Hidden in Outlook",[356,2459,463],{"class":361},[356,2461,1899],{"class":365},[356,2463,369],{"class":361},[326,2465,2466],{},"A few of the most useful ones:",[1001,2468,2469,2479],{},[1004,2470,2471],{},[1007,2472,2473,2476],{},[1010,2474,2475],{},"Utility",[1010,2477,2478],{},"Purpose",[1020,2480,2481,2491,2505,2515,2528,2538],{},[1007,2482,2483,2488],{},[1025,2484,2485],{},[341,2486,2487],{},"mso-line-height-alt-*",[1025,2489,2490],{},"Set an alternate line-height that only Outlook reads",[1007,2492,2493,2498],{},[1025,2494,2495],{},[341,2496,2497],{},"mso-line-height-rule-exactly",[1025,2499,2500,2501,2504],{},"Make Outlook honor ",[341,2502,2503],{},"line-height"," precisely",[1007,2506,2507,2512],{},[1025,2508,2509],{},[341,2510,2511],{},"mso-text-raise-*",[1025,2513,2514],{},"Vertically nudge an element",[1007,2516,2517,2525],{},[1025,2518,2519,2521,2522],{},[341,2520,2450],{}," \u002F ",[341,2523,2524],{},"mso-hide-none",[1025,2526,2527],{},"Hide from \u002F show in Outlook",[1007,2529,2530,2535],{},[1025,2531,2532],{},[341,2533,2534],{},"mso-padding-alt-*",[1025,2536,2537],{},"Padding that only Outlook reads",[1007,2539,2540,2545],{},[1025,2541,2542],{},[341,2543,2544],{},"mso-font-width-*",[1025,2546,2547,2548,2553],{},"Used by ",[885,2549,2550],{"href":130},[341,2551,2552],{},"\u003CSpacer>"," for horizontal spacing in Outlook",[514,2555,2556],{"type":870},[326,2557,2558,2559,2566,2567,2572],{},"See ",[885,2560,2563],{"href":2561,"rel":2562,"target":1104},"https:\u002F\u002Fraw.githubusercontent.com\u002Fmaizzle\u002Ftailwindcss\u002Frefs\u002Fheads\u002Fmaster\u002Fmso.css",[1103],[341,2564,2565],{},"mso.css"," for the full list of MSO utilities provided, or the ",[885,2568,2571],{"href":2569,"rel":2570,"target":1104},"https:\u002F\u002Fstigmortenmyre.no\u002Fmso\u002F",[1103],"Microsoft Office HTML and XML Reference"," if you really want to go down this rabbit hole.",[333,2574,2576],{"id":2575},"email-client-targeting","Email client targeting",[326,2578,2579,2581],{},[341,2580,532],{}," ships with variants for styling elements for specific email clients.",[326,2583,2584],{},"These are useful because email clients have various levels of CSS support and rendering quirks, so you can write client-specific fixes without affecting how it looks elsewhere.",[346,2586,2588],{"className":1274,"code":2587,"language":1276,"meta":352,"style":352},"\u003C!-- [!code word:gmail\\:text-gray-600] -->\n\u003Cp class=\"text-gray-950 gmail:text-gray-600\">\n  Dark text in most clients, but lighter in Gmail.\n\u003C\u002Fp>\n\n\u003C!-- [!code word:ios\\:text-2xl] -->\n\u003Cp class=\"text-base ios:text-2xl\">\n  Bigger text in iOS Mail\n\u003C\u002Fp>\n\n\u003C!-- Combine variants -->\n\u003C!-- [!code word:dark\\:ios\\:text-white] -->\n\u003Cp class=\"dark:ios:text-white\">\n  White text in dark mode on iOS Mail\n\u003C\u002Fp>\n",[341,2589,2590,2612,2617,2625,2629,2651,2656,2664,2668,2673,2692,2697],{"__ignoreMap":352},[356,2591,2592,2594,2596,2598,2600,2602,2605,2608,2610],{"class":358,"line":13},[356,2593,362],{"class":361},[356,2595,326],{"class":365},[356,2597,423],{"class":422},[356,2599,426],{"class":361},[356,2601,429],{"class":361},[356,2603,2604],{"class":432},"text-gray-950 ",[356,2606,2607],{"class":1911},"gmail:text-gray-600",[356,2609,429],{"class":361},[356,2611,369],{"class":361},[356,2613,2614],{"class":358,"line":32},[356,2615,2616],{"class":388},"  Dark text in most clients, but lighter in Gmail.\n",[356,2618,2619,2621,2623],{"class":358,"line":27},[356,2620,463],{"class":361},[356,2622,326],{"class":365},[356,2624,369],{"class":361},[356,2626,2627],{"class":358,"line":52},[356,2628,1482],{"emptyLinePlaceholder":14},[356,2630,2631,2633,2635,2637,2639,2641,2644,2647,2649],{"class":358,"line":124},[356,2632,362],{"class":361},[356,2634,326],{"class":365},[356,2636,423],{"class":422},[356,2638,426],{"class":361},[356,2640,429],{"class":361},[356,2642,2643],{"class":432},"text-base ",[356,2645,2646],{"class":1911},"ios:text-2xl",[356,2648,429],{"class":361},[356,2650,369],{"class":361},[356,2652,2653],{"class":358,"line":48},[356,2654,2655],{"class":388},"  Bigger text in iOS Mail\n",[356,2657,2658,2660,2662],{"class":358,"line":23},[356,2659,463],{"class":361},[356,2661,326],{"class":365},[356,2663,369],{"class":361},[356,2665,2666],{"class":358,"line":140},[356,2667,1482],{"emptyLinePlaceholder":14},[356,2669,2670],{"class":358,"line":56},[356,2671,2672],{"class":1656},"\u003C!-- Combine variants -->\n",[356,2674,2675,2677,2679,2681,2683,2685,2688,2690],{"class":358,"line":36},[356,2676,362],{"class":361},[356,2678,326],{"class":365},[356,2680,423],{"class":422},[356,2682,426],{"class":361},[356,2684,429],{"class":361},[356,2686,2687],{"class":1911},"dark:ios:text-white",[356,2689,429],{"class":361},[356,2691,369],{"class":361},[356,2693,2694],{"class":358,"line":73},[356,2695,2696],{"class":388},"  White text in dark mode on iOS Mail\n",[356,2698,2699,2701,2703],{"class":358,"line":132},[356,2700,463],{"class":361},[356,2702,326],{"class":365},[356,2704,369],{"class":361},[326,2706,2707],{},"Available client variants:",[1979,2709,2710],{"max-height":1981},[1001,2711,2712,2720],{},[1004,2713,2714],{},[1007,2715,2716,2718],{},[1010,2717,1990],{},[1010,2719,1993],{},[1020,2721,2722,2732,2742,2752,2762,2772,2782,2795,2805,2815,2825,2835,2845,2862,2872,2882,2895,2905,2915,2925],{},[1007,2723,2724,2729],{},[1025,2725,2726],{},[341,2727,2728],{},"gmail:",[1025,2730,2731],{},"Gmail (web)",[1007,2733,2734,2739],{},[1025,2735,2736],{},[341,2737,2738],{},"gmail-android:",[1025,2740,2741],{},"Gmail on Android",[1007,2743,2744,2749],{},[1025,2745,2746],{},[341,2747,2748],{},"gmail-ipad:",[1025,2750,2751],{},"Gmail on iPad",[1007,2753,2754,2759],{},[1025,2755,2756],{},[341,2757,2758],{},"apple-mail:",[1025,2760,2761],{},"Apple Mail (recent versions)",[1007,2763,2764,2769],{},[1025,2765,2766],{},[341,2767,2768],{},"apple-mail-10:",[1025,2770,2771],{},"Apple Mail 10 (legacy)",[1007,2773,2774,2779],{},[1025,2775,2776],{},[341,2777,2778],{},"ios:",[1025,2780,2781],{},"iOS Mail",[1007,2783,2784,2792],{},[1025,2785,2786,2521,2789],{},[341,2787,2788],{},"ios-10:",[341,2790,2791],{},"ios-13:",[1025,2793,2794],{},"Specific iOS Mail versions",[1007,2796,2797,2802],{},[1025,2798,2799],{},[341,2800,2801],{},"outlook-mac:",[1025,2803,2804],{},"Outlook for Mac",[1007,2806,2807,2812],{},[1025,2808,2809],{},[341,2810,2811],{},"outlook-android:",[1025,2813,2814],{},"Outlook for Android",[1007,2816,2817,2822],{},[1025,2818,2819],{},[341,2820,2821],{},"yahoo:",[1025,2823,2824],{},"Yahoo! and AOL Mail",[1007,2826,2827,2832],{},[1025,2828,2829],{},[341,2830,2831],{},"airmail:",[1025,2833,2834],{},"Airmail",[1007,2836,2837,2842],{},[1025,2838,2839],{},[341,2840,2841],{},"comcast:",[1025,2843,2844],{},"Comcast",[1007,2846,2847,2859],{},[1025,2848,2849,2852,2853,2852,2856],{},[341,2850,2851],{},"edison:",", ",[341,2854,2855],{},"edison-ios:",[341,2857,2858],{},"edison-android:",[1025,2860,2861],{},"Edison Mail",[1007,2863,2864,2869],{},[1025,2865,2866],{},[341,2867,2868],{},"freenet:",[1025,2870,2871],{},"Freenet",[1007,2873,2874,2879],{},[1025,2875,2876],{},[341,2877,2878],{},"notion:",[1025,2880,2881],{},"Notion Mail",[1007,2883,2884,2892],{},[1025,2885,2886,2521,2889],{},[341,2887,2888],{},"ogsc:",[341,2890,2891],{},"ogsb:",[1025,2893,2894],{},"Outlook.com dark mode (text \u002F background)",[1007,2896,2897,2902],{},[1025,2898,2899],{},[341,2900,2901],{},"ox:",[1025,2903,2904],{},"Open-Xchange",[1007,2906,2907,2912],{},[1025,2908,2909],{},[341,2910,2911],{},"spark:",[1025,2913,2914],{},"Spark",[1007,2916,2917,2922],{},[1025,2918,2919],{},[341,2920,2921],{},"superhuman:",[1025,2923,2924],{},"Superhuman",[1007,2926,2927,2932],{},[1025,2928,2929],{},[341,2930,2931],{},"thunderbird:",[1025,2933,2934],{},"Thunderbird",[514,2936,2937],{"type":870},[326,2938,2939,2940,2945,2946,2948],{},"For targeting Outlook on Windows, use the ",[885,2941,2942],{"href":94},[341,2943,2944],{},"\u003COutlook>"," component or the ",[341,2947,2337],{}," utilities.",[1089,2950,2952],{"id":2951},"escaped-selectors","Escaped selectors",[326,2954,2955,2956,2959,2960,2962,2963,544],{},"Yahoo and AOL will replace the ",[341,2957,2958],{},".&"," with their wrapping ID name. To target it, the ",[341,2961,2821],{}," variant compiles to a selector that contains the escape sequence ",[341,2964,2965],{},"\\&",[346,2967,2971],{"className":2968,"code":2969,"language":2970,"meta":352,"style":352},"language-css shiki shiki-themes laserwave",".\\& .yahoo-text-2xl { font-size: 24px !important }\n","css",[341,2972,2973],{"__ignoreMap":352},[356,2974,2975,2977,2979,2982,2985,2988,2991,2993,2996,2998,3001],{"class":358,"line":18},[356,2976,526],{"class":361},[356,2978,2965],{"class":422},[356,2980,2981],{"class":361}," .",[356,2983,2984],{"class":422},"yahoo-text-2xl",[356,2986,2987],{"class":361}," {",[356,2989,2990],{"class":598}," font-size",[356,2992,544],{"class":361},[356,2994,2995],{"class":1509}," 24",[356,2997,1513],{"class":598},[356,2999,3000],{"class":598}," !important",[356,3002,3003],{"class":361}," }\n",[326,3005,3006,3007,3013,3014,3017,3018,3020,3021,3023,3024,3026],{},"That backslash is a problem for Gmail, which drops the ",[2071,3008,3009,3010,3012],{},"entire ",[341,3011,536],{}," tag"," the moment its CSS parser sees a ",[341,3015,3016],{},"\\"," character. If you mix ",[341,3019,2821],{}," utilities with regular Tailwind classes in the same ",[341,3022,343],{}," block, all of those styles end up in one ",[341,3025,536],{}," tag, and Gmail throws it away.",[326,3028,3029,3030,3032,3033,3035,3036,3038],{},"The fix is to isolate ",[341,3031,2821],{}," utilities in their own ",[341,3034,343],{}," block so they compile into a separate ",[341,3037,536],{}," tag:",[546,3040,3041,3197],{},[549,3042,3043],{"label":1160},[346,3044,3046],{"className":554,"code":3045,"filename":1164,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CText class=\"yahoo:text-2xl\">Limited-time offer.\u003C\u002FText>\n      \u003C\u002FTailwind>\n\n      \u003CTailwind>\n        \u003CText class=\"text-2xl hover:text-blue-600\">Limited-time offer.\u003C\u002FText>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[341,3047,3048,3056,3064,3074,3082,3090,3118,3126,3130,3138,3165,3173,3181,3189],{"__ignoreMap":352},[356,3049,3050,3052,3054],{"class":358,"line":18},[356,3051,362],{"class":361},[356,3053,366],{"class":365},[356,3055,369],{"class":361},[356,3057,3058,3060,3062],{"class":358,"line":13},[356,3059,374],{"class":361},[356,3061,69],{"class":365},[356,3063,369],{"class":361},[356,3065,3066,3068,3070,3072],{"class":358,"line":32},[356,3067,383],{"class":361},[356,3069,59],{"class":365},[356,3071,389],{"class":388},[356,3073,369],{"class":361},[356,3075,3076,3078,3080],{"class":358,"line":27},[356,3077,383],{"class":361},[356,3079,30],{"class":365},[356,3081,369],{"class":361},[356,3083,3084,3086,3088],{"class":358,"line":52},[356,3085,407],{"class":361},[356,3087,135],{"class":365},[356,3089,369],{"class":361},[356,3091,3092,3094,3096,3098,3100,3102,3105,3107,3109,3112,3114,3116],{"class":358,"line":128},[356,3093,417],{"class":361},[356,3095,139],{"class":365},[356,3097,423],{"class":422},[356,3099,426],{"class":361},[356,3101,429],{"class":361},[356,3103,3104],{"class":432},"yahoo:text-2xl",[356,3106,429],{"class":361},[356,3108,412],{"class":361},[356,3110,3111],{"class":388},"Limited-time offer.",[356,3113,463],{"class":361},[356,3115,139],{"class":365},[356,3117,369],{"class":361},[356,3119,3120,3122,3124],{"class":358,"line":124},[356,3121,482],{"class":361},[356,3123,135],{"class":365},[356,3125,369],{"class":361},[356,3127,3128],{"class":358,"line":48},[356,3129,1482],{"emptyLinePlaceholder":14},[356,3131,3132,3134,3136],{"class":358,"line":23},[356,3133,407],{"class":361},[356,3135,135],{"class":365},[356,3137,369],{"class":361},[356,3139,3140,3142,3144,3146,3148,3150,3153,3155,3157,3159,3161,3163],{"class":358,"line":140},[356,3141,417],{"class":361},[356,3143,139],{"class":365},[356,3145,423],{"class":422},[356,3147,426],{"class":361},[356,3149,429],{"class":361},[356,3151,3152],{"class":432},"text-2xl hover:text-blue-600",[356,3154,429],{"class":361},[356,3156,412],{"class":361},[356,3158,3111],{"class":388},[356,3160,463],{"class":361},[356,3162,139],{"class":365},[356,3164,369],{"class":361},[356,3166,3167,3169,3171],{"class":358,"line":56},[356,3168,482],{"class":361},[356,3170,135],{"class":365},[356,3172,369],{"class":361},[356,3174,3175,3177,3179],{"class":358,"line":80},[356,3176,491],{"class":361},[356,3178,30],{"class":365},[356,3180,369],{"class":361},[356,3182,3183,3185,3187],{"class":358,"line":36},[356,3184,500],{"class":361},[356,3186,69],{"class":365},[356,3188,369],{"class":361},[356,3190,3191,3193,3195],{"class":358,"line":73},[356,3192,463],{"class":361},[356,3194,366],{"class":365},[356,3196,369],{"class":361},[549,3198,3199],{"label":1271},[346,3200,3202],{"className":1274,"code":3201,"language":1276,"meta":352,"style":352},"\u003Chead>\n  \u003Cstyle>\n    .\\& .yahoo-text-2xl {\n      font-size: 24px !important;\n      line-height: 32px !important;\n    }\n  \u003C\u002Fstyle>\n  \u003Cstyle>\n    .hover-text-blue-600:hover {\n      color: #2563eb !important;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cp\n    class=\"yahoo-text-2xl\"\n    style=\"font-size: 16px; line-height: 24px; margin-top: 16px;\"\n  >Limited-time offer.\u003C\u002Fp>\n  \u003Cp\n    class=\"hover-text-blue-600\"\n    style=\"margin-top: 16px; font-size: 24px; line-height: 32px;\"\n  >Limited-time offer.\u003C\u002Fp>\n\u003C\u002Fbody>\n",[341,3203,3204,3212,3220,3232,3247,3263,3267,3275,3283,3295,3309,3313,3321,3329,3337,3344,3356,3369,3381,3387,3399,3412,3424],{"__ignoreMap":352},[356,3205,3206,3208,3210],{"class":358,"line":18},[356,3207,362],{"class":361},[356,3209,1285],{"class":365},[356,3211,369],{"class":361},[356,3213,3214,3216,3218],{"class":358,"line":13},[356,3215,374],{"class":361},[356,3217,588],{"class":365},[356,3219,369],{"class":361},[356,3221,3222,3224,3226,3228,3230],{"class":358,"line":32},[356,3223,1300],{"class":361},[356,3225,2965],{"class":422},[356,3227,2981],{"class":361},[356,3229,2984],{"class":422},[356,3231,1311],{"class":361},[356,3233,3234,3237,3239,3241,3243,3245],{"class":358,"line":27},[356,3235,3236],{"class":598},"      font-size",[356,3238,544],{"class":361},[356,3240,2995],{"class":1509},[356,3242,1513],{"class":598},[356,3244,3000],{"class":598},[356,3246,609],{"class":361},[356,3248,3249,3252,3254,3257,3259,3261],{"class":358,"line":52},[356,3250,3251],{"class":598},"      line-height",[356,3253,544],{"class":361},[356,3255,3256],{"class":1509}," 32",[356,3258,1513],{"class":598},[356,3260,3000],{"class":598},[356,3262,609],{"class":361},[356,3264,3265],{"class":358,"line":128},[356,3266,1334],{"class":361},[356,3268,3269,3271,3273],{"class":358,"line":124},[356,3270,500],{"class":361},[356,3272,588],{"class":365},[356,3274,369],{"class":361},[356,3276,3277,3279,3281],{"class":358,"line":48},[356,3278,374],{"class":361},[356,3280,588],{"class":365},[356,3282,369],{"class":361},[356,3284,3285,3287,3289,3291,3293],{"class":358,"line":23},[356,3286,1300],{"class":361},[356,3288,1303],{"class":422},[356,3290,544],{"class":361},[356,3292,1308],{"class":422},[356,3294,1311],{"class":361},[356,3296,3297,3299,3301,3303,3305,3307],{"class":358,"line":140},[356,3298,1316],{"class":598},[356,3300,544],{"class":361},[356,3302,1321],{"class":361},[356,3304,1324],{"class":388},[356,3306,1327],{"class":598},[356,3308,609],{"class":361},[356,3310,3311],{"class":358,"line":56},[356,3312,1334],{"class":361},[356,3314,3315,3317,3319],{"class":358,"line":80},[356,3316,500],{"class":361},[356,3318,588],{"class":365},[356,3320,369],{"class":361},[356,3322,3323,3325,3327],{"class":358,"line":36},[356,3324,463],{"class":361},[356,3326,1285],{"class":365},[356,3328,369],{"class":361},[356,3330,3331,3333,3335],{"class":358,"line":73},[356,3332,362],{"class":361},[356,3334,1357],{"class":365},[356,3336,369],{"class":361},[356,3338,3339,3341],{"class":358,"line":132},[356,3340,374],{"class":361},[356,3342,3343],{"class":365},"p\n",[356,3345,3346,3348,3350,3352,3354],{"class":358,"line":66},[356,3347,1373],{"class":422},[356,3349,426],{"class":361},[356,3351,429],{"class":361},[356,3353,2984],{"class":432},[356,3355,1398],{"class":361},[356,3357,3358,3360,3362,3364,3367],{"class":358,"line":112},[356,3359,1388],{"class":422},[356,3361,426],{"class":361},[356,3363,429],{"class":361},[356,3365,3366],{"class":432},"font-size: 16px; line-height: 24px; margin-top: 16px;",[356,3368,1398],{"class":361},[356,3370,3371,3373,3375,3377,3379],{"class":358,"line":40},[356,3372,1403],{"class":361},[356,3374,3111],{"class":388},[356,3376,463],{"class":361},[356,3378,326],{"class":365},[356,3380,369],{"class":361},[356,3382,3383,3385],{"class":358,"line":44},[356,3384,374],{"class":361},[356,3386,3343],{"class":365},[356,3388,3389,3391,3393,3395,3397],{"class":358,"line":84},[356,3390,1373],{"class":422},[356,3392,426],{"class":361},[356,3394,429],{"class":361},[356,3396,1303],{"class":432},[356,3398,1398],{"class":361},[356,3400,3401,3403,3405,3407,3410],{"class":358,"line":96},[356,3402,1388],{"class":422},[356,3404,426],{"class":361},[356,3406,429],{"class":361},[356,3408,3409],{"class":432},"margin-top: 16px; font-size: 24px; line-height: 32px;",[356,3411,1398],{"class":361},[356,3413,3414,3416,3418,3420,3422],{"class":358,"line":88},[356,3415,1403],{"class":361},[356,3417,3111],{"class":388},[356,3419,463],{"class":361},[356,3421,326],{"class":365},[356,3423,369],{"class":361},[356,3425,3426,3428,3430],{"class":358,"line":100},[356,3427,463],{"class":361},[356,3429,1357],{"class":365},[356,3431,369],{"class":361},[326,3433,3434,3435,3437],{},"This generates two separate ",[341,3436,536],{}," tags, Gmail will only discard the Yahoo-targeting one.",[1089,3439,3441,3442],{"id":3440},"stacking-with-dark","Stacking with ",[341,3443,3444],{},"dark:",[326,3446,3447,3448,3450,3451,3454,3455,3457,3458,3461,3462,3464],{},"The ",[341,3449,2778],{}," variant compiles to a ",[341,3452,3453],{},"@supports"," block, and Tailwind's ",[341,3456,3444],{}," variant compiles to ",[341,3459,3460],{},"@media (prefers-color-scheme: dark)",". Stacking them, for example ",[341,3463,2687],{},", produces nested at-rules:",[346,3466,3468],{"className":2968,"code":3467,"language":2970,"meta":352,"style":352},"@media (prefers-color-scheme: dark) {\n  @supports (-webkit-overflow-scrolling: touch) and (aspect-ratio: 1 \u002F 1) {\n    .dark-ios-text-white { color: #fff !important }\n  }\n}\n",[341,3469,3470,3493,3535,3558,3563],{"__ignoreMap":352},[356,3471,3472,3475,3478,3481,3484,3486,3489,3491],{"class":358,"line":18},[356,3473,3474],{"class":361},"@",[356,3476,3477],{"class":598},"media",[356,3479,3480],{"class":361}," (",[356,3482,3483],{"class":388},"prefers-color-scheme",[356,3485,544],{"class":361},[356,3487,3488],{"class":388}," dark",[356,3490,1087],{"class":361},[356,3492,1311],{"class":361},[356,3494,3495,3498,3501,3503,3506,3508,3511,3513,3516,3518,3521,3523,3526,3528,3531,3533],{"class":358,"line":13},[356,3496,3497],{"class":361},"  @",[356,3499,3500],{"class":598},"supports",[356,3502,3480],{"class":361},[356,3504,3505],{"class":388},"-webkit-overflow-scrolling",[356,3507,544],{"class":361},[356,3509,3510],{"class":388}," touch",[356,3512,1087],{"class":361},[356,3514,3515],{"class":365}," and",[356,3517,3480],{"class":361},[356,3519,3520],{"class":598},"aspect-ratio",[356,3522,544],{"class":361},[356,3524,3525],{"class":1509}," 1",[356,3527,2521],{"class":388},[356,3529,3530],{"class":1509},"1",[356,3532,1087],{"class":361},[356,3534,1311],{"class":361},[356,3536,3537,3539,3542,3544,3547,3549,3551,3554,3556],{"class":358,"line":32},[356,3538,1300],{"class":361},[356,3540,3541],{"class":422},"dark-ios-text-white",[356,3543,2987],{"class":361},[356,3545,3546],{"class":598}," color",[356,3548,544],{"class":361},[356,3550,1321],{"class":361},[356,3552,3553],{"class":388},"fff ",[356,3555,1327],{"class":598},[356,3557,3003],{"class":361},[356,3559,3560],{"class":358,"line":27},[356,3561,3562],{"class":361},"  }\n",[356,3564,3565],{"class":358,"line":52},[356,3566,3567],{"class":361},"}\n",[326,3569,3570,3571,3573,3574,3035,3576,3578],{},"Gmail's CSS parser does not handle nested at-rules and discards the entire ",[341,3572,536],{}," tag when it sees one. Use the same pattern as for Yahoo Mail: keep the stacked utilities in their own ",[341,3575,343],{},[341,3577,536],{}," tag.",[346,3580,3583],{"className":554,"code":3581,"filename":3582,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CText class=\"dark:ios:text-white\">Dark mode on iOS\u003C\u002FText>\n      \u003C\u002FTailwind>\n\n      \u003CTailwind>\n        \u003CText class=\"text-base\">Everything else\u003C\u002FText>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fpromo.vue",[341,3584,3585,3593,3601,3611,3619,3627,3654,3662,3666,3674,3702,3710,3718,3726],{"__ignoreMap":352},[356,3586,3587,3589,3591],{"class":358,"line":18},[356,3588,362],{"class":361},[356,3590,366],{"class":365},[356,3592,369],{"class":361},[356,3594,3595,3597,3599],{"class":358,"line":13},[356,3596,374],{"class":361},[356,3598,69],{"class":365},[356,3600,369],{"class":361},[356,3602,3603,3605,3607,3609],{"class":358,"line":32},[356,3604,383],{"class":361},[356,3606,59],{"class":365},[356,3608,389],{"class":388},[356,3610,369],{"class":361},[356,3612,3613,3615,3617],{"class":358,"line":27},[356,3614,383],{"class":361},[356,3616,30],{"class":365},[356,3618,369],{"class":361},[356,3620,3621,3623,3625],{"class":358,"line":52},[356,3622,407],{"class":361},[356,3624,135],{"class":365},[356,3626,369],{"class":361},[356,3628,3629,3631,3633,3635,3637,3639,3641,3643,3645,3648,3650,3652],{"class":358,"line":128},[356,3630,417],{"class":361},[356,3632,139],{"class":365},[356,3634,423],{"class":422},[356,3636,426],{"class":361},[356,3638,429],{"class":361},[356,3640,2687],{"class":432},[356,3642,429],{"class":361},[356,3644,412],{"class":361},[356,3646,3647],{"class":388},"Dark mode on iOS",[356,3649,463],{"class":361},[356,3651,139],{"class":365},[356,3653,369],{"class":361},[356,3655,3656,3658,3660],{"class":358,"line":124},[356,3657,482],{"class":361},[356,3659,135],{"class":365},[356,3661,369],{"class":361},[356,3663,3664],{"class":358,"line":48},[356,3665,1482],{"emptyLinePlaceholder":14},[356,3667,3668,3670,3672],{"class":358,"line":23},[356,3669,407],{"class":361},[356,3671,135],{"class":365},[356,3673,369],{"class":361},[356,3675,3676,3678,3680,3682,3684,3686,3689,3691,3693,3696,3698,3700],{"class":358,"line":140},[356,3677,417],{"class":361},[356,3679,139],{"class":365},[356,3681,423],{"class":422},[356,3683,426],{"class":361},[356,3685,429],{"class":361},[356,3687,3688],{"class":432},"text-base",[356,3690,429],{"class":361},[356,3692,412],{"class":361},[356,3694,3695],{"class":388},"Everything else",[356,3697,463],{"class":361},[356,3699,139],{"class":365},[356,3701,369],{"class":361},[356,3703,3704,3706,3708],{"class":358,"line":56},[356,3705,482],{"class":361},[356,3707,135],{"class":365},[356,3709,369],{"class":361},[356,3711,3712,3714,3716],{"class":358,"line":80},[356,3713,491],{"class":361},[356,3715,30],{"class":365},[356,3717,369],{"class":361},[356,3719,3720,3722,3724],{"class":358,"line":36},[356,3721,500],{"class":361},[356,3723,69],{"class":365},[356,3725,369],{"class":361},[356,3727,3728,3730,3732],{"class":358,"line":73},[356,3729,463],{"class":361},[356,3731,366],{"class":365},[356,3733,369],{"class":361},[514,3735,3736],{"type":870},[326,3737,3738,3739,1058,3741,526],{},"This applies to any client variant that compiles to an at-rule, like ",[341,3740,2788],{},[341,3742,2748],{},[333,3744,3746],{"id":3745},"customization","Customization",[326,3748,3749,3750,3753,3754,3756,3757,3760,3761,3765],{},"Tailwind CSS 4 is configured in CSS, there's no ",[341,3751,3752],{},"tailwind.config.js"," anymore. You customize the theme directly inside the ",[341,3755,536],{}," tag or via the ",[341,3758,3759],{},"#config"," slot on the ",[885,3762,3763],{"href":134},[341,3764,343],{}," component.",[1089,3767,3769],{"id":3768},"theme-tokens","Theme tokens",[326,3771,3772,3773,3776],{},"Use ",[341,3774,3775],{},"@theme"," to add or override design tokens (colors, fonts, spacing, breakpoints, …):",[346,3778,3782],{"className":3779,"code":3780,"filename":350,"language":3781,"meta":352,"style":352},"language-xml shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CLayout>\n    \u003CHead>\n      \u003Cstyle>\n        @import \"@maizzle\u002Ftailwindcss\";\n\n        @theme {\n          --color-brand: #4f46e5;\n          --color-brand-dark: #3730a3;\n          --font-display: \"Inter\", sans-serif;\n        }\n      \u003C\u002Fstyle>\n    \u003C\u002FHead>\n    \u003CContainer class=\"bg-brand-dark\">\n      \u003CText class=\"text-brand font-display\">Hello!\u003C\u002FText>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","xml",[341,3783,3784,3792,3800,3808,3816,3821,3825,3830,3835,3840,3845,3849,3857,3865,3884,3911,3919,3927],{"__ignoreMap":352},[356,3785,3786,3788,3790],{"class":358,"line":18},[356,3787,362],{"class":361},[356,3789,366],{"class":365},[356,3791,369],{"class":361},[356,3793,3794,3796,3798],{"class":358,"line":13},[356,3795,374],{"class":361},[356,3797,76],{"class":365},[356,3799,369],{"class":361},[356,3801,3802,3804,3806],{"class":358,"line":32},[356,3803,383],{"class":361},[356,3805,59],{"class":365},[356,3807,369],{"class":361},[356,3809,3810,3812,3814],{"class":358,"line":27},[356,3811,407],{"class":361},[356,3813,588],{"class":365},[356,3815,369],{"class":361},[356,3817,3818],{"class":358,"line":52},[356,3819,3820],{"class":388},"        @import \"@maizzle\u002Ftailwindcss\";\n",[356,3822,3823],{"class":358,"line":128},[356,3824,1482],{"emptyLinePlaceholder":14},[356,3826,3827],{"class":358,"line":124},[356,3828,3829],{"class":388},"        @theme {\n",[356,3831,3832],{"class":358,"line":48},[356,3833,3834],{"class":388},"          --color-brand: #4f46e5;\n",[356,3836,3837],{"class":358,"line":23},[356,3838,3839],{"class":388},"          --color-brand-dark: #3730a3;\n",[356,3841,3842],{"class":358,"line":140},[356,3843,3844],{"class":388},"          --font-display: \"Inter\", sans-serif;\n",[356,3846,3847],{"class":358,"line":56},[356,3848,1529],{"class":388},[356,3850,3851,3853,3855],{"class":358,"line":80},[356,3852,482],{"class":361},[356,3854,588],{"class":365},[356,3856,369],{"class":361},[356,3858,3859,3861,3863],{"class":358,"line":36},[356,3860,491],{"class":361},[356,3862,59],{"class":365},[356,3864,369],{"class":361},[356,3866,3867,3869,3871,3873,3875,3877,3880,3882],{"class":358,"line":73},[356,3868,383],{"class":361},[356,3870,51],{"class":365},[356,3872,423],{"class":422},[356,3874,426],{"class":388},[356,3876,429],{"class":361},[356,3878,3879],{"class":432},"bg-brand-dark",[356,3881,429],{"class":361},[356,3883,369],{"class":361},[356,3885,3886,3888,3890,3892,3894,3896,3899,3901,3903,3905,3907,3909],{"class":358,"line":132},[356,3887,407],{"class":361},[356,3889,139],{"class":365},[356,3891,423],{"class":422},[356,3893,426],{"class":388},[356,3895,429],{"class":361},[356,3897,3898],{"class":432},"text-brand font-display",[356,3900,429],{"class":361},[356,3902,412],{"class":361},[356,3904,460],{"class":388},[356,3906,463],{"class":361},[356,3908,139],{"class":365},[356,3910,369],{"class":361},[356,3912,3913,3915,3917],{"class":358,"line":66},[356,3914,491],{"class":361},[356,3916,51],{"class":365},[356,3918,369],{"class":361},[356,3920,3921,3923,3925],{"class":358,"line":112},[356,3922,500],{"class":361},[356,3924,76],{"class":365},[356,3926,369],{"class":361},[356,3928,3929,3931,3933],{"class":358,"line":40},[356,3930,463],{"class":361},[356,3932,366],{"class":365},[356,3934,369],{"class":361},[326,3936,3937,3938,3940,3941,2852,3944,2852,3946,3949],{},"Anything declared under ",[341,3939,3775],{}," becomes a utility (",[341,3942,3943],{},"text-brand",[341,3945,3879],{},[341,3947,3948],{},"font-display","…) and is available in your templates and components.",[1089,3951,3953],{"id":3952},"override-defaults","Override defaults",[326,3955,3956,3957,3960,3961,3964],{},"Use the same token names as Tailwind's defaults to override them. For example, redefine the default ",[341,3958,3959],{},"sans"," font or the ",[341,3962,3963],{},"slate"," palette:",[346,3966,3970],{"className":3967,"code":3968,"filename":2970,"language":3969,"meta":352,"style":352},"language-postcss shiki shiki-themes laserwave","@theme {\n  --font-sans: \"Inter\", \"Helvetica Neue\", Arial, sans-serif;\n  --color-slate-50: #f8fafc;\n  --color-slate-900: #0f172a;\n}\n","postcss",[341,3971,3972,3980,3996,4001,4006],{"__ignoreMap":352},[356,3973,3974,3977],{"class":358,"line":18},[356,3975,3976],{"class":598},"@theme ",[356,3978,3979],{"class":388},"{\n",[356,3981,3982,3985,3988,3990,3993],{"class":358,"line":13},[356,3983,3984],{"class":388},"  --font-sans: ",[356,3986,3987],{"class":432},"\"Inter\"",[356,3989,2852],{"class":388},[356,3991,3992],{"class":432},"\"Helvetica Neue\"",[356,3994,3995],{"class":388},", Arial, sans-serif;\n",[356,3997,3998],{"class":358,"line":32},[356,3999,4000],{"class":388},"  --color-slate-50: #f8fafc;\n",[356,4002,4003],{"class":358,"line":27},[356,4004,4005],{"class":388},"  --color-slate-900: #0f172a;\n",[356,4007,4008],{"class":358,"line":52},[356,4009,3567],{"class":388},[1089,4011,4013],{"id":4012},"custom-variants","Custom variants",[326,4015,4016,4017,4020,4021,4024],{},"Define your own variants with ",[341,4018,4019],{},"@custom-variant",". For example, here's an ",[341,4022,4023],{},"any-hover:"," variant that only applies hover styles in clients where the user has a pointing device:",[546,4026,4027,4099,4151],{},[549,4028,4030],{"label":4029},"tailwind.css",[346,4031,4033],{"className":3967,"code":4032,"language":3969,"meta":352,"style":352},"@import \"@maizzle\u002Ftailwindcss\";\n\n@custom-variant any-hover {\n  @media (any-hover: hover) {\n    &:hover {\n      @slot;\n    }\n  }\n}\n",[341,4034,4035,4045,4049,4057,4071,4080,4087,4091,4095],{"__ignoreMap":352},[356,4036,4037,4040,4043],{"class":358,"line":18},[356,4038,4039],{"class":598},"@import ",[356,4041,4042],{"class":432},"\"@maizzle\u002Ftailwindcss\"",[356,4044,609],{"class":388},[356,4046,4047],{"class":358,"line":13},[356,4048,1482],{"emptyLinePlaceholder":14},[356,4050,4051,4054],{"class":358,"line":32},[356,4052,4053],{"class":598},"@custom-variant ",[356,4055,4056],{"class":388},"any-hover {\n",[356,4058,4059,4062,4065,4068],{"class":358,"line":27},[356,4060,4061],{"class":598},"  @media ",[356,4063,4064],{"class":388},"(",[356,4066,4067],{"class":598},"any-hover",[356,4069,4070],{"class":388},": hover) {\n",[356,4072,4073,4076,4078],{"class":358,"line":52},[356,4074,4075],{"class":365},"    &",[356,4077,1057],{"class":422},[356,4079,1311],{"class":388},[356,4081,4082,4085],{"class":358,"line":128},[356,4083,4084],{"class":598},"      @slot",[356,4086,609],{"class":388},[356,4088,4089],{"class":358,"line":124},[356,4090,1334],{"class":388},[356,4092,4093],{"class":358,"line":48},[356,4094,3562],{"class":388},[356,4096,4097],{"class":358,"line":23},[356,4098,3567],{"class":388},[549,4100,4101],{"label":350},[346,4102,4104],{"className":1274,"code":4103,"language":1276,"meta":352,"style":352},"\u002F\u002F [!code word:any-hover\\:text-blue-700]\n\u003Ca href=\"#\" class=\"text-blue-600 any-hover:text-blue-700\">\n  Read more\n\u003C\u002Fa>\n",[341,4105,4106,4138,4143],{"__ignoreMap":352},[356,4107,4108,4110,4112,4114,4116,4118,4120,4122,4124,4126,4128,4131,4134,4136],{"class":358,"line":13},[356,4109,362],{"class":361},[356,4111,885],{"class":365},[356,4113,764],{"class":422},[356,4115,426],{"class":361},[356,4117,429],{"class":361},[356,4119,1519],{"class":432},[356,4121,429],{"class":361},[356,4123,423],{"class":422},[356,4125,426],{"class":361},[356,4127,429],{"class":361},[356,4129,4130],{"class":432},"text-blue-600 ",[356,4132,4133],{"class":1911},"any-hover:text-blue-700",[356,4135,429],{"class":361},[356,4137,369],{"class":361},[356,4139,4140],{"class":358,"line":32},[356,4141,4142],{"class":388},"  Read more\n",[356,4144,4145,4147,4149],{"class":358,"line":27},[356,4146,463],{"class":361},[356,4148,885],{"class":365},[356,4150,369],{"class":361},[549,4152,4154],{"label":4153},"dist\u002Fexample.html",[346,4155,4157],{"className":1274,"code":4156,"language":1276,"meta":352,"style":352},"\u003Chead>\n  \u003Cstyle>\n    @media (any-hover: hover) {\n      .any-hover-text-blue-700:hover {\n        color: #155dfc !important;\n      }\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ca href=\"#\" class=\"any-hover-text-blue-700\" style=\"color: #155dfc;\">\n    Read more\n  \u003C\u002Fa>\n\u003C\u002Fbody>\n",[341,4158,4159,4167,4175,4195,4209,4225,4230,4234,4242,4250,4258,4297,4302,4310],{"__ignoreMap":352},[356,4160,4161,4163,4165],{"class":358,"line":18},[356,4162,362],{"class":361},[356,4164,1285],{"class":365},[356,4166,369],{"class":361},[356,4168,4169,4171,4173],{"class":358,"line":13},[356,4170,374],{"class":361},[356,4172,588],{"class":365},[356,4174,369],{"class":361},[356,4176,4177,4180,4182,4184,4186,4188,4191,4193],{"class":358,"line":32},[356,4178,4179],{"class":361},"    @",[356,4181,3477],{"class":598},[356,4183,3480],{"class":361},[356,4185,4067],{"class":388},[356,4187,544],{"class":361},[356,4189,4190],{"class":388}," hover",[356,4192,1087],{"class":361},[356,4194,1311],{"class":361},[356,4196,4197,4200,4203,4205,4207],{"class":358,"line":27},[356,4198,4199],{"class":361},"      .",[356,4201,4202],{"class":422},"any-hover-text-blue-700",[356,4204,544],{"class":361},[356,4206,1308],{"class":422},[356,4208,1311],{"class":361},[356,4210,4211,4214,4216,4218,4221,4223],{"class":358,"line":52},[356,4212,4213],{"class":598},"        color",[356,4215,544],{"class":361},[356,4217,1321],{"class":361},[356,4219,4220],{"class":388},"155dfc ",[356,4222,1327],{"class":598},[356,4224,609],{"class":361},[356,4226,4227],{"class":358,"line":128},[356,4228,4229],{"class":361},"      }\n",[356,4231,4232],{"class":358,"line":124},[356,4233,1334],{"class":361},[356,4235,4236,4238,4240],{"class":358,"line":48},[356,4237,500],{"class":361},[356,4239,588],{"class":365},[356,4241,369],{"class":361},[356,4243,4244,4246,4248],{"class":358,"line":23},[356,4245,463],{"class":361},[356,4247,1285],{"class":365},[356,4249,369],{"class":361},[356,4251,4252,4254,4256],{"class":358,"line":140},[356,4253,362],{"class":361},[356,4255,1357],{"class":365},[356,4257,369],{"class":361},[356,4259,4260,4262,4264,4266,4268,4270,4272,4274,4276,4278,4280,4282,4284,4286,4288,4290,4293,4295],{"class":358,"line":56},[356,4261,374],{"class":361},[356,4263,885],{"class":365},[356,4265,764],{"class":422},[356,4267,426],{"class":361},[356,4269,429],{"class":361},[356,4271,1519],{"class":432},[356,4273,429],{"class":361},[356,4275,423],{"class":422},[356,4277,426],{"class":361},[356,4279,429],{"class":361},[356,4281,4202],{"class":432},[356,4283,429],{"class":361},[356,4285,1573],{"class":422},[356,4287,426],{"class":361},[356,4289,429],{"class":361},[356,4291,4292],{"class":432},"color: #155dfc;",[356,4294,429],{"class":361},[356,4296,369],{"class":361},[356,4298,4299],{"class":358,"line":80},[356,4300,4301],{"class":388},"    Read more\n",[356,4303,4304,4306,4308],{"class":358,"line":36},[356,4305,500],{"class":361},[356,4307,885],{"class":365},[356,4309,369],{"class":361},[356,4311,4312,4314,4316],{"class":358,"line":73},[356,4313,463],{"class":361},[356,4315,1357],{"class":365},[356,4317,369],{"class":361},[1089,4319,4321],{"id":4320},"per-template-config","Per-template config",[326,4323,4324,4325,4329],{},"Pass a config slot to the ",[885,4326,4327],{"href":134},[341,4328,343],{}," component to scope tokens to one template:",[346,4331,4333],{"className":554,"code":4332,"filename":3582,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CTailwind>\n    \u003Ctemplate #config>\n      @import \"@maizzle\u002Ftailwindcss\";\n\n      @theme {\n        --color-brand: #f59e0b;\n      }\n    \u003C\u002Ftemplate>\n\n    \u003CBody>\n      \u003CText class=\"text-brand\">Limited-time offer.\u003C\u002FText>\n    \u003C\u002FBody>\n  \u003C\u002FTailwind>\n\u003C\u002Ftemplate>\n",[341,4334,4335,4343,4351,4364,4369,4373,4378,4383,4387,4395,4399,4407,4433,4441,4449],{"__ignoreMap":352},[356,4336,4337,4339,4341],{"class":358,"line":18},[356,4338,362],{"class":361},[356,4340,366],{"class":365},[356,4342,369],{"class":361},[356,4344,4345,4347,4349],{"class":358,"line":13},[356,4346,374],{"class":361},[356,4348,135],{"class":365},[356,4350,369],{"class":361},[356,4352,4353,4355,4357,4359,4362],{"class":358,"line":32},[356,4354,383],{"class":361},[356,4356,366],{"class":365},[356,4358,1321],{"class":361},[356,4360,4361],{"class":422},"config",[356,4363,369],{"class":361},[356,4365,4366],{"class":358,"line":27},[356,4367,4368],{"class":388},"      @import \"@maizzle\u002Ftailwindcss\";\n",[356,4370,4371],{"class":358,"line":52},[356,4372,1482],{"emptyLinePlaceholder":14},[356,4374,4375],{"class":358,"line":128},[356,4376,4377],{"class":388},"      @theme {\n",[356,4379,4380],{"class":358,"line":124},[356,4381,4382],{"class":388},"        --color-brand: #f59e0b;\n",[356,4384,4385],{"class":358,"line":48},[356,4386,4229],{"class":388},[356,4388,4389,4391,4393],{"class":358,"line":23},[356,4390,491],{"class":361},[356,4392,366],{"class":365},[356,4394,369],{"class":361},[356,4396,4397],{"class":358,"line":140},[356,4398,1482],{"emptyLinePlaceholder":14},[356,4400,4401,4403,4405],{"class":358,"line":56},[356,4402,383],{"class":361},[356,4404,30],{"class":365},[356,4406,369],{"class":361},[356,4408,4409,4411,4413,4415,4417,4419,4421,4423,4425,4427,4429,4431],{"class":358,"line":80},[356,4410,407],{"class":361},[356,4412,139],{"class":365},[356,4414,423],{"class":422},[356,4416,426],{"class":361},[356,4418,429],{"class":361},[356,4420,3943],{"class":432},[356,4422,429],{"class":361},[356,4424,412],{"class":361},[356,4426,3111],{"class":388},[356,4428,463],{"class":361},[356,4430,139],{"class":365},[356,4432,369],{"class":361},[356,4434,4435,4437,4439],{"class":358,"line":36},[356,4436,491],{"class":361},[356,4438,30],{"class":365},[356,4440,369],{"class":361},[356,4442,4443,4445,4447],{"class":358,"line":73},[356,4444,500],{"class":361},[356,4446,135],{"class":365},[356,4448,369],{"class":361},[356,4450,4451,4453,4455],{"class":358,"line":132},[356,4452,463],{"class":361},[356,4454,366],{"class":365},[356,4456,369],{"class":361},[333,4458,4460],{"id":4459},"intellisense","Intellisense",[326,4462,4463,4464,4469,4470,4473,4474,4476],{},"To get ",[885,4465,4468],{"href":4466,"rel":4467,"target":1104},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=bradlc.vscode-tailwindcss",[1103],"Tailwind CSS Intellisense"," working, you need an actual ",[341,4471,4472],{},".css"," file that imports Tailwind in your project. For example, the official Maizzle starter includes a ",[341,4475,4029],{}," file:",[346,4478,4480],{"className":2968,"code":4479,"filename":4029,"language":2970,"meta":352,"style":352},"@import \"@maizzle\u002Ftailwindcss\";\n",[341,4481,4482],{"__ignoreMap":352},[356,4483,4484,4486,4488,4490,4492,4494],{"class":358,"line":18},[356,4485,3474],{"class":361},[356,4487,599],{"class":598},[356,4489,602],{"class":361},[356,4491,532],{"class":432},[356,4493,429],{"class":361},[356,4495,609],{"class":361},[588,4497,4498],{},"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 .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}",{"title":352,"searchDepth":13,"depth":13,"links":4500},[4501,4502,4507,4508,4509,4513,4518,4524],{"id":335,"depth":13,"text":336},{"id":995,"depth":13,"text":996,"children":4503},[4504,4505,4506],{"id":1091,"depth":32,"text":1092},{"id":1109,"depth":32,"text":1110},{"id":1133,"depth":32,"text":1134},{"id":1422,"depth":13,"text":1423},{"id":1624,"depth":13,"text":1625},{"id":1680,"depth":13,"text":173,"children":4510},[4511,4512],{"id":1688,"depth":32,"text":1689},{"id":2330,"depth":32,"text":2331},{"id":2575,"depth":13,"text":2576,"children":4514},[4515,4516],{"id":2951,"depth":32,"text":2952},{"id":3440,"depth":32,"text":4517},"Stacking with dark:",{"id":3745,"depth":13,"text":3746,"children":4519},[4520,4521,4522,4523],{"id":3768,"depth":32,"text":3769},{"id":3952,"depth":32,"text":3953},{"id":4012,"depth":32,"text":4013},{"id":4320,"depth":32,"text":4321},{"id":4459,"depth":13,"text":4460},"Learn how to use Tailwind CSS to style HTML email templates with CSS utility classes.","md",{"navTitle":255},{"title":255,"description":4525},"docs\u002Ftailwindcss","cMTzVUvNrk99K8SS_1A6HOJkWdXoFtLxmaxJ_sD4pJM",1781013239603]