[{"data":1,"prerenderedAt":1441},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:FH9IdGvGg9WMMhkg2Mh95OZTJlx1n5YZ0EBmprkeTNo":135,"content-page-surround:docs:FH9IdGvGg9WMMhkg2Mh95OZTJlx1n5YZ0EBmprkeTNo":1422,"i-logos:typescript-icon":1431,"i-logos:vue":1435,"i-lucide:clipboard":1438},[4,29,66,103],{"title":5,"id":6,"canonicalKey":7,"locale":8,"draft":9,"icon":10,"sidebar":11,"path":12,"children":13},"Getting Started","content:docs:1.getting-started:.navigation.yml","1","en",false,"i-lucide-rocket","section","\u002Fdocs\u002Fgetting-started",[14,19,24],{"title":15,"id":16,"canonicalKey":17,"locale":8,"draft":9,"path":18},"Installation","content:docs:1.getting-started:2.installation.md","1\u002F2","\u002Fdocs\u002Fgetting-started\u002Finstallation",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":9,"path":23},"Your first email","content:docs:1.getting-started:3.first-email.md","1\u002F3","\u002Fdocs\u002Fgetting-started\u002Ffirst-email",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":9,"path":28},"Render from Nitro","content:docs:1.getting-started:4.render-from-nitro.md","1\u002F4","\u002Fdocs\u002Fgetting-started\u002Frender-from-nitro",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":9,"icon":33,"sidebar":11,"path":34,"children":35},"Components","content:docs:2.components:.navigation.yml","2","i-lucide-blocks","\u002Fdocs\u002Fcomponents",[36,41,46,51,56,61],{"title":37,"id":38,"canonicalKey":39,"locale":8,"draft":9,"path":40},"Structure","content:docs:2.components:2.structure.md","2\u002F2","\u002Fdocs\u002Fcomponents\u002Fstructure",{"title":42,"id":43,"canonicalKey":44,"locale":8,"draft":9,"path":45},"Layout","content:docs:2.components:3.layout.md","2\u002F3","\u002Fdocs\u002Fcomponents\u002Flayout",{"title":47,"id":48,"canonicalKey":49,"locale":8,"draft":9,"path":50},"Content","content:docs:2.components:4.content.md","2\u002F4","\u002Fdocs\u002Fcomponents\u002Fcontent",{"title":52,"id":53,"canonicalKey":54,"locale":8,"draft":9,"path":55},"Code","content:docs:2.components:5.code.md","2\u002F5","\u002Fdocs\u002Fcomponents\u002Fcode",{"title":57,"id":58,"canonicalKey":59,"locale":8,"draft":9,"path":60},"Markdown","content:docs:2.components:6.markdown.md","2\u002F6","\u002Fdocs\u002Fcomponents\u002Fmarkdown",{"title":62,"id":63,"canonicalKey":64,"locale":8,"draft":9,"path":65},"Tailwind","content:docs:2.components:7.tailwind.md","2\u002F7","\u002Fdocs\u002Fcomponents\u002Ftailwind",{"title":67,"id":68,"canonicalKey":69,"locale":8,"draft":9,"icon":70,"sidebar":11,"path":71,"children":72},"Guides","content:docs:3.guides:.navigation.yml","3","i-lucide-compass","\u002Fdocs\u002Fguides",[73,78,83,88,93,98],{"title":74,"id":75,"canonicalKey":76,"locale":8,"draft":9,"path":77},"Using Tailwind","content:docs:3.guides:2.tailwind.md","3\u002F2","\u002Fdocs\u002Fguides\u002Ftailwind",{"title":79,"id":80,"canonicalKey":81,"locale":8,"draft":9,"path":82},"Subject lines","content:docs:3.guides:3.subject-lines.md","3\u002F3","\u002Fdocs\u002Fguides\u002Fsubject-lines",{"title":84,"id":85,"canonicalKey":86,"locale":8,"draft":9,"path":87},"Plain text","content:docs:3.guides:4.plain-text.md","3\u002F4","\u002Fdocs\u002Fguides\u002Fplain-text",{"title":89,"id":90,"canonicalKey":91,"locale":8,"draft":9,"path":92},"Testing your emails","content:docs:3.guides:5.testing-your-emails.md","3\u002F5","\u002Fdocs\u002Fguides\u002Ftesting-your-emails",{"title":94,"id":95,"canonicalKey":96,"locale":8,"draft":9,"path":97},"Preview workflow","content:docs:3.guides:6.preview-workflow.md","3\u002F6","\u002Fdocs\u002Fguides\u002Fpreview-workflow",{"title":99,"id":100,"canonicalKey":101,"locale":8,"draft":9,"path":102},"Client compatibility and proofs","content:docs:3.guides:7.client-compatibility.md","3\u002F7","\u002Fdocs\u002Fguides\u002Fclient-compatibility",{"title":104,"id":105,"canonicalKey":106,"locale":8,"draft":9,"icon":107,"sidebar":11,"path":108,"children":109},"Reference","content:docs:4.reference:.navigation.yml","4","i-lucide-file-text","\u002Fdocs\u002Freference",[110,115,120,125,130],{"title":111,"id":112,"canonicalKey":113,"locale":8,"draft":9,"path":114},"renderEmail","content:docs:4.reference:2.render-email.md","4\u002F2","\u002Fdocs\u002Freference\u002Frender-email",{"title":116,"id":117,"canonicalKey":118,"locale":8,"draft":9,"path":119},"Module behavior","content:docs:4.reference:3.module.md","4\u002F3","\u002Fdocs\u002Freference\u002Fmodule",{"title":121,"id":122,"canonicalKey":123,"locale":8,"draft":9,"path":124},"Error types","content:docs:4.reference:4.errors.md","4\u002F4","\u002Fdocs\u002Freference\u002Ferrors",{"title":126,"id":127,"canonicalKey":128,"locale":8,"draft":9,"path":129},"Conformance & divergences","content:docs:4.reference:5.conformance.md","4\u002F5","\u002Fdocs\u002Freference\u002Fconformance",{"title":131,"id":132,"canonicalKey":133,"locale":8,"draft":9,"path":134},"Migration from React Email","content:docs:4.reference:6.migration.md","4\u002F6","\u002Fdocs\u002Freference\u002Fmigration",{"title":74,"description":136,"body":137,"type":1409,"id":75,"canonicalKey":76,"draft":9,"partial":9,"locale":8,"collection":1410,"navigationFile":9,"file":1411,"resolvedRefs":1416,"route":1417,"resolution":1419},"How ETailwind inlines utilities, how nested-component classes are reached, and the exact documented limitations.",{"type":138,"children":139,"toc":1400},"root",[140,163,287,294,338,343,399,405,417,428,759,798,803,843,849,861,1052,1140,1240,1246,1375],{"type":141,"tag":142,"props":143,"children":144},"element","p",{},[145,148,154,156,161],{"type":146,"value":147},"text","Wrap an email document in ",{"type":141,"tag":149,"props":150,"children":151},"code",{},[152],{"type":146,"value":153},"\u003CETailwind>",{"type":146,"value":155}," and Tailwind v4 utility classes on descendant elements are compiled into email-safe output at render time. Compatible declarations become inline styles; the boundary is server-only and requires a ",{"type":141,"tag":149,"props":157,"children":158},{},[159],{"type":146,"value":160},"\u003Chead>",{"type":146,"value":162}," inside it.",{"type":141,"tag":164,"props":165,"children":168},"pre",{"language":166,"class":167},"vue","shiki shiki-themes light-plus dark-plus dark:dark-plus",[169],{"type":141,"tag":149,"props":170,"children":172},{"class":171},"language-vue",[173,196,198,207,208,216,217,225,226,234,235,243,244,252,253,261,262,270,271],{"type":141,"tag":174,"props":175,"children":178},"span",{"class":176,"style":177},"line","display: inline",[179,185,191],{"type":141,"tag":174,"props":180,"children":182},{"style":181},"color:#800000;--shiki-dark:#808080",[183],{"type":146,"value":184},"\u003C",{"type":141,"tag":174,"props":186,"children":188},{"style":187},"color:#800000;--shiki-dark:#569CD6",[189],{"type":146,"value":190},"ETailwind",{"type":141,"tag":174,"props":192,"children":193},{"style":181},[194],{"type":146,"value":195},">",{"type":146,"value":197},"\n",{"type":141,"tag":174,"props":199,"children":200},{"class":176,"style":177},[201],{"type":141,"tag":174,"props":202,"children":204},{"style":203},"color:#000000;--shiki-dark:#D4D4D4",[205],{"type":146,"value":206},"  \u003CEHtml>",{"type":146,"value":197},{"type":141,"tag":174,"props":209,"children":210},{"class":176,"style":177},[211],{"type":141,"tag":174,"props":212,"children":213},{"style":203},[214],{"type":146,"value":215},"    \u003CEHead \u002F>",{"type":146,"value":197},{"type":141,"tag":174,"props":218,"children":219},{"class":176,"style":177},[220],{"type":141,"tag":174,"props":221,"children":222},{"style":203},[223],{"type":146,"value":224},"    \u003CEBody class=\"bg-gray-100\">",{"type":146,"value":197},{"type":141,"tag":174,"props":227,"children":228},{"class":176,"style":177},[229],{"type":141,"tag":174,"props":230,"children":231},{"style":203},[232],{"type":146,"value":233},"      \u003CEContainer class=\"p-4\">",{"type":146,"value":197},{"type":141,"tag":174,"props":236,"children":237},{"class":176,"style":177},[238],{"type":141,"tag":174,"props":239,"children":240},{"style":203},[241],{"type":146,"value":242},"        \u003CEText class=\"text-red-500\">Styled with Tailwind\u003C\u002FEText>",{"type":146,"value":197},{"type":141,"tag":174,"props":245,"children":246},{"class":176,"style":177},[247],{"type":141,"tag":174,"props":248,"children":249},{"style":203},[250],{"type":146,"value":251},"      \u003C\u002FEContainer>",{"type":146,"value":197},{"type":141,"tag":174,"props":254,"children":255},{"class":176,"style":177},[256],{"type":141,"tag":174,"props":257,"children":258},{"style":203},[259],{"type":146,"value":260},"    \u003C\u002FEBody>",{"type":146,"value":197},{"type":141,"tag":174,"props":263,"children":264},{"class":176,"style":177},[265],{"type":141,"tag":174,"props":266,"children":267},{"style":203},[268],{"type":146,"value":269},"  \u003C\u002FEHtml>",{"type":146,"value":197},{"type":141,"tag":174,"props":272,"children":273},{"class":176,"style":177},[274,279,283],{"type":141,"tag":174,"props":275,"children":276},{"style":181},[277],{"type":146,"value":278},"\u003C\u002F",{"type":141,"tag":174,"props":280,"children":281},{"style":187},[282],{"type":146,"value":190},{"type":141,"tag":174,"props":284,"children":285},{"style":181},[286],{"type":146,"value":195},{"type":141,"tag":288,"props":289,"children":291},"h2",{"id":290},"precedence-and-non-inlinable-rules",[292],{"type":146,"value":293},"Precedence and non-inlinable rules",{"type":141,"tag":142,"props":295,"children":296},{},[297,299,310,312,317,319,323,325,330,332,336],{"type":146,"value":298},"Inlining precedence is ",{"type":141,"tag":300,"props":301,"children":302},"strong",{},[303,305],{"type":146,"value":304},"component defaults \u003C Tailwind utilities \u003C author ",{"type":141,"tag":149,"props":306,"children":307},{},[308],{"type":146,"value":309},"style",{"type":146,"value":311},". Utilities that cannot be inlined — media queries and pseudo-classes — are collected into a ",{"type":141,"tag":149,"props":313,"children":314},{},[315],{"type":146,"value":316},"\u003Cstyle>",{"type":146,"value":318}," element in the document ",{"type":141,"tag":149,"props":320,"children":321},{},[322],{"type":146,"value":160},{"type":146,"value":324},", residual class names are sanitized, and ",{"type":141,"tag":149,"props":326,"children":327},{},[328],{"type":146,"value":329},"mso-*",{"type":146,"value":331}," properties survive inlining. If a class needs a ",{"type":141,"tag":149,"props":333,"children":334},{},[335],{"type":146,"value":160},{"type":146,"value":337}," and none exists inside the boundary, rendering throws with a message naming the offending classes.",{"type":141,"tag":142,"props":339,"children":340},{},[341],{"type":146,"value":342},"You can extend the engine through props:",{"type":141,"tag":344,"props":345,"children":346},"ul",{},[347,372,389],{"type":141,"tag":348,"props":349,"children":350},"li",{},[351,356,358,363,365,370],{"type":141,"tag":149,"props":352,"children":353},{},[354],{"type":146,"value":355},"config",{"type":146,"value":357}," — a Tailwind config (everything except ",{"type":141,"tag":149,"props":359,"children":360},{},[361],{"type":146,"value":362},"content",{"type":146,"value":364},"), matching React Email's ",{"type":141,"tag":149,"props":366,"children":367},{},[368],{"type":146,"value":369},"TailwindConfig",{"type":146,"value":371},".",{"type":141,"tag":348,"props":373,"children":374},{},[375,380,382,387],{"type":141,"tag":149,"props":376,"children":377},{},[378],{"type":146,"value":379},"theme",{"type":146,"value":381}," — raw CSS appended to the ",{"type":141,"tag":149,"props":383,"children":384},{},[385],{"type":146,"value":386},"@theme",{"type":146,"value":388}," layer.",{"type":141,"tag":348,"props":390,"children":391},{},[392,397],{"type":141,"tag":149,"props":393,"children":394},{},[395],{"type":146,"value":396},"utility",{"type":146,"value":398}," — raw CSS appended to the utilities layer.",{"type":141,"tag":288,"props":400,"children":402},{"id":401},"share-tokens-not-the-nuxt-stylesheet",[403],{"type":146,"value":404},"Share tokens, not the Nuxt stylesheet",{"type":141,"tag":142,"props":406,"children":407},{},[408,410,415],{"type":146,"value":409},"Email rendering does not load the Nuxt application's CSS bundle, and browser CSS variables cannot be relied on in email clients. A class such as ",{"type":141,"tag":149,"props":411,"children":412},{},[413],{"type":146,"value":414},"text-primary",{"type":146,"value":416}," must resolve to a concrete value while the email renders.",{"type":141,"tag":142,"props":418,"children":419},{},[420,422,426],{"type":146,"value":421},"Keep one application-owned token source and feed its value into ",{"type":141,"tag":149,"props":423,"children":424},{},[425],{"type":146,"value":190},{"type":146,"value":427}," explicitly:",{"type":141,"tag":164,"props":429,"children":430},{"language":166,"class":167},[431],{"type":141,"tag":149,"props":432,"children":433},{"class":171},[434,472,473,509,510,525,526,529,530,546,547,589,590,607,608,626,627,643,644,692,693,709,710,726,727,743,744],{"type":141,"tag":174,"props":435,"children":436},{"class":176,"style":177},[437,441,446,452,457,462,468],{"type":141,"tag":174,"props":438,"children":439},{"style":181},[440],{"type":146,"value":184},{"type":141,"tag":174,"props":442,"children":443},{"style":187},[444],{"type":146,"value":445},"script",{"type":141,"tag":174,"props":447,"children":449},{"style":448},"color:#E50000;--shiki-dark:#9CDCFE",[450],{"type":146,"value":451}," setup",{"type":141,"tag":174,"props":453,"children":454},{"style":448},[455],{"type":146,"value":456}," lang",{"type":141,"tag":174,"props":458,"children":459},{"style":203},[460],{"type":146,"value":461},"=",{"type":141,"tag":174,"props":463,"children":465},{"style":464},"color:#0000FF;--shiki-dark:#CE9178",[466],{"type":146,"value":467},"\"ts\"",{"type":141,"tag":174,"props":469,"children":470},{"style":181},[471],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":474,"children":475},{"class":176,"style":177},[476,482,487,493,498,503],{"type":141,"tag":174,"props":477,"children":479},{"style":478},"color:#AF00DB;--shiki-dark:#C586C0",[480],{"type":146,"value":481},"import",{"type":141,"tag":174,"props":483,"children":484},{"style":203},[485],{"type":146,"value":486}," { ",{"type":141,"tag":174,"props":488,"children":490},{"style":489},"color:#001080;--shiki-dark:#9CDCFE",[491],{"type":146,"value":492},"emailTheme",{"type":141,"tag":174,"props":494,"children":495},{"style":203},[496],{"type":146,"value":497}," } ",{"type":141,"tag":174,"props":499,"children":500},{"style":478},[501],{"type":146,"value":502},"from",{"type":141,"tag":174,"props":504,"children":506},{"style":505},"color:#A31515;--shiki-dark:#CE9178",[507],{"type":146,"value":508}," '~\u002Fshared\u002Femail-theme'",{"type":146,"value":197},{"type":141,"tag":174,"props":511,"children":512},{"class":176,"style":177},[513,517,521],{"type":141,"tag":174,"props":514,"children":515},{"style":181},[516],{"type":146,"value":278},{"type":141,"tag":174,"props":518,"children":519},{"style":187},[520],{"type":146,"value":445},{"type":141,"tag":174,"props":522,"children":523},{"style":181},[524],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":527,"children":528},{"class":176,"style":177},[],{"type":146,"value":197},{"type":141,"tag":174,"props":531,"children":532},{"class":176,"style":177},[533,537,542],{"type":141,"tag":174,"props":534,"children":535},{"style":181},[536],{"type":146,"value":184},{"type":141,"tag":174,"props":538,"children":539},{"style":187},[540],{"type":146,"value":541},"template",{"type":141,"tag":174,"props":543,"children":544},{"style":181},[545],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":548,"children":549},{"class":176,"style":177},[550,555,559,564,568,572,577,581,585],{"type":141,"tag":174,"props":551,"children":552},{"style":181},[553],{"type":146,"value":554},"  \u003C",{"type":141,"tag":174,"props":556,"children":557},{"style":187},[558],{"type":146,"value":190},{"type":141,"tag":174,"props":560,"children":561},{"style":203},[562],{"type":146,"value":563}," :",{"type":141,"tag":174,"props":565,"children":566},{"style":448},[567],{"type":146,"value":379},{"type":141,"tag":174,"props":569,"children":570},{"style":203},[571],{"type":146,"value":461},{"type":141,"tag":174,"props":573,"children":574},{"style":203},[575],{"type":146,"value":576},"\"",{"type":141,"tag":174,"props":578,"children":579},{"style":489},[580],{"type":146,"value":492},{"type":141,"tag":174,"props":582,"children":583},{"style":203},[584],{"type":146,"value":576},{"type":141,"tag":174,"props":586,"children":587},{"style":181},[588],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":591,"children":592},{"class":176,"style":177},[593,598,603],{"type":141,"tag":174,"props":594,"children":595},{"style":181},[596],{"type":146,"value":597},"    \u003C",{"type":141,"tag":174,"props":599,"children":600},{"style":187},[601],{"type":146,"value":602},"EHtml",{"type":141,"tag":174,"props":604,"children":605},{"style":181},[606],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":609,"children":610},{"class":176,"style":177},[611,616,621],{"type":141,"tag":174,"props":612,"children":613},{"style":181},[614],{"type":146,"value":615},"      \u003C",{"type":141,"tag":174,"props":617,"children":618},{"style":187},[619],{"type":146,"value":620},"EHead",{"type":141,"tag":174,"props":622,"children":623},{"style":181},[624],{"type":146,"value":625}," \u002F>",{"type":146,"value":197},{"type":141,"tag":174,"props":628,"children":629},{"class":176,"style":177},[630,634,639],{"type":141,"tag":174,"props":631,"children":632},{"style":181},[633],{"type":146,"value":615},{"type":141,"tag":174,"props":635,"children":636},{"style":187},[637],{"type":146,"value":638},"EBody",{"type":141,"tag":174,"props":640,"children":641},{"style":181},[642],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":645,"children":646},{"class":176,"style":177},[647,652,657,662,666,671,675,680,684,688],{"type":141,"tag":174,"props":648,"children":649},{"style":181},[650],{"type":146,"value":651},"        \u003C",{"type":141,"tag":174,"props":653,"children":654},{"style":187},[655],{"type":146,"value":656},"EText",{"type":141,"tag":174,"props":658,"children":659},{"style":448},[660],{"type":146,"value":661}," class",{"type":141,"tag":174,"props":663,"children":664},{"style":203},[665],{"type":146,"value":461},{"type":141,"tag":174,"props":667,"children":668},{"style":464},[669],{"type":146,"value":670},"\"text-primary\"",{"type":141,"tag":174,"props":672,"children":673},{"style":181},[674],{"type":146,"value":195},{"type":141,"tag":174,"props":676,"children":677},{"style":203},[678],{"type":146,"value":679},"Concrete email color",{"type":141,"tag":174,"props":681,"children":682},{"style":181},[683],{"type":146,"value":278},{"type":141,"tag":174,"props":685,"children":686},{"style":187},[687],{"type":146,"value":656},{"type":141,"tag":174,"props":689,"children":690},{"style":181},[691],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":694,"children":695},{"class":176,"style":177},[696,701,705],{"type":141,"tag":174,"props":697,"children":698},{"style":181},[699],{"type":146,"value":700},"      \u003C\u002F",{"type":141,"tag":174,"props":702,"children":703},{"style":187},[704],{"type":146,"value":638},{"type":141,"tag":174,"props":706,"children":707},{"style":181},[708],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":711,"children":712},{"class":176,"style":177},[713,718,722],{"type":141,"tag":174,"props":714,"children":715},{"style":181},[716],{"type":146,"value":717},"    \u003C\u002F",{"type":141,"tag":174,"props":719,"children":720},{"style":187},[721],{"type":146,"value":602},{"type":141,"tag":174,"props":723,"children":724},{"style":181},[725],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":728,"children":729},{"class":176,"style":177},[730,735,739],{"type":141,"tag":174,"props":731,"children":732},{"style":181},[733],{"type":146,"value":734},"  \u003C\u002F",{"type":141,"tag":174,"props":736,"children":737},{"style":187},[738],{"type":146,"value":190},{"type":141,"tag":174,"props":740,"children":741},{"style":181},[742],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":745,"children":746},{"class":176,"style":177},[747,751,755],{"type":141,"tag":174,"props":748,"children":749},{"style":181},[750],{"type":146,"value":278},{"type":141,"tag":174,"props":752,"children":753},{"style":187},[754],{"type":146,"value":541},{"type":141,"tag":174,"props":756,"children":757},{"style":181},[758],{"type":146,"value":195},{"type":141,"tag":164,"props":760,"children":763},{"language":761,"filename":762,"class":167},"ts","shared\u002Femail-theme.ts",[764],{"type":141,"tag":149,"props":765,"children":767},{"class":766},"language-ts",[768],{"type":141,"tag":174,"props":769,"children":770},{"class":176,"style":177},[771,776,782,788,793],{"type":141,"tag":174,"props":772,"children":773},{"style":478},[774],{"type":146,"value":775},"export",{"type":141,"tag":174,"props":777,"children":779},{"style":778},"color:#0000FF;--shiki-dark:#569CD6",[780],{"type":146,"value":781}," const",{"type":141,"tag":174,"props":783,"children":785},{"style":784},"color:#0070C1;--shiki-dark:#4FC1FF",[786],{"type":146,"value":787}," emailTheme",{"type":141,"tag":174,"props":789,"children":790},{"style":203},[791],{"type":146,"value":792}," = ",{"type":141,"tag":174,"props":794,"children":795},{"style":505},[796],{"type":146,"value":797},"'@theme { --color-primary: #2563eb; }'",{"type":141,"tag":142,"props":799,"children":800},{},[801],{"type":146,"value":802},"The same token module can generate or inform your Nuxt theme, but Nuxt Email does not add a second CSS discovery path or silently import application styles.",{"type":141,"tag":142,"props":804,"children":805},{},[806,810,812,816,818,822,824,828,830,835,837,841],{"type":141,"tag":149,"props":807,"children":808},{},[809],{"type":146,"value":190},{"type":146,"value":811}," accepts the ",{"type":141,"tag":149,"props":813,"children":814},{},[815],{"type":146,"value":355},{"type":146,"value":817},", ",{"type":141,"tag":149,"props":819,"children":820},{},[821],{"type":146,"value":379},{"type":146,"value":823},", and ",{"type":141,"tag":149,"props":825,"children":826},{},[827],{"type":146,"value":396},{"type":146,"value":829}," values you pass directly. It does not resolve arbitrary CSS file imports or CSS ",{"type":141,"tag":149,"props":831,"children":832},{},[833],{"type":146,"value":834},"@plugin",{"type":146,"value":836}," module imports at render time; supply executable Tailwind plugins through ",{"type":141,"tag":149,"props":838,"children":839},{},[840],{"type":146,"value":355},{"type":146,"value":842},". This keeps production rendering independent of the application filesystem.",{"type":141,"tag":288,"props":844,"children":846},{"id":845},"classes-inside-nested-components",[847],{"type":146,"value":848},"Classes inside nested components",{"type":141,"tag":142,"props":850,"children":851},{},[852,854,859],{"type":146,"value":853},"Classes written directly in the email template are resolved during rendering and the final marker-scoped post-render pass. Classes emitted ",{"type":141,"tag":300,"props":855,"children":856},{},[857],{"type":146,"value":858},"inside a nested component",{"type":146,"value":860}," — a component whose own render outputs the class-bearing markup — are handled too, so a reusable card or button component styled with Tailwind works exactly like inline markup:",{"type":141,"tag":164,"props":862,"children":864},{"language":166,"filename":863,"class":167},"Card.vue",[865],{"type":141,"tag":149,"props":866,"children":867},{"class":171},[868,883,884,913,914,959,960,1020,1021,1036,1037],{"type":141,"tag":174,"props":869,"children":870},{"class":176,"style":177},[871,875,879],{"type":141,"tag":174,"props":872,"children":873},{"style":181},[874],{"type":146,"value":184},{"type":141,"tag":174,"props":876,"children":877},{"style":187},[878],{"type":146,"value":541},{"type":141,"tag":174,"props":880,"children":881},{"style":181},[882],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":885,"children":886},{"class":176,"style":177},[887,891,896,900,904,909],{"type":141,"tag":174,"props":888,"children":889},{"style":181},[890],{"type":146,"value":554},{"type":141,"tag":174,"props":892,"children":893},{"style":187},[894],{"type":146,"value":895},"div",{"type":141,"tag":174,"props":897,"children":898},{"style":448},[899],{"type":146,"value":661},{"type":141,"tag":174,"props":901,"children":902},{"style":203},[903],{"type":146,"value":461},{"type":141,"tag":174,"props":905,"children":906},{"style":464},[907],{"type":146,"value":908},"\"bg-red-500 p-4 md:text-lg\"",{"type":141,"tag":174,"props":910,"children":911},{"style":181},[912],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":915,"children":916},{"class":176,"style":177},[917,921,925,929,933,938,942,947,951,955],{"type":141,"tag":174,"props":918,"children":919},{"style":181},[920],{"type":146,"value":597},{"type":141,"tag":174,"props":922,"children":923},{"style":187},[924],{"type":146,"value":656},{"type":141,"tag":174,"props":926,"children":927},{"style":448},[928],{"type":146,"value":661},{"type":141,"tag":174,"props":930,"children":931},{"style":203},[932],{"type":146,"value":461},{"type":141,"tag":174,"props":934,"children":935},{"style":464},[936],{"type":146,"value":937},"\"m-0\"",{"type":141,"tag":174,"props":939,"children":940},{"style":181},[941],{"type":146,"value":195},{"type":141,"tag":174,"props":943,"children":944},{"style":203},[945],{"type":146,"value":946},"Title",{"type":141,"tag":174,"props":948,"children":949},{"style":181},[950],{"type":146,"value":278},{"type":141,"tag":174,"props":952,"children":953},{"style":187},[954],{"type":146,"value":656},{"type":141,"tag":174,"props":956,"children":957},{"style":181},[958],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":961,"children":962},{"class":176,"style":177},[963,967,972,976,980,985,990,994,999,1003,1008,1012,1016],{"type":141,"tag":174,"props":964,"children":965},{"style":181},[966],{"type":146,"value":597},{"type":141,"tag":174,"props":968,"children":969},{"style":187},[970],{"type":146,"value":971},"EButton",{"type":141,"tag":174,"props":973,"children":974},{"style":448},[975],{"type":146,"value":661},{"type":141,"tag":174,"props":977,"children":978},{"style":203},[979],{"type":146,"value":461},{"type":141,"tag":174,"props":981,"children":982},{"style":464},[983],{"type":146,"value":984},"\"bg-blue-600 px-4 py-2\"",{"type":141,"tag":174,"props":986,"children":987},{"style":448},[988],{"type":146,"value":989}," href",{"type":141,"tag":174,"props":991,"children":992},{"style":203},[993],{"type":146,"value":461},{"type":141,"tag":174,"props":995,"children":996},{"style":464},[997],{"type":146,"value":998},"\"https:\u002F\u002Fexample.com\"",{"type":141,"tag":174,"props":1000,"children":1001},{"style":181},[1002],{"type":146,"value":195},{"type":141,"tag":174,"props":1004,"children":1005},{"style":203},[1006],{"type":146,"value":1007},"Open",{"type":141,"tag":174,"props":1009,"children":1010},{"style":181},[1011],{"type":146,"value":278},{"type":141,"tag":174,"props":1013,"children":1014},{"style":187},[1015],{"type":146,"value":971},{"type":141,"tag":174,"props":1017,"children":1018},{"style":181},[1019],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":1022,"children":1023},{"class":176,"style":177},[1024,1028,1032],{"type":141,"tag":174,"props":1025,"children":1026},{"style":181},[1027],{"type":146,"value":734},{"type":141,"tag":174,"props":1029,"children":1030},{"style":187},[1031],{"type":146,"value":895},{"type":141,"tag":174,"props":1033,"children":1034},{"style":181},[1035],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":1038,"children":1039},{"class":176,"style":177},[1040,1044,1048],{"type":141,"tag":174,"props":1041,"children":1042},{"style":181},[1043],{"type":146,"value":278},{"type":141,"tag":174,"props":1045,"children":1046},{"style":187},[1047],{"type":146,"value":541},{"type":141,"tag":174,"props":1049,"children":1050},{"style":181},[1051],{"type":146,"value":195},{"type":141,"tag":164,"props":1053,"children":1055},{"language":166,"filename":1054,"class":167},"email template",[1056],{"type":141,"tag":149,"props":1057,"children":1058},{"class":171},[1059,1074,1075,1082,1083,1090,1091,1099,1100,1108,1109,1116,1117,1124,1125],{"type":141,"tag":174,"props":1060,"children":1061},{"class":176,"style":177},[1062,1066,1070],{"type":141,"tag":174,"props":1063,"children":1064},{"style":181},[1065],{"type":146,"value":184},{"type":141,"tag":174,"props":1067,"children":1068},{"style":187},[1069],{"type":146,"value":190},{"type":141,"tag":174,"props":1071,"children":1072},{"style":181},[1073],{"type":146,"value":195},{"type":146,"value":197},{"type":141,"tag":174,"props":1076,"children":1077},{"class":176,"style":177},[1078],{"type":141,"tag":174,"props":1079,"children":1080},{"style":203},[1081],{"type":146,"value":206},{"type":146,"value":197},{"type":141,"tag":174,"props":1084,"children":1085},{"class":176,"style":177},[1086],{"type":141,"tag":174,"props":1087,"children":1088},{"style":203},[1089],{"type":146,"value":215},{"type":146,"value":197},{"type":141,"tag":174,"props":1092,"children":1093},{"class":176,"style":177},[1094],{"type":141,"tag":174,"props":1095,"children":1096},{"style":203},[1097],{"type":146,"value":1098},"    \u003CEBody>",{"type":146,"value":197},{"type":141,"tag":174,"props":1101,"children":1102},{"class":176,"style":177},[1103],{"type":141,"tag":174,"props":1104,"children":1105},{"style":203},[1106],{"type":146,"value":1107},"      \u003CCard \u002F>",{"type":146,"value":197},{"type":141,"tag":174,"props":1110,"children":1111},{"class":176,"style":177},[1112],{"type":141,"tag":174,"props":1113,"children":1114},{"style":203},[1115],{"type":146,"value":260},{"type":146,"value":197},{"type":141,"tag":174,"props":1118,"children":1119},{"class":176,"style":177},[1120],{"type":141,"tag":174,"props":1121,"children":1122},{"style":203},[1123],{"type":146,"value":269},{"type":146,"value":197},{"type":141,"tag":174,"props":1126,"children":1127},{"class":176,"style":177},[1128,1132,1136],{"type":141,"tag":174,"props":1129,"children":1130},{"style":181},[1131],{"type":146,"value":278},{"type":141,"tag":174,"props":1133,"children":1134},{"style":187},[1135],{"type":146,"value":190},{"type":141,"tag":174,"props":1137,"children":1138},{"style":181},[1139],{"type":146,"value":195},{"type":141,"tag":142,"props":1141,"children":1142},{},[1143,1145,1149,1150,1154,1155,1159,1160,1165,1166,1171,1172,1177,1178,1183,1184,1189,1190,1195,1197,1201,1202,1207,1208,1213,1215,1220,1222,1226,1228,1232,1234,1238],{"type":146,"value":1144},"How this works: E* primitives with style logic (",{"type":141,"tag":149,"props":1146,"children":1147},{},[1148],{"type":146,"value":638},{"type":146,"value":817},{"type":141,"tag":149,"props":1151,"children":1152},{},[1153],{"type":146,"value":656},{"type":146,"value":817},{"type":141,"tag":149,"props":1156,"children":1157},{},[1158],{"type":146,"value":971},{"type":146,"value":817},{"type":141,"tag":149,"props":1161,"children":1162},{},[1163],{"type":146,"value":1164},"ESection",{"type":146,"value":817},{"type":141,"tag":149,"props":1167,"children":1168},{},[1169],{"type":146,"value":1170},"EContainer",{"type":146,"value":817},{"type":141,"tag":149,"props":1173,"children":1174},{},[1175],{"type":146,"value":1176},"ERow",{"type":146,"value":817},{"type":141,"tag":149,"props":1179,"children":1180},{},[1181],{"type":146,"value":1182},"ELink",{"type":146,"value":817},{"type":141,"tag":149,"props":1185,"children":1186},{},[1187],{"type":146,"value":1188},"EImg",{"type":146,"value":817},{"type":141,"tag":149,"props":1191,"children":1192},{},[1193],{"type":146,"value":1194},"EHr",{"type":146,"value":1196},") resolve their own Tailwind classes before running margin\u002Fpadding\u002FOutlook derivation, so utilities behave identically inline or from a nested component. Plain HTML elements and the structural primitives (",{"type":141,"tag":149,"props":1198,"children":1199},{},[1200],{"type":146,"value":602},{"type":146,"value":817},{"type":141,"tag":149,"props":1203,"children":1204},{},[1205],{"type":146,"value":1206},"EHeading",{"type":146,"value":817},{"type":141,"tag":149,"props":1209,"children":1210},{},[1211],{"type":146,"value":1212},"EColumn",{"type":146,"value":1214},") are inlined after render by a marker-scoped string pass that leaves every other byte — MSO conditional comments included — untouched. Non-inlinable rules from nested classes (such as ",{"type":141,"tag":149,"props":1216,"children":1217},{},[1218],{"type":146,"value":1219},"md:text-lg",{"type":146,"value":1221}," above) still reach the ",{"type":141,"tag":149,"props":1223,"children":1224},{},[1225],{"type":146,"value":160},{"type":146,"value":1227}," ",{"type":141,"tag":149,"props":1229,"children":1230},{},[1231],{"type":146,"value":316},{"type":146,"value":1233},", and the missing-",{"type":141,"tag":149,"props":1235,"children":1236},{},[1237],{"type":146,"value":160},{"type":146,"value":1239}," error still fires when such a class has nowhere to go.",{"type":141,"tag":288,"props":1241,"children":1243},{"id":1242},"documented-limitations",[1244],{"type":146,"value":1245},"Documented limitations",{"type":141,"tag":1247,"props":1248,"children":1251},"card",{"title":1249,"icon":1250},"Read these before relying on nested Tailwind","lucide:alert-triangle",[1252],{"type":141,"tag":344,"props":1253,"children":1254},{},[1255,1303,1320,1342,1370],{"type":141,"tag":348,"props":1256,"children":1257},{},[1258,1263,1264,1269,1270,1275,1276,1281,1283,1288,1290,1295,1297,1301],{"type":141,"tag":149,"props":1259,"children":1260},{},[1261],{"type":146,"value":1262},"ECodeInline",{"type":146,"value":817},{"type":141,"tag":149,"props":1265,"children":1266},{},[1267],{"type":146,"value":1268},"EMarkdown",{"type":146,"value":817},{"type":141,"tag":149,"props":1271,"children":1272},{},[1273],{"type":146,"value":1274},"EPreview",{"type":146,"value":823},{"type":141,"tag":149,"props":1277,"children":1278},{},[1279],{"type":146,"value":1280},"EFont",{"type":146,"value":1282}," do ",{"type":141,"tag":300,"props":1284,"children":1285},{},[1286],{"type":146,"value":1287},"not",{"type":146,"value":1289}," treat a nested ",{"type":141,"tag":149,"props":1291,"children":1292},{},[1293],{"type":146,"value":1294},"class",{"type":146,"value":1296}," as a Tailwind style target — their ",{"type":141,"tag":149,"props":1298,"children":1299},{},[1300],{"type":146,"value":1294},{"type":146,"value":1302},"\u002Fhead semantics differ.",{"type":141,"tag":348,"props":1304,"children":1305},{},[1306,1308,1312,1314,1318],{"type":146,"value":1307},"Nested ",{"type":141,"tag":149,"props":1309,"children":1310},{},[1311],{"type":146,"value":153},{"type":146,"value":1313}," boundaries are ",{"type":141,"tag":300,"props":1315,"children":1316},{},[1317],{"type":146,"value":1287},{"type":146,"value":1319}," a supported configuration.",{"type":141,"tag":348,"props":1321,"children":1322},{},[1323,1325,1329,1331,1335,1337,1341],{"type":146,"value":1324},"Arbitrary CSS imports and CSS ",{"type":141,"tag":149,"props":1326,"children":1327},{},[1328],{"type":146,"value":834},{"type":146,"value":1330}," module imports are ",{"type":141,"tag":300,"props":1332,"children":1333},{},[1334],{"type":146,"value":1287},{"type":146,"value":1336}," resolved during rendering; executable plugins belong in ",{"type":141,"tag":149,"props":1338,"children":1339},{},[1340],{"type":146,"value":355},{"type":146,"value":371},{"type":141,"tag":348,"props":1343,"children":1344},{},[1345,1347,1351,1352,1356,1358,1362,1364,1368],{"type":146,"value":1346},"Responsive or pseudo-class padding on ",{"type":141,"tag":149,"props":1348,"children":1349},{},[1350],{"type":146,"value":1170},{"type":146,"value":817},{"type":141,"tag":149,"props":1353,"children":1354},{},[1355],{"type":146,"value":1164},{"type":146,"value":1357},", or ",{"type":141,"tag":149,"props":1359,"children":1360},{},[1361],{"type":146,"value":1176},{"type":146,"value":1363}," remains a CSS rule on the table; use an inner ",{"type":141,"tag":149,"props":1365,"children":1366},{},[1367],{"type":146,"value":1212},{"type":146,"value":1369}," when that padding must survive clients that force collapsed table borders.",{"type":141,"tag":348,"props":1371,"children":1372},{},[1373],{"type":146,"value":1374},"Output tracks the pinned Tailwind version compiled by the engine.",{"type":141,"tag":142,"props":1376,"children":1377},{},[1378,1380,1384,1386,1390,1392,1399],{"type":146,"value":1379},"Emails that do not use ",{"type":141,"tag":149,"props":1381,"children":1382},{},[1383],{"type":146,"value":153},{"type":146,"value":1385}," are entirely unaffected — the nested support adds zero cost to them. The seventeen ",{"type":141,"tag":149,"props":1387,"children":1388},{},[1389],{"type":146,"value":190},{"type":146,"value":1391}," conformance cases (basic inlining, media queries, MSO preservation, nested components, residual-class sanitization, and more) are listed in the ",{"type":141,"tag":1393,"props":1394,"children":1396},"a",{"href":1395},"$docs\u002Freference\u002Fconformance",[1397],{"type":146,"value":1398},"conformance report",{"type":146,"value":371},{"title":1401,"searchDepth":1402,"depth":1402,"links":1403},"",4,[1404,1406,1407,1408],{"id":290,"depth":1405,"text":293},2,{"id":401,"depth":1405,"text":404},{"id":845,"depth":1405,"text":848},{"id":1242,"depth":1405,"text":1245},"markdown","docs",{"source":362,"path":1412,"stem":1413,"dir":1414,"extension":1415},"docs\u002F3.guides\u002F2.tailwind.md","docs\u002F3.guides\u002F2.tailwind","guides","md",{"$docs\u002Freference\u002Fconformance":129},{"requestedPath":77,"resolvedPath":77,"alternates":1418},[],{"requested":1420,"resolved":1421,"usedFallback":9},{},{"locale":8},{"previous":1423,"next":1426},{"title":67,"id":68,"canonicalKey":69,"locale":8,"draft":9,"path":71,"children":1424},[1425,1426,1427,1428,1429,1430],{"title":74,"id":75,"canonicalKey":76,"locale":8,"draft":9,"path":77},{"title":79,"id":80,"canonicalKey":81,"locale":8,"draft":9,"path":82},{"title":84,"id":85,"canonicalKey":86,"locale":8,"draft":9,"path":87},{"title":89,"id":90,"canonicalKey":91,"locale":8,"draft":9,"path":92},{"title":94,"id":95,"canonicalKey":96,"locale":8,"draft":9,"path":97},{"title":99,"id":100,"canonicalKey":101,"locale":8,"draft":9,"path":102},{"left":1432,"top":1432,"width":1433,"height":1433,"rotate":1432,"vFlip":9,"hFlip":9,"body":1434},0,256,"\u003Cpath fill=\"#3178c6\" d=\"M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0\"\u002F>\u003Cpath fill=\"#fff\" d=\"M150.518 200.475v27.62q6.738 3.453 15.938 5.179T185.849 235q9.934 0 18.874-1.899t15.678-6.257q6.738-4.359 10.669-11.394q3.93-7.033 3.93-17.391q0-7.51-2.246-13.163a30.8 30.8 0 0 0-6.479-10.055q-4.232-4.402-10.149-7.898t-13.347-6.602q-5.442-2.245-9.761-4.359t-7.342-4.316q-3.024-2.2-4.665-4.661t-1.641-5.567q0-2.848 1.468-5.135q1.469-2.288 4.147-3.927t6.565-2.547q3.887-.906 8.638-.906q3.456 0 7.299.518q3.844.517 7.732 1.597a54 54 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807q-6.306-2.417-13.778-3.582T198.633 107q-9.847 0-18.658 2.115q-8.811 2.114-15.506 6.602q-6.694 4.49-10.582 11.437Q150 134.102 150 143.769q0 12.342 7.127 21.06t21.638 14.759a292 292 0 0 1 10.625 4.575q4.924 2.244 8.509 4.66t5.658 5.265t2.073 6.474a9.9 9.9 0 0 1-1.296 4.963q-1.295 2.287-3.93 3.97t-6.565 2.632t-9.2.95q-8.983 0-17.794-3.151t-16.327-9.451m-46.036-68.733H140V109H41v22.742h35.345V233h28.137z\"\u002F>",{"left":1432,"top":1432,"width":1433,"height":1436,"rotate":1432,"vFlip":9,"hFlip":9,"body":1437},221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":1432,"top":1432,"width":1439,"height":1439,"rotate":1432,"vFlip":9,"hFlip":9,"body":1440},24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",1786647278656]