From bd3ed79f654fc7e76939c7d0baa2a67e6b879ed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Arenal=20Pereira?= <adri.arenal94@gmail.com>
Date: Mon, 25 Nov 2024 17:12:33 +0100
Subject: [PATCH] feat(xds)!: avoid overriding consumers theme by xds (#1658)

BREAKING CHANGE: the x tailwincss plugin no longer admits an options configuration. The plugin theme is accessible through theme: extend: { x: {...}}  so now if you need to customize a value you can do it  via extending the general tailwind theme:

module.exports = {
  theme: {
    extend: {
      spacing: theme => theme('x.spacing'),
      colors: theme => theme('x.colors'),
      screens: theme => theme('x.screens'),
      fontSize: theme => theme('x.fontSize'),
      fontFamily: theme => theme('x.fontFamily'),
      x: {
        colors: {
          neutral: {
            5: '#56ac91'
          }
....

To add new components you can do it via https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
---
 .../src/tailwind/plugin-options.ts            |  4 +-
 .../demo/src/components/xds-badge.vue         |  2 +-
 .../demo/src/components/xds-base-showcase.vue | 14 +--
 .../demo/src/components/xds-button-group.vue  | 16 +--
 .../demo/src/components/xds-icon.vue          |  4 +-
 .../components/xds-layout-fixed-header.vue    | 28 +++---
 .../components/xds-layout-single-column.vue   | 24 ++---
 .../src/components/xds-layout-two-columns.vue | 34 +++----
 .../demo/src/components/xds-layout-utils.vue  | 32 +++---
 .../demo/src/components/xds-layout.vue        | 23 ++---
 .../demo/src/components/xds-picture.vue       |  2 +-
 .../demo/src/components/xds-progress-bar.vue  |  8 +-
 .../demo/src/components/xds-scroll.vue        |  4 +-
 .../demo/src/components/xds-showcase.vue      |  2 +-
 .../demo/src/components/xds-sliding-panel.vue |  4 +-
 .../x-tailwindcss/demo/tailwind.config.ts     | 23 +----
 .../x-tailwindcss/src/old-ds-plugin/plugin.ts | 98 +++++++++----------
 packages/x-tailwindcss/src/types.ts           | 86 +---------------
 .../src/x-tailwind-plugin/components.ts       | 10 +-
 .../components/attach/index.ts                |  4 +-
 .../components/badge/bright.ts                |  4 +-
 .../components/badge/circle.ts                |  6 +-
 .../components/badge/default.ts               | 12 +--
 .../components/badge/index.ts                 |  2 +-
 .../components/badge/light.ts                 |  4 +-
 .../components/badge/outlined.ts              |  6 +-
 .../components/badge/sizes.ts                 | 16 +--
 .../components/button-group/default.ts        |  8 +-
 .../components/button-group/divider.ts        |  2 +-
 .../components/button-group/index.ts          |  2 +-
 .../components/button/default.ts              | 28 +++---
 .../components/button/disabled.ts             |  6 +-
 .../components/button/ghost.ts                | 10 +-
 .../components/button/index.ts                |  2 +-
 .../components/button/layouts.ts              |  2 +-
 .../components/button/link.ts                 |  6 +-
 .../components/button/outlined.ts             | 24 ++---
 .../components/button/sizes.ts                | 40 ++++----
 .../components/button/tight.ts                |  4 +-
 .../button/utils/background-on-hover.ts       |  4 +-
 .../components/button/utils/no-background.ts  |  6 +-
 .../components/facet-filter/default.ts        | 18 ++--
 .../components/facet-filter/ghost.ts          | 16 +--
 .../components/facet-filter/index.ts          |  2 +-
 .../components/facet-filter/simple.ts         | 12 +--
 .../components/facet-filter/sizes.ts          | 18 ++--
 .../components/facet-filter/underline.ts      |  4 +-
 .../components/highlight/default.ts           |  4 +-
 .../components/highlight/index.ts             |  2 +-
 .../components/icon/default.ts                |  2 +-
 .../components/icon/index.ts                  |  2 +-
 .../components/icon/sizes.ts                  |  8 +-
 .../components/icon/stroke-widths.ts          |  2 +-
 .../input-group/buttons/button-ghost.ts       |  8 +-
 .../input-group/buttons/button-outlined.ts    | 12 +--
 .../input-group/buttons/button-primary.ts     | 12 +--
 .../input-group/buttons/button-rectangle.ts   |  4 +-
 .../components/input-group/buttons/button.ts  | 18 ++--
 .../components/input-group/default.ts         |  8 +-
 .../components/input-group/index.ts           |  2 +-
 .../components/input-group/line.ts            |  6 +-
 .../components/input-group/sizes.ts           | 18 ++--
 .../components/input/default.ts               | 36 +++----
 .../components/input/index.ts                 |  2 +-
 .../components/input/line.ts                  | 10 +-
 .../components/input/sizes.ts                 | 18 ++--
 .../components/layout/index.ts                |  2 +-
 .../components/layout/max-width.ts            |  2 +-
 .../components/layout/min-margin.ts           |  2 +-
 .../components/layout/utils.ts                | 20 ++--
 .../components/picture/default.ts             |  4 +-
 .../components/picture/index.ts               |  2 +-
 .../components/picture/overlay.ts             |  4 +-
 .../components/picture/zoom.ts                |  2 +-
 .../components/progress-bar/default.ts        |  6 +-
 .../components/progress-bar/index.ts          |  2 +-
 .../components/progress-bar/sizes.ts          |  4 +-
 .../components/scroll/default.ts              |  8 +-
 .../components/scroll/index.ts                |  3 +-
 .../components/sliding-panel/buttons/hover.ts | 22 ++---
 .../components/sliding-panel/buttons/index.ts |  2 +-
 .../sliding-panel/buttons/positions.ts        | 12 +--
 .../components/sliding-panel/fade/index.ts    | 14 +--
 .../components/sliding-panel/fade/sizes.ts    | 66 ++++++-------
 .../components/sliding-panel/index.ts         |  2 +-
 .../suggestion-group/button/ghost.ts          |  2 +-
 .../suggestion-group/button/index.ts          |  2 +-
 .../suggestion-group/button/lighter-colors.ts |  4 +-
 .../suggestion-group/button/rectangle.ts      |  4 +-
 .../components/suggestion-group/default.ts    | 10 +-
 .../components/suggestion-group/ghost.ts      | 12 +--
 .../components/suggestion-group/index.ts      |  2 +-
 .../components/suggestion-group/outlined.ts   | 18 ++--
 .../components/suggestion-group/sizes.ts      | 14 +--
 .../components/suggestion/default.ts          |  6 +-
 .../components/suggestion/ghost.ts            |  6 +-
 .../components/suggestion/index.ts            |  2 +-
 .../components/suggestion/outlined.ts         |  4 +-
 .../components/suggestion/sizes.ts            | 18 ++--
 .../utils/common-ghost-and-tag-styles.ts      |  2 +-
 .../suggestion/utils/padding-by-size.ts       | 12 +--
 .../components/tag/colors.ts                  |  8 +-
 .../components/tag/default.ts                 | 36 +++----
 .../x-tailwind-plugin/components/tag/ghost.ts | 18 ++--
 .../x-tailwind-plugin/components/tag/index.ts |  2 +-
 .../components/tag/outlined.ts                | 20 ++--
 .../x-tailwind-plugin/components/tag/sizes.ts | 24 ++---
 .../x-tailwind-plugin/components/tag/solid.ts | 28 +++---
 .../x-tailwind-plugin/components/tag/tight.ts | 16 +--
 .../components/typography/text1/default.ts    |  4 +-
 .../components/typography/text1/index.ts      |  2 +-
 .../components/typography/text1/sizes.ts      | 10 +-
 .../components/typography/text2/default.ts    |  4 +-
 .../components/typography/text2/index.ts      |  2 +-
 .../components/typography/text2/sizes.ts      | 10 +-
 .../components/typography/title1/default.ts   |  4 +-
 .../components/typography/title1/index.ts     |  2 +-
 .../components/typography/title1/sizes.ts     | 10 +-
 .../components/typography/title2/default.ts   |  4 +-
 .../components/typography/title2/index.ts     |  2 +-
 .../components/typography/title2/sizes.ts     | 10 +-
 .../components/typography/title3/default.ts   |  4 +-
 .../components/typography/title3/index.ts     |  2 +-
 .../components/typography/title3/sizes.ts     |  8 +-
 .../components/typography/title4/default.ts   |  4 +-
 .../components/typography/title4/index.ts     |  2 +-
 .../components/typography/title4/sizes.ts     |  8 +-
 .../x-tailwind-plugin/dynamic-components.ts   |  7 --
 .../layout/layout-container.ts                | 10 +-
 .../x-tailwind-plugin/dynamic-utilities.ts    |  9 +-
 .../src/x-tailwind-plugin/plugin.ts           | 51 +++++-----
 .../src/x-tailwind-plugin/theme.ts            |  2 +
 .../src/x-tailwind-plugin/utilities.ts        | 18 ++--
 .../src/x-tailwind-plugin/utils/map-colors.ts |  2 +-
 134 files changed, 680 insertions(+), 820 deletions(-)

diff --git a/packages/x-components/src/tailwind/plugin-options.ts b/packages/x-components/src/tailwind/plugin-options.ts
index 0460bf7b3c..ff8b4c5632 100644
--- a/packages/x-components/src/tailwind/plugin-options.ts
+++ b/packages/x-components/src/tailwind/plugin-options.ts
@@ -1,3 +1 @@
-import { PluginOptions } from '@empathyco/x-tailwindcss';
-
-export default {} as PluginOptions;
+export default {};
diff --git a/packages/x-tailwindcss/demo/src/components/xds-badge.vue b/packages/x-tailwindcss/demo/src/components/xds-badge.vue
index 79d5ade82c..6d731c9763 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-badge.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-badge.vue
@@ -118,7 +118,7 @@
     },
     setup(props) {
       const sectionClasses: ShowcaseSectionsClasses<Sections> = {
-        Bright: 'x-bg-neutral-90 x-p-8'
+        Bright: 'bg-gray-700 p-8'
       };
       const sections = computed(() => {
         return {
diff --git a/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue b/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
index ef98e8d57b..ac1b31a9f8 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="x-flex x-flex-col x-gap-32">
-    <h1 class="x-text-lg">{{ title }}</h1>
+  <div class="flex flex-col gap-8">
+    <h1 class="text-lg">{{ title }}</h1>
     <div
       v-for="(classes, section) in sections"
       :key="section"
-      class="x-flex x-flex-row x-gap-16 x-items-baseline"
+      class="flex flex-row items-baseline gap-4"
     >
-      <h2 class="x-text-md x-w-128 x-text-right x-flex-none">{{ section }}</h2>
+      <h2 class="text-md w-[128px] flex-none text-right">{{ section }}</h2>
 
       <div
-        class="x-flex x-flex-row x-flex-wrap x-gap-16 x-items-baseline"
+        class="flex flex-row flex-wrap items-baseline gap-4"
         :class="sectionsClasses[section] || ''"
       >
         <div v-for="cssClass in classes" :key="cssClass">
@@ -18,8 +18,8 @@
       </div>
     </div>
     <div
-      class="x-fixed x-left-1/2 x-top-1/2 x-bg-neutral-25 x-p-8 x-transition-opacity x-duration-300 x-pointer-events-none -translate-x-1/2 -translate-y-1/2"
-      :class="isMessageVisible ? 'x-opacity-100' : 'x-opacity-0'"
+      class="pointer-events-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-300 p-8 transition-opacity duration-300"
+      :class="isMessageVisible ? 'opacity-100' : 'opacity-0'"
     >
       CSS classes copied to Clipboard!
     </div>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-button-group.vue b/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
index ccca809ec6..909909f2e2 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-button-group.vue
@@ -4,7 +4,7 @@
     :sections="sections"
     #default="{ cssClass, copyCssClassesToClipboard }"
   >
-    <div class="x-flex x-gap-20 x-flex-wrap">
+    <div class="flex flex-wrap gap-5">
       <div
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
@@ -19,7 +19,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-gap-8"
+        class="gap-2"
       >
         <button class="x-button">BUTTON 1</button>
         <span class="x-button-group-divider" />
@@ -42,7 +42,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-gap-8"
+        class="gap-2"
       >
         <button class="x-button x-button-outlined">BUTTON 1</button>
         <button class="x-button x-button-outlined">BUTTON 2</button>
@@ -53,7 +53,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-gap-8"
+        class="gap-2"
       >
         <button class="x-button x-button-outlined">BUTTON 1</button>
         <span class="x-button-group-divider" />
@@ -66,7 +66,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50"
+        class="text-red-500"
       >
         <button class="x-button x-button-ghost">BUTTON 1</button>
         <span class="x-button-group-divider" />
@@ -79,7 +79,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50 x-gap-8"
+        class="gap-2 text-red-500"
       >
         <button class="x-button x-button-tight">BUTTON 1</button>
         <button class="x-button x-button-tight">BUTTON 2</button>
@@ -90,7 +90,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50"
+        class="text-red-500"
       >
         <button class="x-button x-button-highlight x-button-circle">
           <PlusIcon class="x-icon" />
@@ -104,7 +104,7 @@
         @click="copyCssClassesToClipboard"
         @keydown="copyCssClassesToClipboard"
         :class="cssClass"
-        class="x-text-accent-50"
+        class="text-red-500"
       >
         <button class="x-button x-button-highlight x-button-square">
           <PlusIcon class="x-icon" />
diff --git a/packages/x-tailwindcss/demo/src/components/xds-icon.vue b/packages/x-tailwindcss/demo/src/components/xds-icon.vue
index b11b7298e8..6473d192f5 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-icon.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-icon.vue
@@ -4,9 +4,9 @@
     title="Icon"
     :sections="sections"
   >
-    <h3 class="x-text-xxs">{{ removeClassPrefix(cssClass, base) }}</h3>
+    <h3 class="text-xs">{{ removeClassPrefix(cssClass, base) }}</h3>
     <slot v-bind="{ cssClass, section, copyCssClassesToClipboard }">
-      <div class="x-flex">
+      <div class="flex">
         <CheckIcon @click="copyCssClassesToClipboard" :class="cssClass" />
         <CheckFillIcon @click="copyCssClassesToClipboard" :class="cssClass" />
         <CuratedIcon @click="copyCssClassesToClipboard" :class="cssClass" />
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
index 9f15b7a9eb..97ec146975 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
@@ -3,45 +3,43 @@
     <label for="layout-fixed-header-modal" class="x-button">Open layout example</label>
     <input id="layout-fixed-header-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-0">
-      <div :class="[cssClass, 'x-layout-min-margin-48 x-bg-neutral-10']">
-        <div class="x-scroll x-flex x-flex-col">
-          <div
-            class="x-layout-item x-sticky x-top-0 x-bg-neutral-0 x-border-b-1 x-border-neutral-25"
-          >
-            <div class="x-flex x-justify-between x-items-center x-py-8">
+    <div class="modal bg-white">
+      <div :class="[cssClass, 'x-layout-min-margin-48 bg-gray-100']">
+        <div class="x-scroll flex flex-col">
+          <div class="x-layout-item border-b-1 sticky top-0 border-gray-300 bg-white">
+            <div class="flex items-center justify-between py-2">
               <span class="x-title3">FIXED HEADER LAYOUT</span>
-              <label for="layout-fixed-header-modal" class="x-button x-button-ghost x-ml-auto">
+              <label for="layout-fixed-header-modal" class="x-button x-button-ghost ml-auto">
                 Close
               </label>
             </div>
 
-            <div class="x-flex x-justify-between x-items-center x-py-16">
+            <div class="flex items-center justify-between py-4">
               <div class="x-title3">HEADER START</div>
               <div class="x-title2">HEADER MIDDLE</div>
               <div class="x-title3">HEADER END</div>
             </div>
           </div>
 
-          <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-            <div class="x-flex x-justify-center x-p-16 x-title3">SUBHEADER</div>
+          <div class="x-layout-item border-b-1 border-gray-300">
+            <div class="x-title3 flex justify-center p-4">SUBHEADER</div>
           </div>
 
           <div class="x-layout-item">
-            <div class="x-flex x-justify-center x-p-16 x-title3 x-bg-neutral-10">TOOLBAR</div>
+            <div class="x-title3 flex justify-center bg-gray-100 p-4">TOOLBAR</div>
           </div>
 
           <div class="x-layout-item x-layout-expand">
-            <div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
+            <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
-              <span class="x-place-self-end">MAIN BOTTOM</span>
+              <span class="place-self-end">MAIN BOTTOM</span>
             </div>
           </div>
         </div>
 
         <div class="x-layout-item x-layout-overlap">
           <button
-            class="x-layout-on-margin-right x-justify-self-start x-self-end x-button x-button-sm x-button-circle x-mb-16"
+            class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
           >
             ▲
           </button>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
index a8bd35182e..1eee145f59 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
@@ -3,44 +3,44 @@
     <label for="layout-single-column-modal" class="x-button">Open layout example</label>
     <input id="layout-single-column-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-10">
+    <div class="modal bg-white">
       <div :class="[cssClass, 'x-layout-min-margin-48']">
-        <div class="x-layout-item x-bg-neutral-0 x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-8">
+        <div class="x-layout-item border-b border-gray-400 bg-white">
+          <div class="flex items-center justify-between py-2">
             <span class="x-title3">SINGLE COLUMN LAYOUT</span>
-            <label for="layout-single-column-modal" class="x-button x-button-ghost x-ml-auto">
+            <label for="layout-single-column-modal" class="x-button x-button-ghost ml-auto">
               Close
             </label>
           </div>
         </div>
 
-        <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-16">
+        <div class="x-layout-item border-b border-gray-400">
+          <div class="flex items-center justify-between py-4">
             <div class="x-title3">HEADER START</div>
             <div class="x-title2">HEADER MIDDLE</div>
             <div class="x-title3">HEADER END</div>
           </div>
         </div>
 
-        <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-center x-p-16 x-title3">SUB HEADER</div>
+        <div class="x-layout-item border-b border-gray-400">
+          <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
         <div class="x-scroll">
           <div class="x-layout-item x-layout-expand">
-            <div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
+            <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
               <section>MAIN</section>
-              <span class="x-place-self-end">MAIN BOTTOM</span>
+              <span class="place-self-end">MAIN BOTTOM</span>
             </div>
           </div>
         </div>
 
         <div class="x-layout-item x-layout-overlap">
-          <button class="x-justify-self-center x-self-end x-button x-mb-16">FLOATING</button>
+          <button class="x-button mb-4 self-end justify-self-center">FLOATING</button>
         </div>
 
         <div class="x-layout-item">
-          <div class="x-flex x-justify-center x-p-16 x-title3">FOOTER</div>
+          <div class="x-title3 flex justify-center p-4">FOOTER</div>
         </div>
       </div>
     </div>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
index 8e41ac4939..ecf3abf221 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
@@ -3,45 +3,43 @@
     <label for="layout-two-columns-modal" class="x-button">Open layout example</label>
     <input id="layout-two-columns-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-10">
+    <div class="modal bg-gray-100">
       <div :class="[cssClass, 'x-layout-min-margin-48']">
-        <div class="x-layout-item x-bg-neutral-0 x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-8">
+        <div class="x-layout-item border-b-1 border-gray-300 bg-white">
+          <div class="flex items-center justify-between py-2">
             <span class="x-title3">TWO COLUMNS LAYOUT</span>
-            <label for="layout-two-columns-modal" class="x-button x-button-ghost x-ml-auto">
+            <label for="layout-two-columns-modal" class="x-button x-button-ghost ml-auto">
               Close
             </label>
           </div>
         </div>
 
-        <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-between x-items-center x-py-16">
+        <div class="x-layout-item border-b-1 border-gray-300">
+          <div class="flex items-center justify-between py-4">
             <div class="x-title3">HEADER START</div>
             <div class="x-title2">HEADER MIDDLE</div>
             <div class="x-title3">HEADER END</div>
           </div>
         </div>
 
-        <div class="x-layout-item x-border-b-1 x-border-neutral-25">
-          <div class="x-flex x-justify-center x-p-16 x-title3">SUB HEADER</div>
+        <div class="x-layout-item border-b-1 border-gray-300">
+          <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
-        <div class="x-layout-item x-layout-no-margin-right x-layout-expand x-mt-16 x-mb-16">
-          <div class="x-flex x-layout-expand x-gap-24">
-            <div class="x-scroll x-w-128">
-              <div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
+        <div class="x-layout-item x-layout-no-margin-right x-layout-expand mb-4 mt-4">
+          <div class="x-layout-expand flex gap-6">
+            <div class="x-scroll w-[128px]">
+              <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                 <span>ASIDE</span>
-                <span class="x-place-self-end">ASIDE BOTTOM</span>
+                <span class="place-self-end">ASIDE BOTTOM</span>
               </div>
             </div>
 
             <div class="x-scroll x-layout-expand">
               <div class="x-layout-item x-layout-no-margin-left">
-                <div
-                  class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25"
-                >
+                <div class="flex h-[2000px] flex-col justify-between bg-gray-200 p-3">
                   <section>MAIN</section>
-                  <span class="x-place-self-end">MAIN BOTTOM</span>
+                  <span class="place-self-end">MAIN BOTTOM</span>
                 </div>
               </div>
             </div>
@@ -50,7 +48,7 @@
 
         <div class="x-layout-item x-layout-overlap">
           <button
-            class="x-layout-on-margin-right x-justify-self-start x-self-end x-button x-button-sm x-button-circle x-mb-16"
+            class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
           >
             ▲
           </button>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
index dbd78a3151..905bd477ea 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
@@ -7,25 +7,25 @@
     <label for="layout-utils-modal" class="x-button">See layout utils</label>
     <input id="layout-utils-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-0">
-      <div class="x-flex x-p-16">
+    <div class="modal bg-white">
+      <div class="flex p-4">
         <div class="x-title2">Layout utilities</div>
-        <label for="layout-utils-modal" class="x-button x-button-link x-ml-auto">Close</label>
+        <label for="layout-utils-modal" class="x-button x-button-link ml-auto">Close</label>
       </div>
 
       <div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
-        <div class="x-title3 x-mt-32 x-pb-8 x-px-16">{{ sectionName }}</div>
-        <div class="x-text-md x-mb-16 x-px-16">
+        <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
+        <div class="mb-4 px-4 text-xl">
           {{ sectionDescriptions[sectionName] }}
         </div>
-        <div v-for="cssClass in sectionClasses" :key="cssClass" class="x-flex x-flex-col x-pb-12">
-          <code class="x-py-8 x-px-16">{{ cssClass }}</code>
+        <div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
+          <code class="px-4 py-2">{{ cssClass }}</code>
           <div
-            class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md x-w-full x-h-[80px] x-bg-neutral-25"
+            class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md h-[80px] w-full bg-gray-200"
           >
             <template v-if="sectionName === 'Overlap'">
               <div v-if="cssClass.split(' ')[1] === 'x-layout-overlap'" class="x-layout-item">
-                <span class="x-bg-lead-25 x-p-8 x-h-[60px]">item</span>
+                <span class="h-[60px] bg-gray-300 p-2">item</span>
               </div>
 
               <div
@@ -35,19 +35,17 @@
                 :class="cssClass"
                 title="Click me to copy CSS classes"
               >
-                <span class="x-justify-self-center x-bg-lead-50 x-p-8 x-w-[80%]">
-                  This is overlapping
-                </span>
+                <span class="w-[80%] justify-self-center bg-gray-400 p-2">This is overlapping</span>
               </div>
 
               <div v-if="cssClass.includes('x-layout-overlap-from-top')" class="x-layout-item">
-                <span class="x-bg-lead-25 x-p-8 x-h-[60px]">item</span>
+                <span class="h-[60px] bg-gray-300 p-2">item</span>
               </div>
             </template>
 
             <template v-else-if="sectionName === 'On margin'">
               <div class="x-layout-item">
-                <div v-if="cssClass === 'x-layout-on-margin-right'" class="x-bg-lead-25 x-p-8">
+                <div v-if="cssClass === 'x-layout-on-margin-right'" class="bg-gray-300 p-2">
                   item
                 </div>
                 <div
@@ -57,11 +55,11 @@
                   :class="cssClass"
                   title="Click me to copy CSS classes"
                 >
-                  <div class="x-bg-lead-50 x-p-8">
+                  <div class="bg-gray-400 p-2">
                     {{ cssClass }}
                   </div>
                 </div>
-                <div v-if="cssClass === 'x-layout-on-margin-left'" class="x-bg-lead-25 x-p-8">
+                <div v-if="cssClass === 'x-layout-on-margin-left'" class="bg-gray-300 p-2">
                   item
                 </div>
               </div>
@@ -75,7 +73,7 @@
               :class="cssClass"
               title="Click me to copy CSS classes"
             >
-              <span class="x-bg-lead-25 x-p-8 x-self-stretch">item</span>
+              <span class="self-stretch bg-gray-300 p-2">item</span>
             </div>
           </div>
         </div>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout.vue b/packages/x-tailwindcss/demo/src/components/xds-layout.vue
index 216bd80dda..23e7d38322 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-layout.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-layout.vue
@@ -3,34 +3,31 @@
     <label for="layout-modal" class="x-button">See layouts</label>
     <input id="layout-modal" type="checkbox" class="modal-toggle" />
 
-    <div class="modal x-bg-neutral-0">
-      <div class="x-flex x-p-16">
+    <div class="modal bg-white">
+      <div class="flex p-4">
         <div class="x-title2">Layouts</div>
-        <label for="layout-modal" class="x-button x-button-link x-ml-auto">Close</label>
+        <label for="layout-modal" class="x-button x-button-link ml-auto">Close</label>
       </div>
 
       <div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
-        <div class="x-title3 x-mt-32 x-pb-8 x-px-16">{{ sectionName }}</div>
-        <div v-for="cssClass in sectionClasses" :key="cssClass" class="x-flex x-flex-col x-pb-12">
-          <div v-if="cssClass.includes('x-layout-min-margin-12')" class="x-text-md x-mb-16 x-px-16">
+        <div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
+        <div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
+          <div v-if="cssClass.includes('x-layout-min-margin-12')" class="mb-4 px-4 text-xl">
             There are as many classes as spacing variables declared in the Tailwind theme:
             <code>x-layout-min-margin-[spacing-value]</code>
           </div>
-          <div
-            v-if="cssClass.includes('x-layout-container-mx-128')"
-            class="x-text-md x-mb-16 x-px-16"
-          >
+          <div v-if="cssClass.includes('x-layout-container-mx-128')" class="mb-4 px-4 text-xl">
             Custom alignment is available with Tailwind spacing classes or arbitrary values:
           </div>
-          <code class="x-py-8 x-px-16">{{ cssClass }}</code>
+          <code class="px-4 py-2">{{ cssClass }}</code>
           <div
             @click="copyCssClassesToClipboard"
             @keydown="copyCssClassesToClipboard"
             :class="cssClass"
             title="Click me to copy CSS classes"
-            class="x-bg-neutral-25 x-w-full"
+            class="w-full bg-gray-300"
           >
-            <div class="x-layout-item"><span class="x-bg-lead-25 x-p-8">item</span></div>
+            <div class="x-layout-item"><span class="bg-gray-400 p-2">item</span></div>
           </div>
         </div>
       </div>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-picture.vue b/packages/x-tailwindcss/demo/src/components/xds-picture.vue
index 13efa3ad3b..c435a83b68 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-picture.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-picture.vue
@@ -11,7 +11,7 @@
       :class="cssClass"
       title="Click me to copy CSS classes"
       style="width: 200px"
-      class="x-bg-neutral-50/60"
+      class="bg-white/60"
     >
       <img
         src="https://assets.empathy.co/images-demo/2885.jpg"
diff --git a/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue b/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
index 47daef859b..859e5ffd52 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
@@ -4,15 +4,15 @@
     :sections="sections"
     #default="{ cssClass, copyCssClassesToClipboard, removeClassPrefix }"
   >
-    <div class="x-flex x-flex-col x-gap-4">
-      <h3 class="x-text-sm">{{ removeClassPrefix(cssClass, base).trim() || 'default' }}</h3>
+    <div class="lex-col flex gap-4">
+      <h3 class="text-sm">{{ removeClassPrefix(cssClass, base).trim() || 'default' }}</h3>
       <div
         @click="copyCssClassesToClipboard"
         @keyup="copyCssClassesToClipboard"
-        class="x-w-[320px]"
+        class="w-[320px]"
         :class="cssClass"
       >
-        <div class="x-progress-bar-fill x-w-[30%]" />
+        <div class="x-progress-bar-fill w-[30%]" />
       </div>
     </div>
   </XdsBaseShowcase>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-scroll.vue b/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
index 4d7a881608..112deb03b2 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-scroll.vue
@@ -8,9 +8,9 @@
       @keydown="copyCssClassesToClipboard"
       @click="copyCssClassesToClipboard"
       :class="cssClass"
-      class="x-h-[200px] x-w-[200px] x-bg-warning-25"
+      class="h-[200px] w-[200px] bg-amber-400"
     >
-      <div :key="cssClass" class="x-h-[1000px]"></div>
+      <div :key="cssClass" class="h-[1000px]"></div>
     </div>
   </XdsBaseShowcase>
 </template>
diff --git a/packages/x-tailwindcss/demo/src/components/xds-showcase.vue b/packages/x-tailwindcss/demo/src/components/xds-showcase.vue
index 7d46d6cd5a..95f8de9079 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-showcase.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-showcase.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x-flex x-flex-col x-gap-40 x-p-20">
+  <div class="flex flex-col gap-10 p-5">
     <XdsButton />
     <XdsButtonGroup />
     <XdsIcon />
diff --git a/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue b/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
index 6d9cdfff6d..ecd0211c9c 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-sliding-panel.vue
@@ -12,7 +12,7 @@
     >
       <button class="x-button x-sliding-panel-button-left">ᐸ</button>
       <div
-        class="x-gap-12 x-flex x-flex-row"
+        class="flex gap-3"
         :class="{
           'x-sliding-panel-fade': section === 'Fade',
           'x-sliding-panel-fade-sm':
@@ -24,7 +24,7 @@
         <div
           v-for="(item, index) of items"
           :key="index"
-          class="x-min-h-[100px] x-min-w-[100px] x-flex x-justify-center x-items-center x-bg-lead-25"
+          class="flex min-h-[100px] min-w-[100px] items-center justify-center bg-gray-300"
         >
           <span>{{ item }}</span>
         </div>
diff --git a/packages/x-tailwindcss/demo/tailwind.config.ts b/packages/x-tailwindcss/demo/tailwind.config.ts
index 5c8c88d00f..76f3f1d59c 100644
--- a/packages/x-tailwindcss/demo/tailwind.config.ts
+++ b/packages/x-tailwindcss/demo/tailwind.config.ts
@@ -2,26 +2,5 @@ import xTailwindCss from '../src/x-tailwind-plugin/plugin';
 
 export default {
   content: ['./index.html', './**/*.vue'],
-  prefix: 'x-',
-  important: true,
-  theme: {
-    extend: {}
-  },
-  plugins: [
-    xTailwindCss({
-      components() {
-        return {};
-      },
-      utilities() {
-        return {};
-      },
-      dynamicUtilities() {
-        return {};
-      },
-      dynamicComponents() {
-        return {};
-      },
-      theme: {}
-    })
-  ]
+  plugins: [xTailwindCss]
 };
diff --git a/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts b/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts
index fe40aab757..ce88622331 100644
--- a/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts
+++ b/packages/x-tailwindcss/src/old-ds-plugin/plugin.ts
@@ -38,35 +38,35 @@ export default plugin(function ({ addBase, theme }: TailwindHelpers) {
     ':root': {
       // COLOR
       ...mapPrefix('--x-color-base-', {
-        lead: theme('colors.lead.50'),
-        auxiliary: theme('colors.auxiliary.25'),
-        'neutral-10': theme('colors.neutral.90'),
-        'neutral-35': theme('colors.neutral.75'),
-        'neutral-70': theme('colors.neutral.25'),
-        'neutral-95': theme('colors.neutral.10'),
-        'neutral-100': theme('colors.neutral.0'),
-        accent: theme('colors.auxiliary.50'),
-        enable: theme('colors.success.50'),
-        disable: theme('colors.error.50')
+        lead: theme('x.colors.lead.50'),
+        auxiliary: theme('x.colors.auxiliary.25'),
+        'neutral-10': theme('x.colors.neutral.90'),
+        'neutral-35': theme('x.colors.neutral.75'),
+        'neutral-70': theme('x.colors.neutral.25'),
+        'neutral-95': theme('x.colors.neutral.10'),
+        'neutral-100': theme('x.colors.neutral.0'),
+        accent: theme('x.colors.auxiliary.50'),
+        enable: theme('x.colors.success.50'),
+        disable: theme('x.colors.error.50')
       }),
 
       // SPACING
       ...mapPrefix('--x-size-base-', {
-        '01': theme('spacing.2'),
-        '02': theme('spacing.4'),
-        '03': theme('spacing.8'),
-        '04': theme('spacing.12'),
-        '05': theme('spacing.16'),
-        '06': theme('spacing.24'),
-        '07': theme('spacing.32'),
-        '08': theme('spacing.40'),
-        '09': theme('spacing.48'),
-        '10': theme('spacing.56'),
-        '11': theme('spacing.64'),
-        '12': theme('spacing.80'),
-        '13': theme('spacing.80'),
-        '14': theme('spacing.96'),
-        '15': theme('spacing.128'),
+        '01': theme('x.spacing.2'),
+        '02': theme('x.spacing.4'),
+        '03': theme('x.spacing.8'),
+        '04': theme('x.spacing.12'),
+        '05': theme('x.spacing.16'),
+        '06': theme('x.spacing.24'),
+        '07': theme('x.spacing.32'),
+        '08': theme('x.spacing.40'),
+        '09': theme('x.spacing.48'),
+        '10': theme('x.spacing.56'),
+        '11': theme('x.spacing.64'),
+        '12': theme('x.spacing.80'),
+        '13': theme('x.spacing.80'),
+        '14': theme('x.spacing.96'),
+        '15': theme('x.spacing.128'),
         '16': '152px',
         '17': '184px',
         '18': '216px',
@@ -76,51 +76,51 @@ export default plugin(function ({ addBase, theme }: TailwindHelpers) {
 
       // BORDER
       ...mapPrefix('--x-size-border-', {
-        'radius-base-pill': theme('borderRadius.round'),
-        'width-base': theme('borderWidth.1')
+        'radius-base-pill': theme('x.borderRadius.round'),
+        'width-base': theme('x.borderWidth.1')
       }),
 
       // FONT FAMILY
-      '--x-font-family-base': theme('fontFamily.main'),
+      '--x-font-family-base': theme('x.fontFamily.main'),
 
       // FONT SIZES
       ...mapPrefix('--x-size-font-', {
-        'base-xs': theme('fontSize.xs'),
-        'base-s': theme('fontSize.sm'),
-        'base-m': theme('fontSize.md'),
-        'base-l': theme('fontSize.lg'),
-        'base-xl': theme('fontSize.2xl')
+        'base-xs': theme('x.fontSize.xs'),
+        'base-s': theme('x.fontSize.sm'),
+        'base-m': theme('x.fontSize.md'),
+        'base-l': theme('x.fontSize.lg'),
+        'base-xl': theme('x.fontSize.2xl')
       }),
 
       // FONT WEIGHT
       ...mapPrefix('--x-number-font-weight-base-', {
-        light: theme('fontWeight.light'),
-        regular: theme('fontWeight.regular'),
-        bold: theme('fontWeight.bold')
+        light: theme('x.fontWeight.light'),
+        regular: theme('x.fontWeight.regular'),
+        bold: theme('x.fontWeight.bold')
       }),
 
       // LINE HEIGHT
       ...mapPrefix('--x-size-line-height-base-', {
-        s: theme('lineHeight.sm'),
-        m: theme('lineHeight.md'),
-        l: theme('lineHeight.lg')
+        s: theme('x.lineHeight.sm'),
+        m: theme('x.lineHeight.md'),
+        l: theme('x.lineHeight.lg')
       }),
 
       // TEXT
-      '--x-color-text-default': theme('colors.neutral.100'),
-      '--x-font-family-text': theme('fontFamily.main'),
-      '--x-size-font-text': theme('fontSize.sm'),
-      '--x-number-font-weight-text': theme('fontWeight.regular'),
-      '--x-size-line-height-text': theme('lineHeight.sm'),
+      '--x-color-text-default': theme('x.colors.neutral.100'),
+      '--x-font-family-text': theme('x.fontFamily.main'),
+      '--x-size-font-text': theme('x.fontSize.sm'),
+      '--x-number-font-weight-text': theme('x.fontWeight.regular'),
+      '--x-size-line-height-text': theme('x.lineHeight.sm'),
 
       // TITLE 3
-      '--x-font-family-title3': theme('fontFamily.main'),
-      '--x-size-font-title3': theme('fontSize.md'),
-      '--x-number-font-weight-title3': theme('fontWeight.regular'),
-      '--x-size-line-height-title3': theme('lineHeight.md'),
+      '--x-font-family-title3': theme('x.fontFamily.main'),
+      '--x-size-font-title3': theme('x.fontSize.md'),
+      '--x-number-font-weight-title3': theme('x.fontWeight.regular'),
+      '--x-size-line-height-title3': theme('x.lineHeight.md'),
 
       // IMAGE
-      '--x-number-aspect-ratio-picture': theme('aspectRatio.default')
+      '--x-number-aspect-ratio-picture': theme('x.aspectRatio.default')
     }
   });
 });
diff --git a/packages/x-tailwindcss/src/types.ts b/packages/x-tailwindcss/src/types.ts
index 00f4572271..eb3ccd07af 100644
--- a/packages/x-tailwindcss/src/types.ts
+++ b/packages/x-tailwindcss/src/types.ts
@@ -1,10 +1,6 @@
-import { DeepPartial, Dictionary, ExtractPath } from '@empathyco/x-utils';
+import { ExtractPath } from '@empathyco/x-utils';
 import { PluginAPI } from 'tailwindcss/types/config';
 import { Config } from 'tailwindcss';
-import { ReturnOfComponents } from './x-tailwind-plugin/components';
-import { ReturnOfDynamicComponents } from './x-tailwind-plugin/dynamic-components';
-import { ReturnOfDynamicUtilities } from './x-tailwind-plugin/dynamic-utilities';
-import { ReturnOfUtilities } from './x-tailwind-plugin/utilities';
 import Theme from './x-tailwind-plugin/theme';
 
 /**
@@ -24,7 +20,7 @@ type CssVariable = `--${string}`;
  *
  * @example
  * ```typescript
- * const btnClass: CssClassSelector = '.btn';
+ * const btnClass: CssClassSelector = '.x-btn';
  * ```
  *
  * @internal
@@ -60,10 +56,10 @@ type CssPseudoSelector = `:${string}`;
  * ```typescript
  * const cssOptions: CssStyleOptions = {
  *   '--color-lead': 'blue',
- *   '.btn': {
+ *   '.x-btn': {
  *     '&--lead': {
  *       color: 'var(--color-lead)',
- *       gap: theme('spacing.2')
+ *       gap: theme('x.spacing.2')
  *     }
  *   }
  * }
@@ -78,16 +74,6 @@ export type CssStyleOptions = {
   [Key: CssVariable]: string & Partial<TailwindHelpers>;
 };
 
-/**
- * An object with the styles and values to create a dynamic component or utility with.
- *
- * @public
- */
-export type DynamicCssStylesOptions = Dictionary<{
-  styles: (value: unknown) => CssStyleOptions;
-  values?: Dictionary<unknown>;
-}>;
-
 /**
  * All the tailwind helpers provided by the plugin.
  *
@@ -99,67 +85,3 @@ export type TailwindHelpers = PluginAPI & {
     defaultValue?: TDefaultValue
   ) => TDefaultValue;
 };
-
-/**
- * Represents the return type of {@link PluginOptions.components}.
- *
- * @public
- */
-export type ComponentsDefinition = DeepPartial<ReturnOfComponents> | CssStyleOptions;
-
-/**
- * Represents the return type of {@link PluginOptions.utilities}.
- *
- * @public
- */
-export type UtilitiesDefinition = DeepPartial<ReturnOfUtilities> | CssStyleOptions;
-
-/**
- * Represents the return type of {@link PluginOptions.dynamicComponents}.
- *
- * @public
- */
-export type DynamicComponentsDefinition =
-  | DeepPartial<ReturnOfDynamicComponents>
-  | DynamicCssStylesOptions;
-
-/**
- * Represents the return type of {@link PluginOptions.dynamicUtilities}.
- *
- * @public
- */
-export type DynamicUtilitiesDefinition =
-  | DeepPartial<ReturnOfDynamicUtilities>
-  | DynamicCssStylesOptions;
-
-/**
- * Options to create a plugin.
- *
- * @public
- */
-export interface PluginOptions {
-  /**
-   * Registers new static components or modify the existing ones.
-   */
-  components?: (helpers: TailwindHelpers) => ComponentsDefinition;
-  /**
-   * Registers a new dynamic component styles or replaces the existing ones.
-   */
-  dynamicComponents?: (helpers: TailwindHelpers) => DynamicComponentsDefinition;
-  /**
-   * Registers new static utilities or modify the existing ones.
-   */
-  utilities?: (helpers: TailwindHelpers) => UtilitiesDefinition;
-  /**
-   * Registers a new dynamic utilities styles or replaces the existing ones.
-   */
-  dynamicUtilities?: (helpers: TailwindHelpers) => DynamicUtilitiesDefinition;
-  /**
-   * Helper to add extra functionalities.
-   */
-  extra?: (helpers: TailwindHelpers) => Partial<TailwindHelpers>;
-  /**
-   * Helper to define new theme or modify the existing one.
-   */
-  theme?: DeepPartial<typeof Theme> | Config['theme'];
-}
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
index f07ddce2dc..b08bdfb9a2 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
@@ -1,3 +1,4 @@
+import { CSSRuleObject } from 'tailwindcss/types/config';
 import { TailwindHelpers } from '../types';
 import { inputGroup } from './components/input-group';
 import { variables } from './components/variables';
@@ -51,12 +52,5 @@ export default function components(helpers: TailwindHelpers) {
     ...facetFilter(helpers),
     ...progressBar(helpers),
     ...attach(helpers)
-  };
+  } as unknown as CSSRuleObject;
 }
-
-/**
- * The return type of {@link components}.
- *
- * @public
- */
-export type ReturnOfComponents = ReturnType<typeof components>;
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
index f7acd6c14f..a194efdd86 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
@@ -9,10 +9,10 @@ import { TailwindHelpers } from '../../../types';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function attach(helpers: TailwindHelpers) {
   return {
-    '.attach-container': {
+    '.x-attach-container': {
       position: 'relative'
     },
-    '.attach-to': {
+    '.x-attach-to': {
       '&-top-left': {
         position: 'absolute',
         top: 0,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/bright.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/bright.ts
index 5c6aee4f07..c8854eb6d5 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/bright.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/bright.ts
@@ -13,8 +13,8 @@ export function badgeBright(helpers: TailwindHelpers) {
     bright: {
       backgroundColor: 'transparent',
 
-      borderWidth: theme('spacing.1'),
-      borderColor: `var(--badge-color-25, ${theme('colors.neutral.0')})`
+      borderWidth: theme('x.spacing.1'),
+      borderColor: `var(--badge-color-25, ${theme('x.colors.neutral.0')})`
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts
index d4dab4f27d..c474fa480b 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/circle.ts
@@ -14,13 +14,13 @@ export function badgeCircle({ theme }: TailwindHelpers) {
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       padding: '0',
-      width: theme('spacing.24'),
+      width: theme('x.spacing.24'),
 
       '&.badge-sm': {
-        width: theme('spacing.20')
+        width: theme('x.spacing.20')
       },
       '&.badge-md': {
-        width: theme('spacing.24')
+        width: theme('x.spacing.24')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/default.ts
index 58a0236126..508bb80be7 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/default.ts
@@ -10,17 +10,17 @@ import { badgeSizes } from './sizes';
 export function badgeDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
-    fontSize: theme('fontSize.xs'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
+    fontSize: theme('x.fontSize.xs'),
 
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: theme('borderRadius.full'),
+    borderRadius: theme('x.borderRadius.full'),
 
-    color: theme('colors.neutral.0'),
-    backgroundColor: theme('colors.neutral.90'),
+    color: theme('x.colors.neutral.0'),
+    backgroundColor: theme('x.colors.neutral.90'),
 
     ...badgeSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
index 3403d666a5..a0d12e6019 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
@@ -16,7 +16,7 @@ import { badgeBright } from './bright';
  */
 export function badge(helpers: TailwindHelpers) {
   return {
-    '.badge': {
+    '.x-badge': {
       ...badgeDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/light.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/light.ts
index 282a5a2a52..5d13901a11 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/light.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/light.ts
@@ -9,8 +9,8 @@ import { TailwindHelpers } from '../../../types';
 export function badgeLight({ theme }: TailwindHelpers) {
   return {
     light: {
-      backgroundColor: `var(--badge-color-25, ${theme('colors.neutral.0')})`,
-      color: theme('colors.neutral.90')
+      backgroundColor: `var(--badge-color-25, ${theme('x.colors.neutral.0')})`,
+      color: theme('x.colors.neutral.90')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/outlined.ts
index dedddd40aa..ce4e635a64 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/outlined.ts
@@ -11,11 +11,11 @@ export function badgeOutlined(helpers: TailwindHelpers) {
 
   return {
     outlined: {
-      color: theme('colors.neutral.90'),
+      color: theme('x.colors.neutral.90'),
       backgroundColor: 'transparent',
 
-      borderWidth: theme('spacing.1'),
-      borderColor: `var(--badge-color-50, ${theme('colors.neutral.90')})`
+      borderWidth: theme('x.spacing.1'),
+      borderColor: `var(--badge-color-50, ${theme('x.colors.neutral.90')})`
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/sizes.ts
index 3f62eba257..0a3157d790 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/sizes.ts
@@ -11,18 +11,18 @@ export function badgeSizes(helpers: TailwindHelpers) {
 
   return {
     sm: {
-      '--attach-horizontal-offset': theme('spacing.8'),
+      '--attach-horizontal-offset': theme('x.spacing.8'),
 
-      height: theme('spacing.20'),
-      paddingInlineStart: theme('spacing.8'),
-      paddingInlineEnd: theme('spacing.8')
+      height: theme('x.spacing.20'),
+      paddingInlineStart: theme('x.spacing.8'),
+      paddingInlineEnd: theme('x.spacing.8')
     },
     md: {
-      '--attach-horizontal-offset': theme('spacing.12'),
+      '--attach-horizontal-offset': theme('x.spacing.12'),
 
-      height: theme('spacing.24'),
-      paddingInlineStart: theme('spacing.12'),
-      paddingInlineEnd: theme('spacing.12')
+      height: theme('x.spacing.24'),
+      paddingInlineStart: theme('x.spacing.12'),
+      paddingInlineEnd: theme('x.spacing.12')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
index a3903f524f..a3254c8a97 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
@@ -11,19 +11,19 @@ export function buttonGroupDefault(helpers: TailwindHelpers) {
 
   return {
     display: 'inline-flex',
-    color: theme('colors.neutral.50'),
+    color: theme('x.colors.neutral.50'),
 
     // We should only remove the left border if the button group doesn't have gap.
-    '&:not([class*="gap"]) > .button + .button': {
+    '&:not([class*="gap"]) > .x-button + .x-button': {
       borderLeft: 'unset'
     },
 
-    '& > :not(.button-circle):first-child': {
+    '& > :not(.x-button-circle):first-child': {
       borderTopLeftRadius: 'inherit',
       borderBottomLeftRadius: 'inherit'
     },
 
-    '& > :not(.button-circle):last-child': {
+    '& > :not(.x-button-circle):last-child': {
       borderTopRightRadius: 'inherit',
       borderBottomRightRadius: 'inherit'
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/divider.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/divider.ts
index a857611cb8..5ddc5faf42 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/divider.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/divider.ts
@@ -12,7 +12,7 @@ export function buttonGroupDivider(helpers: TailwindHelpers) {
   return {
     divider: {
       borderLeft: '1px solid currentColor',
-      margin: `${theme('spacing.8')} 0`,
+      margin: `${theme('x.spacing.8')} 0`,
       alignSelf: 'stretch'
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
index 65cef0dd47..096d11ff75 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
@@ -11,7 +11,7 @@ import { buttonGroupDivider } from './divider';
  */
 export function buttonGroup(helpers: TailwindHelpers) {
   return {
-    '.button-group': {
+    '.x-button-group': {
       ...buttonGroupDefault(helpers),
       ...rename(buttonGroupDivider(helpers), { prefix: '&-' })
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts
index aca857ca8c..803c24495c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts
@@ -18,33 +18,33 @@ export function buttonDefault(helpers: TailwindHelpers) {
     boxSizing: 'border-box',
 
     borderStyle: 'solid',
-    borderWidth: theme('borderWidth.1'),
+    borderWidth: theme('x.borderWidth.1'),
 
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.bold'),
-    letterSpacing: theme('letterSpacing.md'),
-    lineHeight: theme('lineHeight.sm'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.bold'),
+    letterSpacing: theme('x.letterSpacing.md'),
+    lineHeight: theme('x.lineHeight.sm'),
 
     cursor: 'pointer',
 
-    backgroundColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-    borderColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-    color: theme('colors.neutral.0'),
+    backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+    borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+    color: theme('x.colors.neutral.0'),
 
     '&:hover,&:active': {
-      backgroundColor: `var(--button-color-75,${theme('colors.neutral.100')})`,
-      borderColor: `var(--button-color-75,${theme('colors.neutral.100')})`
+      backgroundColor: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
+      borderColor: `var(--button-color-75,${theme('x.colors.neutral.100')})`
     },
 
     ...buttonSizes(helpers).md,
 
     '&.selected': {
-      backgroundColor: `var(--button-color-75,${theme('colors.neutral.100')})`,
-      borderColor: `var(--button-color-75,${theme('colors.neutral.100')})`,
+      backgroundColor: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
+      borderColor: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
 
       '&:hover,&:active': {
-        backgroundColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-        borderColor: `var(--button-color-50,${theme('colors.neutral.90')})`
+        backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+        borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts
index ce3ddff3b5..614992994c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/disabled.ts
@@ -13,9 +13,9 @@ export function buttonDisabled(helpers: TailwindHelpers) {
 
   // Disabled common styles
   const disabledStyles = {
-    borderColor: `var(--button-disabled-border-color,${theme('colors.neutral.10')})`,
-    backgroundColor: `var(--button-disabled-background-color,${theme('colors.neutral.10')})`,
-    color: theme('colors.neutral.25')
+    borderColor: `var(--button-disabled-border-color,${theme('x.colors.neutral.10')})`,
+    backgroundColor: `var(--button-disabled-background-color,${theme('x.colors.neutral.10')})`,
+    color: theme('x.colors.neutral.25')
   };
 
   return {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts
index 2713077c14..87ae83dbbe 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/ghost.ts
@@ -14,13 +14,13 @@ export function buttonGhost(helpers: TailwindHelpers) {
   return {
     ghost: deepMerge(noBackground(helpers), backgroundOnHover(helpers), {
       '&.selected': {
-        borderColor: theme('colors.neutral.10'),
-        backgroundColor: theme('colors.neutral.10'),
-        color: `var(--button-color-75,${theme('colors.neutral.90')})`,
+        borderColor: theme('x.colors.neutral.10'),
+        backgroundColor: theme('x.colors.neutral.10'),
+        color: `var(--button-color-75,${theme('x.colors.neutral.90')})`,
 
         '&:hover,&:active': {
-          borderColor: theme('colors.neutral.25'),
-          backgroundColor: theme('colors.neutral.25')
+          borderColor: theme('x.colors.neutral.25'),
+          backgroundColor: theme('x.colors.neutral.25')
         }
       }
     })
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
index e59b3e612c..96db754d7b 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
@@ -19,7 +19,7 @@ import { buttonSizes } from './sizes';
  */
 export function button(helpers: TailwindHelpers) {
   return {
-    '.button': deepMerge(
+    '.x-button': deepMerge(
       buttonDefault(helpers),
       rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/layouts.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/layouts.ts
index 96e159ac89..d1bc177900 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/layouts.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/layouts.ts
@@ -18,7 +18,7 @@ export function buttonLayouts({ theme }: TailwindHelpers) {
       aspectRatio: '1/1',
       paddingInlineStart: 0,
       paddingInlineEnd: 0,
-      borderRadius: theme('borderRadius.full')
+      borderRadius: theme('x.borderRadius.full')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts
index 70fa275992..7ca4822d08 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/link.ts
@@ -26,13 +26,13 @@ export function buttonLink(helpers: TailwindHelpers) {
       '&.selected': {
         borderColor: 'transparent',
         backgroundColor: 'transparent',
-        color: `var(--button-color-75,${theme('colors.neutral.100')})`,
-        fontWeight: theme('fontWeight.bold'),
+        color: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
+        fontWeight: theme('x.fontWeight.bold'),
 
         '&:hover,&:active': {
           borderColor: 'transparent',
           backgroundColor: 'transparent',
-          color: `var(--button-color-50,${theme('colors.neutral.90')})`
+          color: `var(--button-color-50,${theme('x.colors.neutral.90')})`
         },
 
         '&:disabled': {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts
index a08566696e..fca150f2f9 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/outlined.ts
@@ -11,26 +11,26 @@ export function buttonOutlined(helpers: TailwindHelpers) {
   return {
     outlined: {
       // Disabled style
-      '--button-disabled-border-color': theme('colors.neutral.25'),
+      '--button-disabled-border-color': theme('x.colors.neutral.25'),
 
-      borderColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-      backgroundColor: theme('colors.neutral.0'),
-      color: `var(--button-color-50,${theme('colors.neutral.90')})`,
+      borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+      backgroundColor: theme('x.colors.neutral.0'),
+      color: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
 
       '&:hover,&:active': {
-        borderColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-        backgroundColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-        color: theme('colors.neutral.0')
+        borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+        backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+        color: theme('x.colors.neutral.0')
       },
 
       '&.selected': {
-        borderColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-        backgroundColor: `var(--button-color-50,${theme('colors.neutral.90')})`,
-        color: theme('colors.neutral.0'),
+        borderColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+        backgroundColor: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
+        color: theme('x.colors.neutral.0'),
 
         '&:hover,&:active': {
-          backgroundColor: theme('colors.neutral.0'),
-          color: `var(--button-color-50,${theme('colors.neutral.90')})`
+          backgroundColor: theme('x.colors.neutral.0'),
+          color: `var(--button-color-50,${theme('x.colors.neutral.90')})`
         }
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/sizes.ts
index 3f2087d336..ce33ea7e90 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/sizes.ts
@@ -9,35 +9,35 @@ import { TailwindHelpers } from '../../../types';
 export function buttonSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      minHeight: theme('spacing.32'),
-      gap: theme('spacing.8'),
-      paddingInlineStart: theme('spacing.12'),
-      paddingInlineEnd: theme('spacing.12'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.32'),
+      gap: theme('x.spacing.8'),
+      paddingInlineStart: theme('x.spacing.12'),
+      paddingInlineEnd: theme('x.spacing.12'),
+      fontSize: theme('x.fontSize.sm')
     },
 
     md: {
-      minHeight: theme('spacing.40'),
-      gap: theme('spacing.8'),
-      paddingInlineStart: theme('spacing.16'),
-      paddingInlineEnd: theme('spacing.16'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.40'),
+      gap: theme('x.spacing.8'),
+      paddingInlineStart: theme('x.spacing.16'),
+      paddingInlineEnd: theme('x.spacing.16'),
+      fontSize: theme('x.fontSize.sm')
     },
 
     lg: {
-      minHeight: theme('spacing.48'),
-      gap: theme('spacing.8'),
-      paddingInlineStart: theme('spacing.20'),
-      paddingInlineEnd: theme('spacing.20'),
-      fontSize: theme('fontSize.md')
+      minHeight: theme('x.spacing.48'),
+      gap: theme('x.spacing.8'),
+      paddingInlineStart: theme('x.spacing.20'),
+      paddingInlineEnd: theme('x.spacing.20'),
+      fontSize: theme('x.fontSize.md')
     },
 
     xl: {
-      minHeight: theme('spacing.56'),
-      gap: theme('spacing.8'),
-      paddingInlineStart: theme('spacing.24'),
-      paddingInlineEnd: theme('spacing.24'),
-      fontSize: theme('fontSize.lg')
+      minHeight: theme('x.spacing.56'),
+      gap: theme('x.spacing.8'),
+      paddingInlineStart: theme('x.spacing.24'),
+      paddingInlineEnd: theme('x.spacing.24'),
+      fontSize: theme('x.fontSize.lg')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts
index 39ec41a91e..61ac3a24ff 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/tight.ts
@@ -16,12 +16,12 @@ export function buttonTight(helpers: TailwindHelpers) {
       '&.selected': {
         borderColor: 'transparent',
         backgroundColor: 'transparent',
-        color: `var(--button-color-75,${theme('colors.neutral.100')})`,
+        color: `var(--button-color-75,${theme('x.colors.neutral.100')})`,
 
         '&:hover,&:active': {
           borderColor: 'transparent',
           backgroundColor: 'transparent',
-          color: `var(--button-color-50,${theme('colors.neutral.90')})`
+          color: `var(--button-color-50,${theme('x.colors.neutral.90')})`
         }
       }
     })
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/background-on-hover.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/background-on-hover.ts
index 055c0efaa2..94e637b633 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/background-on-hover.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/background-on-hover.ts
@@ -10,8 +10,8 @@ export function backgroundOnHover(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     '&:hover': {
-      borderColor: theme('colors.neutral.10'),
-      backgroundColor: theme('colors.neutral.10')
+      borderColor: theme('x.colors.neutral.10'),
+      backgroundColor: theme('x.colors.neutral.10')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/no-background.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/no-background.ts
index fb018846d0..849c2e883a 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/no-background.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/utils/no-background.ts
@@ -15,18 +15,18 @@ export function noBackground(helpers: TailwindHelpers) {
 
     borderColor: 'transparent',
     backgroundColor: 'transparent',
-    color: `var(--button-color-50,${theme('colors.neutral.90')})`,
+    color: `var(--button-color-50,${theme('x.colors.neutral.90')})`,
 
     '&:hover': {
       borderColor: 'transparent',
       backgroundColor: 'transparent',
-      color: `var(--button-color-75,${theme('colors.neutral.100')})`
+      color: `var(--button-color-75,${theme('x.colors.neutral.100')})`
     },
 
     '&:active': {
       borderColor: 'transparent',
       backgroundColor: 'transparent',
-      color: `var(--button-color-75,${theme('colors.neutral.100')})`
+      color: `var(--button-color-75,${theme('x.colors.neutral.100')})`
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts
index d3bd1dfdae..f8358f23e5 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/default.ts
@@ -21,30 +21,30 @@ export function facetFilterDefault(helpers: TailwindHelpers) {
 
     cursor: 'pointer',
 
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
     textAlign: 'start',
 
-    borderWidth: `0 0 ${theme('spacing.1')} 0`,
+    borderWidth: `0 0 ${theme('x.spacing.1')} 0`,
     borderColor: 'transparent',
 
-    color: theme('colors.neutral.90'),
+    color: theme('x.colors.neutral.90'),
 
     ...facetFilterSizes(helpers).md,
     ...alignIconWithBaseline(),
 
     '&:hover': {
-      color: `var(--filter-color-50, ${theme('colors.neutral.50')})`
+      color: `var(--filter-color-50, ${theme('x.colors.neutral.50')})`
     },
 
     '&.selected': {
-      fontWeight: theme('fontWeight.bold'),
-      letterSpacing: theme('letterSpacing.xs'),
-      color: `var(--filter-color-50, ${theme('colors.neutral.90')})`
+      fontWeight: theme('x.fontWeight.bold'),
+      letterSpacing: theme('x.letterSpacing.xs'),
+      color: `var(--filter-color-50, ${theme('x.colors.neutral.90')})`
     },
 
     '&:disabled': {
-      color: theme('colors.neutral.25'),
+      color: theme('x.colors.neutral.25'),
       cursor: 'not-allowed'
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts
index b192e5f7e1..862ff1b2df 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/ghost.ts
@@ -10,9 +10,9 @@ export function facetFilterGhost(helpers: TailwindHelpers) {
   const { theme } = helpers;
 
   const sizes = {
-    sm: { paddingInline: theme('spacing.4') },
-    md: { paddingInline: theme('spacing.8') },
-    lg: { paddingInline: theme('spacing.12') }
+    sm: { paddingInline: theme('x.spacing.4') },
+    md: { paddingInline: theme('x.spacing.8') },
+    lg: { paddingInline: theme('x.spacing.12') }
   };
 
   return {
@@ -21,17 +21,17 @@ export function facetFilterGhost(helpers: TailwindHelpers) {
       ...sizes,
 
       '&:hover': {
-        backgroundColor: theme('colors.neutral.10'),
-        color: theme('colors.neutral.90')
+        backgroundColor: theme('x.colors.neutral.10'),
+        color: theme('x.colors.neutral.90')
       },
       '&.selected': {
-        fontWeight: theme('fontWeight.regular'),
+        fontWeight: theme('x.fontWeight.regular'),
         color: `var(--filter-color-75)`,
-        letterSpacing: theme('letterSpacing.md')
+        letterSpacing: theme('x.letterSpacing.md')
       },
       '&:disabled': {
         backgroundColor: 'unset',
-        color: theme('colors.neutral.25')
+        color: theme('x.colors.neutral.25')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
index 8086e4ce9d..18abc358e8 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
@@ -16,7 +16,7 @@ import { facetFilterUnderline } from './underline';
  */
 export function facetFilter(helpers: TailwindHelpers) {
   return {
-    '.facet-filter': deepMerge(
+    '.x-facet-filter': deepMerge(
       facetFilterDefault(helpers),
       rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts
index baa34077c8..e603932309 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/simple.ts
@@ -12,23 +12,23 @@ export function facetFilterSimple(helpers: TailwindHelpers) {
   return {
     simple: {
       '&:hover': {
-        color: theme('colors.neutral.90'),
+        color: theme('x.colors.neutral.90'),
         opacity: '.6'
       },
       '&.selected': {
-        fontWeight: theme('fontWeight.regular'),
-        letterSpacing: theme('letterSpacing.md'),
+        fontWeight: theme('x.fontWeight.regular'),
+        letterSpacing: theme('x.letterSpacing.md'),
 
         '&:hover': {
-          color: `var(--filter-color-50, ${theme('colors.neutral.50')})`
+          color: `var(--filter-color-50, ${theme('x.colors.neutral.50')})`
         },
 
         '&:disabled': {
-          color: theme('colors.neutral.25')
+          color: theme('x.colors.neutral.25')
         }
       },
       '&:disabled': {
-        color: theme('colors.neutral.25'),
+        color: theme('x.colors.neutral.25'),
         opacity: '1'
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/sizes.ts
index 856b4fac00..9e9adeee5e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/sizes.ts
@@ -11,19 +11,19 @@ export function facetFilterSizes(helpers: TailwindHelpers) {
 
   return {
     sm: {
-      minHeight: theme('spacing.24'),
-      gap: theme('spacing.2'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.24'),
+      gap: theme('x.spacing.2'),
+      fontSize: theme('x.fontSize.sm')
     },
     md: {
-      minHeight: theme('spacing.32'),
-      gap: theme('spacing.4'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.32'),
+      gap: theme('x.spacing.4'),
+      fontSize: theme('x.fontSize.sm')
     },
     lg: {
-      minHeight: theme('spacing.48'),
-      gap: theme('spacing.12'),
-      fontSize: theme('fontSize.md')
+      minHeight: theme('x.spacing.48'),
+      gap: theme('x.spacing.12'),
+      fontSize: theme('x.fontSize.md')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts
index cd3c1e7ba1..4b5b8e8677 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/underline.ts
@@ -19,8 +19,8 @@ export function facetFilterUnderline(helpers: TailwindHelpers) {
         }
       },
       '&.selected': {
-        fontWeight: theme('fontWeight.regular'),
-        letterSpacing: theme('letterSpacing.md')
+        fontWeight: theme('x.fontWeight.regular'),
+        letterSpacing: theme('x.letterSpacing.md')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts
index 47edeee0dc..6177773304 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/default.ts
@@ -10,9 +10,9 @@ import { TailwindHelpers } from '../../../types';
 export function highlightDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontWeight: theme('fontWeight.bold'),
+    fontWeight: theme('x.fontWeight.bold'),
     '&-match': {
-      fontWeight: theme('fontWeight.regular')
+      fontWeight: theme('x.fontWeight.regular')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
index d14ada148f..009b2ff346 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
@@ -11,7 +11,7 @@ import { highlightDefault } from './default';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function highlight(helpers: TailwindHelpers) {
   return {
-    '.highlight-text': {
+    '.x-highlight-text': {
       ...highlightDefault(helpers)
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/default.ts
index 386b14cc5c..81881d5ce6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/default.ts
@@ -13,7 +13,7 @@ export function iconDefault(helpers: TailwindHelpers) {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontFamily: theme('fontFamily.icon'),
+    fontFamily: theme('x.fontFamily.icon'),
     width: 'auto',
     aspectRatio: '1/1',
     vectorEffect: 'non-scaling-stroke',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
index c99ddbe9e5..bb32d4d1c7 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
@@ -15,7 +15,7 @@ import { iconStrokeWidths } from './stroke-widths';
  */
 export function icon(helpers: TailwindHelpers) {
   return {
-    '.icon': Object.assign(
+    '.x-icon': Object.assign(
       iconDefault(helpers),
       rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/sizes.ts
index 1753127e14..cb78a169c0 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/sizes.ts
@@ -9,22 +9,22 @@ import { TailwindHelpers } from '../../../types';
 export function iconSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      height: theme('spacing.8'),
+      height: theme('x.spacing.8'),
       '--fontSize': '7px'
     },
 
     md: {
-      height: theme('spacing.16'),
+      height: theme('x.spacing.16'),
       '--fontSize': '14px'
     },
 
     lg: {
-      height: theme('spacing.24'),
+      height: theme('x.spacing.24'),
       '--fontSize': '20px'
     },
 
     xl: {
-      height: theme('spacing.32'),
+      height: theme('x.spacing.32'),
       '--fontSize': '28px'
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts
index 57f446d9c6..2ee03395d5 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/stroke-widths.ts
@@ -10,7 +10,7 @@ import { TailwindHelpers } from '../../../types';
 export function iconStrokeWidths({ theme }: TailwindHelpers) {
   return {
     'stroke-width': rename(
-      map(theme('strokeWidth'), (width, value) => ({
+      map(theme('x.strokeWidth'), (width, value) => ({
         '*': { strokeWidth: value }
       })),
       { prefix: '&-' }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-ghost.ts
index a37c83d2bd..0eedb01f7c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-ghost.ts
@@ -11,12 +11,12 @@ export function inputGroupButtonGhost(helpers: TailwindHelpers) {
   return {
     backgroundColor: 'transparent',
     borderColor: 'transparent',
-    color: `var(--input-color-50,${theme('colors.neutral.90')})`,
+    color: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
 
     '&:hover,&:focus,&:active': {
-      backgroundColor: theme('colors.neutral.10'),
-      borderColor: theme('colors.neutral.10'),
-      color: `var(--input-color-75,${theme('colors.neutral.90')})`
+      backgroundColor: theme('x.colors.neutral.10'),
+      borderColor: theme('x.colors.neutral.10'),
+      color: `var(--input-color-75,${theme('x.colors.neutral.90')})`
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-outlined.ts
index 11bc00b6b0..d3705c19e1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-outlined.ts
@@ -9,14 +9,14 @@ import { TailwindHelpers } from '../../../../types';
 export function inputGroupButtonOutlined(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    backgroundColor: theme('colors.neutral.0'),
-    borderColor: `var(--input-color-50,${theme('colors.neutral.90')})`,
-    color: `var(--input-color-50,${theme('colors.neutral.90')})`,
+    backgroundColor: theme('x.colors.neutral.0'),
+    borderColor: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
+    color: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
 
     '&:hover,&:focus,&:active': {
-      backgroundColor: `var(--input-color-50,${theme('colors.neutral.90')})`,
-      borderColor: `var(--input-color-50,${theme('colors.neutral.90')})`,
-      color: `theme('colors.neutral.0')`
+      backgroundColor: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
+      borderColor: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
+      color: `theme('x.colors.neutral.0')`
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-primary.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-primary.ts
index e60f1203a1..cf0c2b5d5d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-primary.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-primary.ts
@@ -11,14 +11,14 @@ export function inputGroupButtonPrimary(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     ...inputGroupButton(helpers),
-    fontSize: `var(--input-group-button-primary-font-size,${theme('fontSize.sm')})`,
-    backgroundColor: `var(--input-color-50,${theme('colors.neutral.90')})`,
-    borderColor: `var(--input-color-50,${theme('colors.neutral.90')})`,
-    color: theme('colors.neutral.0'),
+    fontSize: `var(--input-group-button-primary-font-size,${theme('x.fontSize.sm')})`,
+    backgroundColor: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
+    borderColor: `var(--input-color-50,${theme('x.colors.neutral.90')})`,
+    color: theme('x.colors.neutral.0'),
 
     '&:hover,&:focus,&:active': {
-      backgroundColor: `var(--input-color-75,${theme('colors.neutral.75')})`,
-      borderColor: `var(--input-color-75,${theme('colors.neutral.75')})`
+      backgroundColor: `var(--input-color-75,${theme('x.colors.neutral.75')})`,
+      borderColor: `var(--input-color-75,${theme('x.colors.neutral.75')})`
     },
 
     // to remove the "padding" when the button is at the start or at the end.
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-rectangle.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-rectangle.ts
index 780801ebc5..06025b2d53 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-rectangle.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button-rectangle.ts
@@ -8,8 +8,8 @@ import { TailwindHelpers } from '../../../../types';
  */
 export function inputGroupButtonRectangle({ theme }: TailwindHelpers) {
   return {
-    paddingInlineStart: `var(--input-group-button-rectangle-padding,${theme('spacing.16')})`,
-    paddingInlineEnd: `var(--input-group-button-rectangle-padding,${theme('spacing.16')})`,
+    paddingInlineStart: `var(--input-group-button-rectangle-padding,${theme('x.spacing.16')})`,
+    paddingInlineEnd: `var(--input-group-button-rectangle-padding,${theme('x.spacing.16')})`,
     aspectRatio: 'auto'
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button.ts
index 49a6f06ec7..cd2eddea98 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/buttons/button.ts
@@ -17,23 +17,23 @@ export function inputGroupButton({ theme }: TailwindHelpers) {
     minHeight: 0,
     aspectRatio: '1',
     padding: '0',
-    fontSize: `var(--input-group-button-font-size,${theme('fontSize.sm')})`,
-    fontWeight: theme('fontWeight.regular'),
-    borderWidth: theme('borderWidth.1'),
+    fontSize: `var(--input-group-button-font-size,${theme('x.fontSize.sm')})`,
+    fontWeight: theme('x.fontWeight.regular'),
+    borderWidth: theme('x.borderWidth.1'),
     backgroundColor: 'transparent',
     borderColor: 'transparent',
-    color: theme('colors.neutral.50'),
+    color: theme('x.colors.neutral.50'),
 
     '&:hover,&:focus,&:active': {
-      color: theme('colors.neutral.75'),
+      color: theme('x.colors.neutral.75'),
       borderColor: 'transparent',
-      backgroundColor: theme('colors.neutral.10')
+      backgroundColor: theme('x.colors.neutral.10')
     },
 
     '&:disabled': {
-      color: theme('colors.neutral.25'),
-      borderColor: theme('colors.neutral.10'),
-      backgroundColor: theme('colors.neutral.10')
+      color: theme('x.colors.neutral.25'),
+      borderColor: theme('x.colors.neutral.10'),
+      backgroundColor: theme('x.colors.neutral.10')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts
index 3d9b6401c2..b2af6fefbd 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/default.ts
@@ -17,18 +17,18 @@ export function inputGroupDefault(helpers: TailwindHelpers) {
     alignContent: 'center',
     paddingInlineStart: 0,
     paddingInlineEnd: 0,
-    gap: theme('spacing.8'),
+    gap: theme('x.spacing.8'),
     overflow: 'hidden', // necessary to not show the buttons border over the input-group border.
 
     // padding is simulated with margin to remove it on button primary
     '> :first-child': {
-      marginInlineStart: theme('spacing.16')
+      marginInlineStart: theme('x.spacing.16')
     },
     '> :last-child': {
-      marginInlineEnd: theme('spacing.16')
+      marginInlineEnd: theme('x.spacing.16')
     },
 
-    '.input, input': {
+    '.x-input, input': {
       flex: '1 1 auto',
       minWidth: '0',
       padding: '0',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
index b35ff558fe..6792a2fb7d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
@@ -15,7 +15,7 @@ import { inputGroupSizes } from './sizes';
  */
 export function inputGroup(helpers: TailwindHelpers) {
   return {
-    '.input-group': deepMerge(
+    '.x-input-group': deepMerge(
       inputGroupDefault(helpers),
       rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/line.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/line.ts
index 9bbd882f76..67994778a1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/line.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/line.ts
@@ -13,12 +13,12 @@ export function inputGroupLine(helpers: TailwindHelpers) {
   return deepMerge(inputLine(helpers), {
     line: {
       // fixed size buttons in this line variant
-      '--input-group-button-height': theme('spacing.32'),
+      '--input-group-button-height': theme('x.spacing.32'),
 
       // To avoid the buttons to be "touching" the bottom line in sm size variant.
       '&.input-group-sm': {
-        '--input-group-button-height': theme('spacing.28'),
-        paddingBottom: theme('spacing.4')
+        '--input-group-button-height': theme('x.spacing.28'),
+        paddingBottom: theme('x.spacing.4')
       },
 
       // Default input-group is "hiding" the border, so here is restored.
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/sizes.ts
index 02685a2dab..08158bb02c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/sizes.ts
@@ -12,19 +12,19 @@ export function inputGroupSizes(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return deepMerge(inputSizes(helpers), {
     sm: {
-      '--input-group-button-font-size': theme('fontSize.xs'),
-      '--input-group-button-primary-font-size': theme('fontSize.sm'),
-      '--input-group-button-rectangle-padding': theme('spacing.12')
+      '--input-group-button-font-size': theme('x.fontSize.xs'),
+      '--input-group-button-primary-font-size': theme('x.fontSize.sm'),
+      '--input-group-button-rectangle-padding': theme('x.spacing.12')
     },
     md: {
-      '--input-group-button-font-size': theme('fontSize.sm'),
-      '--input-group-button-primary-font-size': theme('fontSize.sm'),
-      '--input-group-button-rectangle-padding': theme('spacing.16')
+      '--input-group-button-font-size': theme('x.fontSize.sm'),
+      '--input-group-button-primary-font-size': theme('x.fontSize.sm'),
+      '--input-group-button-rectangle-padding': theme('x.spacing.16')
     },
     lg: {
-      '--input-group-button-font-size': theme('fontSize.sm'),
-      '--input-group-button-primary-font-size': theme('fontSize.md'),
-      '--input-group-button-rectangle-padding': theme('spacing.20')
+      '--input-group-button-font-size': theme('x.fontSize.sm'),
+      '--input-group-button-primary-font-size': theme('x.fontSize.md'),
+      '--input-group-button-rectangle-padding': theme('x.spacing.20')
     }
   });
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/default.ts
index 477b2eefa8..fd5b1d38e0 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/default.ts
@@ -12,39 +12,39 @@ export function inputDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return deepMerge(
     {
-      paddingInlineStart: theme('spacing.16'),
-      paddingInlineEnd: theme('spacing.16'),
-      borderWidth: theme('borderWidth.1'),
-      fontWeight: theme('fontWeight.regular'),
+      paddingInlineStart: theme('x.x.spacing.16'),
+      paddingInlineEnd: theme('x.x.spacing.16'),
+      borderWidth: theme('x.borderWidth.1'),
+      fontWeight: theme('x.fontWeight.regular'),
       textOverflow: 'ellipsis',
-      fontFamily: theme('fontFamily.main'),
-      borderColor: theme('colors.neutral.90'),
-      backgroundColor: theme('colors.neutral.0'),
-      color: theme('colors.neutral.90'),
+      fontFamily: theme('x.fontFamily.main'),
+      borderColor: theme('x.colors.neutral.90'),
+      backgroundColor: theme('x.colors.neutral.0'),
+      color: theme('x.colors.neutral.90'),
       cursor: 'text',
 
       '&:hover': {
-        borderColor: `var(--input-color-75,${theme('colors.neutral.50')})`
+        borderColor: `var(--input-color-75,${theme('x.colors.neutral.50')})`
       },
 
       '&:focus,&:focus-within': {
-        borderColor: `var(--input-color-75,${theme('colors.neutral.50')})`,
-        outlineColor: `var(--input-color-25,${theme('colors.neutral.25')})`,
-        outlineWidth: theme('borderWidth.2'),
+        borderColor: `var(--input-color-75,${theme('x.colors.neutral.50')})`,
+        outlineColor: `var(--input-color-25,${theme('x.colors.neutral.25')})`,
+        outlineWidth: theme('x.borderWidth.2'),
         outlineStyle: 'solid'
       },
 
       '&:disabled,&[disabled]': {
         cursor: 'not-allowed',
-        borderColor: theme('colors.neutral.25'),
-        backgroundColor: theme('colors.neutral.10'),
-        color: theme('colors.neutral.50')
+        borderColor: theme('x.colors.neutral.25'),
+        backgroundColor: theme('x.colors.neutral.10'),
+        color: theme('x.colors.neutral.50')
       },
 
       '&::placeholder,& .input-placeholder': {
-        color: theme('colors.neutral.50'),
-        fontFamily: theme('fontFamily.main'),
-        fontWeight: theme('fontWeight.regular')
+        color: theme('x.colors.neutral.50'),
+        fontFamily: theme('x.fontFamily.main'),
+        fontWeight: theme('x.fontWeight.regular')
       }
     },
     inputSizes(helpers).md
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
index 0208ca2396..b3406ef763 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
@@ -14,7 +14,7 @@ import { inputLine } from './line';
  */
 export function input(helpers: TailwindHelpers) {
   return {
-    '.input': deepMerge(
+    '.x-input': deepMerge(
       inputDefault(helpers),
       rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/line.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/line.ts
index 30be3ccde6..1c3b0c48de 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/line.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/line.ts
@@ -10,7 +10,7 @@ export function inputLine(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     line: {
-      '--border-color': `var(--input-color-50,${theme('colors.neutral.90')})`,
+      '--border-color': `var(--input-color-50,${theme('x.x.colors.neutral.90')})`,
       borderWidth: 0,
       backgroundImage: 'linear-gradient(var(--border-color) ,var(--border-color))',
       backgroundPosition: 'bottom',
@@ -21,18 +21,18 @@ export function inputLine(helpers: TailwindHelpers) {
       },
       '&:focus, &:focus-within': {
         backgroundSize: '100% 2px',
-        color: theme('colors.neutral.90'),
+        color: theme('x.colors.neutral.90'),
         // The outline can not be only bottom like a border. To simulate it on the `line`
         // variant, we use the box-shadow trick. The -0.5px value is to avoid horizontal shadow
         // in some  pixel interpolation situation with some resolutions.
         outline: 'none',
-        boxShadow: `0 2px 0 -0.5px var(--input-color-25,${theme('colors.neutral.25')})`
+        boxShadow: `0 2px 0 -0.5px var(--input-color-25,${theme('x.colors.neutral.25')})`
       },
       // the `&[disabled]` selector is for cases where the element has not a real `disabled` state
       // like in the `input-group`.
       '&:disabled,&[disabled]': {
-        backgroundColor: theme('colors.neutral.10'),
-        '--border-color': theme('colors.neutral.25')
+        backgroundColor: theme('x.colors.neutral.10'),
+        '--border-color': theme('x.colors.neutral.25')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/sizes.ts
index a1acc388ee..537cb82bfb 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/sizes.ts
@@ -9,24 +9,24 @@ import { TailwindHelpers } from '../../../types';
 export function inputSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      height: theme('spacing.32'),
-      fontSize: theme('fontSize.sm'),
+      height: theme('x.spacing.32'),
+      fontSize: theme('x.fontSize.sm'),
       '&::placeholder': {
-        fontSize: theme('fontSize.sm')
+        fontSize: theme('x.fontSize.sm')
       }
     },
     md: {
-      height: theme('spacing.40'),
-      fontSize: theme('fontSize.md'),
+      height: theme('x.spacing.40'),
+      fontSize: theme('x.fontSize.md'),
       '&::placeholder': {
-        fontSize: theme('fontSize.md')
+        fontSize: theme('x.fontSize.md')
       }
     },
     lg: {
-      height: theme('spacing.48'),
-      fontSize: theme('fontSize.md'),
+      height: theme('x.spacing.48'),
+      fontSize: theme('x.fontSize.md'),
       '&::placeholder': {
-        fontSize: theme('fontSize.md')
+        fontSize: theme('x.fontSize.md')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
index 454247957c..91cba03d7d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
@@ -15,7 +15,7 @@ import { utils } from './utils';
  */
 export function layout(helpers: TailwindHelpers) {
   return {
-    '.layout': rename(
+    '.x-layout': rename(
       {
         ...container(helpers),
         ...maxWidth(helpers),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts
index 0459771746..eef72d2be7 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/max-width.ts
@@ -11,7 +11,7 @@ export function maxWidth(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     'max-width': rename(
-      map(theme('layoutMaxWidth'), (maxWidthName, maxWidthValue) => ({
+      map(theme('x.layoutMaxWidth'), (maxWidthName, maxWidthValue) => ({
         '--x-layout-max-width': maxWidthValue
       })),
       { prefix: '&-' }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts
index 65c9c130e8..5c569a99a3 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/min-margin.ts
@@ -11,7 +11,7 @@ export function minMargin(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     'min-margin': rename(
-      map(theme('spacing'), (spacingName, spacingValue) => ({
+      map(theme('x.spacing'), (spacingName, spacingValue) => ({
         '--x-layout-min-margin': spacingValue
       })),
       { prefix: '&-' }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts
index 2eb26f0f9f..4106628391 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/utils.ts
@@ -9,7 +9,7 @@ import { TailwindHelpers } from '../../../types';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function utils(helpers: TailwindHelpers) {
   return {
-    '.layout-stack': {
+    '.x-layout-stack': {
       display: 'grid',
       gridTemplateRows: '1fr',
       gridTemplateColumns: '1fr',
@@ -26,45 +26,45 @@ export function utils(helpers: TailwindHelpers) {
       }
     },
 
-    '.layout-expand': {
+    '.x-layout-expand': {
       height: '100%',
       flex: '1 1 0',
       minHeight: '0'
     },
 
-    '.layout-on-margin-left': {
+    '.x-layout-on-margin-left': {
       gridColumn: '1 / 2'
     },
-    '.layout-on-margin-right': {
+    '.x-layout-on-margin-right': {
       gridColumn: '-2 / -1'
     },
 
-    '.layout-overlap': {
+    '.x-layout-overlap': {
       height: '0',
       overflow: 'visible',
       alignContent: 'flex-end',
       zIndex: '1'
     },
-    '.layout-overlap-from-top': {
+    '.x-layout-overlap-from-top': {
       height: '0',
       overflow: 'visible',
       zIndex: '1',
       alignContent: 'flex-start'
     },
 
-    '.layout-no-margin-left': {
+    '.x-layout-no-margin-left': {
       '--x-margin-left': '0px'
     },
-    '.layout-no-margin-right': {
+    '.x-layout-no-margin-right': {
       '--x-margin-right': '0px'
     },
-    '.layout-no-margin': {
+    '.x-layout-no-margin': {
       '--x-margin-left': '0px',
       '--x-margin-right': '0px'
     },
 
     '@media (hover: hover) and (pointer: fine)': {
-      '.scroll > .layout-item:not(.layout-no-margin-right)': {
+      '.x-scroll > .x-layout-item:not(.x-layout-no-margin-right)': {
         '--x-layout-scroll-width': '17px'
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/default.ts
index 5ca63e62ef..2987a09b12 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/default.ts
@@ -10,10 +10,10 @@ export function pictureDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     display: 'block',
-    aspectRatio: theme('aspectRatio.default'),
+    aspectRatio: theme('x.aspectRatio.default'),
     overflow: 'hidden',
     '&-image': {
-      aspectRatio: theme('aspectRatio.default'),
+      aspectRatio: theme('x.aspectRatio.default'),
       objectFit: 'contain',
       width: '100%',
       height: '100%'
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
index 3820b9ff64..3a030e0d4f 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
@@ -12,7 +12,7 @@ import { zoom } from './zoom';
  */
 export function picture(helpers: TailwindHelpers) {
   return {
-    '.picture': {
+    '.x-picture': {
       ...pictureDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
index fea246bb97..753a207377 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
@@ -13,9 +13,9 @@ export function overlay(helpers: TailwindHelpers) {
       '&:hover': {
         mixBlendMode: 'multiply'
       },
-      '.picture-image': {
+      '.x-picture-image': {
         '&:hover': {
-          maskImage: `linear-gradient(to top, transparent, 20%, ${theme('colors.neutral.100')})`
+          maskImage: `linear-gradient(to top, transparent, 20%, ${theme('x.colors.neutral.100')})`
         }
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts
index 8127361813..43af4bda9c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/zoom.ts
@@ -6,7 +6,7 @@
 export function zoom() {
   return {
     zoom: {
-      '.picture-image': {
+      '.x-picture-image': {
         transition: 'transform 0.3s ease-out',
         '&:hover': {
           transform: 'scale(1.1)'
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts
index 4416e3fdd9..0a7a34521d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/default.ts
@@ -11,14 +11,14 @@ export function progressBarDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
 
   return {
-    borderRadius: theme('borderRadius.sm'),
+    borderRadius: theme('x.borderRadius.sm'),
     display: 'inline-block',
-    backgroundColor: theme('colors.neutral.25'),
+    backgroundColor: theme('x.colors.neutral.25'),
     overflow: 'hidden',
 
     '& > &-fill': {
       height: '100%',
-      backgroundColor: `var(--progress-bar-color-50, ${theme('colors.neutral.90')})`
+      backgroundColor: `var(--progress-bar-color-50, ${theme('x.colors.neutral.90')})`
     },
 
     ...progressBarSizes(helpers).md
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
index 8846f1aaab..611290fb08 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
@@ -13,7 +13,7 @@ import { progressBarColors } from './colors';
  */
 export function progressBar(helpers: TailwindHelpers) {
   return {
-    '.progress-bar': deepMerge(
+    '.x-progress-bar': deepMerge(
       progressBarDefault(helpers),
       rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/sizes.ts
index cadf240715..1f7e98d0f1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/sizes.ts
@@ -9,10 +9,10 @@ import { TailwindHelpers } from '../../../types';
 export function progressBarSizes({ theme }: TailwindHelpers) {
   return {
     md: {
-      height: theme('spacing.4')
+      height: theme('x.spacing.4')
     },
     lg: {
-      height: theme('spacing.8')
+      height: theme('x.spacing.8')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/default.ts
index c814da5e4b..217cb867ad 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/default.ts
@@ -12,8 +12,8 @@ export function scrollDefault(helpers: TailwindHelpers) {
     minHeight: 0,
 
     '@media (hover: hover) and (pointer: fine)': {
-      '--x-color-thumb-scroll-bar': theme('colors.neutral.25'),
-      '--x-color-thumb-scroll-bar-hover': theme('colors.neutral.50'),
+      '--x-color-thumb-scroll-bar': theme('x.colors.neutral.25'),
+      '--x-color-thumb-scroll-bar-hover': theme('x.colors.neutral.50'),
       '--x-color-background-scroll-bar': 'transparent',
 
       // Styles for Firefox
@@ -27,8 +27,8 @@ export function scrollDefault(helpers: TailwindHelpers) {
         backgroundClip: 'content-box',
         backgroundColor: 'var(--x-color-thumb-scroll-bar)',
         borderColor: 'transparent',
-        borderWidth: theme('spacing.4'),
-        borderRadius: theme('spacing.24'),
+        borderWidth: theme('x.spacing.4'),
+        borderRadius: theme('x.spacing.24'),
         borderStyle: 'solid'
       },
       '&::-webkit-scrollbar-track': {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
index 744ccfc6fe..a3b04d41ae 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
@@ -1,5 +1,6 @@
 import { TailwindHelpers } from '../../../types';
 import { scrollDefault } from './default';
+
 /**
  * Returns the component `scroll` CSS.
  *
@@ -8,7 +9,7 @@ import { scrollDefault } from './default';
  */
 export function scroll(helpers: TailwindHelpers) {
   return {
-    '.scroll': {
+    '.x-scroll': {
       ...scrollDefault(helpers)
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts
index 53fe4ca2a3..d468ad12d6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/hover.ts
@@ -5,33 +5,33 @@
  */
 export function slidingPanelButtonsHover() {
   return {
-    '&.sliding-panel-at-start': {
-      '.sliding-panel-button-left': {
+    '&.x-sliding-panel-at-start': {
+      '.x-sliding-panel-button-left': {
         opacity: 0,
         pointerEvents: 'none'
       }
     },
-    '&.sliding-panel-at-end': {
-      '.sliding-panel-button-right': {
+    '&.x-sliding-panel-at-end': {
+      '.x-sliding-panel-button-right': {
         opacity: 0,
         pointerEvents: 'none'
       }
     },
-    '&.sliding-panel-show-buttons-on-hover': {
-      '.sliding-panel-button-left': {
+    '&.x-sliding-panel-show-buttons-on-hover': {
+      '.x-sliding-panel-button-left': {
         opacity: 0
       },
-      '.sliding-panel-button-right': {
+      '.x-sliding-panel-button-right': {
         opacity: 0
       },
-      '&:not(.sliding-panel-at-start):hover': {
-        '.sliding-panel-button-left': {
+      '&:not(.x-sliding-panel-at-start):hover': {
+        '.x-sliding-panel-button-left': {
           opacity: 1,
           pointerEvents: 'all'
         }
       },
-      '&:not(.sliding-panel-at-end):hover': {
-        '.sliding-panel-button-right': {
+      '&:not(.x-sliding-panel-at-end):hover': {
+        '.x-sliding-panel-button-right': {
           opacity: 1,
           pointerEvents: 'all'
         }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts
index 5e13820198..7fdb682f67 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/index.ts
@@ -9,7 +9,7 @@ import { slidingPanelButtonsHover } from './hover';
  */
 export function slidingPanelButtons() {
   return {
-    '.sliding-panel-button': {
+    '.x-sliding-panel-button': {
       '&-left': {
         ...slidingPanelButtonsDefault(),
         left: 0
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts
index 0cb4accc61..66f3f31391 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/buttons/positions.ts
@@ -5,19 +5,19 @@
  */
 export function slidingPanelButtonsPositions() {
   return {
-    '&.sliding-panel-buttons-center': {
-      '.sliding-panel-button-left': {
+    '&.x-sliding-panel-buttons-center': {
+      '.x-sliding-panel-button-left': {
         transform: 'translateX(-50%)'
       },
-      '.sliding-panel-button-right': {
+      '.x-sliding-panel-button-right': {
         transform: 'translateX(50%)'
       }
     },
-    '&.sliding-panel-buttons-outside': {
-      '.sliding-panel-button-left': {
+    '&.x-sliding-panel-buttons-outside': {
+      '.x-sliding-panel-button-left': {
         transform: 'translateX(-100%)'
       },
-      '.sliding-panel-button-right': {
+      '.x-sliding-panel-button-right': {
         transform: 'translateX(100%)'
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts
index 862e670362..29e059e4e4 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/index.ts
@@ -13,7 +13,7 @@ export function slidingPanelFade(helpers: TailwindHelpers) {
   const startSizes = fadeStartSizes(helpers);
   const endSizes = fadeEndSizes(helpers);
   return {
-    '.sliding-panel-fade': {
+    '.x-sliding-panel-fade': {
       ...defaultSizes.md,
       ...rename(
         {
@@ -24,8 +24,8 @@ export function slidingPanelFade(helpers: TailwindHelpers) {
         }
       )
     },
-    '&.sliding-panel-at-start': {
-      '.sliding-panel-fade': {
+    '&.x-sliding-panel-at-start': {
+      '.x-sliding-panel-fade': {
         ...startSizes.md,
         ...rename(
           {
@@ -37,8 +37,8 @@ export function slidingPanelFade(helpers: TailwindHelpers) {
         )
       }
     },
-    '&.sliding-panel-at-end': {
-      '.sliding-panel-fade': {
+    '&.x-sliding-panel-at-end': {
+      '.x-sliding-panel-fade': {
         ...endSizes.md,
         ...rename(
           {
@@ -50,8 +50,8 @@ export function slidingPanelFade(helpers: TailwindHelpers) {
         )
       }
     },
-    '&.sliding-panel-at-start.sliding-panel-at-end': {
-      '.sliding-panel-fade': {
+    '&.x-sliding-panel-at-start.x-sliding-panel-at-end': {
+      '.x-sliding-panel-fade': {
         mask: 'none'
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/sizes.ts
index a09cc26992..1dde7123ed 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/fade/sizes.ts
@@ -10,27 +10,27 @@ export function fadeDefaultSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
       mask: `linear-gradient(to right,
-            transparent calc(0.43 * ${theme('spacing.40')}),
-            rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.40')}),
-            black ${theme('spacing.40')},
-            rgba(0, 0, 0, 0.8) calc(100% - 0.67 * ${theme('spacing.40')}),
-            transparent calc(100% - 0.43 * ${theme('spacing.40')}))`
+            transparent calc(0.43 * ${theme('x.spacing.40')}),
+            rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.40')}),
+            black ${theme('x.spacing.40')},
+            rgba(0, 0, 0, 0.8) calc(100% - 0.67 * ${theme('x.spacing.40')}),
+            transparent calc(100% - 0.43 * ${theme('x.spacing.40')}))`
     },
     md: {
       mask: `linear-gradient(to right,
-            transparent calc(0.43 * ${theme('spacing.80')}),
-            rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.80')}),
-            black ${theme('spacing.80')},
-            rgba(0, 0, 0, 0.8) calc(100% - 0.67 * ${theme('spacing.80')}),
-            transparent calc(100% - 0.43 * ${theme('spacing.80')}))`
+            transparent calc(0.43 * ${theme('x.spacing.80')}),
+            rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.80')}),
+            black ${theme('x.spacing.80')},
+            rgba(0, 0, 0, 0.8) calc(100% - 0.67 * ${theme('x.spacing.80')}),
+            transparent calc(100% - 0.43 * ${theme('x.spacing.80')}))`
     },
     lg: {
       mask: `linear-gradient(to right,
-            transparent calc(0.43 * ${theme('spacing.160')}),
-            rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.160')}),
-            black ${theme('spacing.160')},
-            rgba(0, 0, 0, 0.8) calc(100% - 0.67 * ${theme('spacing.160')}),
-            transparent calc(100% - 0.43 * ${theme('spacing.160')}))`
+            transparent calc(0.43 * ${theme('x.spacing.160')}),
+            rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.160')}),
+            black ${theme('x.spacing.160')},
+            rgba(0, 0, 0, 0.8) calc(100% - 0.67 * ${theme('x.spacing.160')}),
+            transparent calc(100% - 0.43 * ${theme('x.spacing.160')}))`
     }
   };
 }
@@ -45,21 +45,21 @@ export function fadeStartSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
       mask: `linear-gradient(to left,
-              transparent calc(0.43 * ${theme('spacing.40')}),
-              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.40')}),
-              black ${theme('spacing.40')});`
+              transparent calc(0.43 * ${theme('x.spacing.40')}),
+              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.40')}),
+              black ${theme('x.spacing.40')});`
     },
     md: {
       mask: `linear-gradient(to left,
-              transparent calc(0.43 * ${theme('spacing.80')}),
-              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.80')}),
-              black ${theme('spacing.80')});`
+              transparent calc(0.43 * ${theme('x.spacing.80')}),
+              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.80')}),
+              black ${theme('x.spacing.80')});`
     },
     lg: {
       mask: `linear-gradient(to left,
-              transparent calc(0.43 * ${theme('spacing.160')}),
-              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.160')}),
-              black ${theme('spacing.160')});`
+              transparent calc(0.43 * ${theme('x.spacing.160')}),
+              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.160')}),
+              black ${theme('x.spacing.160')});`
     }
   };
 }
@@ -74,21 +74,21 @@ export function fadeEndSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
       mask: `linear-gradient(to right,
-              transparent calc(0.43 * ${theme('spacing.40')}),
-              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.40')}),
-              black ${theme('spacing.40')});`
+              transparent calc(0.43 * ${theme('x.spacing.40')}),
+              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.40')}),
+              black ${theme('x.spacing.40')});`
     },
     md: {
       mask: `linear-gradient(to right,
-              transparent calc(0.43 * ${theme('spacing.80')}),
-              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.80')}),
-              black ${theme('spacing.80')});`
+              transparent calc(0.43 * ${theme('x.spacing.80')}),
+              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.80')}),
+              black ${theme('x.spacing.80')});`
     },
     lg: {
       mask: `linear-gradient(to right,
-              transparent calc(0.43 * ${theme('spacing.160')}),
-              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('spacing.160')}),
-              black ${theme('spacing.160')});`
+              transparent calc(0.43 * ${theme('x.spacing.160')}),
+              rgba(0, 0, 0, 0.8) calc(0.67 * ${theme('x.spacing.160')}),
+              black ${theme('x.spacing.160')});`
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
index 1625133523..e78913e993 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
@@ -11,7 +11,7 @@ import { slidingPanelFade } from './fade';
  */
 export function slidingPanel(helpers: TailwindHelpers) {
   return {
-    '.sliding-panel': {
+    '.x-sliding-panel': {
       ...deepMerge(slidingPanelDefault(), slidingPanelFade(helpers))
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/ghost.ts
index bd5ad8f001..e6edae9fac 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/ghost.ts
@@ -11,7 +11,7 @@ export function suggestionGroupButtonGhost(helpers: TailwindHelpers) {
   return {
     ghost: {
       '&:hover': {
-        backgroundColor: theme('colors.neutral.25'),
+        backgroundColor: theme('x.colors.neutral.25'),
         transform: 'none'
       }
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
index 57b8bff3d5..1dc7ad3411 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
@@ -14,7 +14,7 @@ import { suggestionGroupButtonLighter } from './lighter';
  */
 export function suggestionGroupButton(helpers: TailwindHelpers) {
   return {
-    '.suggestion-group-button': {
+    '.x-suggestion-group-button': {
       ...suggestionGroupButtonDefault(),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts
index 1b2661839d..7294f3984d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/lighter-colors.ts
@@ -12,12 +12,12 @@ export function suggestionGroupLighterColors(helpers: TailwindHelpers) {
     mapColors(
       color => ({
         '--suggestion-group-button-color-50': color['50'],
-        '.suggestion-group-button-lighter:hover': {
+        '.x-suggestion-group-button-lighter:hover': {
           color: 'var(--suggestion-group-button-color-50)'
         }
       }),
       helpers
     ),
-    { prefix: '.suggestion-group-' }
+    { prefix: '.x-suggestion-group-' }
   );
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/rectangle.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/rectangle.ts
index 9d0910f631..615553384c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/rectangle.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/rectangle.ts
@@ -10,8 +10,8 @@ export function suggestionGroupButtonRectangle(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     rectangle: {
-      paddingInlineStart: theme('spacing.8'),
-      paddingInlineEnd: theme('spacing.8'),
+      paddingInlineStart: theme('x.spacing.8'),
+      paddingInlineEnd: theme('x.spacing.8'),
       aspectRatio: 'unset'
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts
index 53358a2069..9b54229752 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/default.ts
@@ -11,11 +11,11 @@ import { suggestionGroupSizes } from './sizes';
 export function suggestionGroupDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    gap: theme('spacing.16'),
+    gap: theme('x.spacing.16'),
     ...suggestionGroupSizes(helpers).md,
 
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
 
     display: 'grid',
     gridAutoFlow: 'column',
@@ -28,14 +28,14 @@ export function suggestionGroupDefault(helpers: TailwindHelpers) {
     paddingInlineStart: 0,
     paddingInlineEnd: 0,
 
-    color: theme('colors.neutral.90'),
+    color: theme('x.colors.neutral.90'),
     ...alignIconWithBaseline(),
 
     '&:hover': {
       textDecoration: 'underline'
     },
 
-    '.suggestion': {
+    '.x-suggestion': {
       color: 'currentColor',
       minHeight: 'inherit',
       fontSize: 'inherit',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/ghost.ts
index 758db72b99..92fa9b0e77 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/ghost.ts
@@ -11,22 +11,22 @@ export function suggestionGroupGhost(helpers: TailwindHelpers) {
   return {
     ghost: {
       backgroundColor: 'transparent',
-      gap: theme('spacing.4'),
+      gap: theme('x.spacing.4'),
       '&:hover': {
-        backgroundColor: theme('colors.neutral.10'),
+        backgroundColor: theme('x.colors.neutral.10'),
         textDecoration: 'none'
       },
       '> *:first-child:not(.suggestion-group-button)': {
-        marginInlineStart: theme('spacing.8')
+        marginInlineStart: theme('x.spacing.8')
       },
       '> *:last-child:not(.suggestion-group-button)': {
-        marginInlineEnd: theme('spacing.8')
+        marginInlineEnd: theme('x.spacing.8')
       },
       '&.suggestion-group-lg > *:first-child:not(.suggestion-group-button)': {
-        marginInlineStart: theme('spacing.12')
+        marginInlineStart: theme('x.spacing.12')
       },
       '&.suggestion-group-lg > *:last-child:not(.suggestion-group-button)': {
-        marginInlineEnd: theme('spacing.12')
+        marginInlineEnd: theme('x.spacing.12')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
index 475585fbe5..73aafa4250 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
@@ -14,7 +14,7 @@ import { suggestionGroupGhost } from './ghost';
  */
 export function suggestionGroup(helpers: TailwindHelpers) {
   return {
-    '.suggestion-group': {
+    '.x-suggestion-group': {
       ...suggestionGroupDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/outlined.ts
index a5bafdaf3c..31c14bfe6e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/outlined.ts
@@ -10,26 +10,26 @@ export function suggestionGroupOutlined(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     outlined: {
-      backgroundColor: theme('colors.neutral.0'),
-      borderWidth: theme('borderWidth.1'),
+      backgroundColor: theme('x.colors.neutral.0'),
+      borderWidth: theme('x.borderWidth.1'),
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      borderColor: `var(--suggestion-group-color-75, ${theme('colors.neutral.90')})`,
-      gap: theme('spacing.4'),
+      borderColor: `var(--suggestion-group-color-75, ${theme('x.colors.neutral.90')})`,
+      gap: theme('x.spacing.4'),
       '&:hover': {
-        backgroundColor: theme('colors.neutral.10'),
+        backgroundColor: theme('x.colors.neutral.10'),
         textDecoration: 'none'
       },
       '> *:first-child:not(.suggestion-group-button)': {
-        marginInlineStart: theme('spacing.8')
+        marginInlineStart: theme('x.spacing.8')
       },
       '> *:last-child:not(.suggestion-group-button)': {
-        marginInlineEnd: theme('spacing.8')
+        marginInlineEnd: theme('x.spacing.8')
       },
       '&.suggestion-group-lg > *:first-child:not(.suggestion-group-button)': {
-        marginInlineStart: theme('spacing.12')
+        marginInlineStart: theme('x.spacing.12')
       },
       '&.suggestion-group-lg > *:last-child:not(.suggestion-group-button)': {
-        marginInlineEnd: theme('spacing.12')
+        marginInlineEnd: theme('x.spacing.12')
       }
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/sizes.ts
index fc065c8f33..e04df6f55b 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/sizes.ts
@@ -10,17 +10,17 @@ export function suggestionGroupSizes(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     sm: {
-      minHeight: theme('spacing.24'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.24'),
+      fontSize: theme('x.fontSize.sm')
     },
     md: {
-      minHeight: theme('spacing.32'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.32'),
+      fontSize: theme('x.fontSize.sm')
     },
     lg: {
-      minHeight: theme('spacing.48'),
-      fontSize: theme('fontSize.md'),
-      gap: theme('spacing.24')
+      minHeight: theme('x.spacing.48'),
+      fontSize: theme('x.fontSize.md'),
+      gap: theme('x.spacing.24')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/default.ts
index 11ddec56f7..30e6b05fb4 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/default.ts
@@ -11,8 +11,8 @@ import { suggestionSizes } from './sizes';
 export function suggestionDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
 
     display: 'grid',
     gridAutoFlow: 'column',
@@ -25,7 +25,7 @@ export function suggestionDefault(helpers: TailwindHelpers) {
 
     ...suggestionSizes(helpers).md,
 
-    color: theme('colors.neutral.90'),
+    color: theme('x.colors.neutral.90'),
 
     '&:hover': {
       textDecoration: 'underline'
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/ghost.ts
index cfbeda700b..ef25bcf350 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/ghost.ts
@@ -11,9 +11,9 @@ export function suggestionGhost(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     ghost: {
-      backgroundColor: theme('colors.neutral.0'),
-      borderColor: theme('colors.neutral.0'),
-      borderWidth: theme('borderWidth.1'),
+      backgroundColor: theme('x.colors.neutral.0'),
+      borderColor: theme('x.colors.neutral.0'),
+      borderWidth: theme('x.borderWidth.1'),
       ...commonGhostAndTagStyles(helpers)
     }
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
index 1c0459e0b3..863954c36d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
@@ -14,7 +14,7 @@ import { suggestionSizes } from './sizes';
  */
 export function suggestion(helpers: TailwindHelpers) {
   return {
-    '.suggestion': {
+    '.x-suggestion': {
       ...suggestionDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/outlined.ts
index 0e3b6a64f1..51941d40f5 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/outlined.ts
@@ -11,8 +11,8 @@ export function suggestionOutlined(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     outlined: {
-      backgroundColor: theme('colors.neutral.0'),
-      borderWidth: theme('borderWidth.1'),
+      backgroundColor: theme('x.colors.neutral.0'),
+      borderWidth: theme('x.borderWidth.1'),
       borderColor: 'currentColor',
       ...commonGhostAndTagStyles(helpers)
     }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/sizes.ts
index 0b63670c67..ae2ab5c015 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/sizes.ts
@@ -9,19 +9,19 @@ import { TailwindHelpers } from '../../../types';
 export function suggestionSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      minHeight: theme('spacing.24'),
-      gap: theme('spacing.8'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.24'),
+      gap: theme('x.spacing.8'),
+      fontSize: theme('x.fontSize.sm')
     },
     md: {
-      minHeight: theme('spacing.32'),
-      gap: theme('spacing.8'),
-      fontSize: theme('fontSize.sm')
+      minHeight: theme('x.spacing.32'),
+      gap: theme('x.spacing.8'),
+      fontSize: theme('x.fontSize.sm')
     },
     lg: {
-      minHeight: theme('spacing.48'),
-      gap: theme('spacing.24'),
-      fontSize: theme('fontSize.md')
+      minHeight: theme('x.spacing.48'),
+      gap: theme('x.spacing.24'),
+      fontSize: theme('x.fontSize.md')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/common-ghost-and-tag-styles.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/common-ghost-and-tag-styles.ts
index 424a0d7a81..104f7ab722 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/common-ghost-and-tag-styles.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/common-ghost-and-tag-styles.ts
@@ -13,7 +13,7 @@ export function commonGhostAndTagStyles(helpers: TailwindHelpers) {
   const padding = paddingBySize(helpers);
   return {
     '&:hover': {
-      backgroundColor: theme('colors.neutral.10'),
+      backgroundColor: theme('x.colors.neutral.10'),
       textDecoration: 'none'
     },
     ...padding.md,
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/padding-by-size.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/padding-by-size.ts
index 56a7b12eed..024bfb33d8 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/padding-by-size.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/utils/padding-by-size.ts
@@ -10,18 +10,18 @@ export function paddingBySize(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
     sm: {
-      paddingInlineStart: theme('spacing.8'),
-      paddingInlineEnd: theme('spacing.8')
+      paddingInlineStart: theme('x.spacing.8'),
+      paddingInlineEnd: theme('x.spacing.8')
     },
 
     md: {
-      paddingInlineStart: theme('spacing.8'),
-      paddingInlineEnd: theme('spacing.8')
+      paddingInlineStart: theme('x.spacing.8'),
+      paddingInlineEnd: theme('x.spacing.8')
     },
 
     lg: {
-      paddingInlineStart: theme('spacing.12'),
-      paddingInlineEnd: theme('spacing.12')
+      paddingInlineStart: theme('x.spacing.12'),
+      paddingInlineEnd: theme('x.spacing.12')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/colors.ts
index d9e4080fc8..ce5a0b4648 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/colors.ts
@@ -14,13 +14,13 @@ export function tagColors(helpers: TailwindHelpers) {
       '--tag-color-25': color['25'],
       '--tag-color-50': color['50'],
       '--tag-color-75': color['75'],
-      '--tag-color-neutral-75': theme('colors.neutral.75'),
-      borderColor: theme('colors.neutral.25'),
-      color: theme('colors.neutral.75'),
+      '--tag-color-neutral-75': theme('x.colors.neutral.75'),
+      borderColor: theme('x.colors.neutral.25'),
+      color: theme('x.colors.neutral.75'),
 
       '&:hover,&:focus,&:active': {
         borderColor: 'var(--tag-color-50)',
-        color: theme('colors.neutral.90')
+        color: theme('x.colors.neutral.90')
       }
     }),
     helpers
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts
index a1646d6ed0..f1b56a7817 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/default.ts
@@ -14,9 +14,9 @@ export function tagDefault(helpers: TailwindHelpers) {
   const disabledStyles = {
     '&:disabled': {
       cursor: 'not-allowed',
-      borderColor: theme('colors.neutral.25'),
-      borderWidth: theme('spacing.1'),
-      color: theme('colors.neutral.25')
+      borderColor: theme('x.colors.neutral.25'),
+      borderWidth: theme('x.spacing.1'),
+      color: theme('x.colors.neutral.25')
     }
   };
 
@@ -28,24 +28,24 @@ export function tagDefault(helpers: TailwindHelpers) {
     flexFlow: 'row nowrap',
     boxSizing: 'border-box',
 
-    backgroundColor: theme('colors.neutral.0'),
-    borderColor: theme('colors.neutral.25'),
+    backgroundColor: theme('x.colors.neutral.0'),
+    borderColor: theme('x.colors.neutral.25'),
     borderStyle: 'solid',
-    borderWidth: theme('borderWidth.1'),
-    color: theme('colors.neutral.75'),
+    borderWidth: theme('x.borderWidth.1'),
+    color: theme('x.colors.neutral.75'),
 
-    gap: theme('spacing.8'),
+    gap: theme('x.spacing.8'),
 
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
-    letterSpacing: theme('letterSpacing.lg'),
-    lineHeight: theme('lineHeight.sm'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
+    letterSpacing: theme('x.letterSpacing.lg'),
+    lineHeight: theme('x.lineHeight.sm'),
 
     cursor: 'pointer',
 
     '&:hover,&:focus,&:active': {
-      borderColor: theme('colors.neutral.50'),
-      color: theme('colors.neutral.90')
+      borderColor: theme('x.colors.neutral.50'),
+      color: theme('x.colors.neutral.90')
     },
 
     paddingTop: 0,
@@ -54,12 +54,12 @@ export function tagDefault(helpers: TailwindHelpers) {
     ...disabledStyles,
 
     '&.selected': {
-      borderColor: `var(--tag-color-75, ${theme('colors.neutral.90')})`,
-      borderWidth: theme('spacing.2'),
-      color: theme('colors.neutral.90'),
+      borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
+      borderWidth: theme('x.spacing.2'),
+      color: theme('x.colors.neutral.90'),
 
       '&:hover,&:focus,&:active': {
-        borderColor: `var(--tag-color-50, ${theme('colors.neutral.50')})`
+        borderColor: `var(--tag-color-50, ${theme('x.colors.neutral.50')})`
       },
 
       ...disabledStyles
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts
index 9d33a7aad9..b4007bf918 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/ghost.ts
@@ -14,8 +14,8 @@ export function tagGhost(helpers: TailwindHelpers) {
     '&:disabled': {
       backgroundColor: 'transparent',
       borderColor: 'transparent',
-      color: theme('colors.neutral.25'),
-      fontWeight: theme('fontWeight.regular')
+      color: theme('x.colors.neutral.25'),
+      fontWeight: theme('x.fontWeight.regular')
     }
   };
 
@@ -23,23 +23,23 @@ export function tagGhost(helpers: TailwindHelpers) {
     ghost: {
       backgroundColor: 'transparent',
       borderColor: 'transparent',
-      color: `var(--tag-color-75, ${theme('colors.neutral.50')})`,
+      color: `var(--tag-color-75, ${theme('x.colors.neutral.50')})`,
 
       '&:hover,&:focus,&:active': {
-        backgroundColor: theme('colors.neutral.10'),
-        borderColor: theme('colors.neutral.10'),
-        color: `var(--tag-color-75, ${theme('colors.neutral.90')})`
+        backgroundColor: theme('x.colors.neutral.10'),
+        borderColor: theme('x.colors.neutral.10'),
+        color: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`
       },
 
       ...disabledStyles,
 
       '&.selected': {
         borderColor: 'transparent',
-        color: `var(--tag-color-75, ${theme('colors.neutral.90')})`,
-        fontWeight: theme('fontWeight.bold'),
+        color: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
+        fontWeight: theme('x.fontWeight.bold'),
 
         '&:hover,&:focus,&:active': {
-          borderColor: theme('colors.neutral.10')
+          borderColor: theme('x.colors.neutral.10')
         },
 
         ...disabledStyles
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts
index 82d0d6ea02..9c16a2fa27 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/index.ts
@@ -16,7 +16,7 @@ import { tagTight } from './tight';
  */
 export function tag(helpers: TailwindHelpers) {
   return {
-    '.tag': {
+    '.x-tag': {
       ...tagDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts
index 8ba0ebb964..2d0c7a062c 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/outlined.ts
@@ -13,31 +13,31 @@ export function tagOutlined(helpers: TailwindHelpers) {
   const disabledStyles = {
     '&:disabled': {
       backgroundColor: 'transparent',
-      borderColor: theme('colors.neutral.25'),
-      color: theme('colors.neutral.25')
+      borderColor: theme('x.colors.neutral.25'),
+      color: theme('x.colors.neutral.25')
     }
   };
   const hoverStyles = {
     '&:hover,&:focus,&:active': {
-      borderColor: `var(--tag-color-75, ${theme('colors.neutral.75')})`,
-      color: `var(--tag-color-75, ${theme('colors.neutral.75')})`
+      borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.75')})`,
+      color: `var(--tag-color-75, ${theme('x.colors.neutral.75')})`
     }
   };
 
   return {
     outlined: {
       backgroundColor: 'transparent',
-      borderColor: `var(--tag-color-50, ${theme('colors.neutral.50')})`,
-      color: `var(--tag-color-neutral-75, ${theme('colors.neutral.50')})`,
+      borderColor: `var(--tag-color-50, ${theme('x.colors.neutral.50')})`,
+      color: `var(--tag-color-neutral-75, ${theme('x.colors.neutral.50')})`,
 
       ...hoverStyles,
       ...disabledStyles,
 
       '&.selected': {
-        backgroundColor: `var(--tag-color-25, ${theme('colors.neutral.10')})`,
-        borderColor: `var(--tag-color-75, ${theme('colors.neutral.75')})`,
-        borderWidth: theme('spacing.1'),
-        color: theme('colors.neutral.90'),
+        backgroundColor: `var(--tag-color-25, ${theme('x.colors.neutral.10')})`,
+        borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.75')})`,
+        borderWidth: theme('x.spacing.1'),
+        color: theme('x.colors.neutral.90'),
 
         ...hoverStyles,
         ...disabledStyles
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/sizes.ts
index 2fdddf14df..852495f744 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/sizes.ts
@@ -9,22 +9,22 @@ import { TailwindHelpers } from '../../../types';
 export function tagSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      minHeight: theme('spacing.24'),
-      fontSize: theme('fontSize.sm'),
-      paddingInlineStart: theme('spacing.8'),
-      paddingInlineEnd: theme('spacing.8')
+      minHeight: theme('x.spacing.24'),
+      fontSize: theme('x.fontSize.sm'),
+      paddingInlineStart: theme('x.spacing.8'),
+      paddingInlineEnd: theme('x.spacing.8')
     },
     md: {
-      minHeight: theme('spacing.32'),
-      fontSize: theme('fontSize.sm'),
-      paddingInlineStart: theme('spacing.12'),
-      paddingInlineEnd: theme('spacing.12')
+      minHeight: theme('x.spacing.32'),
+      fontSize: theme('x.fontSize.sm'),
+      paddingInlineStart: theme('x.spacing.12'),
+      paddingInlineEnd: theme('x.spacing.12')
     },
     lg: {
-      minHeight: theme('spacing.40'),
-      fontSize: theme('fontSize.md'),
-      paddingInlineStart: theme('spacing.16'),
-      paddingInlineEnd: theme('spacing.16')
+      minHeight: theme('x.spacing.40'),
+      fontSize: theme('x.fontSize.md'),
+      paddingInlineStart: theme('x.spacing.16'),
+      paddingInlineEnd: theme('x.spacing.16')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts
index 2e3371db04..6908a2bd54 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/solid.ts
@@ -12,34 +12,34 @@ export function tagSolid(helpers: TailwindHelpers) {
   // Solid & Solid Selected common styles
   const disabledStyles = {
     '&:disabled': {
-      backgroundColor: theme('colors.neutral.10'),
-      borderColor: theme('colors.neutral.10'),
-      color: theme('colors.neutral.25')
+      backgroundColor: theme('x.colors.neutral.10'),
+      borderColor: theme('x.colors.neutral.10'),
+      color: theme('x.colors.neutral.25')
     }
   };
 
   return {
     solid: {
-      backgroundColor: `var(--tag-color-25, ${theme('colors.neutral.10')})`,
-      borderColor: `var(--tag-color-25, ${theme('colors.neutral.10')})`,
-      color: theme('colors.neutral.75'),
+      backgroundColor: `var(--tag-color-25, ${theme('x.colors.neutral.10')})`,
+      borderColor: `var(--tag-color-25, ${theme('x.colors.neutral.10')})`,
+      color: theme('x.colors.neutral.75'),
 
       '&:hover,&:focus,&:active': {
-        backgroundColor: `var(--tag-color-25, ${theme('colors.neutral.25')})`,
-        borderColor: `var(--tag-color-25, ${theme('colors.neutral.25')})`,
-        color: `var(--tag-color-75, ${theme('colors.neutral.75')})`
+        backgroundColor: `var(--tag-color-25, ${theme('x.colors.neutral.25')})`,
+        borderColor: `var(--tag-color-25, ${theme('x.colors.neutral.25')})`,
+        color: `var(--tag-color-75, ${theme('x.colors.neutral.75')})`
       },
 
       ...disabledStyles,
 
       '&.selected': {
-        backgroundColor: `var(--tag-color-75, ${theme('colors.neutral.90')})`,
-        borderColor: `var(--tag-color-75, ${theme('colors.neutral.90')})`,
-        color: theme('colors.neutral.0'),
+        backgroundColor: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
+        borderColor: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
+        color: theme('x.colors.neutral.0'),
 
         '&:hover,&:focus,&:active': {
-          backgroundColor: `var(--tag-color-50, ${theme('colors.neutral.50')})`,
-          borderColor: `var(--tag-color-50, ${theme('colors.neutral.50')})`
+          backgroundColor: `var(--tag-color-50, ${theme('x.colors.neutral.50')})`,
+          borderColor: `var(--tag-color-50, ${theme('x.colors.neutral.50')})`
         },
 
         ...disabledStyles
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts
index 2d6d3032b0..b4a3c1b55b 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/tag/tight.ts
@@ -13,31 +13,31 @@ export function tagTight(helpers: TailwindHelpers) {
   const disabledStyles = {
     '&:disabled': {
       borderColor: 'transparent',
-      color: theme('colors.neutral.25'),
-      fontWeight: theme('fontWeight.regular')
+      color: theme('x.colors.neutral.25'),
+      fontWeight: theme('x.fontWeight.regular')
     }
   };
   const hoverStyles = {
     '&:hover,&:focus,&:active': {
       borderColor: 'transparent',
-      color: `var(--tag-color-50, ${theme('colors.neutral.50')})`
+      color: `var(--tag-color-50, ${theme('x.colors.neutral.50')})`
     }
   };
 
   return {
     tight: {
       borderColor: 'transparent',
-      color: `var(--tag-color-75, ${theme('colors.neutral.90')})`,
-      paddingInlineStart: theme('spacing.0'),
-      paddingInlineEnd: theme('spacing.0'),
+      color: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
+      paddingInlineStart: theme('x.spacing.0'),
+      paddingInlineEnd: theme('x.spacing.0'),
 
       ...hoverStyles,
       ...disabledStyles,
 
       '&.selected': {
         borderColor: 'transparent',
-        color: `var(--tag-color-75, ${theme('colors.neutral.90')})`,
-        fontWeight: theme('fontWeight.bold'),
+        color: `var(--tag-color-75, ${theme('x.colors.neutral.90')})`,
+        fontWeight: theme('x.fontWeight.bold'),
 
         ...hoverStyles,
         ...disabledStyles
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/default.ts
index 58e3f4c910..3aa3588109 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/default.ts
@@ -10,8 +10,8 @@ import { textSizes } from './sizes';
 export function textDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
 
     ...textSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts
index 426fe473b4..4b979df4e6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts
@@ -11,7 +11,7 @@ import { textSizes } from './sizes';
  */
 export function text1(helpers: TailwindHelpers) {
   return {
-    '.text1': {
+    '.x-text1': {
       ...textDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/sizes.ts
index 51c926aa90..c5515d7a3f 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/sizes.ts
@@ -9,15 +9,15 @@ import { TailwindHelpers } from '../../../../types';
 export function textSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      fontSize: theme('fontSize.xs'),
-      lineHeight: theme('lineHeight.lg')
+      fontSize: theme('x.fontSize.xs'),
+      lineHeight: theme('x.lineHeight.lg')
     },
     md: {
-      fontSize: theme('fontSize.sm'),
-      lineHeight: theme('lineHeight.md')
+      fontSize: theme('x.fontSize.sm'),
+      lineHeight: theme('x.lineHeight.md')
     },
     lg: {
-      fontSize: theme('fontSize.md')
+      fontSize: theme('x.fontSize.md')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/default.ts
index 38be002fdc..d5c9565e0a 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/default.ts
@@ -10,8 +10,8 @@ import { textSizes } from '../text2/sizes';
 export function textDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.regular'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.regular'),
 
     ...textSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts
index e61e4a592e..beeea045d8 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts
@@ -11,7 +11,7 @@ import { textSizes } from './sizes';
  */
 export function text2(helpers: TailwindHelpers) {
   return {
-    '.text2': {
+    '.x-text2': {
       ...textDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/sizes.ts
index 919093592b..a0d25e1e56 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/sizes.ts
@@ -9,15 +9,15 @@ import { TailwindHelpers } from '../../../../types';
 export function textSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      fontSize: theme('fontSize.xs'),
-      lineHeight: theme('lineHeight.lg')
+      fontSize: theme('x.fontSize.xs'),
+      lineHeight: theme('x.lineHeight.lg')
     },
     md: {
-      fontSize: theme('fontSize.sm'),
-      lineHeight: theme('lineHeight.md')
+      fontSize: theme('x.fontSize.sm'),
+      lineHeight: theme('x.lineHeight.md')
     },
     lg: {
-      fontSize: theme('fontSize.md')
+      fontSize: theme('x.fontSize.md')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/default.ts
index 369077269d..9c8d30fec7 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/default.ts
@@ -10,8 +10,8 @@ import { titleSizes } from './sizes';
 export function titleDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.bold'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.bold'),
 
     ...titleSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts
index 3cc39d1ec0..6ac2abba0d 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/index.ts
@@ -11,7 +11,7 @@ import { titleSizes } from './sizes';
  */
 export function title1(helpers: TailwindHelpers) {
   return {
-    '.title1': {
+    '.x-title1': {
       ...titleDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/sizes.ts
index 85c27b6a44..9b9a7f0a54 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title1/sizes.ts
@@ -9,15 +9,15 @@ import { TailwindHelpers } from '../../../../types';
 export function titleSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      fontSize: theme('fontSize.xl'),
-      lineHeight: theme('lineHeight.md')
+      fontSize: theme('x.fontSize.xl'),
+      lineHeight: theme('x.lineHeight.md')
     },
     md: {
-      fontSize: theme('fontSize.2xl'),
-      lineHeight: theme('lineHeight.sm')
+      fontSize: theme('x.fontSize.2xl'),
+      lineHeight: theme('x.lineHeight.sm')
     },
     lg: {
-      fontSize: theme('fontSize.4xl')
+      fontSize: theme('x.fontSize.4xl')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/default.ts
index 1c9849d177..e0c438ad3e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/default.ts
@@ -10,8 +10,8 @@ import { titleSizes } from './sizes';
 export function titleDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.bold'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.bold'),
 
     ...titleSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts
index 6e175b1271..9ad1ba9961 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/index.ts
@@ -11,7 +11,7 @@ import { titleSizes } from './sizes';
  */
 export function title2(helpers: TailwindHelpers) {
   return {
-    '.title2': {
+    '.x-title2': {
       ...titleDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/sizes.ts
index 8c3f3a8d22..5e59b7c8d9 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title2/sizes.ts
@@ -9,15 +9,15 @@ import { TailwindHelpers } from '../../../../types';
 export function titleSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      fontSize: theme('fontSize.lg')
+      fontSize: theme('x.fontSize.lg')
     },
     md: {
-      fontSize: theme('fontSize.xl'),
-      lineHeight: theme('lineHeight.md')
+      fontSize: theme('x.fontSize.xl'),
+      lineHeight: theme('x.lineHeight.md')
     },
     lg: {
-      fontSize: theme('fontSize.3xl'),
-      lineHeight: theme('lineHeight.sm')
+      fontSize: theme('x.fontSize.3xl'),
+      lineHeight: theme('x.lineHeight.sm')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/default.ts
index 15f8bdeef5..f0c63ea2f9 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/default.ts
@@ -10,8 +10,8 @@ import { titleSizes } from './sizes';
 export function titleDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.bold'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.bold'),
 
     ...titleSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts
index 07de69ce4e..b79fd9bb2e 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/index.ts
@@ -11,7 +11,7 @@ import { titleSizes } from './sizes';
  */
 export function title3(helpers: TailwindHelpers) {
   return {
-    '.title3': {
+    '.x-title3': {
       ...titleDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/sizes.ts
index e9d7bee48c..0ebd1a9064 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title3/sizes.ts
@@ -9,14 +9,14 @@ import { TailwindHelpers } from '../../../../types';
 export function titleSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      fontSize: theme('fontSize.sm')
+      fontSize: theme('x.fontSize.sm')
     },
     md: {
-      fontSize: theme('fontSize.md'),
-      lineHeight: theme('lineHeight.md')
+      fontSize: theme('x.fontSize.md'),
+      lineHeight: theme('x.lineHeight.md')
     },
     lg: {
-      fontSize: theme('fontSize.xl')
+      fontSize: theme('x.fontSize.xl')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/default.ts
index d7b1d390e2..8f6f4d96c3 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/default.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/default.ts
@@ -10,8 +10,8 @@ import { titleSizes } from './sizes';
 export function titleDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
   return {
-    fontFamily: theme('fontFamily.main'),
-    fontWeight: theme('fontWeight.bold'),
+    fontFamily: theme('x.fontFamily.main'),
+    fontWeight: theme('x.fontWeight.bold'),
 
     ...titleSizes(helpers).md
   };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts
index ccc2a734a4..f90832113f 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/index.ts
@@ -12,7 +12,7 @@ import { titleSizes } from './sizes';
 // eslint-disable-next-line  @typescript-eslint/explicit-function-return-type
 export function title4(helpers: TailwindHelpers) {
   return {
-    '.title4': {
+    '.x-title4': {
       ...titleDefault(helpers),
       ...rename(
         {
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/sizes.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/sizes.ts
index 7b6acf510d..1c62e724bd 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/sizes.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/title4/sizes.ts
@@ -9,14 +9,14 @@ import { TailwindHelpers } from '../../../../types';
 export function titleSizes({ theme }: TailwindHelpers) {
   return {
     sm: {
-      fontSize: theme('fontSize.xs')
+      fontSize: theme('x.fontSize.xs')
     },
     md: {
-      fontSize: theme('fontSize.sm'),
-      lineHeight: theme('lineHeight.md')
+      fontSize: theme('x.fontSize.sm'),
+      lineHeight: theme('x.lineHeight.md')
     },
     lg: {
-      fontSize: theme('fontSize.lg')
+      fontSize: theme('x.fontSize.lg')
     }
   };
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components.ts
index 4ab08b35a3..c5b3a667b1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components.ts
@@ -14,10 +14,3 @@ export default function dynamicComponents(helpers: TailwindHelpers) {
     ...dynamicLayout(helpers)
   };
 }
-
-/**
- * The return type of {@link dynamicComponents}.
- *
- * @public
- */
-export type ReturnOfDynamicComponents = ReturnType<typeof dynamicComponents>;
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts
index 2576a751e2..56e2f84751 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-components/layout/layout-container.ts
@@ -16,30 +16,30 @@ export function dynamicLayoutContainer(helpers: TailwindHelpers) {
         ...rename(
           {
             mx: (value: any) => ({
-              '& > .layout-item': {
+              '& > .x-layout-item': {
                 '--x-margin-left': value,
                 '--x-margin-right': value
               }
             }),
             ml: (value: any) => ({
-              '& > .layout-item': {
+              '& > .x-layout-item': {
                 '--x-margin-left': value
               }
             }),
             mr: (value: any) => ({
-              '& > .layout-item': {
+              '& > .x-layout-item': {
                 '--x-margin-right': value
               }
             })
           },
-          { prefix: 'layout-container-' }
+          { prefix: 'x-layout-container-' }
         )
       },
       (name, styles) => {
         return {
           styles,
           values: {
-            ...theme('spacing')
+            ...theme('x.spacing')
           }
         };
       }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts
index d8fdc21d32..2e34a505f6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/dynamic-utilities.ts
@@ -15,14 +15,7 @@ export default function dynamicUtilities({ theme }: TailwindHelpers) {
       styles: (value: any) => ({
         fontSize: value
       }),
-      values: theme('spacing')
+      values: theme('x.spacing')
     }
   };
 }
-
-/**
- * The return type of {@link dynamicUtilities}.
- *
- * @public
- */
-export type ReturnOfDynamicUtilities = ReturnType<typeof dynamicUtilities>;
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
index ef2b023de3..29c6c16e24 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
@@ -1,12 +1,10 @@
-import { deepMerge } from '@empathyco/x-deep-merge';
 import { forEach } from '@empathyco/x-utils';
 import plugin from 'tailwindcss/plugin';
-import { Config } from 'tailwindcss';
-import { PluginOptions, TailwindHelpers } from '../types';
+import { TailwindHelpers } from '../types';
 import components from './components';
 import dynamicComponents from './dynamic-components';
 import dynamicUtilities from './dynamic-utilities';
-import theme from './theme';
+import xTheme from './theme';
 import utilities from './utilities';
 
 /**
@@ -17,7 +15,7 @@ import utilities from './utilities';
  * @public
  */
 export default plugin.withOptions(
-  function (options?: PluginOptions) {
+  function () {
     /**
      * Registers the generated CSS for the components and utilities of the plugin to the
      * respective Tailwind layer. It depends on the plugin's theme, affecting
@@ -27,33 +25,28 @@ export default plugin.withOptions(
      * @internal
      */
     return function (helpers: TailwindHelpers) {
-      helpers.addComponents(deepMerge({}, components(helpers), options?.components?.(helpers)));
-      forEach(
-        deepMerge({}, dynamicComponents(helpers), options?.dynamicComponents?.(helpers)),
-        (key, { styles, values }) => {
-          helpers.matchComponents({ [key]: styles }, { values: values ?? undefined });
-        }
-      );
-
-      forEach(
-        deepMerge({}, dynamicUtilities(helpers), options?.dynamicUtilities?.(helpers)),
-        (key, { styles, values }) => {
-          helpers.matchUtilities({ [key]: styles }, { values: values ?? undefined });
-        }
-      );
-      helpers.addUtilities(deepMerge({}, utilities(helpers), options?.utilities?.(helpers)));
-
-      options?.extra?.(helpers);
+      /* Add components */
+      helpers.addComponents(components(helpers), { respectPrefix: false });
+      /* Add dynamic components */
+      forEach(dynamicComponents(helpers), (key, { styles, values }) => {
+        helpers.matchComponents({ [key]: styles }, { values: values ?? undefined });
+      });
+      /* Add dynamic utilities */
+      forEach(dynamicUtilities(helpers), (key, { styles, values }) => {
+        helpers.matchUtilities(
+          { [key]: styles },
+          { respectPrefix: false, values: values ?? undefined }
+        );
+      });
+      /* Add utilities */
+      helpers.addUtilities(utilities(helpers), { respectPrefix: false });
+      /* Add variant to selected */
       helpers.addVariant('selected', '&.selected');
     };
   },
-  function (options) {
+  () => {
     return {
-      theme: deepMerge(
-        { colors: { current: 'currentColor', transparent: 'transparent' } },
-        theme,
-        options?.theme
-      )
-    } as Config;
+      theme: { x: xTheme }
+    };
   }
 );
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/theme.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/theme.ts
index 81b15e5ccb..f1431e38ec 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/theme.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/theme.ts
@@ -18,6 +18,8 @@ export default {
     4: '4px'
   },
   colors: {
+    current: 'currentColor',
+    transparent: 'transparent',
     neutral: {
       0: '#FFFFFF',
       10: '#EEF1F2',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
index 5da0c0498c..e1f5452c12 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
@@ -1,3 +1,4 @@
+import { CSSRuleObject } from 'tailwindcss/types/config';
 import { TailwindHelpers } from '../types';
 
 /**
@@ -11,21 +12,14 @@ import { TailwindHelpers } from '../types';
 export default function utilities({ theme }: TailwindHelpers) {
   return {
     // TODO: replace this example styles with actual design styles
-    '.border-large': {
+    '.x-border-large': {
       borderStyle: 'solid',
-      borderWidth: theme('borderWidth.4'),
-      borderColor: theme('colors.neutral.100')
+      borderWidth: theme('x.borderWidth.4'),
+      borderColor: theme('x.colors.neutral.100')
     },
     // This is here to not include it in the bundle if it is not being used
-    '.disable-icon-offset *': {
+    '.x-disable-icon-offset *': {
       '--enableIconOffset': 'var(--OFF)'
     }
-  };
+  } as unknown as CSSRuleObject;
 }
-
-/**
- * The return type of {@link utilities}.
- *
- * @public
- */
-export type ReturnOfUtilities = ReturnType<typeof utilities>;
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts
index 3f2aa24677..d7b0349d14 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts
@@ -49,7 +49,7 @@ export function mapColors<T extends CssStyleOptions>(
   mapperFn: (color: ThemeColor, colorName: string) => T,
   { theme }: TailwindHelpers
 ) {
-  const colors: ThemeColors = theme('colors');
+  const colors: Omit<ThemeColors, 'transparent' | 'current'> = theme('x.colors');
   return reduce(
     colors,
     (mappedColors, colorName, color) => {