diff --git a/apps/www/content/docs/theming.mdx b/apps/www/content/docs/theming.mdx
index bb168de19ef..b08e8968d6f 100644
--- a/apps/www/content/docs/theming.mdx
+++ b/apps/www/content/docs/theming.mdx
@@ -164,13 +164,15 @@ To add new colors, you need to add them to your CSS file and to your `tailwind.c
 }
 ```
 
-```js {5-6} title="tailwind.config.js"
+```js {5-8} title="tailwind.config.js"
 module.exports = {
   theme: {
     extend: {
       colors: {
-        warning: "hsl(var(--warning))",
-        "warning-foreground": "hsl(var(--warning-foreground))",
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
       },
     },
   },