[{"data":1,"prerenderedAt":1598},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/api":270,"docs-bottom-nav":1525},{"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":102,"body":272,"description":1518,"extension":1519,"meta":1520,"navigation":343,"path":103,"seo":1521,"sitemap":1522,"stem":1523,"__hash__":1524},"docs/docs/api.md",{"type":273,"value":274,"toc":1504},"minimark",[275,279,283,288,679,693,700,711,722,726,733,752,760,763,848,858,863,871,874,973,977,984,993,999,1186,1195,1199,1202,1245,1249,1256,1260,1266,1270,1280,1289,1293,1304,1316,1326,1335,1338,1341,1344,1367,1371,1384,1501],[276,277,102],"h1",{"id":278},"api",[280,281,282],"p",{},"Use the Maizzle API to compile a string to an HTML email.",[284,285,287],"h2",{"id":286},"example","Example",[289,290,296],"pre",{"className":291,"code":292,"filename":293,"language":294,"meta":295,"style":295},"language-js shiki shiki-themes tailwind-css tailwind-css","import { render } from '@maizzle/framework'\nimport tailwindcssPresetEmail from 'tailwindcss-preset-email'\n\nlet input = `---\ntitle: Hello, world!\n---\n\n\u003C!doctype html>\n\u003Chtml>\n  \u003Chead>\n    \u003Cstyle>\n      @tailwind components;\n      @tailwind utilities;\n    \u003C/style>\n  \u003C/head>\n  \u003Cbody>\n    \u003Cdiv class=\"p-4 bg-blue-500 text-white\">\n      {{ page.title }}\n    \u003C/div>\n  \u003C/body>\n\u003C/html>`\n\nconst { html } = await render(input,\n  {\n    css: {\n      inline: true,\n      purge: true,\n      shorthand: true,\n      tailwind: {\n        presets: [tailwindcssPresetEmail],\n        content: [\n          {\n            raw: input,\n            extension: 'html'\n          }\n        ]\n      }\n    }\n  }\n)\nconsole.log(html)\n","app.js","js","",[297,298,299,325,338,345,362,368,374,379,385,391,397,403,409,415,421,427,433,439,445,451,457,463,468,500,506,518,531,543,555,565,584,595,601,613,624,630,636,642,648,654,660],"code",{"__ignoreMap":295},[300,301,304,308,312,316,319,322],"span",{"class":302,"line":303},"line",1,[300,305,307],{"class":306},"s8qYB","import",[300,309,311],{"class":310},"sprQ5"," {",[300,313,315],{"class":314},"sO1gY"," render",[300,317,318],{"class":310}," }",[300,320,321],{"class":310}," from",[300,323,324],{"class":306}," '@maizzle/framework'\n",[300,326,328,330,333,335],{"class":302,"line":327},2,[300,329,307],{"class":306},[300,331,332],{"class":314}," tailwindcssPresetEmail",[300,334,321],{"class":310},[300,336,337],{"class":306}," 'tailwindcss-preset-email'\n",[300,339,341],{"class":302,"line":340},3,[300,342,344],{"emptyLinePlaceholder":343},true,"\n",[300,346,348,351,354,358],{"class":302,"line":347},4,[300,349,350],{"class":306},"let",[300,352,353],{"class":306}," input",[300,355,357],{"class":356},"sVevU"," =",[300,359,361],{"class":360},"sfCc6"," `---\n",[300,363,365],{"class":302,"line":364},5,[300,366,367],{"class":360},"title: Hello, world!\n",[300,369,371],{"class":302,"line":370},6,[300,372,373],{"class":360},"---\n",[300,375,377],{"class":302,"line":376},7,[300,378,344],{"emptyLinePlaceholder":343},[300,380,382],{"class":302,"line":381},8,[300,383,384],{"class":360},"\u003C!doctype html>\n",[300,386,388],{"class":302,"line":387},9,[300,389,390],{"class":360},"\u003Chtml>\n",[300,392,394],{"class":302,"line":393},10,[300,395,396],{"class":360},"  \u003Chead>\n",[300,398,400],{"class":302,"line":399},11,[300,401,402],{"class":360},"    \u003Cstyle>\n",[300,404,406],{"class":302,"line":405},12,[300,407,408],{"class":360},"      @tailwind components;\n",[300,410,412],{"class":302,"line":411},13,[300,413,414],{"class":360},"      @tailwind utilities;\n",[300,416,418],{"class":302,"line":417},14,[300,419,420],{"class":360},"    \u003C/style>\n",[300,422,424],{"class":302,"line":423},15,[300,425,426],{"class":360},"  \u003C/head>\n",[300,428,430],{"class":302,"line":429},16,[300,431,432],{"class":360},"  \u003Cbody>\n",[300,434,436],{"class":302,"line":435},17,[300,437,438],{"class":360},"    \u003Cdiv class=\"p-4 bg-blue-500 text-white\">\n",[300,440,442],{"class":302,"line":441},18,[300,443,444],{"class":360},"      {{ page.title }}\n",[300,446,448],{"class":302,"line":447},19,[300,449,450],{"class":360},"    \u003C/div>\n",[300,452,454],{"class":302,"line":453},20,[300,455,456],{"class":360},"  \u003C/body>\n",[300,458,460],{"class":302,"line":459},21,[300,461,462],{"class":360},"\u003C/html>`\n",[300,464,466],{"class":302,"line":465},22,[300,467,344],{"emptyLinePlaceholder":343},[300,469,471,474,476,479,482,484,488,491,494,497],{"class":302,"line":470},23,[300,472,473],{"class":306},"const",[300,475,311],{"class":310},[300,477,478],{"class":360}," html ",[300,480,481],{"class":310},"}",[300,483,357],{"class":356},[300,485,487],{"class":486},"sizJ4"," await",[300,489,315],{"class":490},"s2ImL",[300,492,493],{"class":360},"(",[300,495,496],{"class":306},"input",[300,498,499],{"class":310},",\n",[300,501,503],{"class":302,"line":502},24,[300,504,505],{"class":310},"  {\n",[300,507,509,512,515],{"class":302,"line":508},25,[300,510,511],{"class":360},"    css",[300,513,514],{"class":310},":",[300,516,517],{"class":310}," {\n",[300,519,521,524,526,529],{"class":302,"line":520},26,[300,522,523],{"class":360},"      inline",[300,525,514],{"class":310},[300,527,528],{"class":486}," true",[300,530,499],{"class":310},[300,532,534,537,539,541],{"class":302,"line":533},27,[300,535,536],{"class":360},"      purge",[300,538,514],{"class":310},[300,540,528],{"class":486},[300,542,499],{"class":310},[300,544,546,549,551,553],{"class":302,"line":545},28,[300,547,548],{"class":360},"      shorthand",[300,550,514],{"class":310},[300,552,528],{"class":486},[300,554,499],{"class":310},[300,556,558,561,563],{"class":302,"line":557},29,[300,559,560],{"class":360},"      tailwind",[300,562,514],{"class":310},[300,564,517],{"class":310},[300,566,568,571,573,576,579,582],{"class":302,"line":567},30,[300,569,570],{"class":360},"        presets",[300,572,514],{"class":310},[300,574,575],{"class":360}," [",[300,577,578],{"class":306},"tailwindcssPresetEmail",[300,580,581],{"class":360},"]",[300,583,499],{"class":310},[300,585,587,590,592],{"class":302,"line":586},31,[300,588,589],{"class":360},"        content",[300,591,514],{"class":310},[300,593,594],{"class":360}," [\n",[300,596,598],{"class":302,"line":597},32,[300,599,600],{"class":310},"          {\n",[300,602,604,607,609,611],{"class":302,"line":603},33,[300,605,606],{"class":360},"            raw",[300,608,514],{"class":310},[300,610,353],{"class":306},[300,612,499],{"class":310},[300,614,616,619,621],{"class":302,"line":615},34,[300,617,618],{"class":360},"            extension",[300,620,514],{"class":310},[300,622,623],{"class":360}," 'html'\n",[300,625,627],{"class":302,"line":626},35,[300,628,629],{"class":310},"          }\n",[300,631,633],{"class":302,"line":632},36,[300,634,635],{"class":360},"        ]\n",[300,637,639],{"class":302,"line":638},37,[300,640,641],{"class":310},"      }\n",[300,643,645],{"class":302,"line":644},38,[300,646,647],{"class":310},"    }\n",[300,649,651],{"class":302,"line":650},39,[300,652,653],{"class":310},"  }\n",[300,655,657],{"class":302,"line":656},40,[300,658,659],{"class":360},")\n",[300,661,663,666,669,672,674,677],{"class":302,"line":662},41,[300,664,665],{"class":306},"console",[300,667,668],{"class":310},".",[300,670,671],{"class":490},"log",[300,673,493],{"class":360},[300,675,676],{"class":306},"html",[300,678,659],{"class":360},[280,680,681,682,684,685,688,689,692],{},"Your ",[297,683,676],{}," string must include at least ",[297,686,687],{},"\u003Cstyle> @tailwind utilities; \u003C/style>"," inside the ",[297,690,691],{},"\u003Chead>",", otherwise no CSS will be output or inlined.",[280,694,695,696,699],{},"Notice also the ",[297,697,698],{},"css.tailwind"," config.",[280,701,702,703,706,707,710],{},"The ",[297,704,705],{},"content"," key is needed for Tailwind to know where to look for classes to generate - otherwise your ",[297,708,709],{},"\u003Cstyle>"," tag will be empty and no CSS would be inlined either.",[280,712,713,714,717,718,721],{},"We also pass a ",[297,715,716],{},"presets"," array with the ",[297,719,720],{},"tailwindcss-preset-email"," package, which configures Tailwind to output CSS values optimized for HTML email.",[284,723,725],{"id":724},"usage","Usage",[280,727,728,729,732],{},"First, import the ",[297,730,731],{},"render"," method in your application:",[289,734,736],{"className":291,"code":735,"filename":293,"language":294,"meta":295,"style":295},"import { render } from '@maizzle/framework'\n",[297,737,738],{"__ignoreMap":295},[300,739,740,742,744,746,748,750],{"class":302,"line":303},[300,741,307],{"class":306},[300,743,311],{"class":310},[300,745,315],{"class":314},[300,747,318],{"class":310},[300,749,321],{"class":310},[300,751,324],{"class":306},[753,754,755,756,759],"alert",{},"\nUse object destructuring so that you don't import all the other methods from Maizzle, like \n",[297,757,758],{},"serve","\n.\n",[280,761,762],{},"Then, call it with two parameters: the HTML string to compile and a Maizzle config object.",[289,764,766],{"className":291,"code":765,"filename":293,"language":294,"meta":295,"style":295},"import { render } from '@maizzle/framework'\n\nconst options = {\n  // Maizzle config object\n}\n\nconst { html, config } = await render(`html string`, options)\n",[297,767,768,782,786,798,804,809,813],{"__ignoreMap":295},[300,769,770,772,774,776,778,780],{"class":302,"line":303},[300,771,307],{"class":306},[300,773,311],{"class":310},[300,775,315],{"class":314},[300,777,318],{"class":310},[300,779,321],{"class":310},[300,781,324],{"class":306},[300,783,784],{"class":302,"line":327},[300,785,344],{"emptyLinePlaceholder":343},[300,787,788,790,793,796],{"class":302,"line":340},[300,789,473],{"class":306},[300,791,792],{"class":360}," options ",[300,794,795],{"class":356},"=",[300,797,517],{"class":310},[300,799,800],{"class":302,"line":347},[300,801,803],{"class":802},"smVoC","  // Maizzle config object\n",[300,805,806],{"class":302,"line":364},[300,807,808],{"class":310},"}\n",[300,810,811],{"class":302,"line":370},[300,812,344],{"emptyLinePlaceholder":343},[300,814,815,817,819,822,825,828,830,832,834,836,838,841,843,846],{"class":302,"line":376},[300,816,473],{"class":306},[300,818,311],{"class":310},[300,820,821],{"class":360}," html",[300,823,824],{"class":310},",",[300,826,827],{"class":360}," config ",[300,829,481],{"class":310},[300,831,357],{"class":356},[300,833,487],{"class":486},[300,835,315],{"class":490},[300,837,493],{"class":360},[300,839,840],{"class":360},"`html string`",[300,842,824],{"class":310},[300,844,845],{"class":306}," options",[300,847,659],{"class":360},[280,849,702,850,852,853,857],{},[297,851,731],{}," method returns an object containing the compiled HTML and the ",[854,855,856],"a",{"href":39},"Environment config"," that was computed for it.",[859,860,862],"h3",{"id":861},"options","Options",[280,864,865,867,868,668],{},[297,866,861],{}," is an object with Maizzle configuration, like you would do in ",[297,869,870],{},"config.js",[280,872,873],{},"For example:",[289,875,877],{"className":291,"code":876,"language":294,"meta":295,"style":295},"{\n  css: {\n    inline: true,\n    purge: true,\n    shorthand: true,\n  },\n  afterRender({html, config, matter}) {\n    // ...\n  },\n}\n",[297,878,879,884,893,904,915,926,931,960,965,969],{"__ignoreMap":295},[300,880,881],{"class":302,"line":303},[300,882,883],{"class":310},"{\n",[300,885,886,889,891],{"class":302,"line":327},[300,887,888],{"class":486},"  css",[300,890,514],{"class":310},[300,892,517],{"class":310},[300,894,895,898,900,902],{"class":302,"line":340},[300,896,897],{"class":486},"    inline",[300,899,514],{"class":310},[300,901,528],{"class":486},[300,903,499],{"class":310},[300,905,906,909,911,913],{"class":302,"line":347},[300,907,908],{"class":486},"    purge",[300,910,514],{"class":310},[300,912,528],{"class":486},[300,914,499],{"class":310},[300,916,917,920,922,924],{"class":302,"line":364},[300,918,919],{"class":486},"    shorthand",[300,921,514],{"class":310},[300,923,528],{"class":486},[300,925,499],{"class":310},[300,927,928],{"class":302,"line":370},[300,929,930],{"class":310},"  },\n",[300,932,933,936,938,941,943,945,948,950,953,955,958],{"class":302,"line":376},[300,934,935],{"class":490},"  afterRender",[300,937,493],{"class":360},[300,939,940],{"class":310},"{",[300,942,676],{"class":306},[300,944,824],{"class":310},[300,946,947],{"class":306}," config",[300,949,824],{"class":310},[300,951,952],{"class":306}," matter",[300,954,481],{"class":310},[300,956,957],{"class":360},") ",[300,959,883],{"class":310},[300,961,962],{"class":302,"line":381},[300,963,964],{"class":802},"    // ...\n",[300,966,967],{"class":302,"line":387},[300,968,930],{"class":310},[300,970,971],{"class":302,"line":393},[300,972,808],{"class":310},[859,974,976],{"id":975},"tailwindcss","Tailwind CSS",[280,978,979,980,983],{},"When using the API, you might not have a ",[297,981,982],{},"tailwind.config.js"," file in the current directory.",[280,985,986,987,989,990,992],{},"If a ",[297,988,982],{}," cannot be found in the current directory (where you execute the script), the default Tailwind CSS config will be used. In order to avoid this, you may pass your own Tailwind CSS config inside the ",[297,991,861],{}," object.",[280,994,995,996,998],{},"For example, let's use ",[297,997,720],{}," when rendering templates programmatically:",[289,1000,1002],{"className":291,"code":1001,"filename":293,"language":294,"meta":295,"style":295},"import { render } from '@maizzle/framework'\nimport tailwindcssPresetEmail from 'tailwindcss-preset-email'\n\nconst input = `\n  \u003Cstyle>\n    @tailwind utilities;\n  \u003C/style>\n\n  \u003Cdiv class=\"p-2\">Test\u003C/div>`\n\nconst { html } = await render(input, {\n  css: {\n    tailwind: {\n      presets: [tailwindcssPresetEmail],\n      content: [\n        {\n          raw: input,\n          extension: 'html'\n        }\n      ]\n    }\n  }\n})\n",[297,1003,1004,1018,1028,1032,1044,1049,1054,1059,1063,1068,1072,1096,1104,1113,1128,1137,1142,1153,1162,1167,1172,1176,1180],{"__ignoreMap":295},[300,1005,1006,1008,1010,1012,1014,1016],{"class":302,"line":303},[300,1007,307],{"class":306},[300,1009,311],{"class":310},[300,1011,315],{"class":314},[300,1013,318],{"class":310},[300,1015,321],{"class":310},[300,1017,324],{"class":306},[300,1019,1020,1022,1024,1026],{"class":302,"line":327},[300,1021,307],{"class":306},[300,1023,332],{"class":314},[300,1025,321],{"class":310},[300,1027,337],{"class":306},[300,1029,1030],{"class":302,"line":340},[300,1031,344],{"emptyLinePlaceholder":343},[300,1033,1034,1036,1039,1041],{"class":302,"line":347},[300,1035,473],{"class":306},[300,1037,1038],{"class":360}," input ",[300,1040,795],{"class":356},[300,1042,1043],{"class":360}," `\n",[300,1045,1046],{"class":302,"line":364},[300,1047,1048],{"class":360},"  \u003Cstyle>\n",[300,1050,1051],{"class":302,"line":370},[300,1052,1053],{"class":360},"    @tailwind utilities;\n",[300,1055,1056],{"class":302,"line":376},[300,1057,1058],{"class":360},"  \u003C/style>\n",[300,1060,1061],{"class":302,"line":381},[300,1062,344],{"emptyLinePlaceholder":343},[300,1064,1065],{"class":302,"line":387},[300,1066,1067],{"class":360},"  \u003Cdiv class=\"p-2\">Test\u003C/div>`\n",[300,1069,1070],{"class":302,"line":393},[300,1071,344],{"emptyLinePlaceholder":343},[300,1073,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094],{"class":302,"line":399},[300,1075,473],{"class":306},[300,1077,311],{"class":310},[300,1079,478],{"class":360},[300,1081,481],{"class":310},[300,1083,357],{"class":356},[300,1085,487],{"class":486},[300,1087,315],{"class":490},[300,1089,493],{"class":360},[300,1091,496],{"class":306},[300,1093,824],{"class":310},[300,1095,517],{"class":310},[300,1097,1098,1100,1102],{"class":302,"line":405},[300,1099,888],{"class":360},[300,1101,514],{"class":310},[300,1103,517],{"class":310},[300,1105,1106,1109,1111],{"class":302,"line":411},[300,1107,1108],{"class":360},"    tailwind",[300,1110,514],{"class":310},[300,1112,517],{"class":310},[300,1114,1115,1118,1120,1122,1124,1126],{"class":302,"line":417},[300,1116,1117],{"class":360},"      presets",[300,1119,514],{"class":310},[300,1121,575],{"class":360},[300,1123,578],{"class":306},[300,1125,581],{"class":360},[300,1127,499],{"class":310},[300,1129,1130,1133,1135],{"class":302,"line":423},[300,1131,1132],{"class":360},"      content",[300,1134,514],{"class":310},[300,1136,594],{"class":360},[300,1138,1139],{"class":302,"line":429},[300,1140,1141],{"class":310},"        {\n",[300,1143,1144,1147,1149,1151],{"class":302,"line":435},[300,1145,1146],{"class":360},"          raw",[300,1148,514],{"class":310},[300,1150,353],{"class":306},[300,1152,499],{"class":310},[300,1154,1155,1158,1160],{"class":302,"line":441},[300,1156,1157],{"class":360},"          extension",[300,1159,514],{"class":310},[300,1161,623],{"class":360},[300,1163,1164],{"class":302,"line":447},[300,1165,1166],{"class":310},"        }\n",[300,1168,1169],{"class":302,"line":453},[300,1170,1171],{"class":360},"      ]\n",[300,1173,1174],{"class":302,"line":459},[300,1175,647],{"class":310},[300,1177,1178],{"class":302,"line":465},[300,1179,653],{"class":310},[300,1181,1182,1184],{"class":302,"line":470},[300,1183,481],{"class":310},[300,1185,659],{"class":360},[280,1187,1188,1189,1191,1192,1194],{},"In order for Tailwind to actually generate CSS based on classes in your ",[297,1190,496],{}," string, you need to pass the ",[297,1193,705],{}," key with an array of objects that contain the raw content and the file extension.",[284,1196,1198],{"id":1197},"templating","Templating",[280,1200,1201],{},"Of course, templating tags are available when using Maizzle programmatically.",[289,1203,1205],{"className":291,"code":1204,"filename":293,"language":294,"meta":295,"style":295},"let html = `---\ntitle: Using Maizzle programmatically\n---\n\n\u003Cx-main>\n  \u003C!-- your email HTML... -->\n\u003C/x-main>`\n",[297,1206,1207,1217,1222,1226,1230,1235,1240],{"__ignoreMap":295},[300,1208,1209,1211,1213,1215],{"class":302,"line":303},[300,1210,350],{"class":306},[300,1212,821],{"class":306},[300,1214,357],{"class":356},[300,1216,361],{"class":360},[300,1218,1219],{"class":302,"line":327},[300,1220,1221],{"class":360},"title: Using Maizzle programmatically\n",[300,1223,1224],{"class":302,"line":340},[300,1225,373],{"class":360},[300,1227,1228],{"class":302,"line":347},[300,1229,344],{"emptyLinePlaceholder":343},[300,1231,1232],{"class":302,"line":364},[300,1233,1234],{"class":360},"\u003Cx-main>\n",[300,1236,1237],{"class":302,"line":370},[300,1238,1239],{"class":360},"  \u003C!-- your email HTML... -->\n",[300,1241,1242],{"class":302,"line":376},[300,1243,1244],{"class":360},"\u003C/x-main>`\n",[753,1246,1248],{"type":1247},"danger","\nPaths to Layouts or Components in your string must be relative to the location where you execute the script.\n",[753,1250,1251,1252,1255],{"type":1247},"\nComponent \n",[297,1253,1254],{},"x-","\n tags only work in Node.js and when the referenced files are available on disk.\n",[284,1257,1259],{"id":1258},"gotchas","Gotchas",[280,1261,1262,1263,1265],{},"Since the options object that you can pass to the ",[297,1264,731],{}," method is optional, there are a few gotchas that you need to be aware of.",[859,1267,1269],{"id":1268},"tailwind-config","Tailwind config",[280,1271,1272,1273,1275,1276,1279],{},"Maizzle will use the Tailwind CSS config object as-is, which means that if you just include the ",[297,1274,705],{}," key it will generate CSS with the default values like ",[297,1277,1278],{},"rem"," or CSS variables.",[280,1281,1282,1283,1285,1286,1288],{},"In order to generate CSS optimized for HTML email, you need to fully configure Tailwind in the ",[297,1284,698],{}," object. The simplest way to do this is to use a preset like ",[297,1287,720],{},", as shown in the example above.",[859,1290,1292],{"id":1291},"default-tailwind","Default Tailwind",[280,1294,1295,1296,1300,1301,1303],{},"If you don't specify a ",[854,1297,1299],{"href":1298},"#tailwindcss","Tailwind config object",", Maizzle will try to compile Tailwind using ",[297,1302,982],{}," at your current path.",[280,1305,1306],{},[1307,1308,1309,1310,668],"em",{},"If the file is not found, Tailwind CSS will be compiled with its ",[854,1311,1315],{"href":1312,"rel":1313},"https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js",[1314],"nofollow","default config",[280,1317,1318,1319,1321,1322,1325],{},"The default config is not optimized for HTML email: it uses units like ",[297,1320,1278],{}," and CSS properties that are used for ",[1307,1323,1324],{},"web"," design and which have little to no support in the majority of email clients.",[280,1327,1328,1329,1331,1332,1334],{},"Also, the default Tailwind config will not include any ",[297,1330,705],{}," paths that should be scanned for generating utility classes, meaning that the ",[297,1333,709],{}," tag in your email will be empty.",[859,1336,105],{"id":1337},"transformers",[280,1339,1340],{},"Most Transformers, such as CSS inlining or minification, are opt-in: they transform content only when you enable them. Since you don't need to pass in a Maizzle config object, this means that most of them will not run.",[280,1342,1343],{},"The following Transformers always run:",[1345,1346,1347,1351,1354,1361],"ul",{},[1348,1349,1350],"li",{},"Markdown (can be disabled)",[1348,1352,1353],{},"Prevent Widows",[1348,1355,1356,1357,1360],{},"Remove Attributes - removes empty ",[297,1358,1359],{},"style"," attributes by default",[1348,1362,1363,1364],{},"Filters - provides various ",[854,1365,1366],{"href":112},"text filters",[859,1368,1370],{"id":1369},"css-output","CSS Output",[280,1372,1373,1374,1377,1378,1380,1381,1383],{},"You must add the ",[297,1375,1376],{},"@tailwind"," directives in a ",[297,1379,709],{}," tag in the ",[297,1382,691],{}," of your email HTML, otherwise Tailwind CSS will not be compiled.",[289,1385,1389],{"className":1386,"code":1387,"highlights":1388,"language":676,"meta":295,"style":295},"language-html shiki shiki-themes tailwind-css tailwind-css has-diff","\u003C!doctype html>\n\u003Chtml>\n  \u003Chead>\n    \u003Cstyle> /* [!code ++] */\n      @​tailwind components; /* [!code ++] */\n      @​tailwind utilities; /* [!code ++] */\n    \u003C/style> /* [!code ++] */\n  \u003C/head>\n  \u003Cbody>\n    ...\n  \u003C/body>\n\u003C/html>\n",[347,364,370,376],[297,1390,1391,1406,1415,1425,1439,1445,1451,1461,1470,1479,1484,1492],{"__ignoreMap":295},[300,1392,1393,1397,1400,1403],{"class":302,"line":303},[300,1394,1396],{"class":1395},"soJEP","\u003C!",[300,1398,1399],{"class":486},"doctype",[300,1401,821],{"class":1402},"sQMLp",[300,1404,1405],{"class":1395},">\n",[300,1407,1408,1411,1413],{"class":302,"line":327},[300,1409,1410],{"class":1395},"\u003C",[300,1412,676],{"class":486},[300,1414,1405],{"class":1395},[300,1416,1417,1420,1423],{"class":302,"line":340},[300,1418,1419],{"class":1395},"  \u003C",[300,1421,1422],{"class":486},"head",[300,1424,1405],{"class":1395},[300,1426,1431,1434,1436],{"class":1427,"line":347},[302,1428,1429,1430],"highlight","diff","add",[300,1432,1433],{"class":1395},"    \u003C",[300,1435,1359],{"class":486},[300,1437,1438],{"class":1395},">",[300,1440,1442],{"class":1441,"line":364},[302,1428,1429,1430],[300,1443,1444],{"class":360},"      @​tailwind components; ",[300,1446,1448],{"class":1447,"line":370},[302,1428,1429,1430],[300,1449,1450],{"class":360},"      @​tailwind utilities; ",[300,1452,1454,1457,1459],{"class":1453,"line":376},[302,1428,1429,1430],[300,1455,1456],{"class":1395},"    \u003C/",[300,1458,1359],{"class":486},[300,1460,1438],{"class":1395},[300,1462,1463,1466,1468],{"class":302,"line":381},[300,1464,1465],{"class":1395},"  \u003C/",[300,1467,1422],{"class":486},[300,1469,1405],{"class":1395},[300,1471,1472,1474,1477],{"class":302,"line":387},[300,1473,1419],{"class":1395},[300,1475,1476],{"class":486},"body",[300,1478,1405],{"class":1395},[300,1480,1481],{"class":302,"line":393},[300,1482,1483],{"class":360},"    ...\n",[300,1485,1486,1488,1490],{"class":302,"line":399},[300,1487,1465],{"class":1395},[300,1489,1476],{"class":486},[300,1491,1405],{"class":1395},[300,1493,1494,1497,1499],{"class":302,"line":405},[300,1495,1496],{"class":1395},"\u003C/",[300,1498,676],{"class":486},[300,1500,1405],{"class":1395},[1359,1502,1503],{},"html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}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);}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}",{"title":295,"searchDepth":327,"depth":327,"links":1505},[1506,1507,1511,1512],{"id":286,"depth":327,"text":287},{"id":724,"depth":327,"text":725,"children":1508},[1509,1510],{"id":861,"depth":340,"text":862},{"id":975,"depth":340,"text":976},{"id":1197,"depth":327,"text":1198},{"id":1258,"depth":327,"text":1259,"children":1513},[1514,1515,1516,1517],{"id":1268,"depth":340,"text":1269},{"id":1291,"depth":340,"text":1292},{"id":1337,"depth":340,"text":105},{"id":1369,"depth":340,"text":1370},"Using the API to compile an HTML email styled with Tailwind CSS.","md",{},{"title":102,"description":1518},{"loc":103},"docs/api","1XaOBHXwIsPlL5bsDdh-ktuEL_0f-3z9JYaqr_SFlME",{"id":4,"extension":5,"items":1526,"meta":1597,"stem":195,"__hash__":196},[1527,1537,1542,1551,1564,1582,1588],{"name":8,"items":1528},[1529,1530,1531,1532,1533,1534,1535,1536],{"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":1538},[1539,1540,1541],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":1543},[1544,1545,1546,1547,1548,1549,1550],{"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":1552},[1553,1554,1555,1556,1557,1558,1559,1560,1561,1562,1563],{"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":1565},[1566,1567,1568,1569,1570,1571,1572,1573,1574,1575,1576,1577,1578,1579,1580,1581],{"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":1583},[1584,1585,1586,1587],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":1589},[1590,1591,1592,1593,1594,1595,1596],{"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},{},1780318590601]