[{"data":1,"prerenderedAt":3499},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/configuration/css":270,"docs-bottom-nav":3426},{"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":272,"body":273,"description":3419,"extension":3420,"meta":3421,"navigation":1216,"path":51,"seo":3422,"sitemap":3423,"stem":3424,"__hash__":3425},"docs/docs/configuration/css.md","Tailwind CSS configuration",{"type":274,"value":275,"toc":3389},"minimark",[276,281,285,290,302,358,362,375,378,385,427,435,438,446,449,454,457,465,468,473,529,532,589,593,602,609,612,686,689,731,738,756,761,817,825,829,837,840,858,902,909,912,920,923,928,931,939,942,947,951,960,963,968,971,978,989,1186,1192,1287,1291,1301,1311,1314,1325,1379,1383,1386,1412,1419,1432,1439,1536,1539,1549,1552,1563,1570,1573,1583,1586,1650,1653,1792,1807,1815,1818,1827,1833,2009,2012,2015,2170,2174,2286,2290,2303,2398,2402,2405,2569,2573,2576,2785,2789,2797,2845,2852,2892,2895,2928,2932,3094,3098,3107,3130,3134,3145,3163,3168,3232,3236,3291,3298,3302,3307,3333,3344,3386],[277,278,280],"h1",{"id":279},"css-configuration","CSS configuration",[282,283,284],"p",{},"Configuring Tailwind CSS and how CSS is compiled in Maizzle.",[286,287,289],"h2",{"id":288},"options","Options",[282,291,292,293,297,298,301],{},"CSS handling in Maizzle can be configured under the ",[294,295,296],"code",{},"css"," key in your ",[294,299,300],{},"config.js"," file:",[303,304,309],"pre",{"className":305,"code":306,"filename":300,"language":307,"meta":308,"style":308},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  css: {\n    // ...\n  },\n}\n","js","",[294,310,311,327,339,346,352],{"__ignoreMap":308},[312,313,316,320,323],"span",{"class":314,"line":315},"line",1,[312,317,319],{"class":318},"sizJ4","export",[312,321,322],{"class":318}," default",[312,324,326],{"class":325},"sprQ5"," {\n",[312,328,330,334,337],{"class":314,"line":329},2,[312,331,333],{"class":332},"sfCc6","  css",[312,335,336],{"class":325},":",[312,338,326],{"class":325},[312,340,342],{"class":314,"line":341},3,[312,343,345],{"class":344},"smVoC","    // ...\n",[312,347,349],{"class":314,"line":348},4,[312,350,351],{"class":325},"  },\n",[312,353,355],{"class":314,"line":354},5,[312,356,357],{"class":325},"}\n",[359,360,361],"h3",{"id":361},"inline",[282,363,364,365,368,371,372],{},"Type: ",[294,366,367],{},"Boolean|Object",[369,370],"br",{},"\nDefault: ",[294,373,374],{},"undefined",[282,376,377],{},"Configure how CSS is inlined in your HTML emails.",[282,379,380,381,384],{},"Setting this to ",[294,382,383],{},"true"," enables CSS inlining with the default options, or you can pass an object to configure the behavior of the CSS inliner (Juice).",[303,386,388],{"className":305,"code":387,"filename":300,"language":307,"meta":308,"style":308},"export default {\n  css: {\n    inline: true,\n  },\n}\n",[294,389,390,398,406,419,423],{"__ignoreMap":308},[312,391,392,394,396],{"class":314,"line":315},[312,393,319],{"class":318},[312,395,322],{"class":318},[312,397,326],{"class":325},[312,399,400,402,404],{"class":314,"line":329},[312,401,333],{"class":332},[312,403,336],{"class":325},[312,405,326],{"class":325},[312,407,408,411,413,416],{"class":314,"line":341},[312,409,410],{"class":332},"    inline",[312,412,336],{"class":325},[312,414,415],{"class":318}," true",[312,417,418],{"class":325},",\n",[312,420,421],{"class":314,"line":348},[312,422,351],{"class":325},[312,424,425],{"class":314,"line":354},[312,426,357],{"class":325},[282,428,429,430,434],{},"For details, see the ",[431,432,433],"a",{"href":115},"CSS inlining documentation",".",[359,436,437],{"id":437},"purge",[282,439,364,440,442,371,444],{},[294,441,367],{},[369,443],{},[294,445,374],{},[282,447,448],{},"Configure email-safe unused CSS purging.",[282,450,429,451,434],{},[431,452,453],{"href":121},"CSS Purge Transformer docs",[359,455,456],{"id":456},"media",[282,458,364,459,461,371,463],{},[294,460,367],{},[369,462],{},[294,464,374],{},[282,466,467],{},"Control how media queries are handled in your CSS.",[282,469,380,470,472],{},[294,471,383],{}," or any non-falsy value enables media query merging:",[303,474,476],{"className":305,"code":475,"filename":300,"language":307,"meta":308,"style":308},"export default {\n  css: {\n    media: {\n      merge: true,\n    },\n  },\n}\n",[294,477,478,486,494,503,514,519,524],{"__ignoreMap":308},[312,479,480,482,484],{"class":314,"line":315},[312,481,319],{"class":318},[312,483,322],{"class":318},[312,485,326],{"class":325},[312,487,488,490,492],{"class":314,"line":329},[312,489,333],{"class":332},[312,491,336],{"class":325},[312,493,326],{"class":325},[312,495,496,499,501],{"class":314,"line":341},[312,497,498],{"class":332},"    media",[312,500,336],{"class":325},[312,502,326],{"class":325},[312,504,505,508,510,512],{"class":314,"line":348},[312,506,507],{"class":332},"      merge",[312,509,336],{"class":325},[312,511,415],{"class":318},[312,513,418],{"class":325},[312,515,516],{"class":314,"line":354},[312,517,518],{"class":325},"    },\n",[312,520,522],{"class":314,"line":521},6,[312,523,351],{"class":325},[312,525,527],{"class":314,"line":526},7,[312,528,357],{"class":325},[282,530,531],{},"You can also use it to control media query sorting:",[303,533,535],{"className":305,"code":534,"filename":300,"language":307,"meta":308,"style":308},"export default {\n  css: {\n    media: {\n      sort: 'mobile-first', // default; or use 'desktop-first'\n    },\n  },\n}\n",[294,536,537,545,553,561,577,581,585],{"__ignoreMap":308},[312,538,539,541,543],{"class":314,"line":315},[312,540,319],{"class":318},[312,542,322],{"class":318},[312,544,326],{"class":325},[312,546,547,549,551],{"class":314,"line":329},[312,548,333],{"class":332},[312,550,336],{"class":325},[312,552,326],{"class":325},[312,554,555,557,559],{"class":314,"line":341},[312,556,498],{"class":332},[312,558,336],{"class":325},[312,560,326],{"class":325},[312,562,563,566,568,571,574],{"class":314,"line":348},[312,564,565],{"class":332},"      sort",[312,567,336],{"class":325},[312,569,570],{"class":332}," 'mobile-first'",[312,572,573],{"class":325},",",[312,575,576],{"class":344}," // default; or use 'desktop-first'\n",[312,578,579],{"class":314,"line":354},[312,580,518],{"class":325},[312,582,583],{"class":314,"line":521},[312,584,351],{"class":325},[312,586,587],{"class":314,"line":526},[312,588,357],{"class":325},[359,590,592],{"id":591},"resolvecalc","resolveCalc",[282,594,364,595,598,371,600],{},[294,596,597],{},"Boolean|PostCssCalcOptions",[369,599],{},[294,601,383],{},[282,603,604,605,608],{},"Whether to resolve ",[294,606,607],{},"calc()"," expressions in the CSS to their computed values.",[282,610,611],{},"By default, something like this:",[303,613,617],{"className":614,"code":615,"language":616,"meta":308,"style":308},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cstyle>\n  div {\n    width: calc(100% / 3);\n  }\n\u003C/style>\n","html",[294,618,619,631,639,672,677],{"__ignoreMap":308},[312,620,621,625,628],{"class":314,"line":315},[312,622,624],{"class":623},"soJEP","\u003C",[312,626,627],{"class":318},"style",[312,629,630],{"class":623},">\n",[312,632,633,636],{"class":314,"line":329},[312,634,635],{"class":318},"  div",[312,637,326],{"class":638},"shy1k",[312,640,641,645,649,653,656,659,663,666,669],{"class":314,"line":341},[312,642,644],{"class":643},"sO1gY","    width",[312,646,648],{"class":647},"sO3Gh",": ",[312,650,652],{"class":651},"snKqK","calc",[312,654,655],{"class":638},"(",[312,657,658],{"class":332},"100%",[312,660,662],{"class":661},"sbQc2"," /",[312,664,665],{"class":332}," 3",[312,667,668],{"class":638},")",[312,670,671],{"class":647},";\n",[312,673,674],{"class":314,"line":348},[312,675,676],{"class":638},"  }\n",[312,678,679,682,684],{"class":314,"line":354},[312,680,681],{"class":623},"\u003C/",[312,683,627],{"class":318},[312,685,630],{"class":623},[282,687,688],{},"... will be compiled to:",[303,690,692],{"className":614,"code":691,"language":616,"meta":308,"style":308},"\u003Cstyle>\n  div {\n    width: 33.33%;\n  }\n\u003C/style>\n",[294,693,694,702,708,719,723],{"__ignoreMap":308},[312,695,696,698,700],{"class":314,"line":315},[312,697,624],{"class":623},[312,699,627],{"class":318},[312,701,630],{"class":623},[312,703,704,706],{"class":314,"line":329},[312,705,635],{"class":318},[312,707,326],{"class":638},[312,709,710,712,714,717],{"class":314,"line":341},[312,711,644],{"class":643},[312,713,648],{"class":647},[312,715,716],{"class":332},"33.33%",[312,718,671],{"class":647},[312,720,721],{"class":314,"line":348},[312,722,676],{"class":638},[312,724,725,727,729],{"class":314,"line":354},[312,726,681],{"class":623},[312,728,627],{"class":318},[312,730,630],{"class":623},[732,733,734,735,737],"alert",{},"\nMaizzle uses a 2-decimal precision when resolving \n",[294,736,607],{},"\n expressions.\n",[282,739,740,741,749,750,752,753,755],{},"This uses ",[431,742,746],{"href":743,"rel":744},"https://www.npmjs.com/package/postcss-calc",[745],"nofollow",[294,747,748],{},"postcss-calc"," to resolve ",[294,751,607],{}," functions in your CSS to their computed values whenever possible. When multiple units are mixed in the same ",[294,754,607],{}," expression, the statement will be output as-is.",[282,757,758,759,336],{},"You may pass an object to configure ",[294,760,748],{},[303,762,764],{"className":305,"code":763,"filename":300,"language":307,"meta":308,"style":308},"export default {\n  css: {\n    resolveCalc: {\n      precision: 3, // precision for decimal numbers (2 by default)\n    },\n  },\n}\n",[294,765,766,774,782,791,805,809,813],{"__ignoreMap":308},[312,767,768,770,772],{"class":314,"line":315},[312,769,319],{"class":318},[312,771,322],{"class":318},[312,773,326],{"class":325},[312,775,776,778,780],{"class":314,"line":329},[312,777,333],{"class":332},[312,779,336],{"class":325},[312,781,326],{"class":325},[312,783,784,787,789],{"class":314,"line":341},[312,785,786],{"class":332},"    resolveCalc",[312,788,336],{"class":325},[312,790,326],{"class":325},[312,792,793,796,798,800,802],{"class":314,"line":348},[312,794,795],{"class":332},"      precision",[312,797,336],{"class":325},[312,799,665],{"class":332},[312,801,573],{"class":325},[312,803,804],{"class":344}," // precision for decimal numbers (2 by default)\n",[312,806,807],{"class":314,"line":354},[312,808,518],{"class":325},[312,810,811],{"class":314,"line":521},[312,812,351],{"class":325},[312,814,815],{"class":314,"line":526},[312,816,357],{"class":325},[282,818,819,820,434],{},"See the ",[431,821,824],{"href":822,"rel":823},"https://github.com/postcss/postcss-calc/#options",[745],"postcss-calc options",[359,826,828],{"id":827},"resolveprops","resolveProps",[282,830,364,831,833,371,835],{},[294,832,367],{},[369,834],{},[294,836,383],{},[282,838,839],{},"CSS custom properties, or CSS variables, are poorly supported in email clients. Whenever you use them, Maizzle will try to resolve them to their static representation.",[282,841,842,843,845,846,849,850,857],{},"You may configure this behavior by setting the ",[294,844,828],{}," key to ",[294,847,848],{},"false"," (to disable it) or to a ",[431,851,854],{"href":852,"rel":853},"https://www.npmjs.com/package/postcss-css-variables",[745],[294,855,856],{},"postcss-css-variables"," options object:",[303,859,861],{"className":305,"code":860,"filename":300,"language":307,"meta":308,"style":308},"export default {\n  css: {\n    resolveProps: false, // or postcss-css-variables options\n  },\n}\n",[294,862,863,871,879,894,898],{"__ignoreMap":308},[312,864,865,867,869],{"class":314,"line":315},[312,866,319],{"class":318},[312,868,322],{"class":318},[312,870,326],{"class":325},[312,872,873,875,877],{"class":314,"line":329},[312,874,333],{"class":332},[312,876,336],{"class":325},[312,878,326],{"class":325},[312,880,881,884,886,889,891],{"class":314,"line":341},[312,882,883],{"class":332},"    resolveProps",[312,885,336],{"class":325},[312,887,888],{"class":318}," false",[312,890,573],{"class":325},[312,892,893],{"class":344}," // or postcss-css-variables options\n",[312,895,896],{"class":314,"line":348},[312,897,351],{"class":325},[312,899,900],{"class":314,"line":354},[312,901,357],{"class":325},[282,903,819,904,434],{},[431,905,908],{"href":906,"rel":907},"https://github.com/MadLittleMods/postcss-css-variables/#options",[745],"postcss-css-variables options",[359,910,911],{"id":911},"safe",[282,913,364,914,916,371,918],{},[294,915,367],{},[369,917],{},[294,919,383],{},[282,921,922],{},"Rewrites Tailwind CSS class names to email-safe alternatives.",[282,924,819,925,434],{},[431,926,927],{"href":118},"Safe Class Names Transformer docs",[359,929,930],{"id":930},"shorthand",[282,932,364,933,935,371,937],{},[294,934,367],{},[369,936],{},[294,938,374],{},[282,940,941],{},"Configure rewriting of CSS properties to their shorthand form. Disabled by default.",[282,943,819,944,434],{},[431,945,946],{"href":124},"Shorthand Transformer docs",[359,948,950],{"id":949},"sixhex","sixHex",[282,952,364,953,956,371,958],{},[294,954,955],{},"Boolean",[369,957],{},[294,959,383],{},[282,961,962],{},"Whether to convert 3-digit HEX colors to 6-digit HEX colors. Enabled by default.",[282,964,819,965,434],{},[431,966,967],{"href":148},"Six HEX Transformer docs",[359,969,970],{"id":970},"tailwind",[282,972,973,974,977],{},"You'll probably only need this when using Maizzle programmatically - otherwise you can use the ",[294,975,976],{},"@config"," directive in your CSS to specify a custom Tailwind CSS config file to use.",[282,979,980,981,984,985,988],{},"It's important to note that when using ",[294,982,983],{},"css.tailwind"," you need to provide a Tailwind CSS configuration object with all values that you need to be different from Tailwind's defaults. So you need to specify ",[294,986,987],{},"px"," values, screens etc. that work in email clients:",[303,990,992],{"className":305,"code":991,"filename":300,"language":307,"meta":308,"style":308},"export default {\n  css: {\n    tailwind: {\n      content: [\n        './components/**/*.html',\n        './emails/**/*.html',\n        './layouts/**/*.html',\n      ],\n      important: true,\n      screens: {\n        sm: {max: '600px'},\n        xs: {max: '425px'},\n      },\n      spacing: {\n        px: '1px',\n        0.5: '2px',// etc.\n      },\n    },\n  },\n}\n",[294,993,994,1002,1010,1019,1029,1036,1043,1050,1058,1070,1080,1102,1121,1127,1137,1150,1166,1171,1176,1181],{"__ignoreMap":308},[312,995,996,998,1000],{"class":314,"line":315},[312,997,319],{"class":318},[312,999,322],{"class":318},[312,1001,326],{"class":325},[312,1003,1004,1006,1008],{"class":314,"line":329},[312,1005,333],{"class":332},[312,1007,336],{"class":325},[312,1009,326],{"class":325},[312,1011,1012,1015,1017],{"class":314,"line":341},[312,1013,1014],{"class":332},"    tailwind",[312,1016,336],{"class":325},[312,1018,326],{"class":325},[312,1020,1021,1024,1026],{"class":314,"line":348},[312,1022,1023],{"class":332},"      content",[312,1025,336],{"class":325},[312,1027,1028],{"class":332}," [\n",[312,1030,1031,1034],{"class":314,"line":354},[312,1032,1033],{"class":332},"        './components/**/*.html'",[312,1035,418],{"class":325},[312,1037,1038,1041],{"class":314,"line":521},[312,1039,1040],{"class":332},"        './emails/**/*.html'",[312,1042,418],{"class":325},[312,1044,1045,1048],{"class":314,"line":526},[312,1046,1047],{"class":332},"        './layouts/**/*.html'",[312,1049,418],{"class":325},[312,1051,1053,1056],{"class":314,"line":1052},8,[312,1054,1055],{"class":332},"      ]",[312,1057,418],{"class":325},[312,1059,1061,1064,1066,1068],{"class":314,"line":1060},9,[312,1062,1063],{"class":332},"      important",[312,1065,336],{"class":325},[312,1067,415],{"class":318},[312,1069,418],{"class":325},[312,1071,1073,1076,1078],{"class":314,"line":1072},10,[312,1074,1075],{"class":332},"      screens",[312,1077,336],{"class":325},[312,1079,326],{"class":325},[312,1081,1083,1086,1088,1091,1094,1096,1099],{"class":314,"line":1082},11,[312,1084,1085],{"class":332},"        sm",[312,1087,336],{"class":325},[312,1089,1090],{"class":325}," {",[312,1092,1093],{"class":332},"max",[312,1095,336],{"class":325},[312,1097,1098],{"class":332}," '600px'",[312,1100,1101],{"class":325},"},\n",[312,1103,1105,1108,1110,1112,1114,1116,1119],{"class":314,"line":1104},12,[312,1106,1107],{"class":332},"        xs",[312,1109,336],{"class":325},[312,1111,1090],{"class":325},[312,1113,1093],{"class":332},[312,1115,336],{"class":325},[312,1117,1118],{"class":332}," '425px'",[312,1120,1101],{"class":325},[312,1122,1124],{"class":314,"line":1123},13,[312,1125,1126],{"class":325},"      },\n",[312,1128,1130,1133,1135],{"class":314,"line":1129},14,[312,1131,1132],{"class":332},"      spacing",[312,1134,336],{"class":325},[312,1136,326],{"class":325},[312,1138,1140,1143,1145,1148],{"class":314,"line":1139},15,[312,1141,1142],{"class":332},"        px",[312,1144,336],{"class":325},[312,1146,1147],{"class":332}," '1px'",[312,1149,418],{"class":325},[312,1151,1153,1156,1158,1161,1163],{"class":314,"line":1152},16,[312,1154,1155],{"class":332},"        0.5",[312,1157,336],{"class":325},[312,1159,1160],{"class":332}," '2px'",[312,1162,573],{"class":325},[312,1164,1165],{"class":344},"// etc.\n",[312,1167,1169],{"class":314,"line":1168},17,[312,1170,1126],{"class":325},[312,1172,1174],{"class":314,"line":1173},18,[312,1175,518],{"class":325},[312,1177,1179],{"class":314,"line":1178},19,[312,1180,351],{"class":325},[312,1182,1184],{"class":314,"line":1183},20,[312,1185,357],{"class":325},[282,1187,1188,1189,336],{},"If you want, you can import ",[294,1190,1191],{},"tailwindcss-preset-email",[303,1193,1195],{"className":305,"code":1194,"filename":300,"language":307,"meta":308,"style":308},"import emailPreset from 'tailwindcss-preset-email'\n\nexport default {\n  css: {\n    tailwind: {\n      presets: [ emailPreset ],\n      content: [ /* ... */ ],\n    },\n  },\n}\n",[294,1196,1197,1212,1218,1226,1234,1242,1260,1275,1279,1283],{"__ignoreMap":308},[312,1198,1199,1203,1206,1209],{"class":314,"line":315},[312,1200,1202],{"class":1201},"s8qYB","import",[312,1204,1205],{"class":643}," emailPreset",[312,1207,1208],{"class":325}," from",[312,1210,1211],{"class":1201}," 'tailwindcss-preset-email'\n",[312,1213,1214],{"class":314,"line":329},[312,1215,1217],{"emptyLinePlaceholder":1216},true,"\n",[312,1219,1220,1222,1224],{"class":314,"line":341},[312,1221,319],{"class":318},[312,1223,322],{"class":318},[312,1225,326],{"class":325},[312,1227,1228,1230,1232],{"class":314,"line":348},[312,1229,333],{"class":332},[312,1231,336],{"class":325},[312,1233,326],{"class":325},[312,1235,1236,1238,1240],{"class":314,"line":354},[312,1237,1014],{"class":332},[312,1239,336],{"class":325},[312,1241,326],{"class":325},[312,1243,1244,1247,1249,1252,1255,1258],{"class":314,"line":521},[312,1245,1246],{"class":332},"      presets",[312,1248,336],{"class":325},[312,1250,1251],{"class":332}," [ ",[312,1253,1254],{"class":1201},"emailPreset",[312,1256,1257],{"class":332}," ]",[312,1259,418],{"class":325},[312,1261,1262,1264,1266,1268,1271,1273],{"class":314,"line":526},[312,1263,1023],{"class":332},[312,1265,336],{"class":325},[312,1267,1251],{"class":332},[312,1269,1270],{"class":344},"/* ... */",[312,1272,1257],{"class":332},[312,1274,418],{"class":325},[312,1276,1277],{"class":314,"line":1052},[312,1278,518],{"class":325},[312,1280,1281],{"class":314,"line":1060},[312,1282,351],{"class":325},[312,1284,1285],{"class":314,"line":1072},[312,1286,357],{"class":325},[286,1288,1290],{"id":1289},"tailwindconfigjs","tailwind.config.js",[282,1292,1293,1294,1300],{},"Maizzle uses ",[431,1295,1298],{"href":1296,"rel":1297},"https://github.com/maizzle/tailwindcss-preset-email",[745],[294,1299,1191],{},", a custom preset that configures Tailwind CSS for better email client support.",[282,1302,1303,1304,1307,1308,1310],{},"This preset helps generate more email-friendly CSS, by disabling some of the default Tailwind CSS features that are not well supported in email clients.\nFor example, HEX values are preferred over CSS variables, and ",[294,1305,1306],{},"rem"," units are replaced with ",[294,1309,987],{}," units.",[359,1312,1313],{"id":1313},"content",[282,1315,1316,1317,1320,1321,1324],{},"By default, Tailwind CSS in Maizzle is configured to scan all ",[294,1318,1319],{},".html"," files in your project's ",[294,1322,1323],{},"src"," directory for classes to generate:",[303,1326,1328],{"className":305,"code":1327,"filename":1290,"language":307,"meta":308,"style":308},"export default {\n  content: [\n    './components/**/*.html',\n    './emails/**/*.html',\n    './layouts/**/*.html',\n  ],\n}\n",[294,1329,1330,1338,1347,1354,1361,1368,1375],{"__ignoreMap":308},[312,1331,1332,1334,1336],{"class":314,"line":315},[312,1333,319],{"class":318},[312,1335,322],{"class":318},[312,1337,326],{"class":325},[312,1339,1340,1343,1345],{"class":314,"line":329},[312,1341,1342],{"class":332},"  content",[312,1344,336],{"class":325},[312,1346,1028],{"class":332},[312,1348,1349,1352],{"class":314,"line":341},[312,1350,1351],{"class":332},"    './components/**/*.html'",[312,1353,418],{"class":325},[312,1355,1356,1359],{"class":314,"line":348},[312,1357,1358],{"class":332},"    './emails/**/*.html'",[312,1360,418],{"class":325},[312,1362,1363,1366],{"class":314,"line":354},[312,1364,1365],{"class":332},"    './layouts/**/*.html'",[312,1367,418],{"class":325},[312,1369,1370,1373],{"class":314,"line":521},[312,1371,1372],{"class":332},"  ]",[312,1374,418],{"class":325},[312,1376,1377],{"class":314,"line":526},[312,1378,357],{"class":325},[359,1380,1382],{"id":1381},"important","!important",[282,1384,1385],{},"HTML emails still need to use inline CSS, most notably for these reasons:",[1387,1388,1389,1403,1409],"ul",{},[1390,1391,1392,1393,1396,1397,1399,1400],"li",{},"Outlook/Office 365 for Windows only reads the first class in a ",[294,1394,1395],{},"class=\"\""," attribute, ignoring the rest. So it'll only use ",[294,1398,431],{}," from ",[294,1401,1402],{},"class=\"a b\"",[1390,1404,1405,1406,668],{},"Some email clients don't support embedded CSS (i.e. in ",[294,1407,1408],{},"\u003Cstyle>",[1390,1410,1411],{},"Embedded styles are often discarded when an email is forwarded",[282,1413,1414,1415,1418],{},"The Tailwind preset in Maizzle sets ",[294,1416,1417],{},"important: true"," - this way, things like responsive utilities can actually override inline CSS.",[732,1420,1421,1422,1424,1425,1427,1428,1431],{},"\nOnly CSS in \n",[294,1423,1408],{},"\n tags will use \n",[294,1426,1382],{},"\n, inlined CSS in \n",[294,1429,1430],{},"style=\"\"","\n attributes will not.\n",[282,1433,1434,1435,845,1437,336],{},"You may disable this behavior by setting the ",[294,1436,1381],{},[294,1438,848],{},[303,1440,1444],{"className":1441,"code":1442,"filename":1290,"highlights":1443,"language":307,"meta":308,"style":308},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  presets: [\n    require('tailwindcss-preset-email'),\n  ],\n  important: false, // [!code ++]\n}\n",[521],[294,1445,1446,1471,1487,1496,1511,1517,1532],{"__ignoreMap":308},[312,1447,1448,1451,1455,1459,1461,1465,1468],{"class":314,"line":315},[312,1449,1450],{"class":344},"/** ",[312,1452,1454],{"class":1453},"sTnEA","@",[312,1456,1458],{"class":1457},"sGouh","type",[312,1460,1090],{"class":1453},[312,1462,1464],{"class":1463},"sSci_","import('tailwindcss').Config",[312,1466,1467],{"class":1453},"}",[312,1469,1470],{"class":344}," */\n",[312,1472,1473,1476,1478,1481,1485],{"class":314,"line":329},[312,1474,1475],{"class":318},"module",[312,1477,434],{"class":325},[312,1479,1480],{"class":318},"exports",[312,1482,1484],{"class":1483},"sVevU"," =",[312,1486,326],{"class":325},[312,1488,1489,1492,1494],{"class":314,"line":341},[312,1490,1491],{"class":332},"  presets",[312,1493,336],{"class":325},[312,1495,1028],{"class":332},[312,1497,1498,1502,1504,1507,1509],{"class":314,"line":348},[312,1499,1501],{"class":1500},"s2ImL","    require",[312,1503,655],{"class":332},[312,1505,1506],{"class":332},"'tailwindcss-preset-email'",[312,1508,668],{"class":332},[312,1510,418],{"class":325},[312,1512,1513,1515],{"class":314,"line":354},[312,1514,1372],{"class":332},[312,1516,418],{"class":325},[312,1518,1523,1526,1528,1530],{"class":1519,"line":521},[314,1520,1521,1522],"highlight","diff","add",[312,1524,1525],{"class":332},"  important",[312,1527,336],{"class":325},[312,1529,888],{"class":318},[312,1531,573],{"class":325},[312,1533,1534],{"class":314,"line":526},[312,1535,357],{"class":325},[359,1537,1538],{"id":1538},"separator",[282,1540,1541,1542,1544,1545,1548],{},"Characters like ",[294,1543,336],{}," in ",[294,1546,1547],{},"hover:bg-black"," need to be \\escaped in CSS.",[282,1550,1551],{},"Because some email clients (Gmail 👀) fail to parse selectors with escaped characters, Maizzle normalizes all your CSS selectors and HTML classes, replacing any escaped characters it finds with email-safe alternatives.",[282,1553,1554,1555,1558,1559,1562],{},"So you can safely use Tailwind's awesome default separator and write classes like ",[294,1556,1557],{},"sm:w-1/2"," - Maizzle will convert that to ",[294,1560,1561],{},"sm-w-1-2"," in your compiled template.",[282,1564,1565,1566,1569],{},"You may also ",[431,1567,1568],{"href":118},"configure the replacement mappings"," if you need to.",[359,1571,1572],{"id":1572},"screens",[282,1574,1575,1576,1579,1580,434],{},"Maizzle uses a desktop-first approach with ",[294,1577,1578],{},"max-width"," media queries instead of Tailwind's default, mobile-first approach that uses ",[294,1581,1582],{},"min-width",[282,1584,1585],{},"These are the default screens in Maizzle:",[303,1587,1589],{"className":305,"code":1588,"filename":1290,"language":307,"meta":308,"style":308},"export default {\n  screens: {\n    sm: {max: '600px'},\n    xs: {max: '425px'},\n  },\n}\n",[294,1590,1591,1599,1608,1625,1642,1646],{"__ignoreMap":308},[312,1592,1593,1595,1597],{"class":314,"line":315},[312,1594,319],{"class":318},[312,1596,322],{"class":318},[312,1598,326],{"class":325},[312,1600,1601,1604,1606],{"class":314,"line":329},[312,1602,1603],{"class":332},"  screens",[312,1605,336],{"class":325},[312,1607,326],{"class":325},[312,1609,1610,1613,1615,1617,1619,1621,1623],{"class":314,"line":341},[312,1611,1612],{"class":332},"    sm",[312,1614,336],{"class":325},[312,1616,1090],{"class":325},[312,1618,1093],{"class":332},[312,1620,336],{"class":325},[312,1622,1098],{"class":332},[312,1624,1101],{"class":325},[312,1626,1627,1630,1632,1634,1636,1638,1640],{"class":314,"line":348},[312,1628,1629],{"class":332},"    xs",[312,1631,336],{"class":325},[312,1633,1090],{"class":325},[312,1635,1093],{"class":332},[312,1637,336],{"class":325},[312,1639,1118],{"class":332},[312,1641,1101],{"class":325},[312,1643,1644],{"class":314,"line":354},[312,1645,351],{"class":325},[312,1647,1648],{"class":314,"line":521},[312,1649,357],{"class":325},[282,1651,1652],{},"Of course, you're free to adjust this as you like. For example, you might add a breakpoint that targets tablet devices based on their viewport width:",[303,1654,1657],{"className":1441,"code":1655,"filename":1290,"highlights":1656,"language":307,"meta":1521,"style":308},"/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  presets: [\n    require('tailwindcss-preset-email'),\n  ],\n  screens: {\n    md: {min: '768px', max: '1023px'}, // [!code ++]\n    sm: {max: '600px'},\n    xs: {max: '425px'},\n  },\n}\n",[526],[294,1658,1659,1675,1687,1695,1707,1713,1721,1752,1768,1784,1788],{"__ignoreMap":308},[312,1660,1661,1663,1665,1667,1669,1671,1673],{"class":314,"line":315},[312,1662,1450],{"class":344},[312,1664,1454],{"class":1453},[312,1666,1458],{"class":1457},[312,1668,1090],{"class":1453},[312,1670,1464],{"class":1463},[312,1672,1467],{"class":1453},[312,1674,1470],{"class":344},[312,1676,1677,1679,1681,1683,1685],{"class":314,"line":329},[312,1678,1475],{"class":318},[312,1680,434],{"class":325},[312,1682,1480],{"class":318},[312,1684,1484],{"class":1483},[312,1686,326],{"class":325},[312,1688,1689,1691,1693],{"class":314,"line":341},[312,1690,1491],{"class":332},[312,1692,336],{"class":325},[312,1694,1028],{"class":332},[312,1696,1697,1699,1701,1703,1705],{"class":314,"line":348},[312,1698,1501],{"class":1500},[312,1700,655],{"class":332},[312,1702,1506],{"class":332},[312,1704,668],{"class":332},[312,1706,418],{"class":325},[312,1708,1709,1711],{"class":314,"line":354},[312,1710,1372],{"class":332},[312,1712,418],{"class":325},[312,1714,1715,1717,1719],{"class":314,"line":521},[312,1716,1603],{"class":332},[312,1718,336],{"class":325},[312,1720,326],{"class":325},[312,1722,1724,1727,1729,1731,1734,1736,1739,1741,1744,1746,1749],{"class":1723,"line":526},[314,1520,1521,1522],[312,1725,1726],{"class":332},"    md",[312,1728,336],{"class":325},[312,1730,1090],{"class":325},[312,1732,1733],{"class":332},"min",[312,1735,336],{"class":325},[312,1737,1738],{"class":332}," '768px'",[312,1740,573],{"class":325},[312,1742,1743],{"class":332}," max",[312,1745,336],{"class":325},[312,1747,1748],{"class":332}," '1023px'",[312,1750,1751],{"class":325},"},",[312,1753,1754,1756,1758,1760,1762,1764,1766],{"class":314,"line":1052},[312,1755,1612],{"class":332},[312,1757,336],{"class":325},[312,1759,1090],{"class":325},[312,1761,1093],{"class":332},[312,1763,336],{"class":325},[312,1765,1098],{"class":332},[312,1767,1101],{"class":325},[312,1769,1770,1772,1774,1776,1778,1780,1782],{"class":314,"line":1060},[312,1771,1629],{"class":332},[312,1773,336],{"class":325},[312,1775,1090],{"class":325},[312,1777,1093],{"class":332},[312,1779,336],{"class":325},[312,1781,1118],{"class":332},[312,1783,1101],{"class":325},[312,1785,1786],{"class":314,"line":1072},[312,1787,351],{"class":325},[312,1789,1790],{"class":314,"line":1082},[312,1791,357],{"class":325},[282,1793,1794,1795,1798,1799,1802,1803,1806],{},"That would enable you to write classes like ",[294,1796,1797],{},"md:hidden"," or ",[294,1800,1801],{},"md:text-lg",", which will be wrapped in a ",[294,1804,1805],{},"@media (min-width: 768px) and (max-width: 1023px)"," media query.",[282,1808,1809,1810,434],{},"More on screens, in the ",[431,1811,1814],{"href":1812,"rel":1813},"https://tailwindcss.com/docs/responsive-design",[745],"Tailwind CSS docs",[359,1816,1817],{"id":1817},"colors",[282,1819,1820,1821,1826],{},"Maizzle uses the ",[431,1822,1825],{"href":1823,"rel":1824},"https://tailwindcss.com/docs/customizing-colors",[745],"default color palette"," from Tailwind CSS.",[282,1828,1829,1830,1832],{},"You may define your own colors, or even extend or change the default color palette by adding a ",[294,1831,1817],{}," key to your Tailwind config:",[303,1834,1836],{"className":305,"code":1835,"filename":1290,"language":307,"meta":308,"style":308},"import emailPreset from 'tailwindcss-preset-email'\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n  presets: [\n    emailPreset,\n  ],\n  theme: {\n    extend: {\n      colors: {\n        blue: {\n          // change 'blue-500'\n          500: '#03a9f4',\n          // add 'blue-1000'\n          1000: '#101e47',\n        },\n        // custom color\n        primary: '#FFCC00',\n      }\n    }\n  }\n}\n",[294,1837,1838,1848,1852,1868,1876,1884,1891,1897,1906,1915,1924,1933,1938,1950,1955,1967,1972,1977,1989,1994,1999,2004],{"__ignoreMap":308},[312,1839,1840,1842,1844,1846],{"class":314,"line":315},[312,1841,1202],{"class":1201},[312,1843,1205],{"class":643},[312,1845,1208],{"class":325},[312,1847,1211],{"class":1201},[312,1849,1850],{"class":314,"line":329},[312,1851,1217],{"emptyLinePlaceholder":1216},[312,1853,1854,1856,1858,1860,1862,1864,1866],{"class":314,"line":341},[312,1855,1450],{"class":344},[312,1857,1454],{"class":1453},[312,1859,1458],{"class":1457},[312,1861,1090],{"class":1453},[312,1863,1464],{"class":1463},[312,1865,1467],{"class":1453},[312,1867,1470],{"class":344},[312,1869,1870,1872,1874],{"class":314,"line":348},[312,1871,319],{"class":318},[312,1873,322],{"class":318},[312,1875,326],{"class":325},[312,1877,1878,1880,1882],{"class":314,"line":354},[312,1879,1491],{"class":332},[312,1881,336],{"class":325},[312,1883,1028],{"class":332},[312,1885,1886,1889],{"class":314,"line":521},[312,1887,1888],{"class":1201},"    emailPreset",[312,1890,418],{"class":325},[312,1892,1893,1895],{"class":314,"line":526},[312,1894,1372],{"class":332},[312,1896,418],{"class":325},[312,1898,1899,1902,1904],{"class":314,"line":1052},[312,1900,1901],{"class":332},"  theme",[312,1903,336],{"class":325},[312,1905,326],{"class":325},[312,1907,1908,1911,1913],{"class":314,"line":1060},[312,1909,1910],{"class":332},"    extend",[312,1912,336],{"class":325},[312,1914,326],{"class":325},[312,1916,1917,1920,1922],{"class":314,"line":1072},[312,1918,1919],{"class":332},"      colors",[312,1921,336],{"class":325},[312,1923,326],{"class":325},[312,1925,1926,1929,1931],{"class":314,"line":1082},[312,1927,1928],{"class":332},"        blue",[312,1930,336],{"class":325},[312,1932,326],{"class":325},[312,1934,1935],{"class":314,"line":1104},[312,1936,1937],{"class":344},"          // change 'blue-500'\n",[312,1939,1940,1943,1945,1948],{"class":314,"line":1123},[312,1941,1942],{"class":332},"          500",[312,1944,336],{"class":325},[312,1946,1947],{"class":332}," '#03a9f4'",[312,1949,418],{"class":325},[312,1951,1952],{"class":314,"line":1129},[312,1953,1954],{"class":344},"          // add 'blue-1000'\n",[312,1956,1957,1960,1962,1965],{"class":314,"line":1139},[312,1958,1959],{"class":332},"          1000",[312,1961,336],{"class":325},[312,1963,1964],{"class":332}," '#101e47'",[312,1966,418],{"class":325},[312,1968,1969],{"class":314,"line":1152},[312,1970,1971],{"class":325},"        },\n",[312,1973,1974],{"class":314,"line":1168},[312,1975,1976],{"class":344},"        // custom color\n",[312,1978,1979,1982,1984,1987],{"class":314,"line":1173},[312,1980,1981],{"class":332},"        primary",[312,1983,336],{"class":325},[312,1985,1986],{"class":332}," '#FFCC00'",[312,1988,418],{"class":325},[312,1990,1991],{"class":314,"line":1178},[312,1992,1993],{"class":325},"      }\n",[312,1995,1996],{"class":314,"line":1183},[312,1997,1998],{"class":325},"    }\n",[312,2000,2002],{"class":314,"line":2001},21,[312,2003,676],{"class":325},[312,2005,2007],{"class":314,"line":2006},22,[312,2008,357],{"class":325},[359,2010,2011],{"id":2011},"spacing",[282,2013,2014],{},"The spacing scale has been extended to include more values:",[303,2016,2018],{"className":305,"code":2017,"language":307,"meta":308,"style":308},"spacing: {\n  screen: '100vw',\n  full: '100%',\n  px: '1px',\n  0: '0',\n  0.5: '2px',\n  1: '4px',\n  // ...\n  14: '56px',\n  16: '64px',\n  18: '72px',\n  // ...\n  48: '192px',\n  50: '200px',\n  // ...\n  96: '384px',\n},\n",[294,2019,2020,2028,2040,2052,2063,2073,2083,2093,2098,2108,2118,2128,2132,2142,2152,2156,2166],{"__ignoreMap":308},[312,2021,2022,2024,2026],{"class":314,"line":315},[312,2023,2011],{"class":318},[312,2025,336],{"class":325},[312,2027,326],{"class":325},[312,2029,2030,2033,2035,2038],{"class":314,"line":329},[312,2031,2032],{"class":318},"  screen",[312,2034,336],{"class":325},[312,2036,2037],{"class":332}," '100vw'",[312,2039,418],{"class":325},[312,2041,2042,2045,2047,2050],{"class":314,"line":341},[312,2043,2044],{"class":318},"  full",[312,2046,336],{"class":325},[312,2048,2049],{"class":332}," '100%'",[312,2051,418],{"class":325},[312,2053,2054,2057,2059,2061],{"class":314,"line":348},[312,2055,2056],{"class":318},"  px",[312,2058,336],{"class":325},[312,2060,1147],{"class":332},[312,2062,418],{"class":325},[312,2064,2065,2068,2071],{"class":314,"line":354},[312,2066,2067],{"class":332},"  0: ",[312,2069,2070],{"class":332},"'0'",[312,2072,418],{"class":325},[312,2074,2075,2078,2081],{"class":314,"line":521},[312,2076,2077],{"class":332},"  0.5: ",[312,2079,2080],{"class":332},"'2px'",[312,2082,418],{"class":325},[312,2084,2085,2088,2091],{"class":314,"line":526},[312,2086,2087],{"class":332},"  1: ",[312,2089,2090],{"class":332},"'4px'",[312,2092,418],{"class":325},[312,2094,2095],{"class":314,"line":1052},[312,2096,2097],{"class":344},"  // ...\n",[312,2099,2100,2103,2106],{"class":314,"line":1060},[312,2101,2102],{"class":332},"  14: ",[312,2104,2105],{"class":332},"'56px'",[312,2107,418],{"class":325},[312,2109,2110,2113,2116],{"class":314,"line":1072},[312,2111,2112],{"class":332},"  16: ",[312,2114,2115],{"class":332},"'64px'",[312,2117,418],{"class":325},[312,2119,2120,2123,2126],{"class":314,"line":1082},[312,2121,2122],{"class":332},"  18: ",[312,2124,2125],{"class":332},"'72px'",[312,2127,418],{"class":325},[312,2129,2130],{"class":314,"line":1104},[312,2131,2097],{"class":344},[312,2133,2134,2137,2140],{"class":314,"line":1123},[312,2135,2136],{"class":332},"  48: ",[312,2138,2139],{"class":332},"'192px'",[312,2141,418],{"class":325},[312,2143,2144,2147,2150],{"class":314,"line":1129},[312,2145,2146],{"class":332},"  50: ",[312,2148,2149],{"class":332},"'200px'",[312,2151,418],{"class":325},[312,2153,2154],{"class":314,"line":1139},[312,2155,2097],{"class":344},[312,2157,2158,2161,2164],{"class":314,"line":1152},[312,2159,2160],{"class":332},"  96: ",[312,2162,2163],{"class":332},"'384px'",[312,2165,418],{"class":325},[312,2167,2168],{"class":314,"line":1168},[312,2169,1101],{"class":325},[359,2171,2173],{"id":2172},"borderradius","borderRadius",[303,2175,2177],{"className":305,"code":2176,"language":307,"meta":308,"style":308},"borderRadius: {\n  none: '0px',\n  sm: '2px',\n  DEFAULT: '4px',\n  md: '6px',\n  lg: '8px',\n  xl: '12px',\n  '2xl': '16px',\n  '3xl': '24px',\n},\n",[294,2178,2179,2187,2199,2210,2222,2234,2246,2258,2270,2282],{"__ignoreMap":308},[312,2180,2181,2183,2185],{"class":314,"line":315},[312,2182,2173],{"class":318},[312,2184,336],{"class":325},[312,2186,326],{"class":325},[312,2188,2189,2192,2194,2197],{"class":314,"line":329},[312,2190,2191],{"class":318},"  none",[312,2193,336],{"class":325},[312,2195,2196],{"class":332}," '0px'",[312,2198,418],{"class":325},[312,2200,2201,2204,2206,2208],{"class":314,"line":341},[312,2202,2203],{"class":318},"  sm",[312,2205,336],{"class":325},[312,2207,1160],{"class":332},[312,2209,418],{"class":325},[312,2211,2212,2215,2217,2220],{"class":314,"line":348},[312,2213,2214],{"class":318},"  DEFAULT",[312,2216,336],{"class":325},[312,2218,2219],{"class":332}," '4px'",[312,2221,418],{"class":325},[312,2223,2224,2227,2229,2232],{"class":314,"line":354},[312,2225,2226],{"class":318},"  md",[312,2228,336],{"class":325},[312,2230,2231],{"class":332}," '6px'",[312,2233,418],{"class":325},[312,2235,2236,2239,2241,2244],{"class":314,"line":521},[312,2237,2238],{"class":318},"  lg",[312,2240,336],{"class":325},[312,2242,2243],{"class":332}," '8px'",[312,2245,418],{"class":325},[312,2247,2248,2251,2253,2256],{"class":314,"line":526},[312,2249,2250],{"class":318},"  xl",[312,2252,336],{"class":325},[312,2254,2255],{"class":332}," '12px'",[312,2257,418],{"class":325},[312,2259,2260,2263,2265,2268],{"class":314,"line":1052},[312,2261,2262],{"class":332},"  '2xl'",[312,2264,648],{"class":332},[312,2266,2267],{"class":332},"'16px'",[312,2269,418],{"class":325},[312,2271,2272,2275,2277,2280],{"class":314,"line":1060},[312,2273,2274],{"class":332},"  '3xl'",[312,2276,648],{"class":332},[312,2278,2279],{"class":332},"'24px'",[312,2281,418],{"class":325},[312,2283,2284],{"class":314,"line":1072},[312,2285,1101],{"class":325},[359,2287,2289],{"id":2288},"boxshadow","boxShadow",[282,2291,2292,2293,2298,2299,2302],{},"The ",[431,2294,2297],{"href":2295,"rel":2296},"https://www.npmjs.com/package/tailwindcss-box-shadow",[745],"tailwindcss-box-shadow"," plugin is used to output ",[294,2300,2301],{},"box-shadow"," CSS values exactly as you have them defined in your Tailwind CSS config.",[303,2304,2306],{"className":305,"code":2305,"language":307,"meta":308,"style":308},"boxShadow: {\n  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n  DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',\n  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',\n  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',\n  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',\n  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)',\n},\n",[294,2307,2308,2316,2327,2338,2349,2360,2371,2382,2394],{"__ignoreMap":308},[312,2309,2310,2312,2314],{"class":314,"line":315},[312,2311,2289],{"class":318},[312,2313,336],{"class":325},[312,2315,326],{"class":325},[312,2317,2318,2320,2322,2325],{"class":314,"line":329},[312,2319,2203],{"class":318},[312,2321,336],{"class":325},[312,2323,2324],{"class":332}," '0 1px 2px 0 rgba(0, 0, 0, 0.05)'",[312,2326,418],{"class":325},[312,2328,2329,2331,2333,2336],{"class":314,"line":341},[312,2330,2214],{"class":318},[312,2332,336],{"class":325},[312,2334,2335],{"class":332}," '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'",[312,2337,418],{"class":325},[312,2339,2340,2342,2344,2347],{"class":314,"line":348},[312,2341,2226],{"class":318},[312,2343,336],{"class":325},[312,2345,2346],{"class":332}," '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'",[312,2348,418],{"class":325},[312,2350,2351,2353,2355,2358],{"class":314,"line":354},[312,2352,2238],{"class":318},[312,2354,336],{"class":325},[312,2356,2357],{"class":332}," '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)'",[312,2359,418],{"class":325},[312,2361,2362,2364,2366,2369],{"class":314,"line":521},[312,2363,2250],{"class":318},[312,2365,336],{"class":325},[312,2367,2368],{"class":332}," '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'",[312,2370,418],{"class":325},[312,2372,2373,2375,2377,2380],{"class":314,"line":526},[312,2374,2262],{"class":332},[312,2376,648],{"class":332},[312,2378,2379],{"class":332},"'0 25px 50px -12px rgba(0, 0, 0, 0.25)'",[312,2381,418],{"class":325},[312,2383,2384,2387,2389,2392],{"class":314,"line":1052},[312,2385,2386],{"class":318},"  inner",[312,2388,336],{"class":325},[312,2390,2391],{"class":332}," 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)'",[312,2393,418],{"class":325},[312,2395,2396],{"class":314,"line":1060},[312,2397,1101],{"class":325},[359,2399,2401],{"id":2400},"fontfamily","fontFamily",[282,2403,2404],{},"Font stacks are the default ones from Tailwind CSS, but simplified. We also include a stack for the Inter font:",[303,2406,2408],{"className":305,"code":2407,"language":307,"meta":308,"style":308},"fontFamily: {\n  inter: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', '\"Segoe UI\"', 'sans-serif'],\n  sans: ['ui-sans-serif', 'system-ui', '-apple-system', '\"Segoe UI\"', 'sans-serif'],\n  serif: ['ui-serif', 'Georgia', 'Cambria', '\"Times New Roman\"', 'Times', 'serif'],\n  mono: ['ui-monospace', 'Menlo', 'Consolas', 'monospace'],\n},\n",[294,2409,2410,2418,2461,2493,2534,2565],{"__ignoreMap":308},[312,2411,2412,2414,2416],{"class":314,"line":315},[312,2413,2401],{"class":318},[312,2415,336],{"class":325},[312,2417,326],{"class":325},[312,2419,2420,2423,2425,2428,2431,2433,2436,2438,2441,2443,2446,2448,2451,2453,2456,2459],{"class":314,"line":329},[312,2421,2422],{"class":318},"  inter",[312,2424,336],{"class":325},[312,2426,2427],{"class":332}," [",[312,2429,2430],{"class":332},"'Inter'",[312,2432,573],{"class":325},[312,2434,2435],{"class":332}," 'ui-sans-serif'",[312,2437,573],{"class":325},[312,2439,2440],{"class":332}," 'system-ui'",[312,2442,573],{"class":325},[312,2444,2445],{"class":332}," '-apple-system'",[312,2447,573],{"class":325},[312,2449,2450],{"class":332}," '\"Segoe UI\"'",[312,2452,573],{"class":325},[312,2454,2455],{"class":332}," 'sans-serif'",[312,2457,2458],{"class":332},"]",[312,2460,418],{"class":325},[312,2462,2463,2466,2468,2470,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491],{"class":314,"line":341},[312,2464,2465],{"class":318},"  sans",[312,2467,336],{"class":325},[312,2469,2427],{"class":332},[312,2471,2472],{"class":332},"'ui-sans-serif'",[312,2474,573],{"class":325},[312,2476,2440],{"class":332},[312,2478,573],{"class":325},[312,2480,2445],{"class":332},[312,2482,573],{"class":325},[312,2484,2450],{"class":332},[312,2486,573],{"class":325},[312,2488,2455],{"class":332},[312,2490,2458],{"class":332},[312,2492,418],{"class":325},[312,2494,2495,2498,2500,2502,2505,2507,2510,2512,2515,2517,2520,2522,2525,2527,2530,2532],{"class":314,"line":348},[312,2496,2497],{"class":318},"  serif",[312,2499,336],{"class":325},[312,2501,2427],{"class":332},[312,2503,2504],{"class":332},"'ui-serif'",[312,2506,573],{"class":325},[312,2508,2509],{"class":332}," 'Georgia'",[312,2511,573],{"class":325},[312,2513,2514],{"class":332}," 'Cambria'",[312,2516,573],{"class":325},[312,2518,2519],{"class":332}," '\"Times New Roman\"'",[312,2521,573],{"class":325},[312,2523,2524],{"class":332}," 'Times'",[312,2526,573],{"class":325},[312,2528,2529],{"class":332}," 'serif'",[312,2531,2458],{"class":332},[312,2533,418],{"class":325},[312,2535,2536,2539,2541,2543,2546,2548,2551,2553,2556,2558,2561,2563],{"class":314,"line":354},[312,2537,2538],{"class":318},"  mono",[312,2540,336],{"class":325},[312,2542,2427],{"class":332},[312,2544,2545],{"class":332},"'ui-monospace'",[312,2547,573],{"class":325},[312,2549,2550],{"class":332}," 'Menlo'",[312,2552,573],{"class":325},[312,2554,2555],{"class":332}," 'Consolas'",[312,2557,573],{"class":325},[312,2559,2560],{"class":332}," 'monospace'",[312,2562,2458],{"class":332},[312,2564,418],{"class":325},[312,2566,2567],{"class":314,"line":521},[312,2568,1101],{"class":325},[359,2570,2572],{"id":2571},"fontsize","fontSize",[282,2574,2575],{},"Pixel values are preferred for font size utilities:",[303,2577,2579],{"className":305,"code":2578,"language":307,"meta":308,"style":308},"fontSize: {\n  0: '0',\n  xxs: '11px',\n  xs: '12px',\n  '2xs': '13px',\n  sm: '14px',\n  '2sm': '15px',\n  base: '16px',\n  lg: '18px',\n  xl: '20px',\n  '2xl': '24px',\n  '3xl': '30px',\n  '4xl': '36px',\n  '5xl': '48px',\n  '6xl': '60px',\n  '7xl': '72px',\n  '8xl': '96px',\n  '9xl': '128px',\n},\n",[294,2580,2581,2589,2597,2609,2620,2632,2643,2655,2667,2678,2689,2699,2710,2722,2734,2746,2757,2769,2781],{"__ignoreMap":308},[312,2582,2583,2585,2587],{"class":314,"line":315},[312,2584,2572],{"class":318},[312,2586,336],{"class":325},[312,2588,326],{"class":325},[312,2590,2591,2593,2595],{"class":314,"line":329},[312,2592,2067],{"class":332},[312,2594,2070],{"class":332},[312,2596,418],{"class":325},[312,2598,2599,2602,2604,2607],{"class":314,"line":341},[312,2600,2601],{"class":318},"  xxs",[312,2603,336],{"class":325},[312,2605,2606],{"class":332}," '11px'",[312,2608,418],{"class":325},[312,2610,2611,2614,2616,2618],{"class":314,"line":348},[312,2612,2613],{"class":318},"  xs",[312,2615,336],{"class":325},[312,2617,2255],{"class":332},[312,2619,418],{"class":325},[312,2621,2622,2625,2627,2630],{"class":314,"line":354},[312,2623,2624],{"class":332},"  '2xs'",[312,2626,648],{"class":332},[312,2628,2629],{"class":332},"'13px'",[312,2631,418],{"class":325},[312,2633,2634,2636,2638,2641],{"class":314,"line":521},[312,2635,2203],{"class":318},[312,2637,336],{"class":325},[312,2639,2640],{"class":332}," '14px'",[312,2642,418],{"class":325},[312,2644,2645,2648,2650,2653],{"class":314,"line":526},[312,2646,2647],{"class":332},"  '2sm'",[312,2649,648],{"class":332},[312,2651,2652],{"class":332},"'15px'",[312,2654,418],{"class":325},[312,2656,2657,2660,2662,2665],{"class":314,"line":1052},[312,2658,2659],{"class":318},"  base",[312,2661,336],{"class":325},[312,2663,2664],{"class":332}," '16px'",[312,2666,418],{"class":325},[312,2668,2669,2671,2673,2676],{"class":314,"line":1060},[312,2670,2238],{"class":318},[312,2672,336],{"class":325},[312,2674,2675],{"class":332}," '18px'",[312,2677,418],{"class":325},[312,2679,2680,2682,2684,2687],{"class":314,"line":1072},[312,2681,2250],{"class":318},[312,2683,336],{"class":325},[312,2685,2686],{"class":332}," '20px'",[312,2688,418],{"class":325},[312,2690,2691,2693,2695,2697],{"class":314,"line":1082},[312,2692,2262],{"class":332},[312,2694,648],{"class":332},[312,2696,2279],{"class":332},[312,2698,418],{"class":325},[312,2700,2701,2703,2705,2708],{"class":314,"line":1104},[312,2702,2274],{"class":332},[312,2704,648],{"class":332},[312,2706,2707],{"class":332},"'30px'",[312,2709,418],{"class":325},[312,2711,2712,2715,2717,2720],{"class":314,"line":1123},[312,2713,2714],{"class":332},"  '4xl'",[312,2716,648],{"class":332},[312,2718,2719],{"class":332},"'36px'",[312,2721,418],{"class":325},[312,2723,2724,2727,2729,2732],{"class":314,"line":1129},[312,2725,2726],{"class":332},"  '5xl'",[312,2728,648],{"class":332},[312,2730,2731],{"class":332},"'48px'",[312,2733,418],{"class":325},[312,2735,2736,2739,2741,2744],{"class":314,"line":1139},[312,2737,2738],{"class":332},"  '6xl'",[312,2740,648],{"class":332},[312,2742,2743],{"class":332},"'60px'",[312,2745,418],{"class":325},[312,2747,2748,2751,2753,2755],{"class":314,"line":1152},[312,2749,2750],{"class":332},"  '7xl'",[312,2752,648],{"class":332},[312,2754,2125],{"class":332},[312,2756,418],{"class":325},[312,2758,2759,2762,2764,2767],{"class":314,"line":1168},[312,2760,2761],{"class":332},"  '8xl'",[312,2763,648],{"class":332},[312,2765,2766],{"class":332},"'96px'",[312,2768,418],{"class":325},[312,2770,2771,2774,2776,2779],{"class":314,"line":1173},[312,2772,2773],{"class":332},"  '9xl'",[312,2775,648],{"class":332},[312,2777,2778],{"class":332},"'128px'",[312,2780,418],{"class":325},[312,2782,2783],{"class":314,"line":1178},[312,2784,1101],{"class":325},[359,2786,2788],{"id":2787},"lineheight","lineHeight",[282,2790,2292,2791,2793,2794,2796],{},[294,2792,2788],{}," utilities have been extended to include all ",[294,2795,2011],{}," scale values:",[303,2798,2800],{"className":305,"code":2799,"language":307,"meta":308,"style":308},"lineHeight: theme => ({\n  ...theme('spacing'),\n}),\n",[294,2801,2802,2820,2837],{"__ignoreMap":308},[312,2803,2804,2806,2808,2811,2814,2817],{"class":314,"line":315},[312,2805,2788],{"class":318},[312,2807,336],{"class":325},[312,2809,2810],{"class":1201}," theme",[312,2812,2813],{"class":1201}," =>",[312,2815,2816],{"class":332}," (",[312,2818,2819],{"class":325},"{\n",[312,2821,2822,2825,2828,2830,2833,2835],{"class":314,"line":329},[312,2823,2824],{"class":318},"  ...",[312,2826,2827],{"class":1500},"theme",[312,2829,655],{"class":332},[312,2831,2832],{"class":332},"'spacing'",[312,2834,668],{"class":332},[312,2836,418],{"class":325},[312,2838,2839,2841,2843],{"class":314,"line":341},[312,2840,1467],{"class":325},[312,2842,668],{"class":332},[312,2844,418],{"class":325},[282,2846,2847,2848,2851],{},"So you can use ",[294,2849,2850],{},"leading"," utilities to easily create vertical spacing, like this:",[303,2853,2856],{"className":614,"code":2854,"filename":2855,"language":616,"meta":308,"style":308},"\u003Cdiv class=\"leading-16\">‍\u003C/div>\n","emails/example.html",[294,2857,2858],{"__ignoreMap":308},[312,2859,2860,2862,2865,2869,2872,2875,2878,2880,2883,2886,2888,2890],{"class":314,"line":315},[312,2861,624],{"class":623},[312,2863,2864],{"class":318},"div",[312,2866,2868],{"class":2867},"sQMLp"," class",[312,2870,2871],{"class":623},"=",[312,2873,2874],{"class":2867},"\"",[312,2876,2877],{"class":332},"leading-16",[312,2879,2874],{"class":2867},[312,2881,2882],{"class":623},">",[312,2884,2885],{"class":318},"‍",[312,2887,681],{"class":623},[312,2889,2864],{"class":318},[312,2891,630],{"class":623},[282,2893,2894],{},"Result:",[303,2896,2898],{"className":614,"code":2897,"language":616,"meta":308,"style":308},"\u003Cdiv style=\"line-height: 64px\">‍\u003C/div>\n",[294,2899,2900],{"__ignoreMap":308},[312,2901,2902,2904,2906,2909,2911,2913,2916,2918,2920,2922,2924,2926],{"class":314,"line":315},[312,2903,624],{"class":623},[312,2905,2864],{"class":318},[312,2907,2908],{"class":2867}," style",[312,2910,2871],{"class":623},[312,2912,2874],{"class":2867},[312,2914,2915],{"class":332},"line-height: 64px",[312,2917,2874],{"class":2867},[312,2919,2882],{"class":623},[312,2921,2885],{"class":318},[312,2923,681],{"class":623},[312,2925,2864],{"class":318},[312,2927,630],{"class":623},[359,2929,2931],{"id":2930},"maxwidth","maxWidth",[303,2933,2935],{"className":305,"code":2934,"language":307,"meta":308,"style":308},"maxWidth: theme => ({\n  ...theme('spacing'),\n  xs: '160px',\n  sm: '192px',\n  md: '224px',\n  lg: '256px',\n  xl: '288px',\n  '2xl': '336px',\n  '3xl': '384px',\n  '4xl': '448px',\n  '5xl': '512px',\n  '6xl': '576px',\n  '7xl': '640px',\n}),\n",[294,2936,2937,2951,2965,2976,2987,2998,3009,3020,3031,3042,3053,3064,3075,3086],{"__ignoreMap":308},[312,2938,2939,2941,2943,2945,2947,2949],{"class":314,"line":315},[312,2940,2931],{"class":318},[312,2942,336],{"class":325},[312,2944,2810],{"class":1201},[312,2946,2813],{"class":1201},[312,2948,2816],{"class":332},[312,2950,2819],{"class":325},[312,2952,2953,2955,2957,2959,2961,2963],{"class":314,"line":329},[312,2954,2824],{"class":318},[312,2956,2827],{"class":1500},[312,2958,655],{"class":332},[312,2960,2832],{"class":332},[312,2962,668],{"class":332},[312,2964,418],{"class":325},[312,2966,2967,2969,2971,2974],{"class":314,"line":341},[312,2968,2613],{"class":332},[312,2970,336],{"class":325},[312,2972,2973],{"class":332}," '160px'",[312,2975,418],{"class":325},[312,2977,2978,2980,2982,2985],{"class":314,"line":348},[312,2979,2203],{"class":332},[312,2981,336],{"class":325},[312,2983,2984],{"class":332}," '192px'",[312,2986,418],{"class":325},[312,2988,2989,2991,2993,2996],{"class":314,"line":354},[312,2990,2226],{"class":332},[312,2992,336],{"class":325},[312,2994,2995],{"class":332}," '224px'",[312,2997,418],{"class":325},[312,2999,3000,3002,3004,3007],{"class":314,"line":521},[312,3001,2238],{"class":332},[312,3003,336],{"class":325},[312,3005,3006],{"class":332}," '256px'",[312,3008,418],{"class":325},[312,3010,3011,3013,3015,3018],{"class":314,"line":526},[312,3012,2250],{"class":332},[312,3014,336],{"class":325},[312,3016,3017],{"class":332}," '288px'",[312,3019,418],{"class":325},[312,3021,3022,3024,3026,3029],{"class":314,"line":1052},[312,3023,2262],{"class":332},[312,3025,336],{"class":325},[312,3027,3028],{"class":332}," '336px'",[312,3030,418],{"class":325},[312,3032,3033,3035,3037,3040],{"class":314,"line":1060},[312,3034,2274],{"class":332},[312,3036,336],{"class":325},[312,3038,3039],{"class":332}," '384px'",[312,3041,418],{"class":325},[312,3043,3044,3046,3048,3051],{"class":314,"line":1072},[312,3045,2714],{"class":332},[312,3047,336],{"class":325},[312,3049,3050],{"class":332}," '448px'",[312,3052,418],{"class":325},[312,3054,3055,3057,3059,3062],{"class":314,"line":1082},[312,3056,2726],{"class":332},[312,3058,336],{"class":325},[312,3060,3061],{"class":332}," '512px'",[312,3063,418],{"class":325},[312,3065,3066,3068,3070,3073],{"class":314,"line":1104},[312,3067,2738],{"class":332},[312,3069,336],{"class":325},[312,3071,3072],{"class":332}," '576px'",[312,3074,418],{"class":325},[312,3076,3077,3079,3081,3084],{"class":314,"line":1123},[312,3078,2750],{"class":332},[312,3080,336],{"class":325},[312,3082,3083],{"class":332}," '640px'",[312,3085,418],{"class":325},[312,3087,3088,3090,3092],{"class":314,"line":1129},[312,3089,1467],{"class":325},[312,3091,668],{"class":332},[312,3093,418],{"class":325},[359,3095,3097],{"id":3096},"pixel-units","Pixel units",[282,3099,3100,3101,3103,3104,3106],{},"Because of poor email client support, our email preset for Tailwind CSS replaces ",[294,3102,1306],{}," units with ",[294,3105,987],{},".\nThis affects the following utilities:",[1387,3108,3109,3114,3118,3122,3126],{},[1390,3110,3111,3113],{},[294,3112,2011],{}," (width, height, margin, padding, etc)",[1390,3115,3116],{},[294,3117,2931],{},[1390,3119,3120],{},[294,3121,2173],{},[1390,3123,3124],{},[294,3125,2572],{},[1390,3127,3128],{},[294,3129,2788],{},[359,3131,3133],{"id":3132},"plugins","Plugins",[282,3135,3136,3137,1798,3139,3142,3143,434],{},"You can of course use any Tailwind CSS plugin, all you have to do is to install it from NPM and then ",[294,3138,1202],{},[294,3140,3141],{},"require"," it in your ",[294,3144,1290],{},[303,3146,3150],{"className":3147,"code":3148,"language":3149,"meta":308,"style":308},"language-sh shiki shiki-themes tailwind-css tailwind-css","npm install tailwindcss-email-variants\n","sh",[294,3151,3152],{"__ignoreMap":308},[312,3153,3154,3157,3160],{"class":314,"line":315},[312,3155,3156],{"class":318},"npm",[312,3158,3159],{"class":332}," install",[312,3161,3162],{"class":332}," tailwindcss-email-variants\n",[282,3164,3165,3166,336],{},"With ",[294,3167,1202],{},[303,3169,3172],{"className":1441,"code":3170,"filename":1290,"highlights":3171,"language":307,"meta":308,"style":308}," import emailVariants from 'tailwindcss-email-variants' // [!code ++]\n\n export default {\n    plugins: [ // [!code ++]\n      emailVariants, // [!code ++]\n    ], // [!code ++]\n }\n",[315,348,354,521],[294,3173,3174,3188,3192,3201,3211,3219,3227],{"__ignoreMap":308},[312,3175,3177,3180,3183,3185],{"class":3176,"line":315},[314,1520,1521,1522],[312,3178,3179],{"class":1201}," import",[312,3181,3182],{"class":643}," emailVariants",[312,3184,1208],{"class":325},[312,3186,3187],{"class":1201}," 'tailwindcss-email-variants'",[312,3189,3190],{"class":314,"line":329},[312,3191,1217],{"emptyLinePlaceholder":1216},[312,3193,3194,3197,3199],{"class":314,"line":341},[312,3195,3196],{"class":318}," export",[312,3198,322],{"class":318},[312,3200,326],{"class":325},[312,3202,3204,3207,3209],{"class":3203,"line":348},[314,1520,1521,1522],[312,3205,3206],{"class":332},"    plugins",[312,3208,336],{"class":325},[312,3210,1251],{"class":332},[312,3212,3214,3217],{"class":3213,"line":354},[314,1520,1521,1522],[312,3215,3216],{"class":1201},"      emailVariants",[312,3218,573],{"class":325},[312,3220,3222,3225],{"class":3221,"line":521},[314,1520,1521,1522],[312,3223,3224],{"class":332},"    ]",[312,3226,573],{"class":325},[312,3228,3229],{"class":314,"line":526},[312,3230,3231],{"class":325}," }\n",[282,3233,3165,3234,336],{},[294,3235,3141],{},[303,3237,3240],{"className":1441,"code":3238,"filename":1290,"highlights":3239,"language":307,"meta":308,"style":308},"module.exports = {\n   plugins: [ // [!code ++]\n     require('tailwindcss-email-variants'), // [!code ++]\n   ], // [!code ++]\n}\n",[329,341,348],[294,3241,3242,3254,3264,3279,3287],{"__ignoreMap":308},[312,3243,3244,3246,3248,3250,3252],{"class":314,"line":315},[312,3245,1475],{"class":318},[312,3247,434],{"class":325},[312,3249,1480],{"class":318},[312,3251,1484],{"class":1483},[312,3253,326],{"class":325},[312,3255,3257,3260,3262],{"class":3256,"line":329},[314,1520,1521,1522],[312,3258,3259],{"class":332},"   plugins",[312,3261,336],{"class":325},[312,3263,1251],{"class":332},[312,3265,3267,3270,3272,3275,3277],{"class":3266,"line":341},[314,1520,1521,1522],[312,3268,3269],{"class":1500},"     require",[312,3271,655],{"class":332},[312,3273,3274],{"class":332},"'tailwindcss-email-variants'",[312,3276,668],{"class":332},[312,3278,573],{"class":325},[312,3280,3282,3285],{"class":3281,"line":348},[314,1520,1521,1522],[312,3283,3284],{"class":332},"   ]",[312,3286,573],{"class":325},[312,3288,3289],{"class":314,"line":354},[312,3290,357],{"class":325},[732,3292,3294,3297],{"type":3293},"info",[294,3295,3296],{},"tailwindcss-email-variants","\n is already included in the email preset, no need to install it.\n",[359,3299,3301],{"id":3300},"disabled-plugins","Disabled plugins",[282,3303,3304,3306],{},[294,3305,1191],{}," disables the following Tailwind CSS core plugins due to poor support in the majority of email clients:",[1387,3308,3309,3312,3315,3318,3321,3324,3327,3330],{},[1390,3310,3311],{},"preflight",[1390,3313,3314],{},"backgroundOpacity",[1390,3316,3317],{},"borderOpacity",[1390,3319,3320],{},"borderSpacing",[1390,3322,3323],{},"divideOpacity",[1390,3325,3326],{},"placeholderOpacity",[1390,3328,3329],{},"textOpacity",[1390,3331,3332],{},"textDecoration",[282,3334,3335,3336,1544,3338,3341,3342,336],{},"If you want to use one of these plugins, simply set it to ",[294,3337,383],{},[294,3339,3340],{},"corePlugins"," at the bottom of your ",[294,3343,1290],{},[303,3345,3348],{"className":1441,"code":3346,"filename":1290,"highlights":3347,"language":307,"meta":308,"style":308},"corePlugins: {\n  backgroundOpacity: false, // [!code --]\n  backgroundOpacity: true, // [!code ++]\n}\n",[341],[294,3349,3350,3358,3371,3382],{"__ignoreMap":308},[312,3351,3352,3354,3356],{"class":314,"line":315},[312,3353,3340],{"class":318},[312,3355,336],{"class":325},[312,3357,326],{"class":325},[312,3359,3362,3365,3367,3369],{"class":3360,"line":329},[314,1521,3361],"remove",[312,3363,3364],{"class":318},"  backgroundOpacity",[312,3366,336],{"class":325},[312,3368,888],{"class":318},[312,3370,573],{"class":325},[312,3372,3374,3376,3378,3380],{"class":3373,"line":341},[314,1520,1521,1522],[312,3375,3364],{"class":318},[312,3377,336],{"class":325},[312,3379,415],{"class":318},[312,3381,573],{"class":325},[312,3383,3384],{"class":314,"line":348},[312,3385,357],{"class":325},[627,3387,3388],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}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 .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 .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .snKqK, html code.shiki .snKqK{--shiki-light:#324258;--shiki-dark:#324258}html pre.shiki code .sbQc2, html code.shiki .sbQc2{--shiki-light:#64748B;--shiki-dark:#64748B}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sTnEA, html code.shiki .sTnEA{--shiki-light:#44403C;--shiki-light-font-style:italic;--shiki-dark:#44403C;--shiki-dark-font-style:italic}html pre.shiki code .sGouh, html code.shiki .sGouh{--shiki-light:#3730A3;--shiki-light-font-style:italic;--shiki-dark:#3730A3;--shiki-dark-font-style:italic}html pre.shiki code .sSci_, html code.shiki .sSci_{--shiki-light:#EC4899;--shiki-light-font-style:italic;--shiki-dark:#EC4899;--shiki-dark-font-style:italic}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}",{"title":308,"searchDepth":329,"depth":329,"links":3390},[3391,3402],{"id":288,"depth":329,"text":289,"children":3392},[3393,3394,3395,3396,3397,3398,3399,3400,3401],{"id":361,"depth":341,"text":361},{"id":437,"depth":341,"text":437},{"id":456,"depth":341,"text":456},{"id":591,"depth":341,"text":592},{"id":827,"depth":341,"text":828},{"id":911,"depth":341,"text":911},{"id":930,"depth":341,"text":930},{"id":949,"depth":341,"text":950},{"id":970,"depth":341,"text":970},{"id":1289,"depth":329,"text":1290,"children":3403},[3404,3405,3406,3407,3408,3409,3410,3411,3412,3413,3414,3415,3416,3417,3418],{"id":1313,"depth":341,"text":1313},{"id":1381,"depth":341,"text":1382},{"id":1538,"depth":341,"text":1538},{"id":1572,"depth":341,"text":1572},{"id":1817,"depth":341,"text":1817},{"id":2011,"depth":341,"text":2011},{"id":2172,"depth":341,"text":2173},{"id":2288,"depth":341,"text":2289},{"id":2400,"depth":341,"text":2401},{"id":2571,"depth":341,"text":2572},{"id":2787,"depth":341,"text":2788},{"id":2930,"depth":341,"text":2931},{"id":3096,"depth":341,"text":3097},{"id":3132,"depth":341,"text":3133},{"id":3300,"depth":341,"text":3301},"Tailwind CSS configuration options for email development in Maizzle.","md",{},{"title":272,"description":3419},{"loc":51},"docs/configuration/css","EleVPPFRD_Zu0T7yv66vV9tgcIrWdcPHm1fq8E8Nx-c",{"id":4,"extension":5,"items":3427,"meta":3498,"stem":195,"__hash__":196},[3428,3438,3443,3452,3465,3483,3489],{"name":8,"items":3429},[3430,3431,3432,3433,3434,3435,3436,3437],{"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":3439},[3440,3441,3442],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":3444},[3445,3446,3447,3448,3449,3450,3451],{"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":3453},[3454,3455,3456,3457,3458,3459,3460,3461,3462,3463,3464],{"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":3466},[3467,3468,3469,3470,3471,3472,3473,3474,3475,3476,3477,3478,3479,3480,3481,3482],{"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":3484},[3485,3486,3487,3488],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":3490},[3491,3492,3493,3494,3495,3496,3497],{"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},{},1780318592588]