[code-infra] Fix prettier formatting of tailwind classes

Add the source tailwind v4 stylesheet and preserve whitespaces

Author: brijeshb42

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>

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>

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>

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

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

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>

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">

docs/src/components/ReferenceTable/AttributesReferenceTable.tsx

@@ -48,26 +48,26 @@ 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>
             </Accordion.Item>
           );
         })}
       </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>

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>

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>