diff --git a/packages/x-components/tailwind.config.ts b/packages/x-components/tailwind.config.ts
index ac1d15b56..e62223f72 100644
--- a/packages/x-components/tailwind.config.ts
+++ b/packages/x-components/tailwind.config.ts
@@ -9,6 +9,15 @@ export default {
     './node_modules/@empathyco/x-tailwindcss/showcase/**/*.js'
   ],
   prefix: 'x-',
+  theme: {
+    extend: {
+      fontFamily: ({ theme }) => theme('x.fontFamily'),
+      fontSize: ({ theme }) => theme('x.fontSize'),
+      spacing: ({ theme }) => theme('x.spacing'),
+      colors: ({ theme }) => theme('x.colors'),
+      screens: ({ theme }) => theme('x.screens')
+    }
+  },
   plugins: [xTailwindPlugin(options), oldDsPlugin],
   important: true
 } as Config;