[{"data":1,"prerenderedAt":973},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/examples/grids":270,"docs-bottom-nav":900},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":186,"body":272,"description":892,"extension":893,"meta":894,"navigation":895,"path":187,"seo":896,"sitemap":897,"stem":898,"__hash__":899},"docs/docs/examples/grids.md",{"type":273,"value":274,"toc":887},"minimark",[275,279,283,288,291,458,469,473,476,597,601,604,612,735,753,876,883],[276,277,186],"h1",{"id":278},"grids",[280,281,282],"p",{},"You'll sometimes need to create multi-column HTML email layouts. Here's how to create a responsive email grid with Tailwind CSS in Maizzle.",[284,285,287],"h2",{"id":286},"percentage","Percentage",[280,289,290],{},"The simplest (and recommended) approach is to use Tailwind percentage widths:",[292,293,296,297,331],"div",{"className":294},[295],"example-preview","\n  ",[292,298,302,303,296],{"className":299},[300,301],"not-prose","px-4","\n    ",[304,305,309,310],"table",{"className":306},[307,308],"w-full","max-w-[600px]","\n      ",[311,312,313,302],"tbody",{},[314,315,316,317,316,325,309],"tr",{},"\n        ",[318,319,324],"td",{"className":320},[321,322,323],"w-4/12","bg-slate-200","p-2","4 cols",[318,326,330],{"className":327},[328,329,323],"w-8/12","bg-slate-300","8 cols",[332,333,338],"pre",{"className":334,"code":335,"language":336,"meta":337,"style":337},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Ctable class=\"w-[600px] sm:w-full\">\n  \u003Ctr>\n    \u003Ctd class=\"w-4/12\">4 cols\u003C/td>\n    \u003Ctd class=\"w-8/12\">8 cols\u003C/td>\n  \u003C/tr>\n\u003C/table>\n","html","",[339,340,341,372,382,412,439,449],"code",{"__ignoreMap":337},[342,343,346,350,353,357,360,363,367,369],"span",{"class":344,"line":345},"line",1,[342,347,349],{"class":348},"soJEP","\u003C",[342,351,304],{"class":352},"sizJ4",[342,354,356],{"class":355},"sQMLp"," class",[342,358,359],{"class":348},"=",[342,361,362],{"class":355},"\"",[342,364,366],{"class":365},"sfCc6","w-[600px] sm:w-full",[342,368,362],{"class":355},[342,370,371],{"class":348},">\n",[342,373,375,378,380],{"class":344,"line":374},2,[342,376,377],{"class":348},"  \u003C",[342,379,314],{"class":352},[342,381,371],{"class":348},[342,383,385,388,390,392,394,396,398,400,403,405,408,410],{"class":344,"line":384},3,[342,386,387],{"class":348},"    \u003C",[342,389,318],{"class":352},[342,391,356],{"class":355},[342,393,359],{"class":348},[342,395,362],{"class":355},[342,397,321],{"class":365},[342,399,362],{"class":355},[342,401,402],{"class":348},">",[342,404,324],{"class":365},[342,406,407],{"class":348},"\u003C/",[342,409,318],{"class":352},[342,411,371],{"class":348},[342,413,415,417,419,421,423,425,427,429,431,433,435,437],{"class":344,"line":414},4,[342,416,387],{"class":348},[342,418,318],{"class":352},[342,420,356],{"class":355},[342,422,359],{"class":348},[342,424,362],{"class":355},[342,426,328],{"class":365},[342,428,362],{"class":355},[342,430,402],{"class":348},[342,432,330],{"class":365},[342,434,407],{"class":348},[342,436,318],{"class":352},[342,438,371],{"class":348},[342,440,442,445,447],{"class":344,"line":441},5,[342,443,444],{"class":348},"  \u003C/",[342,446,314],{"class":352},[342,448,371],{"class":348},[342,450,452,454,456],{"class":344,"line":451},6,[342,453,407],{"class":348},[342,455,304],{"class":352},[342,457,371],{"class":348},[280,459,460,461,464,465,468],{},"Tailwind comes configured with 2, 3, 4, 5, 6 and 12 column grids, so you can create columns with classes like ",[339,462,463],{},"w-2/3"," or ",[339,466,467],{},"w-4/6",".",[284,470,472],{"id":471},"fixed","Fixed",[280,474,475],{},"Of course, you can use fixed widths if you prefer.",[292,477,296,479,497],{"className":478},[295],[292,480,302,482,296],{"className":481},[300],[304,483,309,485],{"className":484},[307,308],[311,486,487,302],{},[314,488,316,489,316,494,309],{},[318,490,493],{"className":491},[322,323,492],"w-[300px]","300px",[318,495,493],{"className":496},[329,323,492],[332,498,500],{"className":334,"code":499,"language":336,"meta":337,"style":337},"\u003Ctable class=\"w-[600px] sm:w-full\">\n  \u003Ctr>\n    \u003Ctd class=\"w-[300px]\">6 cols\u003C/td>\n    \u003Ctd class=\"w-[300px]\">6 cols\u003C/td>\n  \u003C/tr>\n\u003C/table>\n",[339,501,502,520,528,555,581,589],{"__ignoreMap":337},[342,503,504,506,508,510,512,514,516,518],{"class":344,"line":345},[342,505,349],{"class":348},[342,507,304],{"class":352},[342,509,356],{"class":355},[342,511,359],{"class":348},[342,513,362],{"class":355},[342,515,366],{"class":365},[342,517,362],{"class":355},[342,519,371],{"class":348},[342,521,522,524,526],{"class":344,"line":374},[342,523,377],{"class":348},[342,525,314],{"class":352},[342,527,371],{"class":348},[342,529,530,532,534,536,538,540,542,544,546,549,551,553],{"class":344,"line":384},[342,531,387],{"class":348},[342,533,318],{"class":352},[342,535,356],{"class":355},[342,537,359],{"class":348},[342,539,362],{"class":355},[342,541,492],{"class":365},[342,543,362],{"class":355},[342,545,402],{"class":348},[342,547,548],{"class":365},"6 cols",[342,550,407],{"class":348},[342,552,318],{"class":352},[342,554,371],{"class":348},[342,556,557,559,561,563,565,567,569,571,573,575,577,579],{"class":344,"line":414},[342,558,387],{"class":348},[342,560,318],{"class":352},[342,562,356],{"class":355},[342,564,359],{"class":348},[342,566,362],{"class":355},[342,568,492],{"class":365},[342,570,362],{"class":355},[342,572,402],{"class":348},[342,574,548],{"class":365},[342,576,407],{"class":348},[342,578,318],{"class":352},[342,580,371],{"class":348},[342,582,583,585,587],{"class":344,"line":441},[342,584,444],{"class":348},[342,586,314],{"class":352},[342,588,371],{"class":348},[342,590,591,593,595],{"class":344,"line":451},[342,592,407],{"class":348},[342,594,304],{"class":352},[342,596,371],{"class":348},[284,598,600],{"id":599},"stacking","Stacking",[280,602,603],{},"Responsive HTML emails usually reset the columns to stack on mobile. We can easily achieve this with a couple utility classes.",[280,605,606,607,611],{},"Using the ",[608,609,286],"a",{"href":610},"#percentage"," example, we might do:",[292,613,296,615,634],{"className":614},[295],[292,616,302,618,296],{"className":617},[300],[304,619,309,621],{"className":620},[307,308],[311,622,623,302],{},[314,624,316,625,316,630,309],{},[318,626,324],{"className":627},[307,628,629,322,323],"sm:w-4/12","inline-block",[318,631,330],{"className":632},[307,633,629,329,323],"sm:w-8/12",[332,635,637],{"className":334,"code":636,"language":336,"meta":337,"style":337},"\u003Ctable class=\"w-[600px] sm:w-full\">\n  \u003Ctr>\n    \u003Ctd class=\"w-4/12 sm:w-full inline-block\">4 cols\u003C/td>\n    \u003Ctd class=\"w-8/12 sm:w-full inline-block\">8 cols\u003C/td>\n  \u003C/tr>\n\u003C/table>\n",[339,638,639,657,665,692,719,727],{"__ignoreMap":337},[342,640,641,643,645,647,649,651,653,655],{"class":344,"line":345},[342,642,349],{"class":348},[342,644,304],{"class":352},[342,646,356],{"class":355},[342,648,359],{"class":348},[342,650,362],{"class":355},[342,652,366],{"class":365},[342,654,362],{"class":355},[342,656,371],{"class":348},[342,658,659,661,663],{"class":344,"line":374},[342,660,377],{"class":348},[342,662,314],{"class":352},[342,664,371],{"class":348},[342,666,667,669,671,673,675,677,680,682,684,686,688,690],{"class":344,"line":384},[342,668,387],{"class":348},[342,670,318],{"class":352},[342,672,356],{"class":355},[342,674,359],{"class":348},[342,676,362],{"class":355},[342,678,679],{"class":365},"w-4/12 sm:w-full inline-block",[342,681,362],{"class":355},[342,683,402],{"class":348},[342,685,324],{"class":365},[342,687,407],{"class":348},[342,689,318],{"class":352},[342,691,371],{"class":348},[342,693,694,696,698,700,702,704,707,709,711,713,715,717],{"class":344,"line":414},[342,695,387],{"class":348},[342,697,318],{"class":352},[342,699,356],{"class":355},[342,701,359],{"class":348},[342,703,362],{"class":355},[342,705,706],{"class":365},"w-8/12 sm:w-full inline-block",[342,708,362],{"class":355},[342,710,402],{"class":348},[342,712,330],{"class":365},[342,714,407],{"class":348},[342,716,318],{"class":352},[342,718,371],{"class":348},[342,720,721,723,725],{"class":344,"line":441},[342,722,444],{"class":348},[342,724,314],{"class":352},[342,726,371],{"class":348},[342,728,729,731,733],{"class":344,"line":451},[342,730,407],{"class":348},[342,732,304],{"class":352},[342,734,371],{"class":348},[280,736,737,738,741,742,744,745,748,749,752],{},"Some email clients strip the ",[339,739,740],{},"doctype"," of your email, which prevents ",[339,743,629],{}," from working on ",[339,746,747],{},"\u003Ctd>",". This can be fixed by using ",[339,750,751],{},"\u003Cth>"," instead, but requires resetting the font weight and text alignment:",[292,754,296,756,775],{"className":755},[295],[292,757,302,759,296],{"className":758},[300],[304,760,309,762],{"className":761},[307,308],[311,763,764,302],{},[314,765,316,766,316,772,309],{},[767,768,324],"th",{"className":769},[307,628,629,322,323,770,771],"font-normal","text-left",[767,773,330],{"className":774},[307,633,629,329,323,770,771],[332,776,778],{"className":334,"code":777,"language":336,"meta":337,"style":337},"\u003Ctable class=\"w-[600px] sm:w-full\">\n  \u003Ctr>\n    \u003Cth class=\"w-4/12 sm:w-full inline-block font-normal text-left\">4 cols\u003C/th>\n    \u003Cth class=\"w-8/12 sm:w-full inline-block font-normal text-left\">8 cols\u003C/th>\n  \u003C/tr>\n\u003C/table>\n",[339,779,780,798,806,833,860,868],{"__ignoreMap":337},[342,781,782,784,786,788,790,792,794,796],{"class":344,"line":345},[342,783,349],{"class":348},[342,785,304],{"class":352},[342,787,356],{"class":355},[342,789,359],{"class":348},[342,791,362],{"class":355},[342,793,366],{"class":365},[342,795,362],{"class":355},[342,797,371],{"class":348},[342,799,800,802,804],{"class":344,"line":374},[342,801,377],{"class":348},[342,803,314],{"class":352},[342,805,371],{"class":348},[342,807,808,810,812,814,816,818,821,823,825,827,829,831],{"class":344,"line":384},[342,809,387],{"class":348},[342,811,767],{"class":352},[342,813,356],{"class":355},[342,815,359],{"class":348},[342,817,362],{"class":355},[342,819,820],{"class":365},"w-4/12 sm:w-full inline-block font-normal text-left",[342,822,362],{"class":355},[342,824,402],{"class":348},[342,826,324],{"class":365},[342,828,407],{"class":348},[342,830,767],{"class":352},[342,832,371],{"class":348},[342,834,835,837,839,841,843,845,848,850,852,854,856,858],{"class":344,"line":414},[342,836,387],{"class":348},[342,838,767],{"class":352},[342,840,356],{"class":355},[342,842,359],{"class":348},[342,844,362],{"class":355},[342,846,847],{"class":365},"w-8/12 sm:w-full inline-block font-normal text-left",[342,849,362],{"class":355},[342,851,402],{"class":348},[342,853,330],{"class":365},[342,855,407],{"class":348},[342,857,767],{"class":352},[342,859,371],{"class":348},[342,861,862,864,866],{"class":344,"line":441},[342,863,444],{"class":348},[342,865,314],{"class":352},[342,867,371],{"class":348},[342,869,870,872,874],{"class":344,"line":451},[342,871,407],{"class":348},[342,873,304],{"class":352},[342,875,371],{"class":348},[280,877,878,879,882],{},"Need a custom column stacking order on mobile? See the ",[608,880,881],{"href":193},"reverse stack"," docs.",[884,885,886],"style",{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":337,"searchDepth":374,"depth":374,"links":888},[889,890,891],{"id":286,"depth":374,"text":287},{"id":471,"depth":374,"text":472},{"id":599,"depth":374,"text":600},"Learn how to create a simple grid system for HTML email with Tailwind CSS in Maizzle.","md",{},true,{"title":186,"description":892},{"loc":187},"docs/examples/grids","X3WA9XrI_NijyX8dh-np1a3alN9m_R1VcmoOTOS0_7k",{"id":4,"extension":5,"items":901,"meta":972,"stem":195,"__hash__":196},[902,912,917,926,939,957,963],{"name":8,"items":903},[904,905,906,907,908,909,910,911],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":913},[914,915,916],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":918},[919,920,921,922,923,924,925],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":927},[928,929,930,931,932,933,934,935,936,937,938],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":940},[941,942,943,944,945,946,947,948,949,950,951,952,953,954,955,956],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":958},[959,960,961,962],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":964},[965,966,967,968,969,970,971],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318593066]