From 056c8d47b79e110d450f9f3b01558a7c09c67726 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 24 Dec 2024 19:35:03 +0100
Subject: [PATCH 1/4] [docs-infra] Polish Tailwind CSS demos

---
 .../tailwind/index.js                         | 16 ++---
 .../tailwind/index.tsx                        | 16 ++---
 .../badge/UnstyledBadge/tailwind/index.js     |  2 +-
 .../badge/UnstyledBadge/tailwind/index.tsx    |  2 +-
 .../UnstyledBadge/tailwind/index.tsx.preview  |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx.preview                |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../BasicFormControl/css/index.js             |  4 +-
 .../BasicFormControl/css/index.tsx            |  4 +-
 .../BasicFormControl/tailwind/index.js        |  4 +-
 .../BasicFormControl/tailwind/index.tsx       |  4 +-
 .../menu/MenuIntroduction/tailwind/index.js   |  4 +-
 .../menu/MenuIntroduction/tailwind/index.tsx  |  4 +-
 .../menu/MenuSimple/tailwind/index.js         |  4 +-
 .../menu/MenuSimple/tailwind/index.tsx        |  4 +-
 .../UnstyledPopperBasic/tailwind/index.js     |  4 +-
 .../UnstyledPopperBasic/tailwind/index.tsx    |  4 +-
 .../tailwind/index.js                         |  4 +-
 .../tailwind/index.tsx                        |  4 +-
 .../UnstyledSnackbar/tailwind/index.js        |  4 +-
 .../UnstyledSnackbar/tailwind/index.tsx       |  4 +-
 .../tailwind/index.js                         | 14 ++---
 .../tailwind/index.tsx                        | 14 ++---
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../UnstyledTabsCustomized/tailwind/index.js  |  2 +-
 .../UnstyledTabsCustomized/tailwind/index.tsx |  2 +-
 .../tailwind/index.js                         |  4 +-
 .../tailwind/index.tsx                        |  4 +-
 .../UnstyledTextarea/tailwind/index.js        |  2 +-
 .../UnstyledTextarea/tailwind/index.tsx       |  2 +-
 .../tailwind/index.tsx.preview                |  2 +-
 .../tailwind/index.js                         |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx.preview                |  2 +-
 .../getting-started/quickstart/quickstart.md  |  2 +-
 .../working-with-tailwind-css.md              | 30 ++++-----
 .../components/BaseInputDemo.tsx              |  4 +-
 .../productBaseUI/components/BaseMenuDemo.tsx |  7 +--
 .../ApiPage/list/ExpandableApiItem.tsx        |  2 +-
 .../ApiPage/list/PropertiesList.tsx           |  2 +-
 .../src/app/components.tsx                    |  2 +-
 .../src/app/globals.css                       |  2 +-
 .../src/app/page.tsx                          | 12 ++--
 examples/base-ui-vite-tailwind-ts/src/App.tsx |  2 +-
 examples/base-ui-vite-tailwind/src/App.jsx    |  2 +-
 examples/base-ui-vite-tailwind/src/styles.css |  2 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 62 +++++++++++++++++++
 prettier.config.js                            | 12 ++++
 renovate.json                                 |  4 ++
 54 files changed, 191 insertions(+), 117 deletions(-)

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
index 9e0dd561db747b..95433b840ceb05 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
@@ -47,11 +47,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
         {...getRootProps(other)}
         ref={rootRef}
         className={clsx(
-          'flex gap-[5px] pr-[5px] overflow-hidden w-80 rounded-lg bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-700 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)]',
+          'flex w-80 gap-[5px] overflow-hidden rounded-lg border border-solid border-gray-200 bg-white pr-[5px] shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] hover:border-violet-400 focus-visible:outline-0 dark:border-gray-700 dark:bg-gray-800 dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)] dark:hover:border-violet-400',
           !focused &&
             'shadow-[0_2px_2px_transparent] shadow-gray-50 dark:shadow-gray-900',
           focused &&
-            'border-violet-400 dark:border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:shadow-violet-500',
+            'border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:border-violet-400 dark:shadow-violet-500',
         )}
       >
         <input
@@ -59,19 +59,19 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           disabled={disabled}
           readOnly={readOnly}
           {...getInputProps()}
-          className="text-sm leading-[1.5] text-gray-900 dark:text-gray-300 bg-inherit border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto"
+          className="shrink-0 grow basis-auto rounded-[inherit] border-0 bg-inherit px-3 py-2 text-sm leading-[1.5] text-gray-900 outline-0 dark:text-gray-300"
         />
         {hasClearIcon && (
           <Button
             {...getClearProps()}
-            className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
+            className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
           >
             <ClearIcon className="translate-y-[2px] scale-90" />
           </Button>
         )}
         <Button
           {...getPopupIndicatorProps()}
-          className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
+          className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
         >
           <ArrowDropDownIcon
             className={clsx('translate-y-[2px]', popupOpen && 'rotate-180')}
@@ -94,7 +94,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
         >
           <ul
             {...getListboxProps()}
-            className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
+            className="z-[1] mx-0 my-3 box-border max-h-[300px] min-w-[320px] overflow-auto rounded-xl border border-solid border-gray-200 bg-white p-1.5 text-sm text-gray-900 shadow-[0_4px_30px_transparent] shadow-gray-200 outline-0 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 dark:shadow-gray-900"
           >
             {groupedOptions.map((option, index) => {
               const optionProps = getOptionProps({ option, index });
@@ -102,7 +102,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
               return (
                 <li
                   {...optionProps}
-                  className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 dark:aria-selected:bg-violet-900 aria-selected:text-violet-900 dark:aria-selected:text-violet-100 ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100"
+                  className="ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100 cursor-default list-none rounded-lg p-2 last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 aria-selected:text-violet-900 dark:aria-selected:bg-violet-900 dark:aria-selected:text-violet-100"
                 >
                   {option.label}
                 </li>
@@ -110,7 +110,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             })}
 
             {groupedOptions.length === 0 && (
-              <li className="list-none p-2 cursor-default">No results</li>
+              <li className="cursor-default list-none p-2">No results</li>
             )}
           </ul>
         </Popper>
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
index 2d07631632e762..eb834a35df5336 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
@@ -49,11 +49,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(
         {...getRootProps(other)}
         ref={rootRef}
         className={clsx(
-          'flex gap-[5px] pr-[5px] overflow-hidden w-80 rounded-lg bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-700 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)]',
+          'flex w-80 gap-[5px] overflow-hidden rounded-lg border border-solid border-gray-200 bg-white pr-[5px] shadow-[0_2px_4px_rgb(0_0_0_/_0.05)] hover:border-violet-400 focus-visible:outline-0 dark:border-gray-700 dark:bg-gray-800 dark:shadow-[0_2px_4px_rgb(0_0_0_/_0.5)] dark:hover:border-violet-400',
           !focused &&
             'shadow-[0_2px_2px_transparent] shadow-gray-50 dark:shadow-gray-900',
           focused &&
-            'border-violet-400 dark:border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:shadow-violet-500',
+            'border-violet-400 shadow-[0_0_0_3px_transparent] shadow-violet-200 dark:border-violet-400 dark:shadow-violet-500',
         )}
       >
         <input
@@ -61,19 +61,19 @@ const Autocomplete = React.forwardRef(function Autocomplete(
           disabled={disabled}
           readOnly={readOnly}
           {...getInputProps()}
-          className="text-sm leading-[1.5] text-gray-900 dark:text-gray-300 bg-inherit border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto"
+          className="shrink-0 grow basis-auto rounded-[inherit] border-0 bg-inherit px-3 py-2 text-sm leading-[1.5] text-gray-900 outline-0 dark:text-gray-300"
         />
         {hasClearIcon && (
           <Button
             {...getClearProps()}
-            className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
+            className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
           >
             <ClearIcon className="translate-y-[2px] scale-90" />
           </Button>
         )}
         <Button
           {...getPopupIndicatorProps()}
-          className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"
+          className="self-center rounded-[4px] border-0 bg-transparent px-0.5 py-0 shadow-none outline-0 hover:cursor-pointer hover:bg-violet-100 dark:hover:bg-gray-700"
         >
           <ArrowDropDownIcon
             className={clsx('translate-y-[2px]', popupOpen && 'rotate-180')}
@@ -96,7 +96,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
         >
           <ul
             {...getListboxProps()}
-            className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
+            className="z-[1] mx-0 my-3 box-border max-h-[300px] min-w-[320px] overflow-auto rounded-xl border border-solid border-gray-200 bg-white p-1.5 text-sm text-gray-900 shadow-[0_4px_30px_transparent] shadow-gray-200 outline-0 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-200 dark:shadow-gray-900"
           >
             {(groupedOptions as typeof top100Films).map((option, index) => {
               const optionProps = getOptionProps({ option, index });
@@ -104,7 +104,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
               return (
                 <li
                   {...optionProps}
-                  className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 dark:aria-selected:bg-violet-900 aria-selected:text-violet-900 dark:aria-selected:text-violet-100 ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100"
+                  className="ui-focused:bg-gray-100 dark:ui-focused:bg-gray-700 ui-focus-visible:bg-gray-100 dark:ui-focus-visible:bg-gray-800 ui-focused:text-gray-900 dark:ui-focused:text-gray-300 ui-focus-visible:text-gray-900 dark:ui-focus-visible:text-gray-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-violet-200 dark:ui-focus-visible:shadow-violet-500 ui-focused:aria-selected:bg-violet-100 dark:ui-focused:aria-selected:bg-violet-900 ui-focus-visible:aria-selected:bg-violet-100 dark:ui-focus-visible:aria-selected:bg-violet-900 ui-focused:aria-selected:text-violet-900 dark:ui-focused:aria-selected:text-violet-100 ui-focus-visible:aria-selected:text-violet-900 dark:ui-focus-visible:aria-selected:text-violet-100 cursor-default list-none rounded-lg p-2 last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-violet-100 aria-selected:text-violet-900 dark:aria-selected:bg-violet-900 dark:aria-selected:text-violet-100"
                 >
                   {option.label}
                 </li>
@@ -112,7 +112,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
             })}
 
             {groupedOptions.length === 0 && (
-              <li className="list-none p-2 cursor-default">No results</li>
+              <li className="cursor-default list-none p-2">No results</li>
             )}
           </ul>
         </Popper>
diff --git a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.js b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.js
index 917bc867dc1b83..be12df8d49bed1 100644
--- a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.js
+++ b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.js
@@ -16,7 +16,7 @@ export default function UnstyledBadge() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <Badge badgeContent={5}>
-        <span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
+        <span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
       </Badge>
     </div>
   );
diff --git a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx
index 837644d21d60d0..16173b68104d82 100644
--- a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function UnstyledBadge() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <Badge badgeContent={5}>
-        <span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
+        <span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
       </Badge>
     </div>
   );
diff --git a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx.preview b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx.preview
index bd190ede6b357d..55ca71c33093d6 100644
--- a/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx.preview
+++ b/docs/data/base/components/badge/UnstyledBadge/tailwind/index.tsx.preview
@@ -1,3 +1,3 @@
 <Badge badgeContent={5}>
-  <span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
+  <span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
 </Badge>
\ No newline at end of file
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js
index 070d1e6cdba04a..0a1ec619f3b87d 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.js
@@ -16,7 +16,7 @@ export default function UnstyledBadgeIntroduction() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <Badge badgeContent={5}>
-        <span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
+        <span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
       </Badge>
     </div>
   );
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx
index 2724498fae1d94..8380e5cfeda708 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function UnstyledBadgeIntroduction() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <Badge badgeContent={5}>
-        <span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
+        <span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
       </Badge>
     </div>
   );
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx.preview
index bd190ede6b357d..55ca71c33093d6 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/tailwind/index.tsx.preview
@@ -1,3 +1,3 @@
 <Badge badgeContent={5}>
-  <span className="w-10 h-10 rounded-xl bg-slate-300 dark:bg-slate-400 inline-block align-middle" />
+  <span className="inline-block h-10 w-10 rounded-xl bg-slate-300 align-middle dark:bg-slate-400" />
 </Badge>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
index 6b5aa4107e7c7b..1bf60eb85a157a 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef((props, ref) => {
     <BaseButton
       ref={ref}
       className={clsx(
-        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
+        'ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:scale-[0.99] active:bg-violet-700 active:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
index 5562d64b7f61f7..b959f8e722692d 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
@@ -30,7 +30,7 @@ const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <BaseButton
         ref={ref}
         className={clsx(
-          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none active:scale-[0.99] focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none',
+          'ui-disabled:text-slate-700 ui-disabled:dark:text-slate-200 ui-disabled:bg-slate-200 ui-disabled:dark:bg-slate-700 ui-disabled:cursor-default ui-disabled:shadow-none ui-disabled:dark:shadow-none ui-disabled:hover:bg-slate-200 ui-disabled:hover:dark:bg-slate-700 ui-disabled:border-none cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:scale-[0.99] active:bg-violet-700 active:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
           className,
         )}
         {...other}
diff --git a/docs/data/base/components/form-control/BasicFormControl/css/index.js b/docs/data/base/components/form-control/BasicFormControl/css/index.js
index e1d339ed6918d3..d0be638b8f75bb 100644
--- a/docs/data/base/components/form-control/BasicFormControl/css/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/css/index.js
@@ -29,7 +29,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
   }, [formControlContext]);
 
   if (formControlContext === undefined) {
-    return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
+    return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
   }
 
   const { error, required, filled } = formControlContext;
@@ -39,7 +39,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
     <p
       ref={ref}
       className={clsx(
-        'text-sm mb-1',
+        'mb-1 text-sm',
         classNameProp,
         error || showRequiredError ? 'invalid text-red-500' : '',
       )}
diff --git a/docs/data/base/components/form-control/BasicFormControl/css/index.tsx b/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
index a409a8d09136d7..5c5b3d00974325 100644
--- a/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
@@ -31,7 +31,7 @@ const Label = React.forwardRef<
   }, [formControlContext]);
 
   if (formControlContext === undefined) {
-    return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
+    return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
   }
 
   const { error, required, filled } = formControlContext;
@@ -41,7 +41,7 @@ const Label = React.forwardRef<
     <p
       ref={ref}
       className={clsx(
-        'text-sm mb-1',
+        'mb-1 text-sm',
         classNameProp,
         error || showRequiredError ? 'invalid text-red-500' : '',
       )}
diff --git a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js
index a256d4d8ff650f..7bff49e219fa9b 100644
--- a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js
@@ -44,7 +44,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
   }, [formControlContext]);
 
   if (formControlContext === undefined) {
-    return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
+    return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
   }
 
   const { error, required, filled } = formControlContext;
@@ -54,7 +54,7 @@ const Label = React.forwardRef(({ className: classNameProp, children }, ref) =>
     <p
       ref={ref}
       className={clsx(
-        'text-sm mb-1',
+        'mb-1 text-sm',
         classNameProp,
         error || showRequiredError ? 'invalid text-red-500' : '',
       )}
diff --git a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx
index d3cbca6446e435..ad59d67e091bb2 100644
--- a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx
@@ -46,7 +46,7 @@ const Label = React.forwardRef<
   }, [formControlContext]);
 
   if (formControlContext === undefined) {
-    return <p className={clsx('text-sm mb-1', classNameProp)}>{children}</p>;
+    return <p className={clsx('mb-1 text-sm', classNameProp)}>{children}</p>;
   }
 
   const { error, required, filled } = formControlContext;
@@ -56,7 +56,7 @@ const Label = React.forwardRef<
     <p
       ref={ref}
       className={clsx(
-        'text-sm mb-1',
+        'mb-1 text-sm',
         classNameProp,
         error || showRequiredError ? 'invalid text-red-500' : '',
       )}
diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
index f3271f0bc53524..10b25bb15c9a66 100644
--- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
+++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
@@ -103,7 +103,7 @@ const MenuButton = React.forwardRef((props, ref) => {
     <BaseMenuButton
       ref={ref}
       className={clsx(
-        'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm',
+        'box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
         className,
       )}
       {...other}
@@ -124,7 +124,7 @@ const MenuItem = React.forwardRef((props, ref) => {
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
+        'focus:shadow-outline-purple cursor-default select-none list-none rounded-lg p-2 last-of-type:border-b-0 focus:bg-slate-100 focus:text-slate-900 focus:outline-0 disabled:text-slate-400 disabled:hover:text-slate-400 focus:dark:bg-slate-800 focus:dark:text-slate-300 disabled:dark:text-slate-700 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
index 627a19bacb7d3e..c88f08386d8c59 100644
--- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
@@ -93,7 +93,7 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
       <BaseMenuButton
         ref={ref}
         className={clsx(
-          'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm',
+          'box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
           className,
         )}
         {...other}
@@ -108,7 +108,7 @@ const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>((props, ref) =>
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
+        'focus:shadow-outline-purple cursor-default select-none list-none rounded-lg p-2 last-of-type:border-b-0 focus:bg-slate-100 focus:text-slate-900 focus:outline-0 disabled:text-slate-400 disabled:hover:text-slate-400 focus:dark:bg-slate-800 focus:dark:text-slate-300 disabled:dark:text-slate-700 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
index 04e0e19685bc61..9cf9f1d77c11fc 100644
--- a/docs/data/base/components/menu/MenuSimple/tailwind/index.js
+++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
@@ -98,7 +98,7 @@ const MenuButton = React.forwardRef((props, ref) => {
     <BaseMenuButton
       ref={ref}
       className={clsx(
-        'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm active:shadow-none',
+        'box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:shadow-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
         className,
       )}
       {...other}
@@ -119,7 +119,7 @@ const MenuItem = React.forwardRef((props, ref) => {
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
+        'focus:shadow-outline-purple cursor-default select-none list-none rounded-lg p-2 last-of-type:border-b-0 focus:bg-slate-100 focus:text-slate-900 focus:outline-0 disabled:text-slate-400 disabled:hover:text-slate-400 focus:dark:bg-slate-800 focus:dark:text-slate-300 disabled:dark:text-slate-700 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
index a206650628ce98..bb2c528307341b 100644
--- a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
@@ -88,7 +88,7 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
       <BaseMenuButton
         ref={ref}
         className={clsx(
-          'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm active:shadow-none',
+          'box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:shadow-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]',
           className,
         )}
         {...other}
@@ -103,7 +103,7 @@ const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>((props, ref) =>
     <BaseMenuItem
       ref={ref}
       className={clsx(
-        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus:shadow-outline-purple focus:outline-0 focus:bg-slate-100 focus:dark:bg-slate-800 focus:text-slate-900 focus:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700',
+        'focus:shadow-outline-purple cursor-default select-none list-none rounded-lg p-2 last-of-type:border-b-0 focus:bg-slate-100 focus:text-slate-900 focus:outline-0 disabled:text-slate-400 disabled:hover:text-slate-400 focus:dark:bg-slate-800 focus:dark:text-slate-300 disabled:dark:text-slate-700 disabled:hover:dark:text-slate-700',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
index 906075d394f1c0..8d06eea8138a7e 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
@@ -23,7 +23,7 @@ export default function SimplePopper() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
+        className="cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:bg-violet-700 active:shadow-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -36,7 +36,7 @@ export default function SimplePopper() {
         anchorEl={anchorEl}
         className={`${isDarkMode ? 'dark' : ''}`}
       >
-        <div className=" z-50 rounded-lg font-medium font-sans text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100">
+        <div className="z-50 m-1 rounded-lg border border-solid border-slate-200 bg-white p-3 font-sans text-sm font-medium text-slate-900 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
           The content of the Popper.
         </div>
       </Popper>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
index dd0b69d6a8de03..022e176e5d2fea 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function SimplePopper() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
+        className="cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:bg-violet-700 active:shadow-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -36,7 +36,7 @@ export default function SimplePopper() {
         anchorEl={anchorEl}
         className={`${isDarkMode ? 'dark' : ''}`}
       >
-        <div className=" z-50 rounded-lg font-medium font-sans text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100">
+        <div className="z-50 m-1 rounded-lg border border-solid border-slate-200 bg-white p-3 font-sans text-sm font-medium text-slate-900 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
           The content of the Popper.
         </div>
       </Popper>
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js
index 2f04fbc47fdc6a..2a5cdf12588817 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js
@@ -22,7 +22,7 @@ export default function SimplePopup() {
   return (
     <div className={`${isDarkMode ? 'dark' : undefined}`}>
       <button
-        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
+        className="cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:bg-violet-700 active:shadow-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -34,7 +34,7 @@ export default function SimplePopup() {
         open={open}
         anchor={anchor}
         disablePortal
-        className="z-50 rounded-lg font-sans font-medium text-sm mt-2 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100"
+        className="z-50 mt-2 rounded-lg border border-solid border-slate-200 bg-white p-3 font-sans text-sm font-medium text-slate-900 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
       >
         <div>The content of the Popup.</div>
       </BasePopup>
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx
index e103b0db80a4d7..30953231936d20 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function SimplePopup() {
   return (
     <div className={`${isDarkMode ? 'dark' : undefined}`}>
       <button
-        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
+        className="cursor-pointer rounded-lg border border-solid border-violet-500 bg-violet-500 px-4 py-2 font-sans text-sm font-semibold leading-normal text-white shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] transition hover:bg-violet-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none active:bg-violet-700 active:shadow-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -34,7 +34,7 @@ export default function SimplePopup() {
         open={open}
         anchor={anchor}
         disablePortal
-        className="z-50 rounded-lg font-sans font-medium text-sm mt-2 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100"
+        className="z-50 mt-2 rounded-lg border border-solid border-slate-200 bg-white p-3 font-sans text-sm font-medium text-slate-900 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
       >
         <div>The content of the Popup.</div>
       </BasePopup>
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js
index 8cbae4dd5e7af7..3d72d73fd448af 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js
@@ -31,7 +31,7 @@ export default function UseSnackbar() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
+        className="box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         type="button"
         onClick={handleOpen}
       >
@@ -40,7 +40,7 @@ export default function UseSnackbar() {
       {open ? (
         <ClickAwayListener onClickAway={onClickAway}>
           <div
-            className="fixed z-50 font-sans flex right-4 bottom-4 left-auto justify-start rounded-lg font-semibold bg-white dark:bg-slate-900 p-3 animation-appear transition-transform border border-solid border-slate-200 dark:border-slate-700 min-w-snackbar max-w-snackbar shadow-md text-purple-900 dark:text-purple-100"
+            className="animation-appear min-w-snackbar max-w-snackbar fixed bottom-4 left-auto right-4 z-50 flex justify-start rounded-lg border border-solid border-slate-200 bg-white p-3 font-sans font-semibold text-purple-900 shadow-md transition-transform dark:border-slate-700 dark:bg-slate-900 dark:text-purple-100"
             {...getRootProps()}
           >
             Hello World
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx
index 8cbae4dd5e7af7..3d72d73fd448af 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function UseSnackbar() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
+        className="box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         type="button"
         onClick={handleOpen}
       >
@@ -40,7 +40,7 @@ export default function UseSnackbar() {
       {open ? (
         <ClickAwayListener onClickAway={onClickAway}>
           <div
-            className="fixed z-50 font-sans flex right-4 bottom-4 left-auto justify-start rounded-lg font-semibold bg-white dark:bg-slate-900 p-3 animation-appear transition-transform border border-solid border-slate-200 dark:border-slate-700 min-w-snackbar max-w-snackbar shadow-md text-purple-900 dark:text-purple-100"
+            className="animation-appear min-w-snackbar max-w-snackbar fixed bottom-4 left-auto right-4 z-50 flex justify-start rounded-lg border border-solid border-slate-200 bg-white p-3 font-sans font-semibold text-purple-900 shadow-md transition-transform dark:border-slate-700 dark:bg-slate-900 dark:text-purple-100"
             {...getRootProps()}
           >
             Hello World
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js
index 876eabec0bedf3..8b9ced388baedf 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js
@@ -40,7 +40,7 @@ export default function UnstyledSnackbarIntroduction() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
+        className="box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         type="button"
         onClick={handleClick}
       >
@@ -51,7 +51,7 @@ export default function UnstyledSnackbarIntroduction() {
         open={open}
         onClose={handleClose}
         exited={exited}
-        className="fixed z-50 font-sans flex right-4 bottom-4 left-auto max-w-xl	min-w-xs"
+        className="min-w-xs fixed bottom-4 left-auto right-4 z-50 flex max-w-xl font-sans"
       >
         <Transition
           timeout={{ enter: 400, exit: 400 }}
@@ -64,7 +64,7 @@ export default function UnstyledSnackbarIntroduction() {
         >
           {(status) => (
             <div
-              className="flex gap-4	overflow-hidden	bg-white dark:bg-slate-900 rounded-lg	border border-solid border-slate-200 dark:border-slate-700 shadow-md text-slate-900 dark:text-slate-50 p-3	text-start"
+              className="flex gap-4 overflow-hidden rounded-lg border border-solid border-slate-200 bg-white p-3 text-start text-slate-900 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50"
               style={{
                 transform: positioningStyles[status],
                 transition: 'transform 300ms ease',
@@ -79,17 +79,17 @@ export default function UnstyledSnackbarIntroduction() {
                   height: '1.5rem',
                 }}
               />
-              <div className="flex-1	max-w-full">
-                <p className="m-0 leading-normal mr-2 font-medium">
+              <div className="max-w-full flex-1">
+                <p className="m-0 mr-2 font-medium leading-normal">
                   Notifications sent
                 </p>
-                <p className="m-0 leading-normal font-normal	text-slate-800 dark:text-slate-400">
+                <p className="m-0 font-normal leading-normal text-slate-800 dark:text-slate-400">
                   Everything was sent to the desired address.
                 </p>
               </div>
               <CloseIcon
                 onClick={handleClose}
-                className="cursor-pointer	shrink-0	p-0.5	rounded hover:bg-slate-50 hover:dark:bg-slate-800"
+                className="shrink-0 cursor-pointer rounded p-0.5 hover:bg-slate-50 hover:dark:bg-slate-800"
               />
             </div>
           )}
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
index f36868dd2de782..2985b4adb4be33 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
@@ -41,7 +41,7 @@ export default function UnstyledSnackbarIntroduction() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
+        className="box-border cursor-pointer rounded-lg border border-solid border-slate-200 bg-white px-4 py-2 font-sans text-sm font-semibold text-slate-900 shadow-sm hover:border-slate-300 hover:bg-slate-50 focus-visible:shadow-[0_0_0_4px_#ddd6fe] focus-visible:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-600 hover:dark:bg-slate-800 dark:focus-visible:shadow-[0_0_0_4px_#a78bfa]"
         type="button"
         onClick={handleClick}
       >
@@ -52,7 +52,7 @@ export default function UnstyledSnackbarIntroduction() {
         open={open}
         onClose={handleClose}
         exited={exited}
-        className="fixed z-50 font-sans flex right-4 bottom-4 left-auto max-w-xl	min-w-xs"
+        className="min-w-xs fixed bottom-4 left-auto right-4 z-50 flex max-w-xl font-sans"
       >
         <Transition
           timeout={{ enter: 400, exit: 400 }}
@@ -65,7 +65,7 @@ export default function UnstyledSnackbarIntroduction() {
         >
           {(status) => (
             <div
-              className="flex gap-4	overflow-hidden	bg-white dark:bg-slate-900 rounded-lg	border border-solid border-slate-200 dark:border-slate-700 shadow-md text-slate-900 dark:text-slate-50 p-3	text-start"
+              className="flex gap-4 overflow-hidden rounded-lg border border-solid border-slate-200 bg-white p-3 text-start text-slate-900 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50"
               style={{
                 transform: positioningStyles[status],
                 transition: 'transform 300ms ease',
@@ -80,17 +80,17 @@ export default function UnstyledSnackbarIntroduction() {
                   height: '1.5rem',
                 }}
               />
-              <div className="flex-1	max-w-full">
-                <p className="m-0 leading-normal mr-2 font-medium">
+              <div className="max-w-full flex-1">
+                <p className="m-0 mr-2 font-medium leading-normal">
                   Notifications sent
                 </p>
-                <p className="m-0 leading-normal font-normal	text-slate-800 dark:text-slate-400">
+                <p className="m-0 font-normal leading-normal text-slate-800 dark:text-slate-400">
                   Everything was sent to the desired address.
                 </p>
               </div>
               <CloseIcon
                 onClick={handleClose}
-                className="cursor-pointer	shrink-0	p-0.5	rounded hover:bg-slate-50 hover:dark:bg-slate-800"
+                className="shrink-0 cursor-pointer rounded p-0.5 hover:bg-slate-50 hover:dark:bg-slate-800"
               />
             </div>
           )}
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.js b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.js
index 210dff5e00cd1d..d9003a39fe2cd4 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.js
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.js
@@ -36,7 +36,7 @@ export default function UnstyledPaginationIntroduction() {
     >
       <table
         aria-label="custom pagination table"
-        className="text-sm font-sans [&>th]:p-4 [&>td]:p-4 border border-solid border-zinc-200 dark:border-[#303740] bg-white dark:bg-[#1C2025] rounded-xl shadow-md dark:shadow-[0_4px_16px_rgba(0,0,0,0.3)] w-full"
+        className="w-full rounded-xl border border-solid border-zinc-200 bg-white font-sans text-sm shadow-md dark:border-[#303740] dark:bg-[#1C2025] dark:shadow-[0_4px_16px_rgba(0,0,0,0.3)] [&>td]:p-4 [&>th]:p-4"
       >
         <tfoot>
           <tr>
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.tsx b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.tsx
index 1010c775a9602d..61cb4766e81a9b 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/tailwind/index.tsx
@@ -40,7 +40,7 @@ export default function UnstyledPaginationIntroduction() {
     >
       <table
         aria-label="custom pagination table"
-        className="text-sm font-sans [&>th]:p-4 [&>td]:p-4 border border-solid border-zinc-200 dark:border-[#303740] bg-white dark:bg-[#1C2025] rounded-xl shadow-md dark:shadow-[0_4px_16px_rgba(0,0,0,0.3)] w-full"
+        className="w-full rounded-xl border border-solid border-zinc-200 bg-white font-sans text-sm shadow-md dark:border-[#303740] dark:bg-[#1C2025] dark:shadow-[0_4px_16px_rgba(0,0,0,0.3)] [&>td]:p-4 [&>th]:p-4"
       >
         <tfoot>
           <tr>
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
index bcaeac2e76b8f7..bef9d4e7a9cf9d 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
@@ -7,7 +7,7 @@ import { Tab } from '@mui/base/Tab';
 export default function UnstyledTabsCustomized() {
   return (
     <Tabs defaultValue={1}>
-      <TabsList className="mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg">
+      <TabsList className="min-w-tabs-list mb-4 flex content-between items-center justify-center rounded-xl bg-purple-500 font-sans shadow-lg">
         <Tab
           slotProps={{
             root: ({ selected, disabled }) => ({
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
index bcaeac2e76b8f7..bef9d4e7a9cf9d 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
@@ -7,7 +7,7 @@ import { Tab } from '@mui/base/Tab';
 export default function UnstyledTabsCustomized() {
   return (
     <Tabs defaultValue={1}>
-      <TabsList className="mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg">
+      <TabsList className="min-w-tabs-list mb-4 flex content-between items-center justify-center rounded-xl bg-purple-500 font-sans shadow-lg">
         <Tab
           slotProps={{
             root: ({ selected, disabled }) => ({
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
index 8841ad94a195bc..a91014ff6c08d7 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -40,7 +40,7 @@ const TabsList = React.forwardRef((props, ref) => {
     <BaseTabsList
       ref={ref}
       className={clsx(
-        'mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg',
+        'min-w-tabs-list mb-4 flex content-between items-center justify-center rounded-xl bg-purple-500 font-sans shadow-lg',
         className,
       )}
       {...other}
@@ -101,7 +101,7 @@ const TabPanel = React.forwardRef((props, ref) => {
     <BaseTabPanel
       ref={ref}
       className={clsx(
-        'py-5 px-3 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 rounded-xl opacity-60 w-full font-sans text-sm',
+        'w-full rounded-xl border border-solid border-slate-200 bg-white px-3 py-5 font-sans text-sm opacity-60 dark:border-slate-700 dark:bg-slate-900',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
index 24373e7ff6d4c3..699a53860c70c3 100644
--- a/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsIntroduction/tailwind/index.tsx
@@ -40,7 +40,7 @@ const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>((props, ref) =>
     <BaseTabsList
       ref={ref}
       className={clsx(
-        'mb-4 rounded-xl bg-purple-500 flex font-sans items-center justify-center content-between min-w-tabs-list shadow-lg',
+        'min-w-tabs-list mb-4 flex content-between items-center justify-center rounded-xl bg-purple-500 font-sans shadow-lg',
         className,
       )}
       {...other}
@@ -87,7 +87,7 @@ const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>((props, ref) =>
     <BaseTabPanel
       ref={ref}
       className={clsx(
-        'py-5 px-3 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 rounded-xl opacity-60 w-full font-sans text-sm',
+        'w-full rounded-xl border border-solid border-slate-200 bg-white px-3 py-5 font-sans text-sm opacity-60 dark:border-slate-700 dark:bg-slate-900',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
index 754ff5fe778af0..f090dfe8d5c200 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
@@ -14,7 +14,7 @@ export default function UnstyledTextareaAutosize() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <TextareaAutosize
-        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+        className="'w-80 focus:shadow-outline-purple dark:focus:shadow-outline-purple box-border rounded-lg border border-solid border-slate-300 bg-white px-3 py-2 font-sans text-sm font-normal leading-5 text-slate-900 shadow-md shadow-slate-100 hover:border-purple-500 focus:border-purple-500 focus:shadow-lg focus-visible:outline-0 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:shadow-slate-900 dark:hover:border-purple-500 dark:focus:border-purple-500"
         aria-label="Demo input"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
index 754ff5fe778af0..f090dfe8d5c200 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function UnstyledTextareaAutosize() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <TextareaAutosize
-        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+        className="'w-80 focus:shadow-outline-purple dark:focus:shadow-outline-purple box-border rounded-lg border border-solid border-slate-300 bg-white px-3 py-2 font-sans text-sm font-normal leading-5 text-slate-900 shadow-md shadow-slate-100 hover:border-purple-500 focus:border-purple-500 focus:shadow-lg focus-visible:outline-0 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:shadow-slate-900 dark:hover:border-purple-500 dark:focus:border-purple-500"
         aria-label="Demo input"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
index e6152d5f7eca92..fab3fbeb190c67 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
@@ -1,5 +1,5 @@
 <TextareaAutosize
-  className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+  className="'w-80 focus:shadow-outline-purple dark:focus:shadow-outline-purple box-border rounded-lg border border-solid border-slate-300 bg-white px-3 py-2 font-sans text-sm font-normal leading-5 text-slate-900 shadow-md shadow-slate-100 hover:border-purple-500 focus:border-purple-500 focus:shadow-lg focus-visible:outline-0 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:shadow-slate-900 dark:hover:border-purple-500 dark:focus:border-purple-500"
   aria-label="Demo input"
   placeholder="Empty"
 />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
index f0fc8da86f98f8..3b3b8a548ab219 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.js
@@ -14,7 +14,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
       <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+        className="focus:shadow-outline-purple dark:focus:shadow-outline-purple box-border w-80 rounded-xl rounded-br-none border border-solid border-slate-300 bg-white p-3 font-sans text-sm font-normal leading-normal text-slate-900 shadow-lg shadow-slate-100 hover:border-purple-500 focus:border-purple-500 focus:shadow-lg focus-visible:outline-0 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:shadow-slate-900 dark:hover:border-purple-500 dark:focus:border-purple-500"
         aria-label="empty textarea"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
index f0fc8da86f98f8..3b3b8a548ab219 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <div className={isDarkMode ? 'dark' : ''} style={{ display: 'flex' }}>
       <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+        className="focus:shadow-outline-purple dark:focus:shadow-outline-purple box-border w-80 rounded-xl rounded-br-none border border-solid border-slate-300 bg-white p-3 font-sans text-sm font-normal leading-normal text-slate-900 shadow-lg shadow-slate-100 hover:border-purple-500 focus:border-purple-500 focus:shadow-lg focus-visible:outline-0 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:shadow-slate-900 dark:hover:border-purple-500 dark:focus:border-purple-500"
         aria-label="empty textarea"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
index 94f09f2d61e707..9c56500228d6c9 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/tailwind/index.tsx.preview
@@ -1,5 +1,5 @@
 <TextareaAutosize
-  className="w-80 text-sm font-normal font-sans leading-normal p-3 rounded-xl rounded-br-none shadow-lg shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0 box-border"
+  className="focus:shadow-outline-purple dark:focus:shadow-outline-purple box-border w-80 rounded-xl rounded-br-none border border-solid border-slate-300 bg-white p-3 font-sans text-sm font-normal leading-normal text-slate-900 shadow-lg shadow-slate-100 hover:border-purple-500 focus:border-purple-500 focus:shadow-lg focus-visible:outline-0 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:shadow-slate-900 dark:hover:border-purple-500 dark:focus:border-purple-500"
   aria-label="empty textarea"
   placeholder="Empty"
 />
\ No newline at end of file
diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md
index 41e248e7ad0754..711904380ec954 100644
--- a/docs/data/base/getting-started/quickstart/quickstart.md
+++ b/docs/data/base/getting-started/quickstart/quickstart.md
@@ -125,7 +125,7 @@ The demo below shows how to create the Primer button using plain CSS with Base 
 After installing Tailwind CSS, pass its utility classes to `className`, as shown below:
 
 ```tsx
-<Button className="bg-green-600 rounded-md py-1 px-4...">Create Repository</Button>
+<Button className="rounded-md bg-green-600 px-4 py-1">Create Repository</Button>
 ```
 
 The demo below shows how to build the Primer button using Tailwind CSS:
diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
index 92cf9f71fa4ad9..9381c1b9596366 100644
--- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
+++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
@@ -51,11 +51,11 @@ const Player = React.forwardRef(function Player(
   const { className = '', ...other } = props;
   return (
     <div
-      className={`max-w-[600px] max-h-[240px] m-auto ${className}`}
+      className={`m-auto max-h-[240px] max-w-[600px] ${className}`}
       {...other}
       ref={ref}
     >
-      <div className="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
+      <div className="space-y-6 rounded-t-xl border-b border-slate-100 bg-white p-4 pb-6 sm:space-y-8 sm:p-10 sm:pb-8 lg:space-y-6 lg:p-6 xl:space-y-8 xl:p-10 xl:pb-8 dark:border-slate-500 dark:bg-slate-800">
         <div className="flex items-center space-x-4">
           <img
             src="https://mui.com/static/base-ui/with-tailwind-css/full-stack-radio.png"
@@ -66,22 +66,22 @@ const Player = React.forwardRef(function Player(
             loading="lazy"
           />
           <div className="min-w-0 flex-auto space-y-1 font-semibold">
-            <p className="text-cyan-500 dark:text-cyan-400 text-sm leading-6">
+            <p className="text-sm leading-6 text-cyan-500 dark:text-cyan-400">
               <abbr title="Episode">Ep.</abbr> 128
             </p>
-            <h2 className="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate">
+            <h2 className="truncate text-sm leading-6 text-slate-500 dark:text-slate-400">
               Scaling CSS at Heroku with Utility Classes
             </h2>
-            <p className="text-slate-900 dark:text-slate-50 text-lg">
+            <p className="text-lg text-slate-900 dark:text-slate-50">
               Full Stack Radio
             </p>
           </div>
         </div>
         <div className="space-y-2">
           <div className="relative">
-            <div className="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
+            <div className="overflow-hidden rounded-full bg-slate-100 dark:bg-slate-700">
               <div
-                className="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2"
+                className="h-2 w-1/2 bg-cyan-500 dark:bg-cyan-400"
                 role="progressbar"
                 aria-label="music progress"
                 aria-valuenow={1456}
@@ -89,18 +89,18 @@ const Player = React.forwardRef(function Player(
                 aria-valuemax={4550}
               ></div>
             </div>
-            <div className="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
-              <div className="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div>
+            <div className="absolute left-1/2 top-1/2 -ml-2 -mt-2 flex h-4 w-4 items-center justify-center rounded-full bg-white shadow ring-2 ring-cyan-500 dark:ring-cyan-400">
+              <div className="h-1.5 w-1.5 rounded-full bg-cyan-500 ring-1 ring-inset ring-slate-900/5 dark:bg-cyan-400"></div>
             </div>
           </div>
-          <div className="flex justify-between text-sm leading-6 font-medium tabular-nums">
+          <div className="flex justify-between text-sm font-medium tabular-nums leading-6">
             <div className="text-cyan-500 dark:text-slate-100">24:16</div>
             <div className="text-slate-500 dark:text-slate-400">75:50</div>
           </div>
         </div>
       </div>
-      <div className="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center">
-        <div className="flex-auto flex items-center justify-evenly">
+      <div className="flex items-center rounded-b-xl bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200">
+        <div className="flex flex-auto items-center justify-evenly">
           <button type="button" aria-label="Add to favorites">
             <svg width="24" height="24">
               <path
@@ -157,7 +157,7 @@ const Player = React.forwardRef(function Player(
         </div>
         <button
           type="button"
-          className="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center"
+          className="-my-2 mx-auto flex h-20 w-20 flex-none items-center justify-center rounded-full bg-white text-slate-900 shadow-md ring-1 ring-slate-900/5 dark:bg-slate-100 dark:text-slate-700"
           aria-label="Pause"
         >
           <svg width="30" height="32" fill="currentColor">
@@ -165,7 +165,7 @@ const Player = React.forwardRef(function Player(
             <rect x="20" y="4" width="4" height="24" rx="2" />
           </svg>
         </button>
-        <div className="flex-auto flex items-center justify-evenly">
+        <div className="flex flex-auto items-center justify-evenly">
           <button type="button" aria-label="Skip 10 seconds">
             <svg width="24" height="24" fill="none">
               <path
@@ -209,7 +209,7 @@ const Player = React.forwardRef(function Player(
           </button>
           <button
             type="button"
-            className="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500"
+            className="rounded-lg px-2 text-xs font-semibold leading-6 text-slate-500 ring-2 ring-inset ring-slate-500 dark:bg-slate-500 dark:text-slate-100 dark:ring-0"
           >
             1x
           </button>
diff --git a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
index fff67918856815..db536e5a80e068 100644
--- a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
@@ -139,7 +139,7 @@ const TailwindFloatingLabelInput = React.forwardRef<
       />
       <label
         htmlFor={id}
-        className="pointer-events-none absolute left-[0.75rem] top-[50%] flex origin-[0_0] translate-y-[-100%] scale-[--TextInput-labelScale] transform items-center overflow-hidden whitespace-nowrap text-start font-[500] leading-[--TextInput-labelLineHeight] text-[--muidocs-palette-grey-600] transition-transform duration-100 ease-out peer-placeholder-shown:translate-y-[-50%] peer-placeholder-shown:scale-100 peer-placeholder-shown:transform peer-focus:translate-y-[-100%] peer-focus:scale-[--TextInput-labelScale] peer-focus:transform peer-focus:text-[--primary] "
+        className="pointer-events-none absolute left-[0.75rem] top-[50%] flex origin-[0_0] translate-y-[-100%] scale-[--TextInput-labelScale] transform items-center overflow-hidden whitespace-nowrap text-start font-[500] leading-[--TextInput-labelLineHeight] text-[--muidocs-palette-grey-600] transition-transform duration-100 ease-out peer-placeholder-shown:translate-y-[-50%] peer-placeholder-shown:scale-100 peer-placeholder-shown:transform peer-focus:translate-y-[-100%] peer-focus:scale-[--TextInput-labelScale] peer-focus:transform peer-focus:text-[--primary]"
       >
         Floating label
       </label>
@@ -177,7 +177,7 @@ export default function BaseInputDemo({ styling }: { styling?: 'system' | 'tailw
       {styling === 'tailwindcss' && (
         <Input
           placeholder="Type something here"
-          className=" p-[0px_0.75rem][box-shadow:var(--shadow)] relative inline-flex h-[--TextInput-height] w-[320px] rounded-[--muidocs-shape-borderRadius] border border-solid border-[--muidocs-palette-grey-300] bg-[--muidocs-palette-background-default] outline-transparent [--TextInput-height:64px] [--TextInput-labelLineHeight:20px] [--TextInput-labelScale:0.75] [--TextInput-paddingTop:2rem] focus-within:!border-[--primary] focus-within:[outline:3px_solid_var(--focus-ring)] hover:border-[--muidocs-palette-grey-400] dark:border-[--muidocs-palette-grey-800] dark:shadow-[0_2px_4px_0_rgba(0_0_0/0.8)] dark:focus-within:!border-[--primary] dark:focus-within:[outline:3px_solid_var(--focus-ring)] dark:hover:border-[--muidocs-palette-grey-700]"
+          className="p-[0px_0.75rem][box-shadow:var(--shadow)] relative inline-flex h-[--TextInput-height] w-[320px] rounded-[--muidocs-shape-borderRadius] border border-solid border-[--muidocs-palette-grey-300] bg-[--muidocs-palette-background-default] outline-transparent [--TextInput-height:64px] [--TextInput-labelLineHeight:20px] [--TextInput-labelScale:0.75] [--TextInput-paddingTop:2rem] focus-within:!border-[--primary] focus-within:[outline:3px_solid_var(--focus-ring)] hover:border-[--muidocs-palette-grey-400] dark:border-[--muidocs-palette-grey-800] dark:shadow-[0_2px_4px_0_rgba(0_0_0/0.8)] dark:focus-within:!border-[--primary] dark:focus-within:[outline:3px_solid_var(--focus-ring)] dark:hover:border-[--muidocs-palette-grey-700]"
           slots={{ input: TailwindFloatingLabelInput }}
         />
       )}
diff --git a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
index 057b2c75d9c5fe..3f8b5e4a89464f 100644
--- a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
@@ -135,12 +135,7 @@ export default function BaseMenuDemo({ styling }: { styling?: 'system' | 'tailwi
       {styling === 'css' && <GlobalStyles styles={CSS} />}
       {styling === 'tailwindcss' && (
         <Dropdown>
-          <MenuButton
-            className="min-h-[calc(1.5em + 22px)] inline-flex items-center gap-[0.5rem] rounded-[8px] font-medium border border-solid border-[--muidocs-palette-grey-200] bg-[--muidocs-palette-background-default] p-[8px_12px_8px_6px] text-[0.875rem] leading-[1.5] transition-all [box-shadow:var(--outlined-btn-shadow)] font-['IBM_Plex_Sans'] hover:bg-[--muidocs-palette-grey-50] hover:border-[--muidocs-palette-grey-300] 
-            ui-focus-visible:[outline:4px_solid_var(--focus-ring)] ui-focus-visible:border-[--primary] 
-            dark:border-[--muidocs-palette-primaryDark-700] dark:hover:bg-[--muidocs-palette-primaryDark-800] 
-            dark:hover:border-[--muidocs-palette-primaryDark-600] select-none"
-          >
+          <MenuButton className="min-h-[calc(1.5em + 22px)] ui-focus-visible:[outline:4px_solid_var(--focus-ring)] ui-focus-visible:border-[--primary] inline-flex select-none items-center gap-[0.5rem] rounded-[8px] border border-solid border-[--muidocs-palette-grey-200] bg-[--muidocs-palette-background-default] p-[8px_12px_8px_6px] font-['IBM_Plex_Sans'] text-[0.875rem] font-medium leading-[1.5] transition-all [box-shadow:var(--outlined-btn-shadow)] hover:border-[--muidocs-palette-grey-300] hover:bg-[--muidocs-palette-grey-50] dark:border-[--muidocs-palette-primaryDark-700] dark:hover:border-[--muidocs-palette-primaryDark-600] dark:hover:bg-[--muidocs-palette-primaryDark-800]">
             <Person className="text-[--primary]" />
             My account
           </MenuButton>
diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index 58502acff53d0f..8434c2ac41bf15 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -188,7 +188,7 @@ export default function ExpandableApiItem(props: ExpandableApiItemProps) {
       ownerState={{ type }}
       {...other}
       className={clsx(
-        `MuiApi-item-root${isExtendable ? ' MuiApi-item-header-extendable' : ''}`,
+        `MuiApi-item-root${isExtendable ? 'MuiApi-item-header-extendable' : ''}`,
         className,
       )}
     >
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index 85f73c32c3b7fa..6ba8fcbe979e9c 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -188,7 +188,7 @@ export default function PropertiesList(props: PropertiesListProps) {
             )}
             {additionalInfo?.map((key) => (
               <p
-                className="prop-list-additional-description  MuiApi-collapsible"
+                className="prop-list-additional-description MuiApi-collapsible"
                 key={key}
                 dangerouslySetInnerHTML={{
                   __html: t(`api-docs.additional-info.${key}`)!,
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/components.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/components.tsx
index 7f40d3ef3de5de..e3378e29556c53 100644
--- a/examples/base-ui-nextjs-tailwind-ts/src/app/components.tsx
+++ b/examples/base-ui-nextjs-tailwind-ts/src/app/components.tsx
@@ -24,7 +24,7 @@ const SelectButton = React.forwardRef(function SelectButton<
         height="24"
         viewBox="0 0 24 24"
         fill="none"
-        className="text-base absolute h-full top-0 right-1"
+        className="absolute right-1 top-0 h-full text-base"
       >
         <path d="m7 10 5 5 5-5H7z" />
       </svg>
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css b/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css
index 7621a618a6e407..521afd52d672f5 100644
--- a/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css
+++ b/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css
@@ -22,7 +22,7 @@
     }
 
     &.Mui-disabled {
-      @apply opacity-40 cursor-not-allowed;
+      @apply cursor-not-allowed opacity-40;
     }
   }
 }
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx
index baaca755f6a9e4..fab66a3ba3976d 100644
--- a/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx
+++ b/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx
@@ -4,20 +4,20 @@ import { Select, SelectOption, Slider } from './components';
 
 function Heading(props: { children: React.ReactNode }) {
   return (
-    <h2 className="font-bold text-gray-400 uppercase text-base mt-3 mb-2">{props.children}</h2>
+    <h2 className="mb-2 mt-3 text-base font-bold uppercase text-gray-400">{props.children}</h2>
   );
 }
 
 function Section(props: { children: React.ReactNode }) {
   return (
-    <div className="grid grid-cols-3 grid-rows-[40px] gap-x-16 items-center min-h-[40px] py-1.5 border-t-[1px] border-solid border-gray-700">
+    <div className="grid min-h-[40px] grid-cols-3 grid-rows-[40px] items-center gap-x-16 border-t-[1px] border-solid border-gray-700 py-1.5">
       {props.children}
     </div>
   );
 }
 
 function Label(props: { children: React.ReactNode }) {
-  return <h3 className="font-medium leading-none text-gray-300 col-span-2">{props.children}</h3>;
+  return <h3 className="col-span-2 font-medium leading-none text-gray-300">{props.children}</h3>;
 }
 
 const HOURS = [
@@ -49,8 +49,8 @@ const HOURS = [
 
 export default function Home() {
   return (
-    <main className="flex justify-center items-center w-full h-screen">
-      <div className="bg-[rgb(14,20,27)] rounded-lg p-6">
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="rounded-lg bg-[rgb(14,20,27)] p-6">
         <Heading>Night Mode</Heading>
         <Section>
           <Label>Schedule Night Mode</Label>
@@ -86,7 +86,7 @@ export default function Home() {
                 </SelectOption>
               ))}
             </Select>
-            <span className="text-gray-300 text-sm text-medium mx-2">and</span>
+            <span className="text-medium mx-2 text-sm text-gray-300">and</span>
             <Select defaultValue="6AM">
               {HOURS.map((hour) => (
                 <SelectOption key={`to-${hour}`} value={hour}>
diff --git a/examples/base-ui-vite-tailwind-ts/src/App.tsx b/examples/base-ui-vite-tailwind-ts/src/App.tsx
index a2085ff2abeb48..223f565c0c313a 100644
--- a/examples/base-ui-vite-tailwind-ts/src/App.tsx
+++ b/examples/base-ui-vite-tailwind-ts/src/App.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 export default function App() {
   return (
     <div className="p-8">
-      <h1 className="text-3xl font-semibold mb-4">
+      <h1 className="mb-4 text-3xl font-semibold">
         Base UI + Vite.js + Tailwind CSS in TypeScript
       </h1>
       <ul>
diff --git a/examples/base-ui-vite-tailwind/src/App.jsx b/examples/base-ui-vite-tailwind/src/App.jsx
index 8bd16d6d813f59..51b5745c68a209 100644
--- a/examples/base-ui-vite-tailwind/src/App.jsx
+++ b/examples/base-ui-vite-tailwind/src/App.jsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 export default function App() {
   return (
     <div className="p-8">
-      <h1 className="text-3xl font-semibold mb-4">Base UI + Vite.js + Tailwind CSS</h1>
+      <h1 className="mb-4 text-3xl font-semibold">Base UI + Vite.js + Tailwind CSS</h1>
       <ul>
         <li className="card">
           <a href="https://mui.com/base-ui/" className="link">
diff --git a/examples/base-ui-vite-tailwind/src/styles.css b/examples/base-ui-vite-tailwind/src/styles.css
index 244d8f1fd9ccdc..6f88183e3c903c 100644
--- a/examples/base-ui-vite-tailwind/src/styles.css
+++ b/examples/base-ui-vite-tailwind/src/styles.css
@@ -4,7 +4,7 @@
 
 @layer components {
   .card {
-    @apply max-w-[70ch] rounded-lg border border-gray-400 p-6 mb-6;
+    @apply mb-6 max-w-[70ch] rounded-lg border border-gray-400 p-6;
   }
 
   .link {
diff --git a/package.json b/package.json
index 5064656f224a13..64650bf8887aa9 100644
--- a/package.json
+++ b/package.json
@@ -185,6 +185,7 @@
     "piscina": "^4.7.0",
     "postcss-styled-syntax": "^0.7.0",
     "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
     "rimraf": "^6.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59cb919694c208..13e9aa23494179 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,9 @@ importers:
       prettier:
         specifier: ^3.4.2
         version: 3.4.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.9
+        version: 0.6.9(prettier@3.4.2)
       pretty-quick:
         specifier: ^4.0.0
         version: 4.0.0(prettier@3.4.2)
@@ -10835,6 +10838,61 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.6.9:
+    resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -23541,6 +23599,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.6.9(prettier@3.4.2):
+    dependencies:
+      prettier: 3.4.2
+
   prettier@2.8.8: {}
 
   prettier@3.3.3: {}
diff --git a/prettier.config.js b/prettier.config.js
index 136646bca909ee..6645b343abf4b4 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,7 +1,19 @@
+const plugins = [];
+
+// Not all projects in the org have docs for Tailwind CSS.
+try {
+  // eslint-disable-next-line
+  require('tailwindcss');
+  plugins.push('prettier-plugin-tailwindcss');
+} catch (err) {
+  // continue regardless of error
+}
+
 module.exports = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',
+  plugins: [...plugins],
   overrides: [
     {
       files: ['docs/**/*.md', 'docs/src/pages/**/*.{js,tsx}', 'docs/data/**/*.{js,tsx}'],
diff --git a/renovate.json b/renovate.json
index 4f9521026430c0..374d9202597d75 100644
--- a/renovate.json
+++ b/renovate.json
@@ -119,6 +119,10 @@
       "matchPaths": ["packages/mui-envinfo/test/package.json"],
       "matchPackagePatterns": ["@mui/*"],
       "enabled": false
+    },
+    {
+      "groupName": "Tailwind CSS",
+      "matchPackageNames": ["tailwindcss", "prettier-plugin-tailwindcss"]
     }
   ],
   "postUpdateOptions": ["pnpmDedupe"],

From 2e43d2a01b2fb30c734e830175f59be03f3fe6a9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 24 Dec 2024 23:17:09 +0100
Subject: [PATCH 2/4] fix prettier version

---
 .../babel-plugin-minify-errors/package.json   |  2 +-
 pnpm-lock.yaml                                | 37 +++++++++----------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages-internal/babel-plugin-minify-errors/package.json b/packages-internal/babel-plugin-minify-errors/package.json
index 0a3ccb588a0d8a..43e21249963abb 100644
--- a/packages-internal/babel-plugin-minify-errors/package.json
+++ b/packages-internal/babel-plugin-minify-errors/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/babel__helper-module-imports": "^7.18.3",
-    "babel-plugin-tester": "^11.0.4",
+    "babel-plugin-tester": "^12.0.0-canary.1",
     "chai": "^4.5.0"
   },
   "sideEffects": false,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13e9aa23494179..7939aa2d11e4e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -926,8 +926,8 @@ importers:
         specifier: ^7.18.3
         version: 7.18.3
       babel-plugin-tester:
-        specifier: ^11.0.4
-        version: 11.0.4(@babel/core@7.26.0)
+        specifier: ^12.0.0-canary.1
+        version: 12.0.0-canary.1(@babel/core@7.26.0)
       chai:
         specifier: ^4.5.0
         version: 4.5.0
@@ -6230,11 +6230,15 @@ packages:
   babel-plugin-react-remove-properties@0.3.0:
     resolution: {integrity: sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==}
 
-  babel-plugin-tester@11.0.4:
-    resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==}
-    engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0}
+  babel-plugin-tester@12.0.0-canary.1:
+    resolution: {integrity: sha512-Tfa4ojSEUD9vVk+eC/jIE/f5J0w73CO5ynPzmAXFSyxJ/8eTv1AzxEucnRdEvEZr2nXxZ2+3lTQH7a/NQuTugg==}
+    engines: {node: ^18.19.0 || ^20.10.0 || >=21.3.0}
     peerDependencies:
       '@babel/core': ^7.26.0
+      jest: '>=30 || >=30.0.0-alpha.2'
+    peerDependenciesMeta:
+      jest:
+        optional: true
 
   babel-plugin-transform-flow-enums@0.0.2:
     resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==}
@@ -6909,8 +6913,8 @@ packages:
     resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
     deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
 
-  core-js@3.32.1:
-    resolution: {integrity: sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==}
+  core-js@3.39.0:
+    resolution: {integrity: sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -10893,11 +10897,6 @@ packages:
       prettier-plugin-svelte:
         optional: true
 
-  prettier@2.8.8:
-    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
   prettier@3.3.3:
     resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
@@ -13515,7 +13514,7 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/register': 7.25.9(@babel/core@7.26.0)
       commander: 6.2.1
-      core-js: 3.32.1
+      core-js: 3.39.0
       node-environment-flags: 1.0.6
       regenerator-runtime: 0.14.0
       v8flags: 3.2.0
@@ -17875,13 +17874,13 @@ snapshots:
 
   babel-plugin-react-remove-properties@0.3.0: {}
 
-  babel-plugin-tester@11.0.4(@babel/core@7.26.0):
+  babel-plugin-tester@12.0.0-canary.1(@babel/core@7.26.0):
     dependencies:
       '@babel/core': 7.26.0
-      core-js: 3.32.1
+      core-js: 3.39.0
       debug: 4.3.7(supports-color@8.1.1)
       lodash.mergewith: 4.6.2
-      prettier: 2.8.8
+      prettier: 3.4.2
       strip-indent: 3.0.0
     transitivePeerDependencies:
       - supports-color
@@ -18662,7 +18661,7 @@ snapshots:
 
   core-js@2.6.12: {}
 
-  core-js@3.32.1: {}
+  core-js@3.39.0: {}
 
   core-util-is@1.0.3: {}
 
@@ -18930,7 +18929,7 @@ snapshots:
       async-retry: 1.2.3
       chalk: 2.4.2
       commander: 2.20.3
-      core-js: 3.32.1
+      core-js: 3.39.0
       debug: 4.3.7(supports-color@8.1.1)
       fast-json-patch: 3.1.1
       get-stdin: 6.0.0
@@ -23603,8 +23602,6 @@ snapshots:
     dependencies:
       prettier: 3.4.2
 
-  prettier@2.8.8: {}
-
   prettier@3.3.3: {}
 
   prettier@3.4.2: {}

From 563b857b5a152e0a0043a3f6ed210eeb2a09460c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 27 Dec 2024 17:47:36 +0100
Subject: [PATCH 3/4] Update prettier.config.js

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 prettier.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/prettier.config.js b/prettier.config.js
index 6645b343abf4b4..be008f03a09de5 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -4,6 +4,7 @@ const plugins = [];
 try {
   // eslint-disable-next-line
   require('tailwindcss');
+  // must be loaded last: https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#compatibility-with-other-prettier-plugins
   plugins.push('prettier-plugin-tailwindcss');
 } catch (err) {
   // continue regardless of error

From fa386f392d79ed2708fcf52fa4c35907f75dffe9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 27 Dec 2024 21:23:01 +0100
Subject: [PATCH 4/4] fix regression

---
 .../src/modules/components/ApiPage/list/ExpandableApiItem.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index 8434c2ac41bf15..4c8a50d5c07acd 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -188,7 +188,9 @@ export default function ExpandableApiItem(props: ExpandableApiItemProps) {
       ownerState={{ type }}
       {...other}
       className={clsx(
-        `MuiApi-item-root${isExtendable ? 'MuiApi-item-header-extendable' : ''}`,
+        // TODO remove once https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/337 is fixed
+        // prettier-ignore
+        `MuiApi-item-root${isExtendable ? ' MuiApi-item-header-extendable' : ''}`,
         className,
       )}
     >