You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
+40-1Lines changed: 40 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,9 @@ exports[`Custom theme config > should be able to use custom spacing 1`] = `"<!DO
14
14
15
15
exports[`Custom theme config > should be able to use custom text alignment 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="text-align:justify"></div><!--/$-->"`;
16
16
17
-
exports[`Tailwind component > it should not generate styles from text 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->container bg-red-500 bg-blue-300<!--/$-->"`;D
exports[`Tailwind component > it should not generate styles from text 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->container bg-red-500 bg-blue-300<!--/$-->"`;
18
20
19
21
exports[`Tailwind component > should allow for complex children manipulation 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="text-align:center;font-size:0"><tbody><tr><tdstyle="padding:0px 0px 0px 0px"><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the first column</td></tr></tbody></table><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the second column</td></tr></tbody></table></td></tr></tbody></table><!--/$-->"`;
20
22
@@ -38,3 +40,40 @@ exports[`Tailwind component > should work with components that return children 1
38
40
39
41
exports[`Tailwind component > should work with components that use React.forwardRef 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="margin-top:100px;font-size:50px;line-height:1">Hello world</div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
40
42
43
+
exports[`Tailwind component > should work with custom components with fragment at the root 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="margin-top:100px;font-size:50px;line-height:1">Hello world</div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
44
+
45
+
exports[`non-inlinable styles > should add css to <head/> and keep class names 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165) !important}.sm_hover_bg-red-200:hover{background-color:rgb(254,202,202) !important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113) !important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68) !important}}.hover_bg-red-600:hover{background-color:rgb(220,38,38) !important}.focus_bg-red-700:focus{background-color:rgb(185,28,28) !important}</style></head><body><divclass="sm_bg-red-300 md_bg-red-400 lg_bg-red-500 hover_bg-red-600 focus_bg-red-700 sm_hover_bg-red-200"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
46
+
47
+
exports[`non-inlinable styles > should not have duplicate media queries 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metaname="x-apple-disable-message-reformatting"/><!--$--><style>@media(min-width:768px){.md_px-64px{padding-left:64px!important;padding-right:64px!important}}.hover_underline:hover{text-decoration-line:underline!important}</style></head><bodyclass="md_px-64px hover_underline"style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji""><divclass="md_px-64px hover_underline"></div><!--/$--></body>"`;
48
+
49
+
exports[`non-inlinable styles > should persist existing <head/> elements 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style></style><link/><style>@media(min-width:640px){.sm_bg-red-500{background-color:rgb(239,68,68) !important}}</style></head><body><divclass="sm_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
50
+
51
+
exports[`non-inlinable styles > should throw an error when used without a <head/> 1`] = `
52
+
[Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:bg-red-500.
53
+
For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
54
+
the Tailwind component tried finding a <head> element but just wasn't able to find it.
55
+
56
+
Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
57
+
This can also be our <Head> component.
58
+
59
+
If you do already have a <head> element at some depth,
60
+
please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.]
61
+
`;
62
+
63
+
exports[`non-inlinable styles > should throw error when used without the head and with media query class names only very deeply nested 1`] = `
64
+
[Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:h-10 sm:w-10.
65
+
For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
66
+
the Tailwind component tried finding a <head> element but just wasn't able to find it.
67
+
68
+
Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
69
+
This can also be our <Head> component.
70
+
71
+
If you do already have a <head> element at some depth,
72
+
please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.]
73
+
`;
74
+
75
+
exports[`non-inlinable styles > should work with arbitrarily deep (in the React tree) <head> elements 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165) !important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113) !important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68) !important}}</style></head><body><divclass="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
76
+
77
+
exports[`non-inlinable styles > should work with arbitrarily deep (in the React tree) <head> elements 2`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165) !important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113) !important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68) !important}}</style></head><body><divclass="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
78
+
79
+
exports[`non-inlinable styles > should work with relatively complex media query utilities 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metaname="x-apple-disable-message-reformatting"/><!--$--><style>@media not all and(min-width:640px){.max-sm_text-red-600{color:rgb(220,38,38) !important}}</style></head><pclass="max-sm_text-red-600"style="color:rgb(29,78,216)">I am some text</p><!--/$-->"`;
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments