fix(tailwind): camel cased colors not working (#2738)

gabrielmfern · web-flow · commit 0e57e2a1fe5d · 2025-12-16T12:10:28.000-03:00
diff --git a/.changeset/funny-hotels-talk.md b/.changeset/funny-hotels-talk.md
@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": patch
+---
+
+update tailwindcss, fixing camelCased colors not working
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
@@ -49,7 +49,6 @@
     }
   },
   "peerDependencies": {
-    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
     "@react-email/body": "workspace:*",
     "@react-email/button": "workspace:*",
     "@react-email/code-block": "workspace:*",
@@ -60,7 +59,8 @@
     "@react-email/img": "workspace:*",
     "@react-email/link": "workspace:*",
     "@react-email/preview": "workspace:*",
-    "@react-email/text": "workspace:*"
+    "@react-email/text": "workspace:*",
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "peerDependenciesMeta": {
     "@react-email/button": {
@@ -119,6 +119,6 @@
     "access": "public"
   },
   "dependencies": {
-    "tailwindcss": "^4.1.12"
+    "tailwindcss": "^4.1.18"
   }
 }
diff --git a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
@@ -90,6 +90,14 @@ exports[`Tailwind component > with custom theme config > supports custom border
 "
 `;
 
+exports[`Tailwind component > with custom theme config > supports custom camelCased colors 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--$-->
+<div style="background-color:rgb(31,182,255);color:rgb(31,182,255)"></div>
+<!--/$-->
+"
+`;
+
 exports[`Tailwind component > with custom theme config > supports custom colors 1`] = `
 "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--$-->
diff --git a/packages/tailwind/src/tailwind.spec.tsx b/packages/tailwind/src/tailwind.spec.tsx
@@ -556,6 +556,26 @@ describe('Tailwind component', () => {
       expect(actualOutput).toMatchSnapshot();
     });
 
+    it('supports custom camelCased colors', async () => {
+      const config: TailwindConfig = {
+        theme: {
+          extend: {
+            colors: {
+              customColor: '#1fb6ff',
+            },
+          },
+        },
+      };
+
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="bg-customColor text-customColor" />
+        </Tailwind>,
+      ).then(pretty);
+
+      expect(actualOutput).toMatchSnapshot();
+    });
+
     it('supports custom fonts', async () => {
       const config: TailwindConfig = {
         theme: {
diff --git a/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-rules.spec.ts.snap b/packages/tailwind/src/utils/css/__snapshots__/sanitize-non-inlinable-rules.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`sanitizeNonInlinableRules() > handles CSS nesting in hover pseudo styles 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{--tw-outline-style: none!important;outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`;
+exports[`sanitizeNonInlinableRules() > handles CSS nesting in hover pseudo styles 1`] = `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{--tw-outline-style: none!important;outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`;
 
-exports[`sanitizeNonInlinableRules() > inlines rules that can be inlined 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-300: oklch(80.8% 0.114 19.571)!important;--color-gray-900: oklch(21% 0.034 264.665)!important;--text-lg: 1.125rem!important;--text-lg--line-height: calc(1.75 / 1.125)!important}}@layer utilities{.bg-gray-900{background-color:var(--color-gray-900)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-red-300{color:var(--color-red-300)}}"`;
+exports[`sanitizeNonInlinableRules() > inlines rules that can be inlined 1`] = `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-300: oklch(80.8% 0.114 19.571)!important;--color-gray-900: oklch(21% 0.034 264.665)!important;--text-lg: 1.125rem!important;--text-lg--line-height: calc(1.75 / 1.125)!important}}@layer utilities{.bg-gray-900{background-color:var(--color-gray-900)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-red-300{color:var(--color-red-300)}}"`;
 
-exports[`sanitizeNonInlinableRules() > supports basic media query rules 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: 0.25rem!important;--container-lg: 32rem!important;--radius-lg: 0.5rem!important}}@layer utilities{.sm_mx-auto{@media (width>=40rem){margin-inline:auto!important}}.sm_max-w-lg{@media (width>=40rem){max-width:var(--container-lg)!important}}.sm_rounded-lg{@media (width>=40rem){border-radius:var(--radius-lg)!important}}.md_px-10{@media (width>=48rem){padding-inline:calc(var(--spacing)*10)!important}}.md_py-12{@media (width>=48rem){padding-block:calc(var(--spacing)*12)!important}}}"`;
+exports[`sanitizeNonInlinableRules() > supports basic media query rules 1`] = `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: 0.25rem!important;--container-lg: 32rem!important;--radius-lg: 0.5rem!important}}@layer utilities{.sm_mx-auto{@media (width>=40rem){margin-inline:auto!important}}.sm_max-w-lg{@media (width>=40rem){max-width:var(--container-lg)!important}}.sm_rounded-lg{@media (width>=40rem){border-radius:var(--radius-lg)!important}}.md_px-10{@media (width>=48rem){padding-inline:calc(var(--spacing)*10)!important}}.md_py-12{@media (width>=48rem){padding-block:calc(var(--spacing)*12)!important}}}"`;
diff --git a/packages/tailwind/src/utils/tailwindcss/__snapshots__/setup-tailwind.spec.ts.snap b/packages/tailwind/src/utils/tailwindcss/__snapshots__/setup-tailwind.spec.ts.snap
@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`setupTailwind() and addUtilities() 1`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`;
+exports[`setupTailwind() and addUtilities() 1`] = `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`;
 
-exports[`setupTailwind() and addUtilities() 2`] = `"/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-100: oklch(93.6% 0.032 17.717);--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-red-100{background-color:var(--color-red-100)}.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`;
+exports[`setupTailwind() and addUtilities() 2`] = `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-red-100: oklch(93.6% 0.032 17.717);--color-red-500: oklch(63.7% 0.237 25.331);--color-blue-300: oklch(80.9% 0.105 251.813);--color-slate-900: oklch(20.8% 0.042 265.755)}}@layer utilities{.bg-red-100{background-color:var(--color-red-100)}.bg-slate-900{background-color:var(--color-slate-900)}.text-red-500{color:var(--color-red-500)}.sm\\:bg-blue-300{@media (width>=40rem){background-color:var(--color-blue-300)}}}"`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@react-email/tailwind": patch
 +---
++
 +update tailwindcss, fixing camelCased colors not working