From 258b778681daf67e53b6ed415f52d15a7b594a25 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <717550+brijeshb42@users.noreply.github.com>
Date: Fri, 3 Oct 2025 13:18:46 +0530
Subject: [PATCH] [code-infra] Fix prettier formatting of tailwind classes

Add the source tailwind v4 stylesheet and preserve whitespaces
---
 .../(private)/experiments/context-menu.tsx    | 54 +++++++++----------
 .../experiments/menu/complex-nesting.tsx      |  2 +-
 .../demos/hero/tailwind/index.tsx             |  4 +-
 .../toast/demos/hero/tailwind/index.tsx       |  2 +-
 .../toast/demos/position/tailwind/index.tsx   |  2 +-
 .../(public)/careers/design-engineer/page.tsx |  2 +-
 docs/src/components/Header.tsx                |  4 +-
 .../AttributesReferenceTable.tsx              | 10 ++--
 .../CssVariablesReferenceTable.tsx            | 10 ++--
 .../PropsReferenceAccordion.tsx               |  8 +--
 .../ReferenceTable/ReferenceTableTooltip.tsx  |  2 +-
 docs/src/mdx-components.tsx                   |  4 +-
 .../react/test/floating-ui-tests/Button.tsx   |  2 +-
 .../test/floating-ui-tests/EmojiPicker.tsx    |  6 +--
 .../react/test/floating-ui-tests/Menu.tsx     | 10 ++--
 .../floating-ui-tests/MenuOrientation.tsx     | 14 ++---
 .../test/floating-ui-tests/Navigation.tsx     |  6 +--
 .../react/test/floating-ui-tests/Popover.tsx  |  4 +-
 prettier.config.mjs                           |  1 +
 test/e2e/fixtures/slider/Inset.tsx            |  2 +-
 test/e2e/fixtures/slider/Range.tsx            |  4 +-
 test/e2e/fixtures/slider/RangeSliderMax.tsx   |  4 +-
 22 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/docs/src/app/(private)/experiments/context-menu.tsx b/docs/src/app/(private)/experiments/context-menu.tsx
index 61204b6e88..139493d8fb 100644
--- a/docs/src/app/(private)/experiments/context-menu.tsx
+++ b/docs/src/app/(private)/experiments/context-menu.tsx
@@ -18,15 +18,15 @@ export default function ContextMenuExperiment() {
         </p>
 
         <ContextMenu.Root>
-          <ContextMenu.Trigger className="rounded-lg border-2 border-blue-300 bg-blue-50 p-8">
+          <ContextMenu.Trigger className="border-blue-300 bg-blue-50 rounded-lg border-2 p-8">
             <div className="text-center">
-              <span className="block font-medium text-blue-700">Outer Context Menu</span>
-              <span className="block text-sm text-blue-600">Right-click me</span>
+              <span className="text-blue-700 block font-medium">Outer Context Menu</span>
+              <span className="text-blue-600 block text-sm">Right-click me</span>
 
               <ContextMenu.Root>
-                <ContextMenu.Trigger className="mt-4 inline-block rounded border-2 border-red-300 bg-red-50 p-4">
-                  <span className="block font-medium text-red-700">Inner Context Menu</span>
-                  <span className="block text-sm text-red-600">Right-click me too!</span>
+                <ContextMenu.Trigger className="border-red-300 bg-red-50 mt-4 inline-block rounded border-2 p-4">
+                  <span className="text-red-700 block font-medium">Inner Context Menu</span>
+                  <span className="text-red-600 block text-sm">Right-click me too!</span>
                 </ContextMenu.Trigger>
                 <ContextMenu.Portal>
                   <ContextMenu.Positioner className="outline-none">
@@ -72,19 +72,19 @@ export default function ContextMenuExperiment() {
         <p className="text-gray-600">Right-click on either box and explore the submenu options.</p>
 
         <ContextMenu.Root>
-          <ContextMenu.Trigger className="rounded-lg border-2 border-green-300 bg-green-50 p-8">
+          <ContextMenu.Trigger className="border-green-300 bg-green-50 rounded-lg border-2 p-8">
             <div className="text-center">
-              <span className="block font-medium text-green-700">
+              <span className="text-green-700 block font-medium">
                 Outer Context Menu with Submenu
               </span>
-              <span className="block text-sm text-green-600">Right-click me</span>
+              <span className="text-green-600 block text-sm">Right-click me</span>
 
               <ContextMenu.Root>
-                <ContextMenu.Trigger className="mt-4 inline-block rounded border-2 border-purple-300 bg-purple-50 p-4">
-                  <span className="block font-medium text-purple-700">
+                <ContextMenu.Trigger className="border-purple-300 bg-purple-50 mt-4 inline-block rounded border-2 p-4">
+                  <span className="text-purple-700 block font-medium">
                     Inner Context Menu with Submenu
                   </span>
-                  <span className="block text-sm text-purple-600">Right-click me too!</span>
+                  <span className="text-purple-600 block text-sm">Right-click me too!</span>
                 </ContextMenu.Trigger>
                 <ContextMenu.Portal>
                   <ContextMenu.Positioner className="outline-none">
@@ -166,10 +166,10 @@ export default function ContextMenuExperiment() {
         </p>
 
         <ContextMenu.Root>
-          <ContextMenu.Trigger className="rounded-lg border-2 border-orange-300 bg-orange-50 p-8">
+          <ContextMenu.Trigger className="border-orange-300 bg-orange-50 rounded-lg border-2 p-8">
             <div className="text-center">
-              <span className="block font-medium text-orange-700">Complex Context Menu</span>
-              <span className="block text-sm text-orange-600">
+              <span className="text-orange-700 block font-medium">Complex Context Menu</span>
+              <span className="text-orange-600 block text-sm">
                 Right-click me, then right-click "Special Item"
               </span>
             </div>
@@ -229,7 +229,7 @@ export default function ContextMenuExperiment() {
                                   Deep Action 2
                                 </Menu.Item>
                                 <Menu.Separator className="my-1 h-px bg-gray-200" />
-                                <Menu.Item className="cursor-default px-3 py-2 text-sm text-red-600 hover:bg-gray-100">
+                                <Menu.Item className="text-red-600 cursor-default px-3 py-2 text-sm hover:bg-gray-100">
                                   Deep Delete
                                 </Menu.Item>
                               </Menu.Popup>
@@ -238,7 +238,7 @@ export default function ContextMenuExperiment() {
                         </Menu.SubmenuRoot>
 
                         <ContextMenu.Separator className="my-1 h-px bg-gray-200" />
-                        <ContextMenu.Item className="cursor-default px-3 py-2 text-sm text-red-600 hover:bg-gray-100">
+                        <ContextMenu.Item className="text-red-600 cursor-default px-3 py-2 text-sm hover:bg-gray-100">
                           Nested Delete
                         </ContextMenu.Item>
                       </ContextMenu.Popup>
@@ -247,7 +247,7 @@ export default function ContextMenuExperiment() {
                 </ContextMenu.Root>
 
                 <ContextMenu.Separator className="my-1 h-px bg-gray-200" />
-                <ContextMenu.Item className="cursor-default px-3 py-2 text-sm text-red-600 hover:bg-gray-100">
+                <ContextMenu.Item className="text-red-600 cursor-default px-3 py-2 text-sm hover:bg-gray-100">
                   Delete
                 </ContextMenu.Item>
               </ContextMenu.Popup>
@@ -268,16 +268,16 @@ export default function ContextMenuExperiment() {
         </p>
 
         <ContextMenu.Root>
-          <ContextMenu.Trigger className="rounded-lg border-2 border-cyan-300 bg-cyan-50 p-8">
+          <ContextMenu.Trigger className="border-cyan-300 bg-cyan-50 rounded-lg border-2 p-8">
             <div className="text-center">
-              <span className="block font-medium text-cyan-700">Outer Context Menu</span>
-              <span className="block text-sm text-cyan-600">Right-click me</span>
+              <span className="text-cyan-700 block font-medium">Outer Context Menu</span>
+              <span className="text-cyan-600 block text-sm">Right-click me</span>
 
               <ContextMenu.Root>
-                <ContextMenu.Trigger className="mt-4 flex flex-col items-center justify-center rounded-lg border-2 border-cyan-300 bg-cyan-50 p-8">
+                <ContextMenu.Trigger className="border-cyan-300 bg-cyan-50 mt-4 flex flex-col items-center justify-center rounded-lg border-2 p-8">
                   <div className="text-center">
-                    <span className="block font-medium text-cyan-700">Inner Context Menu</span>
-                    <span className="block text-sm text-cyan-600">Right-click me</span>
+                    <span className="text-cyan-700 block font-medium">Inner Context Menu</span>
+                    <span className="text-cyan-600 block text-sm">Right-click me</span>
 
                     <Popover.Root>
                       <Popover.Trigger className="mt-2 flex items-center justify-center rounded-md border border-gray-200 bg-gray-50 p-4 text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100">
@@ -303,11 +303,11 @@ export default function ContextMenuExperiment() {
                               </Menu.Root>
 
                               <ContextMenu.Root>
-                                <ContextMenu.Trigger className="mt-4 inline-block rounded border-2 border-red-300 bg-red-50 p-4">
-                                  <span className="block font-medium text-red-700">
+                                <ContextMenu.Trigger className="border-red-300 bg-red-50 mt-4 inline-block rounded border-2 p-4">
+                                  <span className="text-red-700 block font-medium">
                                     Popover Context Menu
                                   </span>
-                                  <span className="block text-sm text-red-600">
+                                  <span className="text-red-600 block text-sm">
                                     Right-click me!
                                   </span>
                                 </ContextMenu.Trigger>
diff --git a/docs/src/app/(private)/experiments/menu/complex-nesting.tsx b/docs/src/app/(private)/experiments/menu/complex-nesting.tsx
index 833aa863c0..cb76982205 100644
--- a/docs/src/app/(private)/experiments/menu/complex-nesting.tsx
+++ b/docs/src/app/(private)/experiments/menu/complex-nesting.tsx
@@ -115,7 +115,7 @@ export default function MenuComplexNestingExperiment() {
                           <Dialog.Close className="rounded px-4 py-2 text-gray-600 hover:bg-gray-100">
                             Cancel
                           </Dialog.Close>
-                          <Dialog.Close className="rounded bg-blue-600 px-4 py-2 hover:bg-blue-700">
+                          <Dialog.Close className="bg-blue-600 hover:bg-blue-700 rounded px-4 py-2">
                             Save
                           </Dialog.Close>
                         </div>
diff --git a/docs/src/app/(public)/(content)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 6ed065f7bd..86cf549677 100644
--- a/docs/src/app/(public)/(content)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="xs:grid-cols-[12rem_12rem] grid list-none grid-cols-1 gap-0">
+            <ul className="grid list-none grid-cols-1 gap-0 xs:grid-cols-[12rem_12rem]">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
@@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] xs:w-[var(--popup-width)] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-[var(--popup-width)] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
             <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180">
               <ArrowSvg />
             </NavigationMenu.Arrow>
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx
index b653081ae8..4fb325a19a 100644
--- a/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="focus-visible:outline-blue box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 active:bg-gray-100"
+      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
       onClick={createToast}
     >
       Create toast
diff --git a/docs/src/app/(public)/(content)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/toast/demos/position/tailwind/index.tsx
index cd4c437388..5cf7409181 100644
--- a/docs/src/app/(public)/(content)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(public)/(content)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="focus-visible:outline-blue box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 active:bg-gray-100"
+      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-medium text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
       onClick={createToast}
     >
       Create toast
diff --git a/docs/src/app/(public)/careers/design-engineer/page.tsx b/docs/src/app/(public)/careers/design-engineer/page.tsx
index 7902c57e64..a10846a0f6 100644
--- a/docs/src/app/(public)/careers/design-engineer/page.tsx
+++ b/docs/src/app/(public)/careers/design-engineer/page.tsx
@@ -11,7 +11,7 @@ export default function Homepage() {
       <Header />
       <div className="ContentLayoutMain">
         <h1 className="mb-4 text-3xl font-bold text-balance">Design Engineer</h1>
-        <p className="text-gray -mt-2 mb-5 text-lg text-pretty">
+        <p className="-mt-2 mb-5 text-lg text-pretty text-gray">
           Help us make Base UI the most intuitive, accessible, and powerful open-source UI library
           for React.
         </p>
diff --git a/docs/src/components/Header.tsx b/docs/src/components/Header.tsx
index 3416e9dfe7..7f91f01bae 100644
--- a/docs/src/components/Header.tsx
+++ b/docs/src/components/Header.tsx
@@ -17,7 +17,7 @@ export function Header() {
         <NextLink href="/" className="HeaderLogoLink">
           <Logo aria-label="Base UI" />
         </NextLink>
-        <div className="max-show-side-nav:hidden flex gap-6">
+        <div className="flex gap-6 max-show-side-nav:hidden">
           <a
             className="HeaderLink"
             href="https://www.npmjs.com/package/@base-ui-components/react"
@@ -31,7 +31,7 @@ export function Header() {
             GitHub
           </a>
         </div>
-        <div className="show-side-nav:hidden flex">
+        <div className="flex show-side-nav:hidden">
           <MobileNav.Root>
             <MobileNav.Trigger className="HeaderButton">
               <span className="flex w-4 flex-col items-center gap-1">
diff --git a/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx b/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx
index 6a43f3898c..9003352d49 100644
--- a/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx
+++ b/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx
@@ -48,7 +48,7 @@ export async function AttributesReferenceTable({ data, ...props }: AttributesRef
                 </svg>
               </Accordion.Trigger>
               <Accordion.Panel>
-                <Accordion.Content className="text-md flex flex-col gap-3 p-4 text-pretty">
+                <Accordion.Content className="flex flex-col gap-3 p-4 text-md text-pretty">
                   <AttributeDescription />
                 </Accordion.Content>
               </Accordion.Panel>
@@ -56,18 +56,18 @@ export async function AttributesReferenceTable({ data, ...props }: AttributesRef
           );
         })}
       </Accordion.Root>
-      <Table.Root {...props} className={clsx('xs:block hidden', props.className)}>
+      <Table.Root {...props} className={clsx('hidden xs:block', props.className)}>
         <Table.Head>
           <Table.Row>
             {/* widths must match the props table grid layout */}
-            <Table.ColumnHeader className="xs:w-48 w-full sm:w-56 md:w-[calc(5/16.5*100%)]">
+            <Table.ColumnHeader className="w-full xs:w-48 sm:w-56 md:w-[calc(5/16.5*100%)]">
               Attribute
             </Table.ColumnHeader>
             <Table.ColumnHeader className="xs:w-2/3 md:w-[calc(11.5/16.5*100%)]">
-              <div className="xs:not-sr-only xs:contents sr-only">Description</div>
+              <div className="sr-only xs:not-sr-only xs:contents">Description</div>
             </Table.ColumnHeader>
             {/* A cell to maintain a layout consistent with the props table */}
-            <Table.ColumnHeader className="max-xs:hidden w-10" aria-hidden role="presentation" />
+            <Table.ColumnHeader className="w-10 max-xs:hidden" aria-hidden role="presentation" />
           </Table.Row>
         </Table.Head>
         <Table.Body>
diff --git a/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx b/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx
index 8ac95fec04..c6d47b04e6 100644
--- a/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx
+++ b/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx
@@ -51,7 +51,7 @@ export async function CssVariablesReferenceTable({
                 </svg>
               </Accordion.Trigger>
               <Accordion.Panel>
-                <Accordion.Content className="text-md flex flex-col gap-3 p-4 text-pretty">
+                <Accordion.Content className="flex flex-col gap-3 p-4 text-md text-pretty">
                   <AttributeDescription />
                 </Accordion.Content>
               </Accordion.Panel>
@@ -60,18 +60,18 @@ export async function CssVariablesReferenceTable({
         })}
       </Accordion.Root>
 
-      <Table.Root {...props} className={clsx('xs:block hidden', props.className)}>
+      <Table.Root {...props} className={clsx('hidden xs:block', props.className)}>
         <Table.Head>
           <Table.Row>
             {/* widths must match the props table grid layout */}
-            <Table.ColumnHeader className="xs:w-48 w-full sm:w-56 md:w-[calc(5/16.5*100%)]">
+            <Table.ColumnHeader className="w-full xs:w-48 sm:w-56 md:w-[calc(5/16.5*100%)]">
               CSS Variable
             </Table.ColumnHeader>
             <Table.ColumnHeader className="xs:w-2/3 md:w-[calc(11.5/16.5*100%)]">
-              <div className="xs:not-sr-only xs:contents sr-only">Description</div>
+              <div className="sr-only xs:not-sr-only xs:contents">Description</div>
             </Table.ColumnHeader>
             {/* A cell to maintain a layout consistent with the props table */}
-            <Table.ColumnHeader className="max-xs:hidden w-10" aria-hidden role="presentation" />
+            <Table.ColumnHeader className="w-10 max-xs:hidden" aria-hidden role="presentation" />
           </Table.Row>
         </Table.Head>
         <Table.Body>
diff --git a/docs/src/components/ReferenceTable/PropsReferenceAccordion.tsx b/docs/src/components/ReferenceTable/PropsReferenceAccordion.tsx
index 7b6a783b5b..347dbc9fa1 100644
--- a/docs/src/components/ReferenceTable/PropsReferenceAccordion.tsx
+++ b/docs/src/components/ReferenceTable/PropsReferenceAccordion.tsx
@@ -176,13 +176,13 @@ export async function PropsReferenceAccordion({
               className={clsx('min-h-min scroll-mt-12 p-0 md:scroll-mt-0', TRIGGER_GRID_LAYOUT)}
             >
               <Accordion.Scrollable className="px-3">
-                <TableCode className="text-navy whitespace-nowrap">
+                <TableCode className="whitespace-nowrap text-navy">
                   {name}
                   {prop.required ? <sup className="top-[-0.3em] text-xs text-red-800">*</sup> : ''}
                 </TableCode>
               </Accordion.Scrollable>
               {prop.type && (
-                <Accordion.Scrollable className="max-xs:hidden flex items-baseline px-3 text-sm leading-none break-keep whitespace-nowrap">
+                <Accordion.Scrollable className="flex items-baseline px-3 text-sm leading-none break-keep whitespace-nowrap max-xs:hidden">
                   {hasExpandedType || detailedType ? (
                     <ReferenceTableTooltip.Root delay={300} hoverable={false}>
                       <ReferenceTableTooltip.Trigger render={<ShortPropType />} />
@@ -202,7 +202,7 @@ export async function PropsReferenceAccordion({
                   <PropDefault />
                 )}
               </Accordion.Scrollable>
-              <div className="max-xs:ml-auto max-xs:mr-3 flex justify-center">
+              <div className="flex justify-center max-xs:mr-3 max-xs:ml-auto">
                 <svg
                   className="AccordionIcon translate-y-px"
                   width="10"
@@ -218,7 +218,7 @@ export async function PropsReferenceAccordion({
             <Accordion.Panel>
               <Accordion.Content>
                 <DescriptionList.Root
-                  className={clsx('max-xs:py-3 text-gray-600', PANEL_GRID_LAYOUT)}
+                  className={clsx('text-gray-600 max-xs:py-3', PANEL_GRID_LAYOUT)}
                   aria-label="Info"
                 >
                   <DescriptionList.Item>
diff --git a/docs/src/components/ReferenceTable/ReferenceTableTooltip.tsx b/docs/src/components/ReferenceTable/ReferenceTableTooltip.tsx
index 5b129e884d..ba54379a42 100644
--- a/docs/src/components/ReferenceTable/ReferenceTableTooltip.tsx
+++ b/docs/src/components/ReferenceTable/ReferenceTableTooltip.tsx
@@ -21,7 +21,7 @@ export function Popup({ children, ...props }: Tooltip.Popup.Props) {
         collisionPadding={16}
       >
         <Tooltip.Popup
-          render={<BasePopup className="text-md overflow-visible px-3 py-2" />}
+          render={<BasePopup className="overflow-visible px-3 py-2 text-md" />}
           {...props}
         >
           <div className="flex max-w-120 flex-col gap-3 text-pretty">{children}</div>
diff --git a/docs/src/mdx-components.tsx b/docs/src/mdx-components.tsx
index 8a9c2c0d50..639ae71aa5 100644
--- a/docs/src/mdx-components.tsx
+++ b/docs/src/mdx-components.tsx
@@ -32,7 +32,7 @@ export const mdxComponents: MDXComponents = {
   h2: ({ children, id, ...otherProps }) => {
     return (
       <h2
-        className="show-side-nav:scroll-mt-6 mt-10 mb-4 scroll-mt-18 text-xl font-medium text-balance"
+        className="mt-10 mb-4 scroll-mt-18 text-xl font-medium text-balance show-side-nav:scroll-mt-6"
         id={id}
         {...otherProps}
       >
@@ -43,7 +43,7 @@ export const mdxComponents: MDXComponents = {
   h3: ({ children, id, ...otherProps }) => {
     return (
       <h3
-        className="show-side-nav:scroll-mt-6 mt-8 mb-1.5 scroll-mt-18 text-lg font-medium text-balance"
+        className="mt-8 mb-1.5 scroll-mt-18 text-lg font-medium text-balance show-side-nav:scroll-mt-6"
         id={id}
         {...otherProps}
       >
diff --git a/packages/react/test/floating-ui-tests/Button.tsx b/packages/react/test/floating-ui-tests/Button.tsx
index 00baf3f441..9e0b24658c 100644
--- a/packages/react/test/floating-ui-tests/Button.tsx
+++ b/packages/react/test/floating-ui-tests/Button.tsx
@@ -13,7 +13,7 @@ export const Button = React.forwardRef<
       ref={ref}
       className={c(
         props.className,
-        'rounded bg-slate-200/90 p-2 px-3 transition-colors hover:bg-slate-200/50 data-[open]:bg-slate-200/50',
+        'bg-slate-200/90 hover:bg-slate-200/50 data-[open]:bg-slate-200/50 rounded p-2 px-3 transition-colors',
       )}
     />
   );
diff --git a/packages/react/test/floating-ui-tests/EmojiPicker.tsx b/packages/react/test/floating-ui-tests/EmojiPicker.tsx
index bc500fedf7..0d3b1b2560 100644
--- a/packages/react/test/floating-ui-tests/EmojiPicker.tsx
+++ b/packages/react/test/floating-ui-tests/EmojiPicker.tsx
@@ -192,7 +192,7 @@ export function Main() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Emoji Picker</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <div className="text-center">
           <Button
             ref={refs.setReference}
@@ -221,13 +221,13 @@ export function Main() {
               <FloatingFocusManager context={context} modal={false}>
                 <div
                   ref={refs.setFloating}
-                  className="rounded-lg border border-slate-900/10 bg-white/70 bg-clip-padding p-4 shadow-md backdrop-blur-sm"
+                  className="border-slate-900/10 rounded-lg border bg-white/70 bg-clip-padding p-4 shadow-md backdrop-blur-sm"
                   style={floatingStyles}
                   {...getFloatingProps(getListFloatingProps())}
                 >
                   <span className="text-sm uppercase opacity-40">Emoji Picker</span>
                   <input
-                    className="my-2 block w-36 rounded border border-slate-300 p-1 outline-none focus:border-blue-600"
+                    className="border-slate-300 focus:border-blue-600 my-2 block w-36 rounded border p-1 outline-none"
                     placeholder="Search emoji"
                     value={search}
                     aria-controls={filteredEmojis.length === 0 ? noResultsId : undefined}
diff --git a/packages/react/test/floating-ui-tests/Menu.tsx b/packages/react/test/floating-ui-tests/Menu.tsx
index 2da2e39d66..1c2c20cd6a 100644
--- a/packages/react/test/floating-ui-tests/Menu.tsx
+++ b/packages/react/test/floating-ui-tests/Menu.tsx
@@ -213,9 +213,9 @@ export const MenuComponent = React.forwardRef<
         className={c(
           props.className || 'flex items-center justify-between gap-4 rounded px-2 py-1 text-left',
           {
-            'outline-none focus:bg-blue-500 focus:text-white': isNested,
+            'focus:bg-blue-500 outline-none focus:text-white': isNested,
             'bg-blue-500 text-white': isOpen && isNested && !hasFocusInside,
-            'rounded bg-slate-200 px-2 py-1': isNested && isOpen && hasFocusInside,
+            'bg-slate-200 rounded px-2 py-1': isNested && isOpen && hasFocusInside,
             'bg-slate-200': !isNested && isOpen,
           },
         )}
@@ -268,7 +268,7 @@ export const MenuComponent = React.forwardRef<
                 <div
                   ref={refs.setFloating}
                   className={c(
-                    'rounded border border-slate-900/10 bg-white bg-clip-padding p-1 shadow-lg outline-none',
+                    'border-slate-900/10 rounded border bg-white bg-clip-padding p-1 shadow-lg outline-none',
                     {
                       'flex flex-col': !cols,
                     },
@@ -321,7 +321,7 @@ export const MenuItem = React.forwardRef<
       disabled={disabled}
       tabIndex={isActive ? 0 : -1}
       className={c(
-        'flex rounded px-2 py-1 text-left outline-none focus:bg-blue-500 focus:text-white',
+        'focus:bg-blue-500 flex rounded px-2 py-1 text-left outline-none focus:text-white',
         { 'opacity-40': disabled },
       )}
       {...menu.getItemProps({
@@ -387,7 +387,7 @@ export function Main() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Menu</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <Menu label="Edit">
           <MenuItem label="Undo" onClick={() => console.log('Undo')} />
           <MenuItem label="Redo" />
diff --git a/packages/react/test/floating-ui-tests/MenuOrientation.tsx b/packages/react/test/floating-ui-tests/MenuOrientation.tsx
index 7a66cb934b..1ae047a032 100644
--- a/packages/react/test/floating-ui-tests/MenuOrientation.tsx
+++ b/packages/react/test/floating-ui-tests/MenuOrientation.tsx
@@ -204,9 +204,9 @@ export const MenuComponent = React.forwardRef<
         className={c(
           props.className || 'flex items-center justify-between gap-4 rounded px-2 py-1 text-left',
           {
-            'outline-none focus:bg-blue-500 focus:text-white': isNested,
+            'focus:bg-blue-500 outline-none focus:text-white': isNested,
             'bg-blue-500 text-white': isOpen && isNested && !hasFocusInside,
-            'rounded bg-slate-200 px-2 py-1': isNested && isOpen && hasFocusInside,
+            'bg-slate-200 rounded px-2 py-1': isNested && isOpen && hasFocusInside,
             'bg-slate-200': !isNested && isOpen,
           },
         )}
@@ -260,7 +260,7 @@ export const MenuComponent = React.forwardRef<
                 <div
                   ref={refs.setFloating}
                   className={c(
-                    'rounded border border-slate-900/10 bg-white bg-clip-padding p-1 shadow-lg outline-none',
+                    'border-slate-900/10 rounded border bg-white bg-clip-padding p-1 shadow-lg outline-none',
                     {
                       'flex flex-col': !cols && orientation !== 'horizontal',
                     },
@@ -316,7 +316,7 @@ export const MenuItem = React.forwardRef<
       disabled={disabled}
       tabIndex={isActive ? 0 : -1}
       className={c(
-        'flex rounded px-2 py-1 text-left outline-none focus:bg-blue-500 focus:text-white',
+        'focus:bg-blue-500 flex rounded px-2 py-1 text-left outline-none focus:text-white',
         { 'opacity-40': disabled },
       )}
       {...menu.getItemProps({
@@ -381,7 +381,7 @@ export function HorizontalMenu() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Horizontal menu</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <Menu label="Edit" orientation="horizontal">
           <MenuItem
             label="Undo"
@@ -418,7 +418,7 @@ export function VerticalMenu() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Vertical menu</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <Menu label="Edit">
           <MenuItem
             label="Undo"
@@ -455,7 +455,7 @@ export function HorizontalMenuWithHorizontalSubmenus() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Horizontal menu with horizontal submenus</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <Menu label="Edit" orientation="horizontal">
           <MenuItem
             label="Undo"
diff --git a/packages/react/test/floating-ui-tests/Navigation.tsx b/packages/react/test/floating-ui-tests/Navigation.tsx
index fbc978bd3b..dabdc7b860 100644
--- a/packages/react/test/floating-ui-tests/Navigation.tsx
+++ b/packages/react/test/floating-ui-tests/Navigation.tsx
@@ -78,7 +78,7 @@ export const NavigationItem = React.forwardRef<
         <a
           href={href}
           ref={mergedReferenceRef}
-          className="my-1 flex w-48 items-center justify-between rounded bg-slate-100 p-2"
+          className="bg-slate-100 my-1 flex w-48 items-center justify-between rounded p-2"
           {...getReferenceProps(props)}
         >
           {label}
@@ -90,7 +90,7 @@ export const NavigationItem = React.forwardRef<
             <div
               data-testid="subnavigation"
               ref={refs.setFloating}
-              className="flex flex-col overflow-y-auto rounded bg-slate-100 px-4 py-2 backdrop-blur-sm outline-none"
+              className="bg-slate-100 flex flex-col overflow-y-auto rounded px-4 py-2 backdrop-blur-sm outline-none"
               style={floatingStyles}
               {...getFloatingProps()}
             >
@@ -124,7 +124,7 @@ export function Main() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Navigation</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <Navigation>
           <NavigationItem label="Home" href="#" />
           <NavigationItem label="Product" href="#">
diff --git a/packages/react/test/floating-ui-tests/Popover.tsx b/packages/react/test/floating-ui-tests/Popover.tsx
index b62120d83c..1eb41acc74 100644
--- a/packages/react/test/floating-ui-tests/Popover.tsx
+++ b/packages/react/test/floating-ui-tests/Popover.tsx
@@ -26,7 +26,7 @@ export function Main() {
   return (
     <React.Fragment>
       <h1 className="mb-8 text-5xl font-bold">Popover</h1>
-      <div className="mb-4 grid h-[20rem] place-items-center rounded border border-slate-400 lg:w-[40rem]">
+      <div className="border-slate-400 mb-4 grid h-[20rem] place-items-center rounded border lg:w-[40rem]">
         <Popover
           modal
           bubbles
@@ -148,7 +148,7 @@ function PopoverComponent({
         {open && (
           <FloatingFocusManager context={context} modal={modal}>
             <div
-              className="rounded border border-slate-900/10 bg-white bg-clip-padding px-4 py-6 shadow-md"
+              className="border-slate-900/10 rounded border bg-white bg-clip-padding px-4 py-6 shadow-md"
               ref={refs.setFloating}
               style={floatingStyles}
               aria-labelledby={labelId}
diff --git a/prettier.config.mjs b/prettier.config.mjs
index c21d469008..7d37acdd60 100644
--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -4,5 +4,6 @@ const base = createBaseConfig();
 
 export default {
   ...base,
+  tailwindStylesheet: 'docs/src/styles.css',
   plugins: ['prettier-plugin-tailwindcss'],
 };
diff --git a/test/e2e/fixtures/slider/Inset.tsx b/test/e2e/fixtures/slider/Inset.tsx
index 34576d5ee4..faa9aae2a9 100644
--- a/test/e2e/fixtures/slider/Inset.tsx
+++ b/test/e2e/fixtures/slider/Inset.tsx
@@ -7,7 +7,7 @@ export default function InsetSlider() {
       <Slider.Control className="relative flex h-[20px] w-[120px] touch-none items-center bg-gray-200 select-none">
         <Slider.Thumb
           data-testid="thumb"
-          className="bg-red size-[20px] rounded-full outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          className="size-[20px] rounded-full bg-red outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
         />
       </Slider.Control>
       <Slider.Value data-testid="output" />
diff --git a/test/e2e/fixtures/slider/Range.tsx b/test/e2e/fixtures/slider/Range.tsx
index 827de91e62..bf39553155 100644
--- a/test/e2e/fixtures/slider/Range.tsx
+++ b/test/e2e/fixtures/slider/Range.tsx
@@ -7,11 +7,11 @@ export default function RangeSlider() {
       <Slider.Control className="relative flex h-[20px] w-[100px] touch-none items-center bg-gray-200 select-none">
         <Slider.Thumb
           index={0}
-          className="bg-red size-[20px] rounded-full outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          className="size-[20px] rounded-full bg-red outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
         />
         <Slider.Thumb
           index={1}
-          className="bg-blue size-[20px] rounded-full outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          className="size-[20px] rounded-full bg-blue outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
         />
       </Slider.Control>
       <Slider.Value data-testid="output" />
diff --git a/test/e2e/fixtures/slider/RangeSliderMax.tsx b/test/e2e/fixtures/slider/RangeSliderMax.tsx
index 48ba2d2bff..4c94b47800 100644
--- a/test/e2e/fixtures/slider/RangeSliderMax.tsx
+++ b/test/e2e/fixtures/slider/RangeSliderMax.tsx
@@ -7,11 +7,11 @@ export default function RangeSliderMax() {
       <Slider.Control className="relative flex h-[20px] w-[100px] touch-none items-center bg-gray-200 select-none">
         <Slider.Thumb
           index={0}
-          className="bg-red size-[20px] rounded-full outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          className="size-[20px] rounded-full bg-red outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
         />
         <Slider.Thumb
           index={1}
-          className="bg-blue size-[20px] rounded-full outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+          className="size-[20px] rounded-full bg-blue outline outline-1 outline-gray-300 select-none has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
         />
       </Slider.Control>
       <Slider.Value data-testid="output" />