diff --git a/tailwind.config.js b/tailwind.config.js
index 5d316ea..abade5e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,36 +1,84 @@
 const theme = require('./theme.json');
-const tailpress = require("@jeffreyvr/tailwindcss-tailpress");
+const tailpress = require('@jeffreyvr/tailwindcss-tailpress');
+
+// Fonction pour obtenir la couleur de base depuis theme.json
+const getBaseColor = (slug) => {
+  const color = theme.settings.color.palette.find(
+    (c) => c.slug === slug
+  );
+  return color ? color.color : null;
+};
 
 module.exports = {
-    content: [
-        './*.php',
-        './**/*.php',
-        './resources/css/*.css',
-        './resources/js/*.js',
-        './safelist.txt'
-    ],
-    theme: {
-        container: {
-            padding: {
-                DEFAULT: '1rem',
-                sm: '2rem',
-                lg: '0rem'
-            },
-        },
-        extend: {
-            colors: tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)),
-            fontSize: tailpress.fontSizeMapper(tailpress.theme('settings.typography.fontSizes', theme))
-        },
-        screens: {
-            'xs': '480px',
-            'sm': '600px',
-            'md': '782px',
-            'lg': tailpress.theme('settings.layout.contentSize', theme),
-            'xl': tailpress.theme('settings.layout.wideSize', theme),
-            '2xl': '1440px'
-        }
+  content: [
+    './*.php',
+    './**/*.php',
+    './resources/css/*.css',
+    './resources/js/*.js',
+    './safelist.txt',
+  ],
+  theme: {
+    container: {
+      padding: {
+        DEFAULT: '1rem',
+        sm: '2rem',
+        lg: '0rem',
+      },
     },
-    plugins: [
-        tailpress.tailwind
-    ]
+    extend: {
+      colors: {
+        ...tailpress.colorMapper(
+          tailpress.theme('settings.color.palette', theme)
+        ),
+        'carhop-orange': {
+          50: '#fff8eb',
+          100: '#ffebc6',
+          200: '#ffd588',
+          300: '#ffba4a',
+          400: getBaseColor('carhop-orange'), // Base Color
+          500: '#f97a07',
+          600: '#dd5602',
+          700: '#b73806',
+          800: '#942a0c',
+          900: '#7a240d',
+          950: '#461002',
+        },
+        'carhop-purple': {
+          50: '#f8f5ff',
+          100: '#efe8ff',
+          200: '#e2d4ff',
+          300: getBaseColor('carhop-purple'), // Base Color
+          400: '#ab82fe',
+          500: '#8c53f9',
+          600: '#7331ec',
+          700: '#6020d0',
+          800: '#531faa',
+          900: '#451b88',
+          950: '#2b0665',
+        },
+      },
+      fontSize: tailpress.fontSizeMapper(
+        tailpress.theme(
+          'settings.typography.fontSizes',
+          theme
+        )
+      ),
+    },
+    screens: {
+      xs: '480px',
+      sm: '600px',
+      md: '782px',
+      lg: tailpress.theme(
+        'settings.layout.contentSize',
+        theme
+      ),
+      xl: tailpress.theme(
+        'settings.layout.wideSize',
+        theme
+      ),
+      '2xl': '1440px',
+      '3xl': '1840px',
+    },
+  },
+  plugins: [tailpress.tailwind],
 };