diff --git a/packages/x-tailwindcss/src/types.ts b/packages/x-tailwindcss/src/types.ts
index 680402de8..7227e2dee 100644
--- a/packages/x-tailwindcss/src/types.ts
+++ b/packages/x-tailwindcss/src/types.ts
@@ -24,7 +24,7 @@ type CssVariable = `--${string}`;
  *
  * @example
  * ```typescript
- * const btnClass: CssClassSelector = '.btn';
+ * const btnClass: CssClassSelector = '.x-btn';
  * ```
  *
  * @internal
@@ -60,7 +60,7 @@ type CssPseudoSelector = `:${string}`;
  * ```typescript
  * const cssOptions: CssStyleOptions = {
  *   '--color-lead': 'blue',
- *   '.btn': {
+ *   '.x-btn': {
  *     '&--lead': {
  *       color: 'var(--color-lead)',
  *       gap: theme('x.spacing.2')
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 02b5d7996..b2af6fefb 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
@@ -28,7 +28,7 @@ export function inputGroupDefault(helpers: TailwindHelpers) {
       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/picture/overlay.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/overlay.ts
index 636e217ca..753a20737 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,7 +13,7 @@ export function overlay(helpers: TailwindHelpers) {
       '&:hover': {
         mixBlendMode: 'multiply'
       },
-      '.picture-image': {
+      '.x-picture-image': {
         '&:hover': {
           maskImage: `linear-gradient(to top, transparent, 20%, ${theme('x.colors.neutral.100')})`
         }
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 ca4c16fe5..9b5422975 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
@@ -35,7 +35,7 @@ export function suggestionGroupDefault(helpers: TailwindHelpers) {
       textDecoration: 'underline'
     },
 
-    '.suggestion': {
+    '.x-suggestion': {
       color: 'currentColor',
       minHeight: 'inherit',
       fontSize: 'inherit',
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
index 138cb29d0..987257eb6 100644
--- a/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
+++ b/packages/x-tailwindcss/src/x-tailwind-plugin/utilities.ts
@@ -11,13 +11,13 @@ 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('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)'
     }
   };