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