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-base-showcase.vue b/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
index bba3968ea9..ac1b31a9f8 100644
--- a/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
+++ b/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div
-      class="bg-neutral-25 pointer-events-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-8 transition-opacity duration-300"
+      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!
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 30e22b6697..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
@@ -6,7 +6,7 @@
     <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 bg-neutral-0 border-b-1 border-neutral-25 sticky top-0">
+          <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 ml-auto">
@@ -21,7 +21,7 @@
             </div>
           </div>
 
-          <div class="x-layout-item border-b-1 x-border-neutral-25">
+          <div class="x-layout-item border-b-1 border-gray-300">
             <div class="x-title3 flex justify-center p-4">SUBHEADER</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 6872fe0cb4..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
@@ -5,7 +5,7 @@
 
     <div class="modal bg-gray-100">
       <div :class="[cssClass, 'x-layout-min-margin-48']">
-        <div class="x-layout-item border-b-1 x-border-neutral-25 bg-white">
+        <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 ml-auto">
@@ -14,7 +14,7 @@
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 x-border-neutral-25">
+        <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>
@@ -22,7 +22,7 @@
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b-1 border-gray-300">
           <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 
diff --git a/packages/x-tailwindcss/demo/tailwind.config.ts b/packages/x-tailwindcss/demo/tailwind.config.ts
index 0a0a0697d3..76f3f1d59c 100644
--- a/packages/x-tailwindcss/demo/tailwind.config.ts
+++ b/packages/x-tailwindcss/demo/tailwind.config.ts
@@ -2,5 +2,5 @@ import xTailwindCss from '../src/x-tailwind-plugin/plugin';
 
 export default {
   content: ['./index.html', './**/*.vue'],
-  plugins: [xTailwindCss({})]
+  plugins: [xTailwindCss]
 };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
index f327641cb2..66f9d31eba 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
@@ -29,7 +29,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  *
  * @public
  */
-export default function components(helpers: TailwindHelpers): CSSRuleObject {
+export default function components(helpers: TailwindHelpers) {
   return {
     ...variables(helpers),
     ...button(helpers),
@@ -52,5 +52,5 @@ export default function components(helpers: TailwindHelpers): CSSRuleObject {
     ...facetFilter(helpers),
     ...progressBar(helpers),
     ...attach(helpers)
-  };
+  } as unknown as CSSRuleObject;
 }
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 e57fc9bd9b..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
@@ -1,5 +1,4 @@
 import { TailwindHelpers } from '../../../types';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component util `attach` CSS, used to place components on top of others.
@@ -8,7 +7,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @returns The {@link CssStyleOptions} for the component.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function attach(helpers: TailwindHelpers): CSSRuleObject {
+export function attach(helpers: TailwindHelpers) {
   return {
     '.x-attach-container': {
       position: 'relative'
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 281c6fa0c3..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
@@ -7,7 +7,6 @@ import { badgeLight } from './light';
 import { badgeOutlined } from './outlined';
 import { badgeCircle } from './circle';
 import { badgeBright } from './bright';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `badge` CSS.
@@ -15,7 +14,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function badge(helpers: TailwindHelpers): CSSRuleObject {
+export function badge(helpers: TailwindHelpers) {
   return {
     '.x-badge': {
       ...badgeDefault(helpers),
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 034dde0191..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
@@ -1,5 +1,4 @@
 import { TailwindHelpers } from '../../../types';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the default styles for component `button-group`.
@@ -7,7 +6,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function buttonGroupDefault(helpers: TailwindHelpers): CSSRuleObject {
+export function buttonGroupDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
 
   return {
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 07b5d3aa6e..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
@@ -2,7 +2,6 @@ import { rename } from '@empathyco/x-utils';
 import { TailwindHelpers } from '../../../types';
 import { buttonGroupDefault } from './default';
 import { buttonGroupDivider } from './divider';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `button-group` CSS.
@@ -10,7 +9,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function buttonGroup(helpers: TailwindHelpers): CSSRuleObject {
+export function buttonGroup(helpers: TailwindHelpers) {
   return {
     '.x-button-group': {
       ...buttonGroupDefault(helpers),
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 4cf5884605..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
@@ -10,7 +10,6 @@ import { buttonLayouts } from './layouts';
 import { buttonLink } from './link';
 import { buttonOutlined } from './outlined';
 import { buttonSizes } from './sizes';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `button` CSS.
@@ -18,7 +17,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function button(helpers: TailwindHelpers): CSSRuleObject {
+export function button(helpers: TailwindHelpers) {
   return {
     '.x-button': deepMerge(
       buttonDefault(helpers),
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 5aa6a433f3..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
@@ -7,7 +7,6 @@ import { facetFilterGhost } from './ghost';
 import { facetFilterSimple } from './simple';
 import { facetFilterSizes } from './sizes';
 import { facetFilterUnderline } from './underline';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `facet-filter` CSS.
@@ -15,7 +14,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function facetFilter(helpers: TailwindHelpers): CSSRuleObject {
+export function facetFilter(helpers: TailwindHelpers) {
   return {
     '.x-facet-filter': deepMerge(
       facetFilterDefault(helpers),
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 794777bb20..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
@@ -1,6 +1,5 @@
 import { TailwindHelpers } from '../../../types';
 import { highlightDefault } from './default';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the `highlight` component CSS. The highlight component serves to emphasize certain part
@@ -10,7 +9,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @returns The {@link CssStyleOptions} for the component.
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function highlight(helpers: TailwindHelpers): CSSRuleObject {
+export function highlight(helpers: TailwindHelpers) {
   return {
     '.x-highlight-text': {
       ...highlightDefault(helpers)
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 4f3b9da12d..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
@@ -6,7 +6,6 @@ import { iconBackgroundColors } from './background-colors';
 import { iconSharp } from './sharp';
 import { iconSizes } from './sizes';
 import { iconStrokeWidths } from './stroke-widths';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `icon` CSS.
@@ -14,7 +13,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function icon(helpers: TailwindHelpers): CSSRuleObject {
+export function icon(helpers: TailwindHelpers) {
   return {
     '.x-icon': Object.assign(
       iconDefault(helpers),
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 61640542c8..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
@@ -6,7 +6,6 @@ import { inputGroupColors } from './colors';
 import { inputGroupDefault } from './default';
 import { inputGroupLine } from './line';
 import { inputGroupSizes } from './sizes';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `input-group` CSS.
@@ -14,7 +13,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function inputGroup(helpers: TailwindHelpers): CSSRuleObject {
+export function inputGroup(helpers: TailwindHelpers) {
   return {
     '.x-input-group': deepMerge(
       inputGroupDefault(helpers),
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 cfcb5929a0..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
@@ -5,7 +5,6 @@ import { inputDefault } from './default';
 import { inputColors } from './colors';
 import { inputSizes } from './sizes';
 import { inputLine } from './line';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `input` CSS.
@@ -13,7 +12,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function input(helpers: TailwindHelpers): CSSRuleObject {
+export function input(helpers: TailwindHelpers) {
   return {
     '.x-input': deepMerge(
       inputDefault(helpers),
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 59912d01de..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
@@ -6,7 +6,6 @@ import { minMargin } from './min-margin';
 import { item } from './item';
 import { maxWidth } from './max-width';
 import { utils } from './utils';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `layout` CSS.
@@ -14,7 +13,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function layout(helpers: TailwindHelpers): CSSRuleObject {
+export function layout(helpers: TailwindHelpers) {
   return {
     '.x-layout': rename(
       {
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 a4a05abe2d..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
@@ -3,7 +3,6 @@ import { TailwindHelpers } from '../../../types';
 import { pictureDefault } from './default';
 import { overlay } from './overlay';
 import { zoom } from './zoom';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `picture` CSS.
@@ -11,7 +10,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function picture(helpers: TailwindHelpers): CSSRuleObject {
+export function picture(helpers: TailwindHelpers) {
   return {
     '.x-picture': {
       ...pictureDefault(helpers),
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 115869ae07..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
@@ -4,7 +4,6 @@ import { TailwindHelpers } from '../../../types';
 import { progressBarDefault } from './default';
 import { progressBarSizes } from './sizes';
 import { progressBarColors } from './colors';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `progress-bar` CSS.
@@ -12,7 +11,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function progressBar(helpers: TailwindHelpers): CSSRuleObject {
+export function progressBar(helpers: TailwindHelpers) {
   return {
     '.x-progress-bar': deepMerge(
       progressBarDefault(helpers),
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 c76a8d9d12..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,13 +1,13 @@
 import { TailwindHelpers } from '../../../types';
 import { scrollDefault } from './default';
-import { CSSRuleObject } from 'tailwindcss/types/config';
+
 /**
  * Returns the component `scroll` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function scroll(helpers: TailwindHelpers): CSSRuleObject {
+export function scroll(helpers: TailwindHelpers) {
   return {
     '.x-scroll': {
       ...scrollDefault(helpers)
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 b1eede3532..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
@@ -2,7 +2,6 @@ import { deepMerge } from '@empathyco/x-deep-merge';
 import { TailwindHelpers } from '../../../types';
 import { slidingPanelDefault } from './default';
 import { slidingPanelFade } from './fade';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `sliding panel` CSS.
@@ -10,7 +9,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function slidingPanel(helpers: TailwindHelpers): CSSRuleObject {
+export function slidingPanel(helpers: TailwindHelpers) {
   return {
     '.x-sliding-panel': {
       ...deepMerge(slidingPanelDefault(), slidingPanelFade(helpers))
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 937763988e..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
@@ -5,7 +5,6 @@ import { suggestionGroupButtonGhost } from './ghost';
 import { suggestionGroupButtonRectangle } from './rectangle';
 import { suggestionGroupLighterColors } from './lighter-colors';
 import { suggestionGroupButtonLighter } from './lighter';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `suggestion group button` CSS.
@@ -13,7 +12,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function suggestionGroupButton(helpers: TailwindHelpers): CSSRuleObject {
+export function suggestionGroupButton(helpers: TailwindHelpers) {
   return {
     '.x-suggestion-group-button': {
       ...suggestionGroupButtonDefault(),
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 66b5ebace8..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
@@ -5,7 +5,6 @@ import { suggestionGroupColors } from './colors';
 import { suggestionGroupSizes } from './sizes';
 import { suggestionGroupOutlined } from './outlined';
 import { suggestionGroupGhost } from './ghost';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `suggestion group` CSS.
@@ -13,7 +12,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function suggestionGroup(helpers: TailwindHelpers): CSSRuleObject {
+export function suggestionGroup(helpers: TailwindHelpers) {
   return {
     '.x-suggestion-group': {
       ...suggestionGroupDefault(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 4dc850c6cb..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
@@ -5,7 +5,6 @@ import { suggestionColors } from './colors';
 import { suggestionGhost } from './ghost';
 import { suggestionOutlined } from './outlined';
 import { suggestionSizes } from './sizes';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `suggestion` CSS.
@@ -13,7 +12,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function suggestion(helpers: TailwindHelpers): CSSRuleObject {
+export function suggestion(helpers: TailwindHelpers) {
   return {
     '.x-suggestion': {
       ...suggestionDefault(helpers),
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 91b879d8b8..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
@@ -7,7 +7,6 @@ import { tagOutlined } from './outlined';
 import { tagSolid } from './solid';
 import { tagGhost } from './ghost';
 import { tagTight } from './tight';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `tag` CSS.
@@ -15,7 +14,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function tag(helpers: TailwindHelpers): CSSRuleObject {
+export function tag(helpers: TailwindHelpers) {
   return {
     '.x-tag': {
       ...tagDefault(helpers),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/index.ts
index f0c9abd499..c541cface7 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/index.ts
@@ -5,7 +5,6 @@ import { title1 } from './title1';
 import { title2 } from './title2';
 import { title3 } from './title3';
 import { title4 } from './title4';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns all the typography components.
@@ -14,7 +13,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @returns The {@link CssStyleOptions} for the component.
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function typography(helpers: TailwindHelpers): CSSRuleObject {
+export function typography(helpers: TailwindHelpers) {
   return {
     ...text1(helpers),
     ...text2(helpers),
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/variables/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/variables/index.ts
index 338d2d0b3f..968f6bd182 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/components/variables/index.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/components/variables/index.ts
@@ -1,5 +1,4 @@
 import { TailwindHelpers } from '../../../types';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the CSS global variables to be used across the components.
@@ -23,7 +22,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  */
 // eslint-disable-next-line max-len
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/no-unused-vars
-export function variables(helpers: TailwindHelpers): CSSRuleObject {
+export function variables(helpers: TailwindHelpers) {
   return {
     ':root': {
       '--ON': 'initial',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
index f2fa0fd818..190cf4c0f1 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts
@@ -6,6 +6,7 @@ import dynamicComponents from './dynamic-components';
 import dynamicUtilities from './dynamic-utilities';
 import xTheme from './theme';
 import utilities from './utilities';
+import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Defines the x-tailwind plugin as a Tailwind {@link plugin} that can be invoked passing a
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
index 450fc0bf0f..fcf9935727 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
@@ -9,7 +9,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  *
  * @public
  */
-export default function utilities({ theme }: TailwindHelpers): CSSRuleObject {
+export default function utilities({ theme }: TailwindHelpers) {
   return {
     // TODO: replace this example styles with actual design styles
     '.x-border-large': {
@@ -21,5 +21,5 @@ export default function utilities({ theme }: TailwindHelpers): CSSRuleObject {
     '.x-disable-icon-offset *': {
       '--enableIconOffset': 'var(--OFF)'
     }
-  };
+  } as unknown as CSSRuleObject;
 }
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 3cb1c868cb..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('x.colors');
+  const colors: Omit<ThemeColors, 'transparent' | 'current'> = theme('x.colors');
   return reduce(
     colors,
     (mappedColors, colorName, color) => {