From a5491f73862c3b18824546dc281d1b133876e285 Mon Sep 17 00:00:00 2001
From: Ryan Leichty <ryan.leichty@gmail.com>
Date: Mon, 6 May 2024 13:34:30 -0500
Subject: [PATCH 1/2] Update arbitrary classes

Updated a number of redundant arbitrary classes with native Tailwind classes. There were a number of inconsistencies that I noticed when using the Tailwind examples as a starting place, so this smoothes things out.

It might be worth considering adding the Radix design system within the Tailwind config files versus using arbitrary values for everything. I found a number of old design system values, but wasn't 100% positive which were used for the primitives when they were first created.
---
 .../demos/AlertDialog/tailwind/index.jsx      | 10 +--
 .../demos/AspectRatio/tailwind/index.jsx      |  2 +-
 components/demos/Avatar/tailwind/index.jsx    | 16 ++--
 components/demos/Checkbox/tailwind/index.jsx  |  2 +-
 .../demos/Collapsible/tailwind/index.jsx      | 12 +--
 .../demos/ContextMenu/tailwind/index.jsx      | 30 +++----
 components/demos/Dialog/tailwind/index.jsx    | 14 ++--
 .../demos/DropdownMenu/tailwind/index.jsx     | 44 +++++-----
 components/demos/Form/tailwind/index.jsx      | 16 ++--
 components/demos/HoverCard/tailwind/index.jsx | 18 ++---
 components/demos/Label/tailwind/index.jsx     |  2 +-
 components/demos/Menubar/tailwind/index.jsx   | 80 +++++++++----------
 .../demos/NavigationMenu/tailwind/index.jsx   | 28 +++----
 components/demos/Popover/tailwind/index.jsx   |  4 +-
 components/demos/Progress/tailwind/index.jsx  |  2 +-
 .../demos/RadioGroup/tailwind/index.jsx       | 12 +--
 .../demos/ScrollArea/tailwind/index.jsx       |  6 +-
 components/demos/Select/tailwind/index.jsx    |  4 +-
 components/demos/Slider/tailwind/index.jsx    |  2 +-
 components/demos/Switch/tailwind/index.jsx    |  2 +-
 components/demos/Toast/tailwind/index.jsx     |  4 +-
 components/demos/Toggle/tailwind/index.jsx    |  2 +-
 .../demos/ToggleGroup/tailwind/index.jsx      |  2 +-
 components/demos/Toolbar/tailwind/index.jsx   |  8 +-
 components/demos/Tooltip/tailwind/index.jsx   |  4 +-
 25 files changed, 163 insertions(+), 163 deletions(-)

diff --git a/components/demos/AlertDialog/tailwind/index.jsx b/components/demos/AlertDialog/tailwind/index.jsx
index 2e1fafb63..3b3cb2fc1 100644
--- a/components/demos/AlertDialog/tailwind/index.jsx
+++ b/components/demos/AlertDialog/tailwind/index.jsx
@@ -4,28 +4,28 @@ import * as AlertDialog from '@radix-ui/react-alert-dialog';
 const AlertDialogDemo = () => (
   <AlertDialog.Root>
     <AlertDialog.Trigger asChild>
-      <button className="text-violet11 hover:bg-mauve3 shadow-blackA4 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+      <button className="text-violet11 hover:bg-mauve3 shadow-blackA4 inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
         Delete account
       </button>
     </AlertDialog.Trigger>
     <AlertDialog.Portal>
       <AlertDialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
-      <AlertDialog.Content className="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
+      <AlertDialog.Content className="data-[state=open]:animate-contentShow fixed top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
         <AlertDialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
           Are you absolutely sure?
         </AlertDialog.Title>
-        <AlertDialog.Description className="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
+        <AlertDialog.Description className="text-mauve11 mt-[15px] mb-5 text-[15px] leading-normal">
           This action cannot be undone. This will permanently delete your account and remove your
           data from our servers.
         </AlertDialog.Description>
         <div className="flex justify-end gap-[25px]">
           <AlertDialog.Cancel asChild>
-            <button className="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+            <button className="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
               Cancel
             </button>
           </AlertDialog.Cancel>
           <AlertDialog.Action asChild>
-            <button className="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+            <button className="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
               Yes, delete account
             </button>
           </AlertDialog.Action>
diff --git a/components/demos/AspectRatio/tailwind/index.jsx b/components/demos/AspectRatio/tailwind/index.jsx
index b26d6775f..baff0cc6d 100644
--- a/components/demos/AspectRatio/tailwind/index.jsx
+++ b/components/demos/AspectRatio/tailwind/index.jsx
@@ -5,7 +5,7 @@ const AspectRatioDemo = () => (
   <div className="shadow-blackA4 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
     <AspectRatio.Root ratio={16 / 9}>
       <img
-        className="h-full w-full object-cover"
+        className="size-full object-cover"
         src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
         alt="Landscape photograph by Tobias Tullius"
       />
diff --git a/components/demos/Avatar/tailwind/index.jsx b/components/demos/Avatar/tailwind/index.jsx
index 2d01aee64..e3d8b431b 100644
--- a/components/demos/Avatar/tailwind/index.jsx
+++ b/components/demos/Avatar/tailwind/index.jsx
@@ -3,34 +3,34 @@ import * as Avatar from '@radix-ui/react-avatar';
 
 const AvatarDemo = () => (
   <div className="flex gap-5">
-    <Avatar.Root className="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
+    <Avatar.Root className="bg-blackA1 inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
       <Avatar.Image
-        className="h-full w-full rounded-[inherit] object-cover"
+        className="size-full rounded-[inherit] object-cover"
         src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
         alt="Colm Tuite"
       />
       <Avatar.Fallback
-        className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
+        className="text-violet11 leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium"
         delayMs={600}
       >
         CT
       </Avatar.Fallback>
     </Avatar.Root>
-    <Avatar.Root className="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
+    <Avatar.Root className="bg-blackA1 inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
       <Avatar.Image
-        className="h-full w-full rounded-[inherit] object-cover"
+        className="size-full rounded-[inherit] object-cover"
         src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
         alt="Pedro Duarte"
       />
       <Avatar.Fallback
-        className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
+        className="text-violet11 leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium"
         delayMs={600}
       >
         JD
       </Avatar.Fallback>
     </Avatar.Root>
-    <Avatar.Root className="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
-      <Avatar.Fallback className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
+    <Avatar.Root className="bg-blackA1 inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
+      <Avatar.Fallback className="text-violet11 leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium">
         PD
       </Avatar.Fallback>
     </Avatar.Root>
diff --git a/components/demos/Checkbox/tailwind/index.jsx b/components/demos/Checkbox/tailwind/index.jsx
index 72a1b0d2d..06aa86fe8 100644
--- a/components/demos/Checkbox/tailwind/index.jsx
+++ b/components/demos/Checkbox/tailwind/index.jsx
@@ -6,7 +6,7 @@ const CheckboxDemo = () => (
   <form>
     <div className="flex items-center">
       <Checkbox.Root
-        className="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
+        className="shadow-blackA4 hover:bg-violet3 flex size-[25px] appearance-none items-center justify-center rounded bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
         defaultChecked
         id="c1"
       >
diff --git a/components/demos/Collapsible/tailwind/index.jsx b/components/demos/Collapsible/tailwind/index.jsx
index ebb8eb4d7..67701bcf6 100644
--- a/components/demos/Collapsible/tailwind/index.jsx
+++ b/components/demos/Collapsible/tailwind/index.jsx
@@ -6,26 +6,26 @@ const CollapsibleDemo = () => {
   const [open, setOpen] = React.useState(false);
   return (
     <Collapsible.Root className="w-[300px]" open={open} onOpenChange={setOpen}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span className="text-violet11 text-[15px] leading-[25px]" style={{ color: 'white' }}>
+      <div className="flex items-center justify-between">
+        <span className=" text-[15px] leading-[25px] text-white">
           @peduarte starred 3 repositories
         </span>
         <Collapsible.Trigger asChild>
-          <button className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black">
+          <button className="rounded-full size-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black">
             {open ? <Cross2Icon /> : <RowSpacingIcon />}
           </button>
         </Collapsible.Trigger>
       </div>
 
-      <div className="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA4">
+      <div className="bg-white rounded my-2.5 p-2.5 shadow-[0_2px_10px] shadow-blackA4">
         <span className="text-violet11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
       </div>
 
       <Collapsible.Content>
-        <div className="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA4">
+        <div className="bg-white rounded my-2.5 p-2.5 shadow-[0_2px_10px] shadow-blackA4">
           <span className="text-violet11 text-[15px] leading-[25px]">@radix-ui/colors</span>
         </div>
-        <div className="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA4">
+        <div className="bg-white rounded my-2.5 p-2.5 shadow-[0_2px_10px] shadow-blackA4">
           <span className="text-violet11 text-[15px] leading-[25px]">@stitches/react</span>
         </div>
       </Collapsible.Content>
diff --git a/components/demos/ContextMenu/tailwind/index.jsx b/components/demos/ContextMenu/tailwind/index.jsx
index 60fae27d8..0f74a36ad 100644
--- a/components/demos/ContextMenu/tailwind/index.jsx
+++ b/components/demos/ContextMenu/tailwind/index.jsx
@@ -18,14 +18,14 @@ const ContextMenuDemo = () => {
           sideOffset={5}
           align="end"
         >
-          <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
             Back{' '}
             <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⌘+[
             </div>
           </ContextMenu.Item>
           <ContextMenu.Item
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
             disabled
           >
             Forward{' '}
@@ -33,14 +33,14 @@ const ContextMenuDemo = () => {
               ⌘+]
             </div>
           </ContextMenu.Item>
-          <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
             Reload{' '}
             <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⌘+R
             </div>
           </ContextMenu.Item>
           <ContextMenu.Sub>
-            <ContextMenu.SubTrigger className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1">
+            <ContextMenu.SubTrigger className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1">
               More Tools
               <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 <ChevronRightIcon />
@@ -52,30 +52,30 @@ const ContextMenuDemo = () => {
                 sideOffset={2}
                 alignOffset={-5}
               >
-                <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Save Page As…{' '}
                   <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                     ⌘+S
                   </div>
                 </ContextMenu.Item>
-                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Create Shortcut…
                 </ContextMenu.Item>
-                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Name Window…
                 </ContextMenu.Item>
-                <ContextMenu.Separator className="h-[1px] bg-violet6 m-[5px]" />
-                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Separator className="h-px bg-violet6 m-[5px]" />
+                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Developer Tools
                 </ContextMenu.Item>
               </ContextMenu.SubContent>
             </ContextMenu.Portal>
           </ContextMenu.Sub>
 
-          <ContextMenu.Separator className="h-[1px] bg-violet6 m-[5px]" />
+          <ContextMenu.Separator className="h-px bg-violet6 m-[5px]" />
 
           <ContextMenu.CheckboxItem
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
             checked={bookmarksChecked}
             onCheckedChange={setBookmarksChecked}
           >
@@ -88,7 +88,7 @@ const ContextMenuDemo = () => {
             </div>
           </ContextMenu.CheckboxItem>
           <ContextMenu.CheckboxItem
-            className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
             checked={urlsChecked}
             onCheckedChange={setUrlsChecked}
           >
@@ -98,14 +98,14 @@ const ContextMenuDemo = () => {
             Show Full URLs
           </ContextMenu.CheckboxItem>
 
-          <ContextMenu.Separator className="h-[1px] bg-violet6 m-[5px]" />
+          <ContextMenu.Separator className="h-px bg-violet6 m-[5px]" />
 
           <ContextMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve11">
             People
           </ContextMenu.Label>
           <ContextMenu.RadioGroup value={person} onValueChange={setPerson}>
             <ContextMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
               value="pedro"
             >
               <ContextMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
@@ -114,7 +114,7 @@ const ContextMenuDemo = () => {
               Pedro Duarte
             </ContextMenu.RadioItem>
             <ContextMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
               value="colm"
             >
               <ContextMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
diff --git a/components/demos/Dialog/tailwind/index.jsx b/components/demos/Dialog/tailwind/index.jsx
index 6bcec1ab0..b45720de6 100644
--- a/components/demos/Dialog/tailwind/index.jsx
+++ b/components/demos/Dialog/tailwind/index.jsx
@@ -5,17 +5,17 @@ import { Cross2Icon } from '@radix-ui/react-icons';
 const DialogDemo = () => (
   <Dialog.Root>
     <Dialog.Trigger asChild>
-      <button className="text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
+      <button className="text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
         Edit profile
       </button>
     </Dialog.Trigger>
     <Dialog.Portal>
       <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
-      <Dialog.Content className="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
+      <Dialog.Content className="data-[state=open]:animate-contentShow fixed top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
         <Dialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
           Edit profile
         </Dialog.Title>
-        <Dialog.Description className="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
+        <Dialog.Description className="text-mauve11 mt-2.5 mb-5 text-[15px] leading-normal">
           Make changes to your profile here. Click save when you're done.
         </Dialog.Description>
         <fieldset className="mb-[15px] flex items-center gap-5">
@@ -23,7 +23,7 @@ const DialogDemo = () => (
             Name
           </label>
           <input
-            className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+            className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
             id="name"
             defaultValue="Pedro Duarte"
           />
@@ -33,21 +33,21 @@ const DialogDemo = () => (
             Username
           </label>
           <input
-            className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+            className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
             id="username"
             defaultValue="@peduarte"
           />
         </fieldset>
         <div className="mt-[25px] flex justify-end">
           <Dialog.Close asChild>
-            <button className="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none">
+            <button className="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none">
               Save changes
             </button>
           </Dialog.Close>
         </div>
         <Dialog.Close asChild>
           <button
-            className="text-violet11 hover:bg-violet4 focus:shadow-violet7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+            className="text-violet11 hover:bg-violet4 focus:shadow-violet7 absolute top-2.5 right-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
             aria-label="Close"
           >
             <Cross2Icon />
diff --git a/components/demos/DropdownMenu/tailwind/index.jsx b/components/demos/DropdownMenu/tailwind/index.jsx
index a534742df..7dc4e92c7 100644
--- a/components/demos/DropdownMenu/tailwind/index.jsx
+++ b/components/demos/DropdownMenu/tailwind/index.jsx
@@ -16,7 +16,7 @@ const DropdownMenuDemo = () => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
-          className="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+          className="rounded-full size-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
           aria-label="Customise options"
         >
           <HamburgerMenuIcon />
@@ -28,31 +28,31 @@ const DropdownMenuDemo = () => {
           className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
           sideOffset={5}
         >
-          <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
             New Tab{' '}
-            <div className="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⌘+T
             </div>
           </DropdownMenu.Item>
-          <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
             New Window{' '}
-            <div className="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⌘+N
             </div>
           </DropdownMenu.Item>
           <DropdownMenu.Item
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
             disabled
           >
             New Private Window{' '}
-            <div className="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⇧+⌘+N
             </div>
           </DropdownMenu.Item>
           <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1">
+            <DropdownMenu.SubTrigger className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1">
               More Tools
-              <div className="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 <ChevronRightIcon />
               </div>
             </DropdownMenu.SubTrigger>
@@ -62,30 +62,30 @@ const DropdownMenuDemo = () => {
                 sideOffset={2}
                 alignOffset={-5}
               >
-                <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Save Page As…{' '}
-                  <div className="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                  <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                     ⌘+S
                   </div>
                 </DropdownMenu.Item>
-                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Create Shortcut…
                 </DropdownMenu.Item>
-                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Name Window…
                 </DropdownMenu.Item>
-                <DropdownMenu.Separator className="h-[1px] bg-violet6 m-[5px]" />
-                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Separator className="h-px bg-violet6 m-[5px]" />
+                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
                   Developer Tools
                 </DropdownMenu.Item>
               </DropdownMenu.SubContent>
             </DropdownMenu.Portal>
           </DropdownMenu.Sub>
 
-          <DropdownMenu.Separator className="h-[1px] bg-violet6 m-[5px]" />
+          <DropdownMenu.Separator className="h-px bg-violet6 m-[5px]" />
 
           <DropdownMenu.CheckboxItem
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
             checked={bookmarksChecked}
             onCheckedChange={setBookmarksChecked}
           >
@@ -93,12 +93,12 @@ const DropdownMenuDemo = () => {
               <CheckIcon />
             </DropdownMenu.ItemIndicator>
             Show Bookmarks{' '}
-            <div className="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
               ⌘+B
             </div>
           </DropdownMenu.CheckboxItem>
           <DropdownMenu.CheckboxItem
-            className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
             checked={urlsChecked}
             onCheckedChange={setUrlsChecked}
           >
@@ -108,14 +108,14 @@ const DropdownMenuDemo = () => {
             Show Full URLs
           </DropdownMenu.CheckboxItem>
 
-          <DropdownMenu.Separator className="h-[1px] bg-violet6 m-[5px]" />
+          <DropdownMenu.Separator className="h-px bg-violet6 m-[5px]" />
 
           <DropdownMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve11">
             People
           </DropdownMenu.Label>
           <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
             <DropdownMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
               value="pedro"
             >
               <DropdownMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
@@ -124,7 +124,7 @@ const DropdownMenuDemo = () => {
               Pedro Duarte
             </DropdownMenu.RadioItem>
             <DropdownMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
               value="colm"
             >
               <DropdownMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
diff --git a/components/demos/Form/tailwind/index.jsx b/components/demos/Form/tailwind/index.jsx
index 9b0c9fb8f..e5c320543 100644
--- a/components/demos/Form/tailwind/index.jsx
+++ b/components/demos/Form/tailwind/index.jsx
@@ -3,42 +3,42 @@ import * as Form from '@radix-ui/react-form';
 
 const FormDemo = () => (
   <Form.Root className="w-[260px]">
-    <Form.Field className="grid mb-[10px]" name="email">
+    <Form.Field className="grid mb-2.5" name="email">
       <div className="flex items-baseline justify-between">
         <Form.Label className="text-[15px] font-medium leading-[35px] text-white">Email</Form.Label>
-        <Form.Message className="text-[13px] text-white opacity-[0.8]" match="valueMissing">
+        <Form.Message className="text-[13px] text-white opacity-80" match="valueMissing">
           Please enter your email
         </Form.Message>
-        <Form.Message className="text-[13px] text-white opacity-[0.8]" match="typeMismatch">
+        <Form.Message className="text-[13px] text-white opacity-80" match="typeMismatch">
           Please provide a valid email
         </Form.Message>
       </div>
       <Form.Control asChild>
         <input
-          className="box-border w-full bg-blackA2 shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
+          className="box-border w-full bg-blackA2 shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
           type="email"
           required
         />
       </Form.Control>
     </Form.Field>
-    <Form.Field className="grid mb-[10px]" name="question">
+    <Form.Field className="grid mb-2.5" name="question">
       <div className="flex items-baseline justify-between">
         <Form.Label className="text-[15px] font-medium leading-[35px] text-white">
           Question
         </Form.Label>
-        <Form.Message className="text-[13px] text-white opacity-[0.8]" match="valueMissing">
+        <Form.Message className="text-[13px] text-white opacity-80" match="valueMissing">
           Please enter a question
         </Form.Message>
       </div>
       <Form.Control asChild>
         <textarea
-          className="box-border w-full bg-blackA2 shadow-blackA6 inline-flex appearance-none items-center justify-center rounded-[4px] p-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6 resize-none"
+          className="box-border w-full bg-blackA2 shadow-blackA6 inline-flex appearance-none items-center justify-center rounded p-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6 resize-none"
           required
         />
       </Form.Control>
     </Form.Field>
     <Form.Submit asChild>
-      <button className="box-border w-full text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none mt-[10px]">
+      <button className="box-border w-full text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none mt-2.5">
         Post question
       </button>
     </Form.Submit>
diff --git a/components/demos/HoverCard/tailwind/index.jsx b/components/demos/HoverCard/tailwind/index.jsx
index be8e9d647..886225b8a 100644
--- a/components/demos/HoverCard/tailwind/index.jsx
+++ b/components/demos/HoverCard/tailwind/index.jsx
@@ -11,7 +11,7 @@ const HoverCardDemo = () => (
         rel="noreferrer noopener"
       >
         <img
-          className="block h-[45px] w-[45px] rounded-full"
+          className="block size-[45px] rounded-full"
           src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
           alt="Radix UI"
         />
@@ -24,27 +24,27 @@ const HoverCardDemo = () => (
       >
         <div className="flex flex-col gap-[7px]">
           <img
-            className="block h-[60px] w-[60px] rounded-full"
+            className="block size-[60px] rounded-full"
             src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
             alt="Radix UI"
           />
           <div className="flex flex-col gap-[15px]">
             <div>
-              <div className="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">Radix</div>
-              <div className="text-mauve10 m-0 text-[15px] leading-[1.5]">@radix_ui</div>
+              <div className="text-mauve12 m-0 text-[15px] font-medium">Radix</div>
+              <div className="text-mauve10 m-0 text-[15px]">@radix_ui</div>
             </div>
-            <div className="text-mauve12 m-0 text-[15px] leading-[1.5]">
+            <div className="text-mauve12 m-0 text-[15px]">
               Components, icons, colors, and templates for building high-quality, accessible UI.
               Free and open-source.
             </div>
             <div className="flex gap-[15px]">
               <div className="flex gap-[5px]">
-                <div className="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">0</div>{' '}
-                <div className="text-mauve10 m-0 text-[15px] leading-[1.5]">Following</div>
+                <div className="text-mauve12 m-0 text-[15px] font-medium">0</div>{' '}
+                <div className="text-mauve10 m-0 text-[15px]">Following</div>
               </div>
               <div className="flex gap-[5px]">
-                <div className="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">2,900</div>{' '}
-                <div className="text-mauve10 m-0 text-[15px] leading-[1.5]">Followers</div>
+                <div className="text-mauve12 m-0 text-[15px] font-medium">2,900</div>{' '}
+                <div className="text-mauve10 m-0 text-[15px]">Followers</div>
               </div>
             </div>
           </div>
diff --git a/components/demos/Label/tailwind/index.jsx b/components/demos/Label/tailwind/index.jsx
index 5065b005c..5a2a50f74 100644
--- a/components/demos/Label/tailwind/index.jsx
+++ b/components/demos/Label/tailwind/index.jsx
@@ -7,7 +7,7 @@ const LabelDemo = () => (
       First name
     </Label.Root>
     <input
-      className="bg-blackA2 shadow-blackA6 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
+      className="bg-blackA2 shadow-blackA6 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
       type="text"
       id="firstName"
       defaultValue="Pedro Duarte"
diff --git a/components/demos/Menubar/tailwind/index.jsx b/components/demos/Menubar/tailwind/index.jsx
index aec99b1ad..955cb7fc0 100644
--- a/components/demos/Menubar/tailwind/index.jsx
+++ b/components/demos/Menubar/tailwind/index.jsx
@@ -12,7 +12,7 @@ const MenubarDemo = () => {
   return (
     <Menubar.Root className="flex bg-white p-[3px] rounded-md shadow-[0_2px_10px] shadow-blackA4">
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           File
         </Menubar.Trigger>
         <Menubar.Portal>
@@ -22,27 +22,27 @@ const MenubarDemo = () => {
             sideOffset={5}
             alignOffset={-3}
           >
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               New Tab{' '}
               <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 ⌘ T
               </div>
             </Menubar.Item>
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               New Window{' '}
               <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 ⌘ N
               </div>
             </Menubar.Item>
             <Menubar.Item
-              className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+              className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
               disabled
             >
               New Incognito Window
             </Menubar.Item>
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
             <Menubar.Sub>
-              <Menubar.SubTrigger className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.SubTrigger className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                 Share
                 <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                   <ChevronRightIcon />
@@ -53,20 +53,20 @@ const MenubarDemo = () => {
                   className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
                   alignOffset={-5}
                 >
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Email Link
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Messages
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Notes
                   </Menubar.Item>
                 </Menubar.SubContent>
               </Menubar.Portal>
             </Menubar.Sub>
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Print…{' '}
               <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 ⌘ P
@@ -77,7 +77,7 @@ const MenubarDemo = () => {
       </Menubar.Menu>
 
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           Edit
         </Menubar.Trigger>
         <Menubar.Portal>
@@ -87,21 +87,21 @@ const MenubarDemo = () => {
             sideOffset={5}
             alignOffset={-3}
           >
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Undo{' '}
               <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 ⌘ Z
               </div>
             </Menubar.Item>
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Redo{' '}
               <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 ⇧ ⌘ Z
               </div>
             </Menubar.Item>
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
             <Menubar.Sub>
-              <Menubar.SubTrigger className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.SubTrigger className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                 Find
                 <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                   <ChevronRightIcon />
@@ -113,30 +113,30 @@ const MenubarDemo = () => {
                   className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
                   alignOffset={-5}
                 >
-                  <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Search the web…
                   </Menubar.Item>
-                  <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Find…
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Find Next
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]::to-violet10 data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                     Find Previous
                   </Menubar.Item>
                 </Menubar.SubContent>
               </Menubar.Portal>
             </Menubar.Sub>
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Cut
             </Menubar.Item>
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Copy
             </Menubar.Item>
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Paste
             </Menubar.Item>
           </Menubar.Content>
@@ -144,7 +144,7 @@ const MenubarDemo = () => {
       </Menubar.Menu>
 
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           View
         </Menubar.Trigger>
         <Menubar.Portal>
@@ -156,7 +156,7 @@ const MenubarDemo = () => {
           >
             {CHECK_ITEMS.map((item) => (
               <Menubar.CheckboxItem
-                className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none pl-5 outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                 key={item}
                 checked={checkedSelection.includes(item)}
                 onCheckedChange={() =>
@@ -173,15 +173,15 @@ const MenubarDemo = () => {
                 {item}
               </Menubar.CheckboxItem>
             ))}
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Reload{' '}
               <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
                 ⌘ R
               </div>
             </Menubar.Item>
             <Menubar.Item
-              className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+              className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
               disabled
             >
               Force Reload{' '}
@@ -189,12 +189,12 @@ const MenubarDemo = () => {
                 ⇧ ⌘ R
               </div>
             </Menubar.Item>
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Toggle Fullscreen
             </Menubar.Item>
-            <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
               Hide Sidebar
             </Menubar.Item>
           </Menubar.Content>
@@ -202,7 +202,7 @@ const MenubarDemo = () => {
       </Menubar.Menu>
 
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           Profiles
         </Menubar.Trigger>
         <Menubar.Portal>
@@ -215,7 +215,7 @@ const MenubarDemo = () => {
             <Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection}>
               {RADIO_ITEMS.map((item) => (
                 <Menubar.RadioItem
-                  className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                   key={item}
                   value={item}
                 >
@@ -225,12 +225,12 @@ const MenubarDemo = () => {
                   {item}
                 </Menubar.RadioItem>
               ))}
-              <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-              <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+              <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                 Edit…
               </Menubar.Item>
-              <Menubar.Separator className="h-[1px] bg-violet6 m-[5px]" />
-              <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+              <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
                 Add Profile…
               </Menubar.Item>
             </Menubar.RadioGroup>
diff --git a/components/demos/NavigationMenu/tailwind/index.jsx b/components/demos/NavigationMenu/tailwind/index.jsx
index 55b982cfe..0280b8446 100644
--- a/components/demos/NavigationMenu/tailwind/index.jsx
+++ b/components/demos/NavigationMenu/tailwind/index.jsx
@@ -5,23 +5,23 @@ import { CaretDownIcon } from '@radix-ui/react-icons';
 
 const NavigationMenuDemo = () => {
   return (
-    <NavigationMenu.Root className="relative z-[1] flex w-screen justify-center">
-      <NavigationMenu.List className="center shadow-blackA4 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
+    <NavigationMenu.Root className="relative z-10 flex w-screen justify-center">
+      <NavigationMenu.List className="center shadow-blackA4 m-0 flex list-none rounded-md bg-white p-1 shadow-[0_2px_10px]">
         <NavigationMenu.Item>
-          <NavigationMenu.Trigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+          <NavigationMenu.Trigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
             Learn{' '}
             <CaretDownIcon
-              className="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+              className="text-violet10 relative top-px transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
               aria-hidden
             />
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto">
-            <ul className="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
+            <ul className="one m-0 grid list-none gap-x-2.5 p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
               <li className="row-span-3 grid">
                 <NavigationMenu.Link asChild>
                   <a
                     className="focus:shadow-violet7 from-purple9 to-indigo9 flex
-                    h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
+                    h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
                     href="/"
                   >
                     <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
@@ -53,15 +53,15 @@ const NavigationMenuDemo = () => {
         </NavigationMenu.Item>
 
         <NavigationMenu.Item>
-          <NavigationMenu.Trigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+          <NavigationMenu.Trigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
             Overview{' '}
             <CaretDownIcon
-              className="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+              className="text-violet10 relative top-px transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
               aria-hidden
             />
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className="absolute top-0 left-0 w-full sm:w-auto">
-            <ul className="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
+            <ul className="m-0 grid list-none gap-x-2.5 p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
               <ListItem title="Introduction" href="/primitives/docs/overview/introduction">
                 Build high-quality, accessible design systems and web apps.
               </ListItem>
@@ -86,20 +86,20 @@ const NavigationMenuDemo = () => {
 
         <NavigationMenu.Item>
           <NavigationMenu.Link
-            className="text-violet11 hover:bg-violet3 focus:shadow-violet7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
+            className="text-violet11 hover:bg-violet3 focus:shadow-violet7 block select-none rounded px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
             href="https://github.com/radix-ui"
           >
             Github
           </NavigationMenu.Link>
         </NavigationMenu.Item>
 
-        <NavigationMenu.Indicator className="data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]">
-          <div className="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
+        <NavigationMenu.Indicator className="data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-10 flex h-2.5 items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]">
+          <div className="relative top-[70%] size-2.5 rotate-45 rounded-tl-sm bg-white" />
         </NavigationMenu.Indicator>
       </NavigationMenu.List>
 
       <div className="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
-        <NavigationMenu.Viewport className="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[6px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]" />
+        <NavigationMenu.Viewport className="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]" />
       </div>
     </NavigationMenu.Root>
   );
@@ -110,7 +110,7 @@ const ListItem = React.forwardRef(({ className, children, title, ...props }, for
     <NavigationMenu.Link asChild>
       <a
         className={classNames(
-          'focus:shadow-[0_0_0_2px] focus:shadow-violet7 hover:bg-mauve3 block select-none rounded-[6px] p-3 text-[15px] leading-none no-underline outline-none transition-colors',
+          'focus:shadow-[0_0_0_2px] focus:shadow-violet7 hover:bg-mauve3 block select-none rounded-md p-3 text-[15px] leading-none no-underline outline-none transition-colors',
           className
         )}
         {...props}
diff --git a/components/demos/Popover/tailwind/index.jsx b/components/demos/Popover/tailwind/index.jsx
index 8ab615b0d..34d48a996 100644
--- a/components/demos/Popover/tailwind/index.jsx
+++ b/components/demos/Popover/tailwind/index.jsx
@@ -6,7 +6,7 @@ const PopoverDemo = () => (
   <Popover.Root>
     <Popover.Trigger asChild>
       <button
-        className="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
+        className="rounded-full size-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
         aria-label="Update dimensions"
       >
         <MixerHorizontalIcon />
@@ -61,7 +61,7 @@ const PopoverDemo = () => (
           </fieldset>
         </div>
         <Popover.Close
-          className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+          className="rounded-full size-[25px] inline-flex items-center justify-center text-violet11 absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
           aria-label="Close"
         >
           <Cross2Icon />
diff --git a/components/demos/Progress/tailwind/index.jsx b/components/demos/Progress/tailwind/index.jsx
index 56bc1e8c9..a4daec983 100644
--- a/components/demos/Progress/tailwind/index.jsx
+++ b/components/demos/Progress/tailwind/index.jsx
@@ -20,7 +20,7 @@ const ProgressDemo = () => {
       value={progress}
     >
       <Progress.Indicator
-        className="bg-white w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
+        className="bg-white size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
         style={{ transform: `translateX(-${100 - progress}%)` }}
       />
     </Progress.Root>
diff --git a/components/demos/RadioGroup/tailwind/index.jsx b/components/demos/RadioGroup/tailwind/index.jsx
index 7c807636c..cc093234a 100644
--- a/components/demos/RadioGroup/tailwind/index.jsx
+++ b/components/demos/RadioGroup/tailwind/index.jsx
@@ -10,11 +10,11 @@ const RadioGroupDemo = () => (
     >
       <div className="flex items-center">
         <RadioGroup.Item
-          className="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+          className="bg-white size-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
           value="default"
           id="r1"
         >
-          <RadioGroup.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-violet11" />
+          <RadioGroup.Indicator className="flex items-center justify-center size-full relative after:block after:size-[11px] after:rounded-full after:bg-violet11" />
         </RadioGroup.Item>
         <label className="text-white text-[15px] leading-none pl-[15px]" htmlFor="r1">
           Default
@@ -22,11 +22,11 @@ const RadioGroupDemo = () => (
       </div>
       <div className="flex items-center">
         <RadioGroup.Item
-          className="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+          className="bg-white size-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
           value="comfortable"
           id="r2"
         >
-          <RadioGroup.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-violet11" />
+          <RadioGroup.Indicator className="flex items-center justify-center size-full relative after:block after:size-[11px] after:rounded-full after:bg-violet11" />
         </RadioGroup.Item>
         <label className="text-white text-[15px] leading-none pl-[15px]" htmlFor="r2">
           Comfortable
@@ -34,11 +34,11 @@ const RadioGroupDemo = () => (
       </div>
       <div className="flex items-center">
         <RadioGroup.Item
-          className="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+          className="bg-white size-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
           value="compact"
           id="r3"
         >
-          <RadioGroup.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-violet11" />
+          <RadioGroup.Indicator className="flex items-center justify-center size-full relative after:block after:size-[11px] after:rounded-full after:bg-violet11" />
         </RadioGroup.Item>
         <label className="text-white text-[15px] leading-none pl-[15px]" htmlFor="r3">
           Compact
diff --git a/components/demos/ScrollArea/tailwind/index.jsx b/components/demos/ScrollArea/tailwind/index.jsx
index 1d9699604..363c56b48 100644
--- a/components/demos/ScrollArea/tailwind/index.jsx
+++ b/components/demos/ScrollArea/tailwind/index.jsx
@@ -5,7 +5,7 @@ const TAGS = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length
 
 const ScrollAreaDemo = () => (
   <ScrollArea.Root className="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA4 bg-white">
-    <ScrollArea.Viewport className="w-full h-full rounded">
+    <ScrollArea.Viewport className="size-full rounded">
       <div className="py-[15px] px-5">
         <div className="text-violet11 text-[15px] leading-[18px] font-medium">Tags</div>
         {TAGS.map((tag) => (
@@ -22,13 +22,13 @@ const ScrollAreaDemo = () => (
       className="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
       orientation="vertical"
     >
-      <ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+      <ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-full before:min-w-11 before:min-h-11" />
     </ScrollArea.Scrollbar>
     <ScrollArea.Scrollbar
       className="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
       orientation="horizontal"
     >
-      <ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+      <ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-full before:min-w-[44px] before:min-h-[44px]" />
     </ScrollArea.Scrollbar>
     <ScrollArea.Corner className="bg-blackA5" />
   </ScrollArea.Root>
diff --git a/components/demos/Select/tailwind/index.jsx b/components/demos/Select/tailwind/index.jsx
index f5dadd693..79e29efd8 100644
--- a/components/demos/Select/tailwind/index.jsx
+++ b/components/demos/Select/tailwind/index.jsx
@@ -31,7 +31,7 @@ const SelectDemo = () => (
             <SelectItem value="pineapple">Pineapple</SelectItem>
           </Select.Group>
 
-          <Select.Separator className="h-[1px] bg-violet6 m-[5px]" />
+          <Select.Separator className="h-px bg-violet6 m-[5px]" />
 
           <Select.Group>
             <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
@@ -46,7 +46,7 @@ const SelectDemo = () => (
             <SelectItem value="leek">Leek</SelectItem>
           </Select.Group>
 
-          <Select.Separator className="h-[1px] bg-violet6 m-[5px]" />
+          <Select.Separator className="h-px bg-violet6 m-[5px]" />
 
           <Select.Group>
             <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
diff --git a/components/demos/Slider/tailwind/index.jsx b/components/demos/Slider/tailwind/index.jsx
index ec7c5e19d..b573a7e4a 100644
--- a/components/demos/Slider/tailwind/index.jsx
+++ b/components/demos/Slider/tailwind/index.jsx
@@ -13,7 +13,7 @@ const SliderDemo = () => (
         <Slider.Range className="absolute bg-white rounded-full h-full" />
       </Slider.Track>
       <Slider.Thumb
-        className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA4 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA5"
+        className="block size-5 bg-white shadow-[0_2px_10px] shadow-blackA4 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA5"
         aria-label="Volume"
       />
     </Slider.Root>
diff --git a/components/demos/Switch/tailwind/index.jsx b/components/demos/Switch/tailwind/index.jsx
index 3e7c7f62e..f3e7cca8e 100644
--- a/components/demos/Switch/tailwind/index.jsx
+++ b/components/demos/Switch/tailwind/index.jsx
@@ -12,7 +12,7 @@ const SwitchDemo = () => (
         id="airplane-mode"
         style={{ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)' }}
       >
-        <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-blackA4 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
+        <Switch.Thumb className="block size-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-blackA4 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
       </Switch.Root>
     </div>
   </form>
diff --git a/components/demos/Toast/tailwind/index.jsx b/components/demos/Toast/tailwind/index.jsx
index ad6872ff3..c8ad8496b 100644
--- a/components/demos/Toast/tailwind/index.jsx
+++ b/components/demos/Toast/tailwind/index.jsx
@@ -43,12 +43,12 @@ const ToastDemo = () => {
           </time>
         </Toast.Description>
         <Toast.Action className="[grid-area:_action]" asChild altText="Goto schedule to undo">
-          <button className="inline-flex items-center justify-center rounded font-medium text-xs px-[10px] leading-[25px] h-[25px] bg-green2 text-green11 shadow-[inset_0_0_0_1px] shadow-green7 hover:shadow-[inset_0_0_0_1px] hover:shadow-green8 focus:shadow-[0_0_0_2px] focus:shadow-green8">
+          <button className="inline-flex items-center justify-center rounded font-medium text-xs px-2.5 leading-[25px] h-[25px] bg-green2 text-green11 shadow-[inset_0_0_0_1px] shadow-green7 hover:shadow-[inset_0_0_0_1px] hover:shadow-green8 focus:shadow-[0_0_0_2px] focus:shadow-green8">
             Undo
           </button>
         </Toast.Action>
       </Toast.Root>
-      <Toast.Viewport className="[--viewport-padding:_25px] fixed bottom-0 right-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
+      <Toast.Viewport className="[--viewport-padding:_25px] fixed bottom-0 right-0 flex flex-col p-[var(--viewport-padding)] gap-2.5 w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
     </Toast.Provider>
   );
 };
diff --git a/components/demos/Toggle/tailwind/index.jsx b/components/demos/Toggle/tailwind/index.jsx
index 0442aad30..9c92132d3 100644
--- a/components/demos/Toggle/tailwind/index.jsx
+++ b/components/demos/Toggle/tailwind/index.jsx
@@ -5,7 +5,7 @@ import { FontItalicIcon } from '@radix-ui/react-icons';
 const ToggleDemo = () => (
   <Toggle.Root
     aria-label="Toggle italic"
-    className="hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 shadow-blackA4 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black"
+    className="hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 shadow-blackA4 flex size-[35px] items-center justify-center rounded bg-white leading-4 shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black"
   >
     <FontItalicIcon />
   </Toggle.Root>
diff --git a/components/demos/ToggleGroup/tailwind/index.jsx b/components/demos/ToggleGroup/tailwind/index.jsx
index ecb1b3b22..47d6eee86 100644
--- a/components/demos/ToggleGroup/tailwind/index.jsx
+++ b/components/demos/ToggleGroup/tailwind/index.jsx
@@ -3,7 +3,7 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';
 
 const toggleGroupItemClasses =
-  'hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 flex h-[35px] w-[35px] items-center justify-center bg-white text-base leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none';
+  'hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 flex size-[35px] items-center justify-center bg-white leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none';
 
 const ToggleGroupDemo = () => (
   <ToggleGroup.Root
diff --git a/components/demos/Toolbar/tailwind/index.jsx b/components/demos/Toolbar/tailwind/index.jsx
index 09125c10c..6b2478a25 100644
--- a/components/demos/Toolbar/tailwind/index.jsx
+++ b/components/demos/Toolbar/tailwind/index.jsx
@@ -11,7 +11,7 @@ import {
 
 const ToolbarDemo = () => (
   <Toolbar.Root
-    className="flex p-[10px] w-full min-w-max rounded-md bg-white shadow-[0_2px_10px] shadow-blackA4"
+    className="flex p-2.5 w-full min-w-max rounded-md bg-white shadow-[0_2px_10px] shadow-blackA4"
     aria-label="Formatting options"
   >
     <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
@@ -37,7 +37,7 @@ const ToolbarDemo = () => (
         <StrikethroughIcon />
       </Toolbar.ToggleItem>
     </Toolbar.ToggleGroup>
-    <Toolbar.Separator className="w-[1px] bg-mauve6 mx-[10px]" />
+    <Toolbar.Separator className="w-px bg-mauve6 mx-2.5" />
     <Toolbar.ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
       <Toolbar.ToggleItem
         className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
@@ -61,7 +61,7 @@ const ToolbarDemo = () => (
         <TextAlignRightIcon />
       </Toolbar.ToggleItem>
     </Toolbar.ToggleGroup>
-    <Toolbar.Separator className="w-[1px] bg-mauve6 mx-[10px]" />
+    <Toolbar.Separator className="w-px bg-mauve6 mx-2.5" />
     <Toolbar.Link
       className="bg-transparent text-mauve11 hidden sm:inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-[13px] leading-none bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
       href="#"
@@ -71,7 +71,7 @@ const ToolbarDemo = () => (
       Edited 2 hours ago
     </Toolbar.Link>
     <Toolbar.Button
-      className="px-[10px] text-white bg-violet9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-violet10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7"
+      className="px-2.5 text-white bg-violet9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-violet10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7"
       style={{ marginLeft: 'auto' }}
     >
       Share
diff --git a/components/demos/Tooltip/tailwind/index.jsx b/components/demos/Tooltip/tailwind/index.jsx
index 43ffb4fa4..cf83cd810 100644
--- a/components/demos/Tooltip/tailwind/index.jsx
+++ b/components/demos/Tooltip/tailwind/index.jsx
@@ -7,13 +7,13 @@ const TooltipDemo = () => {
     <Tooltip.Provider>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <button className="text-violet11 shadow-blackA4 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+          <button className="text-violet11 shadow-blackA4 hover:bg-violet3 inline-flex size-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
             <PlusIcon />
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
-            className="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+            className="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded bg-white px-[15px] py-2.5 text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
             sideOffset={5}
           >
             Add to library

From 2d4ee3a5ce1636973c91b6a1b2785484665bf21d Mon Sep 17 00:00:00 2001
From: Ryan Leichty <ryan.leichty@gmail.com>
Date: Mon, 6 May 2024 14:30:30 -0500
Subject: [PATCH 2/2] Sort Tailwind classes

- Sorted all tailwind classes using the `prettier-plugin-tailwindcss`
- Fixed a few incorrect classes in the process (e.g.: `color-white` to `text-white`). The plugin moves unrecognized classes to the beginning of the string which can help find incorrect classes.
---
 components/demos/Accordion/tailwind/index.jsx |  18 +--
 .../demos/AlertDialog/tailwind/index.jsx      |  14 +--
 .../demos/AspectRatio/tailwind/index.jsx      |   2 +-
 components/demos/Avatar/tailwind/index.jsx    |  12 +-
 components/demos/Checkbox/tailwind/index.jsx  |   2 +-
 .../demos/Collapsible/tailwind/index.jsx      |  14 +--
 .../demos/ContextMenu/tailwind/index.jsx      |  56 ++++-----
 components/demos/Dialog/tailwind/index.jsx    |  22 ++--
 .../demos/DropdownMenu/tailwind/index.jsx     |  56 ++++-----
 components/demos/Form/tailwind/index.jsx      |  10 +-
 components/demos/HoverCard/tailwind/index.jsx |  16 +--
 components/demos/Label/tailwind/index.jsx     |   2 +-
 components/demos/Menubar/tailwind/index.jsx   | 118 +++++++++---------
 .../demos/NavigationMenu/tailwind/index.jsx   |  38 +++---
 components/demos/Popover/tailwind/index.jsx   |  32 ++---
 components/demos/Progress/tailwind/index.jsx  |   4 +-
 .../demos/RadioGroup/tailwind/index.jsx       |  18 +--
 .../demos/ScrollArea/tailwind/index.jsx       |  16 +--
 components/demos/Select/tailwind/index.jsx    |  18 +--
 components/demos/Separator/tailwind/index.jsx |  18 +--
 components/demos/Slider/tailwind/index.jsx    |   8 +-
 components/demos/Switch/tailwind/index.jsx    |   6 +-
 components/demos/Tabs/tailwind/index.jsx      |  54 ++++----
 components/demos/Toast/tailwind/index.jsx     |  12 +-
 components/demos/Toggle/tailwind/index.jsx    |   2 +-
 .../demos/ToggleGroup/tailwind/index.jsx      |   4 +-
 components/demos/Toolbar/tailwind/index.jsx   |  22 ++--
 components/demos/Tooltip/tailwind/index.jsx   |   4 +-
 28 files changed, 299 insertions(+), 299 deletions(-)

diff --git a/components/demos/Accordion/tailwind/index.jsx b/components/demos/Accordion/tailwind/index.jsx
index c475f5fad..c191735b7 100644
--- a/components/demos/Accordion/tailwind/index.jsx
+++ b/components/demos/Accordion/tailwind/index.jsx
@@ -5,7 +5,7 @@ import { ChevronDownIcon } from '@radix-ui/react-icons';
 
 const AccordionDemo = () => (
   <Accordion.Root
-    className="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
+    className="w-[300px] rounded-md bg-mauve6 shadow-[0_2px_10px] shadow-black/5"
     type="single"
     defaultValue="item-1"
     collapsible
@@ -34,8 +34,8 @@ const AccordionDemo = () => (
 const AccordionItem = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
   <Accordion.Item
     className={classNames(
-      'focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px]',
-      className
+      'mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px] focus-within:shadow-mauve12',
+      className,
     )}
     {...props}
     ref={forwardedRef}
@@ -48,15 +48,15 @@ const AccordionTrigger = React.forwardRef(({ children, className, ...props }, fo
   <Accordion.Header className="flex">
     <Accordion.Trigger
       className={classNames(
-        'text-violet11 shadow-mauve6 hover:bg-mauve2 group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none',
-        className
+        'group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none text-violet11 shadow-[0_1px_0] shadow-mauve6 outline-none hover:bg-mauve2',
+        className,
       )}
       {...props}
       ref={forwardedRef}
     >
       {children}
       <ChevronDownIcon
-        className="text-violet10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+        className="text-violet10 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
         aria-hidden
       />
     </Accordion.Trigger>
@@ -66,13 +66,13 @@ const AccordionTrigger = React.forwardRef(({ children, className, ...props }, fo
 const AccordionContent = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
   <Accordion.Content
     className={classNames(
-      'text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]',
-      className
+      'overflow-hidden bg-mauve2 text-[15px] text-mauve11 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown',
+      className,
     )}
     {...props}
     ref={forwardedRef}
   >
-    <div className="py-[15px] px-5">{children}</div>
+    <div className="px-5 py-[15px]">{children}</div>
   </Accordion.Content>
 ));
 
diff --git a/components/demos/AlertDialog/tailwind/index.jsx b/components/demos/AlertDialog/tailwind/index.jsx
index 3b3cb2fc1..e9ae5e7d8 100644
--- a/components/demos/AlertDialog/tailwind/index.jsx
+++ b/components/demos/AlertDialog/tailwind/index.jsx
@@ -4,28 +4,28 @@ import * as AlertDialog from '@radix-ui/react-alert-dialog';
 const AlertDialogDemo = () => (
   <AlertDialog.Root>
     <AlertDialog.Trigger asChild>
-      <button className="text-violet11 hover:bg-mauve3 shadow-blackA4 inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+      <button className="inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black">
         Delete account
       </button>
     </AlertDialog.Trigger>
     <AlertDialog.Portal>
-      <AlertDialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
-      <AlertDialog.Content className="data-[state=open]:animate-contentShow fixed top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
-        <AlertDialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
+      <AlertDialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
+      <AlertDialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
+        <AlertDialog.Title className="m-0 text-[17px] font-medium text-mauve12">
           Are you absolutely sure?
         </AlertDialog.Title>
-        <AlertDialog.Description className="text-mauve11 mt-[15px] mb-5 text-[15px] leading-normal">
+        <AlertDialog.Description className="mb-5 mt-[15px] text-[15px] leading-normal text-mauve11">
           This action cannot be undone. This will permanently delete your account and remove your
           data from our servers.
         </AlertDialog.Description>
         <div className="flex justify-end gap-[25px]">
           <AlertDialog.Cancel asChild>
-            <button className="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+            <button className="inline-flex h-[35px] items-center justify-center rounded bg-mauve4 px-[15px] font-medium leading-none text-mauve11 outline-none hover:bg-mauve5 focus:shadow-[0_0_0_2px] focus:shadow-mauve7">
               Cancel
             </button>
           </AlertDialog.Cancel>
           <AlertDialog.Action asChild>
-            <button className="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+            <button className="inline-flex h-[35px] items-center justify-center rounded bg-red4 px-[15px] font-medium leading-none text-red11 outline-none hover:bg-red5 focus:shadow-[0_0_0_2px] focus:shadow-red7">
               Yes, delete account
             </button>
           </AlertDialog.Action>
diff --git a/components/demos/AspectRatio/tailwind/index.jsx b/components/demos/AspectRatio/tailwind/index.jsx
index baff0cc6d..9d96b7bcf 100644
--- a/components/demos/AspectRatio/tailwind/index.jsx
+++ b/components/demos/AspectRatio/tailwind/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import * as AspectRatio from '@radix-ui/react-aspect-ratio';
 
 const AspectRatioDemo = () => (
-  <div className="shadow-blackA4 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
+  <div className="w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px] shadow-blackA4">
     <AspectRatio.Root ratio={16 / 9}>
       <img
         className="size-full object-cover"
diff --git a/components/demos/Avatar/tailwind/index.jsx b/components/demos/Avatar/tailwind/index.jsx
index e3d8b431b..4101695ff 100644
--- a/components/demos/Avatar/tailwind/index.jsx
+++ b/components/demos/Avatar/tailwind/index.jsx
@@ -3,34 +3,34 @@ import * as Avatar from '@radix-ui/react-avatar';
 
 const AvatarDemo = () => (
   <div className="flex gap-5">
-    <Avatar.Root className="bg-blackA1 inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
+    <Avatar.Root className="inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-blackA1 align-middle">
       <Avatar.Image
         className="size-full rounded-[inherit] object-cover"
         src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
         alt="Colm Tuite"
       />
       <Avatar.Fallback
-        className="text-violet11 leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium"
+        className="leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium text-violet11"
         delayMs={600}
       >
         CT
       </Avatar.Fallback>
     </Avatar.Root>
-    <Avatar.Root className="bg-blackA1 inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
+    <Avatar.Root className="inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-blackA1 align-middle">
       <Avatar.Image
         className="size-full rounded-[inherit] object-cover"
         src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
         alt="Pedro Duarte"
       />
       <Avatar.Fallback
-        className="text-violet11 leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium"
+        className="leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium text-violet11"
         delayMs={600}
       >
         JD
       </Avatar.Fallback>
     </Avatar.Root>
-    <Avatar.Root className="bg-blackA1 inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
-      <Avatar.Fallback className="text-violet11 leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium">
+    <Avatar.Root className="inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-blackA1 align-middle">
+      <Avatar.Fallback className="leading-1 flex size-full items-center justify-center bg-white text-[15px] font-medium text-violet11">
         PD
       </Avatar.Fallback>
     </Avatar.Root>
diff --git a/components/demos/Checkbox/tailwind/index.jsx b/components/demos/Checkbox/tailwind/index.jsx
index 06aa86fe8..9a37fd5ce 100644
--- a/components/demos/Checkbox/tailwind/index.jsx
+++ b/components/demos/Checkbox/tailwind/index.jsx
@@ -6,7 +6,7 @@ const CheckboxDemo = () => (
   <form>
     <div className="flex items-center">
       <Checkbox.Root
-        className="shadow-blackA4 hover:bg-violet3 flex size-[25px] appearance-none items-center justify-center rounded bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
+        className="flex size-[25px] appearance-none items-center justify-center rounded bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px_black]"
         defaultChecked
         id="c1"
       >
diff --git a/components/demos/Collapsible/tailwind/index.jsx b/components/demos/Collapsible/tailwind/index.jsx
index 67701bcf6..dfcb7d1e9 100644
--- a/components/demos/Collapsible/tailwind/index.jsx
+++ b/components/demos/Collapsible/tailwind/index.jsx
@@ -11,22 +11,22 @@ const CollapsibleDemo = () => {
           @peduarte starred 3 repositories
         </span>
         <Collapsible.Trigger asChild>
-          <button className="rounded-full size-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black">
+          <button className="inline-flex size-[25px] items-center justify-center rounded-full text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=closed]:bg-white data-[state=open]:bg-violet3">
             {open ? <Cross2Icon /> : <RowSpacingIcon />}
           </button>
         </Collapsible.Trigger>
       </div>
 
-      <div className="bg-white rounded my-2.5 p-2.5 shadow-[0_2px_10px] shadow-blackA4">
-        <span className="text-violet11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
+      <div className="my-2.5 rounded bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4">
+        <span className="text-[15px] leading-[25px] text-violet11">@radix-ui/primitives</span>
       </div>
 
       <Collapsible.Content>
-        <div className="bg-white rounded my-2.5 p-2.5 shadow-[0_2px_10px] shadow-blackA4">
-          <span className="text-violet11 text-[15px] leading-[25px]">@radix-ui/colors</span>
+        <div className="my-2.5 rounded bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4">
+          <span className="text-[15px] leading-[25px] text-violet11">@radix-ui/colors</span>
         </div>
-        <div className="bg-white rounded my-2.5 p-2.5 shadow-[0_2px_10px] shadow-blackA4">
-          <span className="text-violet11 text-[15px] leading-[25px]">@stitches/react</span>
+        <div className="my-2.5 rounded bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4">
+          <span className="text-[15px] leading-[25px] text-violet11">@stitches/react</span>
         </div>
       </Collapsible.Content>
     </Collapsible.Root>
diff --git a/components/demos/ContextMenu/tailwind/index.jsx b/components/demos/ContextMenu/tailwind/index.jsx
index 0f74a36ad..ec34f6b86 100644
--- a/components/demos/ContextMenu/tailwind/index.jsx
+++ b/components/demos/ContextMenu/tailwind/index.jsx
@@ -9,115 +9,115 @@ const ContextMenuDemo = () => {
 
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-[300px] text-center">
+      <ContextMenu.Trigger className="block w-[300px] select-none rounded border-2 border-dashed border-white py-[45px] text-center text-[15px] text-white">
         Right-click here.
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Content
-          className="min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]"
+          className="min-w-[220px] overflow-hidden rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]"
           sideOffset={5}
           align="end"
         >
-          <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <ContextMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
             Back{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+[
             </div>
           </ContextMenu.Item>
           <ContextMenu.Item
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
             disabled
           >
             Forward{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+]
             </div>
           </ContextMenu.Item>
-          <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <ContextMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
             Reload{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+R
             </div>
           </ContextMenu.Item>
           <ContextMenu.Sub>
-            <ContextMenu.SubTrigger className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1">
+            <ContextMenu.SubTrigger className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:data-[state=open]:bg-violet9 data-[state=open]:bg-violet4 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               More Tools
-              <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 <ChevronRightIcon />
               </div>
             </ContextMenu.SubTrigger>
             <ContextMenu.Portal>
               <ContextMenu.SubContent
-                className="min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]"
+                className="min-w-[220px] overflow-hidden rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]"
                 sideOffset={2}
                 alignOffset={-5}
               >
-                <ContextMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Save Page As…{' '}
-                  <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                  <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                     ⌘+S
                   </div>
                 </ContextMenu.Item>
-                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Create Shortcut…
                 </ContextMenu.Item>
-                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Name Window…
                 </ContextMenu.Item>
-                <ContextMenu.Separator className="h-px bg-violet6 m-[5px]" />
-                <ContextMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <ContextMenu.Separator className="m-[5px] h-px bg-violet6" />
+                <ContextMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Developer Tools
                 </ContextMenu.Item>
               </ContextMenu.SubContent>
             </ContextMenu.Portal>
           </ContextMenu.Sub>
 
-          <ContextMenu.Separator className="h-px bg-violet6 m-[5px]" />
+          <ContextMenu.Separator className="m-[5px] h-px bg-violet6" />
 
           <ContextMenu.CheckboxItem
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
             checked={bookmarksChecked}
             onCheckedChange={setBookmarksChecked}
           >
-            <ContextMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+            <ContextMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
               <CheckIcon />
             </ContextMenu.ItemIndicator>
             Show Bookmarks{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+B
             </div>
           </ContextMenu.CheckboxItem>
           <ContextMenu.CheckboxItem
-            className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
             checked={urlsChecked}
             onCheckedChange={setUrlsChecked}
           >
-            <ContextMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+            <ContextMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
               <CheckIcon />
             </ContextMenu.ItemIndicator>
             Show Full URLs
           </ContextMenu.CheckboxItem>
 
-          <ContextMenu.Separator className="h-px bg-violet6 m-[5px]" />
+          <ContextMenu.Separator className="m-[5px] h-px bg-violet6" />
 
           <ContextMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve11">
             People
           </ContextMenu.Label>
           <ContextMenu.RadioGroup value={person} onValueChange={setPerson}>
             <ContextMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
               value="pedro"
             >
-              <ContextMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+              <ContextMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
                 <DotFilledIcon />
               </ContextMenu.ItemIndicator>
               Pedro Duarte
             </ContextMenu.RadioItem>
             <ContextMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
               value="colm"
             >
-              <ContextMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+              <ContextMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
                 <DotFilledIcon />
               </ContextMenu.ItemIndicator>
               Colm Tuite
diff --git a/components/demos/Dialog/tailwind/index.jsx b/components/demos/Dialog/tailwind/index.jsx
index b45720de6..119a7a29b 100644
--- a/components/demos/Dialog/tailwind/index.jsx
+++ b/components/demos/Dialog/tailwind/index.jsx
@@ -5,49 +5,49 @@ import { Cross2Icon } from '@radix-ui/react-icons';
 const DialogDemo = () => (
   <Dialog.Root>
     <Dialog.Trigger asChild>
-      <button className="text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
+      <button className="inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA4 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
         Edit profile
       </button>
     </Dialog.Trigger>
     <Dialog.Portal>
-      <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
-      <Dialog.Content className="data-[state=open]:animate-contentShow fixed top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
-        <Dialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
+      <Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
+      <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
+        <Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
           Edit profile
         </Dialog.Title>
-        <Dialog.Description className="text-mauve11 mt-2.5 mb-5 text-[15px] leading-normal">
+        <Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
           Make changes to your profile here. Click save when you're done.
         </Dialog.Description>
         <fieldset className="mb-[15px] flex items-center gap-5">
-          <label className="text-violet11 w-[90px] text-right text-[15px]" htmlFor="name">
+          <label className="w-[90px] text-right text-[15px] text-violet11" htmlFor="name">
             Name
           </label>
           <input
-            className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+            className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
             id="name"
             defaultValue="Pedro Duarte"
           />
         </fieldset>
         <fieldset className="mb-[15px] flex items-center gap-5">
-          <label className="text-violet11 w-[90px] text-right text-[15px]" htmlFor="username">
+          <label className="w-[90px] text-right text-[15px] text-violet11" htmlFor="username">
             Username
           </label>
           <input
-            className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
+            className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
             id="username"
             defaultValue="@peduarte"
           />
         </fieldset>
         <div className="mt-[25px] flex justify-end">
           <Dialog.Close asChild>
-            <button className="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none">
+            <button className="inline-flex h-[35px] items-center justify-center rounded bg-green4 px-[15px] font-medium leading-none text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 focus:outline-none">
               Save changes
             </button>
           </Dialog.Close>
         </div>
         <Dialog.Close asChild>
           <button
-            className="text-violet11 hover:bg-violet4 focus:shadow-violet7 absolute top-2.5 right-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+            className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full text-violet11 hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
             aria-label="Close"
           >
             <Cross2Icon />
diff --git a/components/demos/DropdownMenu/tailwind/index.jsx b/components/demos/DropdownMenu/tailwind/index.jsx
index 7dc4e92c7..d39a7498c 100644
--- a/components/demos/DropdownMenu/tailwind/index.jsx
+++ b/components/demos/DropdownMenu/tailwind/index.jsx
@@ -16,7 +16,7 @@ const DropdownMenuDemo = () => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
-          className="rounded-full size-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+          className="inline-flex size-[35px] items-center justify-center rounded-full bg-white text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
           aria-label="Customise options"
         >
           <HamburgerMenuIcon />
@@ -25,109 +25,109 @@ const DropdownMenuDemo = () => {
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+          className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
           sideOffset={5}
         >
-          <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
             New Tab{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+T
             </div>
           </DropdownMenu.Item>
-          <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+          <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
             New Window{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+N
             </div>
           </DropdownMenu.Item>
           <DropdownMenu.Item
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
             disabled
           >
             New Private Window{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⇧+⌘+N
             </div>
           </DropdownMenu.Item>
           <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1">
+            <DropdownMenu.SubTrigger className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:data-[state=open]:bg-violet9 data-[state=open]:bg-violet4 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               More Tools
-              <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 <ChevronRightIcon />
               </div>
             </DropdownMenu.SubTrigger>
             <DropdownMenu.Portal>
               <DropdownMenu.SubContent
-                className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+                className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
                 sideOffset={2}
                 alignOffset={-5}
               >
-                <DropdownMenu.Item className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Save Page As…{' '}
-                  <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                  <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                     ⌘+S
                   </div>
                 </DropdownMenu.Item>
-                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Create Shortcut…
                 </DropdownMenu.Item>
-                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Name Window…
                 </DropdownMenu.Item>
-                <DropdownMenu.Separator className="h-px bg-violet6 m-[5px]" />
-                <DropdownMenu.Item className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1">
+                <DropdownMenu.Separator className="m-[5px] h-px bg-violet6" />
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
                   Developer Tools
                 </DropdownMenu.Item>
               </DropdownMenu.SubContent>
             </DropdownMenu.Portal>
           </DropdownMenu.Sub>
 
-          <DropdownMenu.Separator className="h-px bg-violet6 m-[5px]" />
+          <DropdownMenu.Separator className="m-[5px] h-px bg-violet6" />
 
           <DropdownMenu.CheckboxItem
-            className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="group relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
             checked={bookmarksChecked}
             onCheckedChange={setBookmarksChecked}
           >
-            <DropdownMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+            <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
               <CheckIcon />
             </DropdownMenu.ItemIndicator>
             Show Bookmarks{' '}
-            <div className="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+            <div className="ml-auto pl-5 text-mauve11 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
               ⌘+B
             </div>
           </DropdownMenu.CheckboxItem>
           <DropdownMenu.CheckboxItem
-            className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+            className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
             checked={urlsChecked}
             onCheckedChange={setUrlsChecked}
           >
-            <DropdownMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+            <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
               <CheckIcon />
             </DropdownMenu.ItemIndicator>
             Show Full URLs
           </DropdownMenu.CheckboxItem>
 
-          <DropdownMenu.Separator className="h-px bg-violet6 m-[5px]" />
+          <DropdownMenu.Separator className="m-[5px] h-px bg-violet6" />
 
           <DropdownMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve11">
             People
           </DropdownMenu.Label>
           <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
             <DropdownMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
               value="pedro"
             >
-              <DropdownMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+              <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
                 <DotFilledIcon />
               </DropdownMenu.ItemIndicator>
               Pedro Duarte
             </DropdownMenu.RadioItem>
             <DropdownMenu.RadioItem
-              className="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              className="relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[5px] text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
               value="colm"
             >
-              <DropdownMenu.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+              <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
                 <DotFilledIcon />
               </DropdownMenu.ItemIndicator>
               Colm Tuite
diff --git a/components/demos/Form/tailwind/index.jsx b/components/demos/Form/tailwind/index.jsx
index e5c320543..9da526a6c 100644
--- a/components/demos/Form/tailwind/index.jsx
+++ b/components/demos/Form/tailwind/index.jsx
@@ -3,7 +3,7 @@ import * as Form from '@radix-ui/react-form';
 
 const FormDemo = () => (
   <Form.Root className="w-[260px]">
-    <Form.Field className="grid mb-2.5" name="email">
+    <Form.Field className="mb-2.5 grid" name="email">
       <div className="flex items-baseline justify-between">
         <Form.Label className="text-[15px] font-medium leading-[35px] text-white">Email</Form.Label>
         <Form.Message className="text-[13px] text-white opacity-80" match="valueMissing">
@@ -15,13 +15,13 @@ const FormDemo = () => (
       </div>
       <Form.Control asChild>
         <input
-          className="box-border w-full bg-blackA2 shadow-blackA6 inline-flex h-[35px] appearance-none items-center justify-center rounded px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
+          className="box-border inline-flex h-[35px] w-full appearance-none items-center justify-center rounded bg-blackA2 px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] shadow-blackA6 outline-none selection:bg-blackA6 selection:text-white hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black]"
           type="email"
           required
         />
       </Form.Control>
     </Form.Field>
-    <Form.Field className="grid mb-2.5" name="question">
+    <Form.Field className="mb-2.5 grid" name="question">
       <div className="flex items-baseline justify-between">
         <Form.Label className="text-[15px] font-medium leading-[35px] text-white">
           Question
@@ -32,13 +32,13 @@ const FormDemo = () => (
       </div>
       <Form.Control asChild>
         <textarea
-          className="box-border w-full bg-blackA2 shadow-blackA6 inline-flex appearance-none items-center justify-center rounded p-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6 resize-none"
+          className="box-border inline-flex w-full resize-none appearance-none items-center justify-center rounded bg-blackA2 p-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] shadow-blackA6 outline-none selection:bg-blackA6 selection:text-white hover:shadow-[0_0_0_1px_black] focus:shadow-[0_0_0_2px_black]"
           required
         />
       </Form.Control>
     </Form.Field>
     <Form.Submit asChild>
-      <button className="box-border w-full text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none mt-2.5">
+      <button className="mt-2.5 box-border inline-flex h-[35px] w-full items-center justify-center rounded bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA4 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
         Post question
       </button>
     </Form.Submit>
diff --git a/components/demos/HoverCard/tailwind/index.jsx b/components/demos/HoverCard/tailwind/index.jsx
index 886225b8a..a7becc488 100644
--- a/components/demos/HoverCard/tailwind/index.jsx
+++ b/components/demos/HoverCard/tailwind/index.jsx
@@ -19,7 +19,7 @@ const HoverCardDemo = () => (
     </HoverCard.Trigger>
     <HoverCard.Portal>
       <HoverCard.Content
-        className="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all"
+        className="w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all"
         sideOffset={5}
       >
         <div className="flex flex-col gap-[7px]">
@@ -30,21 +30,21 @@ const HoverCardDemo = () => (
           />
           <div className="flex flex-col gap-[15px]">
             <div>
-              <div className="text-mauve12 m-0 text-[15px] font-medium">Radix</div>
-              <div className="text-mauve10 m-0 text-[15px]">@radix_ui</div>
+              <div className="m-0 text-[15px] font-medium text-mauve12">Radix</div>
+              <div className="m-0 text-[15px] text-mauve10">@radix_ui</div>
             </div>
-            <div className="text-mauve12 m-0 text-[15px]">
+            <div className="m-0 text-[15px] text-mauve12">
               Components, icons, colors, and templates for building high-quality, accessible UI.
               Free and open-source.
             </div>
             <div className="flex gap-[15px]">
               <div className="flex gap-[5px]">
-                <div className="text-mauve12 m-0 text-[15px] font-medium">0</div>{' '}
-                <div className="text-mauve10 m-0 text-[15px]">Following</div>
+                <div className="m-0 text-[15px] font-medium text-mauve12">0</div>{' '}
+                <div className="m-0 text-[15px] text-mauve10">Following</div>
               </div>
               <div className="flex gap-[5px]">
-                <div className="text-mauve12 m-0 text-[15px] font-medium">2,900</div>{' '}
-                <div className="text-mauve10 m-0 text-[15px]">Followers</div>
+                <div className="m-0 text-[15px] font-medium text-mauve12">2,900</div>{' '}
+                <div className="m-0 text-[15px] text-mauve10">Followers</div>
               </div>
             </div>
           </div>
diff --git a/components/demos/Label/tailwind/index.jsx b/components/demos/Label/tailwind/index.jsx
index 5a2a50f74..8f9086f5f 100644
--- a/components/demos/Label/tailwind/index.jsx
+++ b/components/demos/Label/tailwind/index.jsx
@@ -7,7 +7,7 @@ const LabelDemo = () => (
       First name
     </Label.Root>
     <input
-      className="bg-blackA2 shadow-blackA6 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
+      className="inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded bg-blackA2 px-2.5 text-[15px] leading-none text-white shadow-[0_0_0_1px] shadow-blackA6 outline-none selection:bg-blackA6 selection:text-white focus:shadow-[0_0_0_2px_black]"
       type="text"
       id="firstName"
       defaultValue="Pedro Duarte"
diff --git a/components/demos/Menubar/tailwind/index.jsx b/components/demos/Menubar/tailwind/index.jsx
index 955cb7fc0..89d92b477 100644
--- a/components/demos/Menubar/tailwind/index.jsx
+++ b/components/demos/Menubar/tailwind/index.jsx
@@ -10,65 +10,65 @@ const MenubarDemo = () => {
   const [radioSelection, setRadioSelection] = React.useState(RADIO_ITEMS[2]);
 
   return (
-    <Menubar.Root className="flex bg-white p-[3px] rounded-md shadow-[0_2px_10px] shadow-blackA4">
+    <Menubar.Root className="flex rounded-md bg-white p-[3px] shadow-[0_2px_10px] shadow-blackA4">
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[13px] font-medium leading-none text-violet11 outline-none data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           File
         </Menubar.Trigger>
         <Menubar.Portal>
           <Menubar.Content
-            className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
+            className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]"
             align="start"
             sideOffset={5}
             alignOffset={-3}
           >
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               New Tab{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⌘ T
               </div>
             </Menubar.Item>
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               New Window{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⌘ N
               </div>
             </Menubar.Item>
             <Menubar.Item
-              className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+              className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11"
               disabled
             >
               New Incognito Window
             </Menubar.Item>
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
             <Menubar.Sub>
-              <Menubar.SubTrigger className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.SubTrigger className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                 Share
-                <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                   <ChevronRightIcon />
                 </div>
               </Menubar.SubTrigger>
               <Menubar.Portal>
                 <Menubar.SubContent
-                  className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
+                  className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]"
                   alignOffset={-5}
                 >
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Email Link
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Messages
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Notes
                   </Menubar.Item>
                 </Menubar.SubContent>
               </Menubar.Portal>
             </Menubar.Sub>
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+            <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1">
               Print…{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⌘ P
               </div>
             </Menubar.Item>
@@ -77,66 +77,66 @@ const MenubarDemo = () => {
       </Menubar.Menu>
 
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[13px] font-medium leading-none text-violet11 outline-none data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           Edit
         </Menubar.Trigger>
         <Menubar.Portal>
           <Menubar.Content
-            className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
+            className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]"
             align="start"
             sideOffset={5}
             alignOffset={-3}
           >
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Undo{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⌘ Z
               </div>
             </Menubar.Item>
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Redo{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⇧ ⌘ Z
               </div>
             </Menubar.Item>
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
             <Menubar.Sub>
-              <Menubar.SubTrigger className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.SubTrigger className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                 Find
-                <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+                <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                   <ChevronRightIcon />
                 </div>
               </Menubar.SubTrigger>
 
               <Menubar.Portal>
                 <Menubar.SubContent
-                  className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
+                  className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]"
                   alignOffset={-5}
                 >
-                  <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Search the web…
                   </Menubar.Item>
-                  <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+                  <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Find…
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Find Next
                   </Menubar.Item>
-                  <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+                  <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                     Find Previous
                   </Menubar.Item>
                 </Menubar.SubContent>
               </Menubar.Portal>
             </Menubar.Sub>
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+            <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Cut
             </Menubar.Item>
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Copy
             </Menubar.Item>
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Item className="relative flex h-[25px] select-none items-center rounded px-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Paste
             </Menubar.Item>
           </Menubar.Content>
@@ -144,57 +144,57 @@ const MenubarDemo = () => {
       </Menubar.Menu>
 
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[13px] font-medium leading-none text-violet11 outline-none data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           View
         </Menubar.Trigger>
         <Menubar.Portal>
           <Menubar.Content
-            className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
+            className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]"
             align="start"
             sideOffset={5}
             alignOffset={-14}
           >
             {CHECK_ITEMS.map((item) => (
               <Menubar.CheckboxItem
-                className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] px-2.5 relative select-none pl-5 outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                className="relative flex h-[25px] select-none items-center rounded px-2.5 pl-5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
                 key={item}
                 checked={checkedSelection.includes(item)}
                 onCheckedChange={() =>
                   setCheckedSelection((current) =>
                     current.includes(item)
                       ? current.filter((el) => el !== item)
-                      : current.concat(item)
+                      : current.concat(item),
                   )
                 }
               >
-                <Menubar.ItemIndicator className="absolute left-0 w-5 inline-flex items-center justify-center">
+                <Menubar.ItemIndicator className="absolute left-0 inline-flex w-5 items-center justify-center">
                   <CheckIcon />
                 </Menubar.ItemIndicator>
                 {item}
               </Menubar.CheckboxItem>
             ))}
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-            <Menubar.Item className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+            <Menubar.Item className="group relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Reload{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⌘ R
               </div>
             </Menubar.Item>
             <Menubar.Item
-              className="group text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+              className="group relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11"
               disabled
             >
               Force Reload{' '}
-              <div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
+              <div className="ml-auto pl-5 text-mauve9 group-data-[disabled]:text-mauve8 group-data-[highlighted]:text-white">
                 ⇧ ⌘ R
               </div>
             </Menubar.Item>
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+            <Menubar.Item className="relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Toggle Fullscreen
             </Menubar.Item>
-            <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-            <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+            <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+            <Menubar.Item className="relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
               Hide Sidebar
             </Menubar.Item>
           </Menubar.Content>
@@ -202,12 +202,12 @@ const MenubarDemo = () => {
       </Menubar.Menu>
 
       <Menubar.Menu>
-        <Menubar.Trigger className="py-2 px-3 outline-none select-none font-medium leading-none rounded text-violet11 text-[13px] flex items-center justify-between gap-0.5 data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
+        <Menubar.Trigger className="flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[13px] font-medium leading-none text-violet11 outline-none data-[highlighted]:bg-violet4 data-[state=open]:bg-violet4">
           Profiles
         </Menubar.Trigger>
         <Menubar.Portal>
           <Menubar.Content
-            className="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
+            className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]"
             align="start"
             sideOffset={5}
             alignOffset={-14}
@@ -215,22 +215,22 @@ const MenubarDemo = () => {
             <Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection}>
               {RADIO_ITEMS.map((item) => (
                 <Menubar.RadioItem
-                  className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
+                  className="relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1"
                   key={item}
                   value={item}
                 >
-                  <Menubar.ItemIndicator className="absolute left-0 w-5 inline-flex items-center justify-center">
+                  <Menubar.ItemIndicator className="absolute left-0 inline-flex w-5 items-center justify-center">
                     <DotFilledIcon />
                   </Menubar.ItemIndicator>
                   {item}
                 </Menubar.RadioItem>
               ))}
-              <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-              <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+              <Menubar.Item className="relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                 Edit…
               </Menubar.Item>
-              <Menubar.Separator className="h-px bg-violet6 m-[5px]" />
-              <Menubar.Item className="text-[13px] leading-none text-violet11 rounded flex items-center h-[25px] pr-2.5 relative select-none pl-5 outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:text-violet1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none">
+              <Menubar.Separator className="m-[5px] h-px bg-violet6" />
+              <Menubar.Item className="relative flex h-[25px] select-none items-center rounded pl-5 pr-2.5 text-[13px] leading-none text-violet11 outline-none data-[disabled]:pointer-events-none data-[state=open]:bg-violet4 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-violet9 data-[highlighted]:to-violet10 data-[disabled]:text-mauve8 data-[highlighted]:data-[state=open]:text-violet1 data-[highlighted]:text-violet1 data-[state=open]:text-violet11">
                 Add Profile…
               </Menubar.Item>
             </Menubar.RadioGroup>
diff --git a/components/demos/NavigationMenu/tailwind/index.jsx b/components/demos/NavigationMenu/tailwind/index.jsx
index 0280b8446..8a6328b21 100644
--- a/components/demos/NavigationMenu/tailwind/index.jsx
+++ b/components/demos/NavigationMenu/tailwind/index.jsx
@@ -6,22 +6,22 @@ import { CaretDownIcon } from '@radix-ui/react-icons';
 const NavigationMenuDemo = () => {
   return (
     <NavigationMenu.Root className="relative z-10 flex w-screen justify-center">
-      <NavigationMenu.List className="center shadow-blackA4 m-0 flex list-none rounded-md bg-white p-1 shadow-[0_2px_10px]">
+      <NavigationMenu.List className="center m-0 flex list-none rounded-md bg-white p-1 shadow-[0_2px_10px] shadow-blackA4">
         <NavigationMenu.Item>
-          <NavigationMenu.Trigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+          <NavigationMenu.Trigger className="group flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[15px] font-medium leading-none text-violet11 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-violet7">
             Learn{' '}
             <CaretDownIcon
-              className="text-violet10 relative top-px transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+              className="relative top-px text-violet10 transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
               aria-hidden
             />
           </NavigationMenu.Trigger>
-          <NavigationMenu.Content className="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto">
+          <NavigationMenu.Content className="absolute left-0 top-0 w-full data-[motion=from-end]:animate-enterFromRight data-[motion=from-start]:animate-enterFromLeft data-[motion=to-end]:animate-exitToRight data-[motion=to-start]:animate-exitToLeft sm:w-auto">
             <ul className="one m-0 grid list-none gap-x-2.5 p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
               <li className="row-span-3 grid">
                 <NavigationMenu.Link asChild>
                   <a
-                    className="focus:shadow-violet7 from-purple9 to-indigo9 flex
-                    h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
+                    className="flex h-full w-full select-none
+                    flex-col justify-end rounded-md bg-gradient-to-b from-purple9 to-indigo9 p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet7"
                     href="/"
                   >
                     <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
@@ -29,10 +29,10 @@ const NavigationMenuDemo = () => {
                       <path d="M12 0H4V8H12V0Z"></path>
                       <path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"></path>
                     </svg>
-                    <div className="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">
+                    <div className="mb-[7px] mt-4 text-[18px] font-medium leading-[1.2] text-white">
                       Radix Primitives
                     </div>
-                    <p className="text-mauve4 text-[14px] leading-[1.3]">
+                    <p className="text-[14px] leading-[1.3] text-mauve4">
                       Unstyled, accessible components for React.
                     </p>
                   </a>
@@ -53,14 +53,14 @@ const NavigationMenuDemo = () => {
         </NavigationMenu.Item>
 
         <NavigationMenu.Item>
-          <NavigationMenu.Trigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+          <NavigationMenu.Trigger className="group flex select-none items-center justify-between gap-0.5 rounded px-3 py-2 text-[15px] font-medium leading-none text-violet11 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-violet7">
             Overview{' '}
             <CaretDownIcon
-              className="text-violet10 relative top-px transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+              className="relative top-px text-violet10 transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
               aria-hidden
             />
           </NavigationMenu.Trigger>
-          <NavigationMenu.Content className="absolute top-0 left-0 w-full sm:w-auto">
+          <NavigationMenu.Content className="absolute left-0 top-0 w-full sm:w-auto">
             <ul className="m-0 grid list-none gap-x-2.5 p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
               <ListItem title="Introduction" href="/primitives/docs/overview/introduction">
                 Build high-quality, accessible design systems and web apps.
@@ -86,20 +86,20 @@ const NavigationMenuDemo = () => {
 
         <NavigationMenu.Item>
           <NavigationMenu.Link
-            className="text-violet11 hover:bg-violet3 focus:shadow-violet7 block select-none rounded px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
+            className="block select-none rounded px-3 py-2 text-[15px] font-medium leading-none text-violet11 no-underline outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-violet7"
             href="https://github.com/radix-ui"
           >
             Github
           </NavigationMenu.Link>
         </NavigationMenu.Item>
 
-        <NavigationMenu.Indicator className="data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-10 flex h-2.5 items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]">
+        <NavigationMenu.Indicator className="top-full z-10 flex h-2.5 items-end justify-center overflow-hidden transition-[width,transform_250ms_ease] data-[state=hidden]:animate-fadeOut data-[state=visible]:animate-fadeIn">
           <div className="relative top-[70%] size-2.5 rotate-45 rounded-tl-sm bg-white" />
         </NavigationMenu.Indicator>
       </NavigationMenu.List>
 
-      <div className="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
-        <NavigationMenu.Viewport className="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]" />
+      <div className="perspective-[2000px] absolute left-0 top-full flex w-full justify-center">
+        <NavigationMenu.Viewport className="relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]" />
       </div>
     </NavigationMenu.Root>
   );
@@ -110,14 +110,14 @@ const ListItem = React.forwardRef(({ className, children, title, ...props }, for
     <NavigationMenu.Link asChild>
       <a
         className={classNames(
-          'focus:shadow-[0_0_0_2px] focus:shadow-violet7 hover:bg-mauve3 block select-none rounded-md p-3 text-[15px] leading-none no-underline outline-none transition-colors',
-          className
+          'block select-none rounded-md p-3 text-[15px] leading-none no-underline outline-none transition-colors hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-violet7',
+          className,
         )}
         {...props}
         ref={forwardedRef}
       >
-        <div className="text-violet12 mb-[5px] font-medium leading-[1.2]">{title}</div>
-        <p className="text-mauve11 leading-[1.4]">{children}</p>
+        <div className="mb-[5px] font-medium leading-[1.2] text-violet12">{title}</div>
+        <p className="leading-[1.4] text-mauve11">{children}</p>
       </a>
     </NavigationMenu.Link>
   </li>
diff --git a/components/demos/Popover/tailwind/index.jsx b/components/demos/Popover/tailwind/index.jsx
index 34d48a996..980c88547 100644
--- a/components/demos/Popover/tailwind/index.jsx
+++ b/components/demos/Popover/tailwind/index.jsx
@@ -6,7 +6,7 @@ const PopoverDemo = () => (
   <Popover.Root>
     <Popover.Trigger asChild>
       <button
-        className="rounded-full size-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
+        className="inline-flex size-[35px] cursor-default items-center justify-center rounded-full bg-white text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
         aria-label="Update dimensions"
       >
         <MixerHorizontalIcon />
@@ -14,54 +14,54 @@ const PopoverDemo = () => (
     </Popover.Trigger>
     <Popover.Portal>
       <Popover.Content
-        className="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        className="w-[260px] rounded bg-white p-5 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
         sideOffset={5}
       >
         <div className="flex flex-col gap-2.5">
-          <p className="text-mauve12 text-[15px] leading-[19px] font-medium mb-2.5">Dimensions</p>
-          <fieldset className="flex gap-5 items-center">
-            <label className="text-[13px] text-violet11 w-[75px]" htmlFor="width">
+          <p className="mb-2.5 text-[15px] font-medium leading-[19px] text-mauve12">Dimensions</p>
+          <fieldset className="flex items-center gap-5">
+            <label className="w-[75px] text-[13px] text-violet11" htmlFor="width">
               Width
             </label>
             <input
-              className="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+              className="inline-flex h-[25px] w-full flex-1 items-center justify-center rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
               id="width"
               defaultValue="100%"
             />
           </fieldset>
-          <fieldset className="flex gap-5 items-center">
-            <label className="text-[13px] text-violet11 w-[75px]" htmlFor="maxWidth">
+          <fieldset className="flex items-center gap-5">
+            <label className="w-[75px] text-[13px] text-violet11" htmlFor="maxWidth">
               Max. width
             </label>
             <input
-              className="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+              className="inline-flex h-[25px] w-full flex-1 items-center justify-center rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
               id="maxWidth"
               defaultValue="300px"
             />
           </fieldset>
-          <fieldset className="flex gap-5 items-center">
-            <label className="text-[13px] text-violet11 w-[75px]" htmlFor="height">
+          <fieldset className="flex items-center gap-5">
+            <label className="w-[75px] text-[13px] text-violet11" htmlFor="height">
               Height
             </label>
             <input
-              className="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+              className="inline-flex h-[25px] w-full flex-1 items-center justify-center rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
               id="height"
               defaultValue="25px"
             />
           </fieldset>
-          <fieldset className="flex gap-5 items-center">
-            <label className="text-[13px] text-violet11 w-[75px]" htmlFor="maxHeight">
+          <fieldset className="flex items-center gap-5">
+            <label className="w-[75px] text-[13px] text-violet11" htmlFor="maxHeight">
               Max. height
             </label>
             <input
-              className="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+              className="inline-flex h-[25px] w-full flex-1 items-center justify-center rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
               id="maxHeight"
               defaultValue="none"
             />
           </fieldset>
         </div>
         <Popover.Close
-          className="rounded-full size-[25px] inline-flex items-center justify-center text-violet11 absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+          className="absolute right-[5px] top-[5px] inline-flex size-[25px] cursor-default items-center justify-center rounded-full text-violet11 outline-none hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7"
           aria-label="Close"
         >
           <Cross2Icon />
diff --git a/components/demos/Progress/tailwind/index.jsx b/components/demos/Progress/tailwind/index.jsx
index a4daec983..711ce085d 100644
--- a/components/demos/Progress/tailwind/index.jsx
+++ b/components/demos/Progress/tailwind/index.jsx
@@ -11,7 +11,7 @@ const ProgressDemo = () => {
 
   return (
     <Progress.Root
-      className="relative overflow-hidden bg-blackA6 rounded-full w-[300px] h-[25px]"
+      className="relative h-[25px] w-[300px] overflow-hidden rounded-full bg-blackA6"
       style={{
         // Fix overflow clipping in Safari
         // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
@@ -20,7 +20,7 @@ const ProgressDemo = () => {
       value={progress}
     >
       <Progress.Indicator
-        className="bg-white size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
+        className="ease-[cubic-bezier(0.65, 0, 0.35, 1)] size-full bg-white transition-transform duration-[660ms]"
         style={{ transform: `translateX(-${100 - progress}%)` }}
       />
     </Progress.Root>
diff --git a/components/demos/RadioGroup/tailwind/index.jsx b/components/demos/RadioGroup/tailwind/index.jsx
index cc093234a..79a627637 100644
--- a/components/demos/RadioGroup/tailwind/index.jsx
+++ b/components/demos/RadioGroup/tailwind/index.jsx
@@ -10,37 +10,37 @@ const RadioGroupDemo = () => (
     >
       <div className="flex items-center">
         <RadioGroup.Item
-          className="bg-white size-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+          className="size-[25px] cursor-default rounded-full bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
           value="default"
           id="r1"
         >
-          <RadioGroup.Indicator className="flex items-center justify-center size-full relative after:block after:size-[11px] after:rounded-full after:bg-violet11" />
+          <RadioGroup.Indicator className="relative flex size-full items-center justify-center after:block after:size-[11px] after:rounded-full after:bg-violet11" />
         </RadioGroup.Item>
-        <label className="text-white text-[15px] leading-none pl-[15px]" htmlFor="r1">
+        <label className="pl-[15px] text-[15px] leading-none text-white" htmlFor="r1">
           Default
         </label>
       </div>
       <div className="flex items-center">
         <RadioGroup.Item
-          className="bg-white size-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+          className="size-[25px] cursor-default rounded-full bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
           value="comfortable"
           id="r2"
         >
-          <RadioGroup.Indicator className="flex items-center justify-center size-full relative after:block after:size-[11px] after:rounded-full after:bg-violet11" />
+          <RadioGroup.Indicator className="relative flex size-full items-center justify-center after:block after:size-[11px] after:rounded-full after:bg-violet11" />
         </RadioGroup.Item>
-        <label className="text-white text-[15px] leading-none pl-[15px]" htmlFor="r2">
+        <label className="pl-[15px] text-[15px] leading-none text-white" htmlFor="r2">
           Comfortable
         </label>
       </div>
       <div className="flex items-center">
         <RadioGroup.Item
-          className="bg-white size-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default"
+          className="size-[25px] cursor-default rounded-full bg-white shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
           value="compact"
           id="r3"
         >
-          <RadioGroup.Indicator className="flex items-center justify-center size-full relative after:block after:size-[11px] after:rounded-full after:bg-violet11" />
+          <RadioGroup.Indicator className="relative flex size-full items-center justify-center after:block after:size-[11px] after:rounded-full after:bg-violet11" />
         </RadioGroup.Item>
-        <label className="text-white text-[15px] leading-none pl-[15px]" htmlFor="r3">
+        <label className="pl-[15px] text-[15px] leading-none text-white" htmlFor="r3">
           Compact
         </label>
       </div>
diff --git a/components/demos/ScrollArea/tailwind/index.jsx b/components/demos/ScrollArea/tailwind/index.jsx
index 363c56b48..30f430930 100644
--- a/components/demos/ScrollArea/tailwind/index.jsx
+++ b/components/demos/ScrollArea/tailwind/index.jsx
@@ -4,13 +4,13 @@ import * as ScrollArea from '@radix-ui/react-scroll-area';
 const TAGS = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
 
 const ScrollAreaDemo = () => (
-  <ScrollArea.Root className="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA4 bg-white">
+  <ScrollArea.Root className="h-[225px] w-[200px] overflow-hidden rounded bg-white shadow-[0_2px_10px] shadow-blackA4">
     <ScrollArea.Viewport className="size-full rounded">
-      <div className="py-[15px] px-5">
-        <div className="text-violet11 text-[15px] leading-[18px] font-medium">Tags</div>
+      <div className="px-5 py-[15px]">
+        <div className="text-[15px] font-medium leading-[18px] text-violet11">Tags</div>
         {TAGS.map((tag) => (
           <div
-            className="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
+            className="mt-2.5 border-t border-t-mauve6 pt-2.5 text-[13px] leading-[18px] text-mauve12"
             key={tag}
           >
             {tag}
@@ -19,16 +19,16 @@ const ScrollAreaDemo = () => (
       </div>
     </ScrollArea.Viewport>
     <ScrollArea.Scrollbar
-      className="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
+      className="flex touch-none select-none bg-blackA3 p-0.5 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col"
       orientation="vertical"
     >
-      <ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-full before:min-w-11 before:min-h-11" />
+      <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-mauve10 before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2" />
     </ScrollArea.Scrollbar>
     <ScrollArea.Scrollbar
-      className="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
+      className="flex touch-none select-none bg-blackA3 p-0.5 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col"
       orientation="horizontal"
     >
-      <ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-full before:min-w-[44px] before:min-h-[44px]" />
+      <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-mauve10 before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2" />
     </ScrollArea.Scrollbar>
     <ScrollArea.Corner className="bg-blackA5" />
   </ScrollArea.Root>
diff --git a/components/demos/Select/tailwind/index.jsx b/components/demos/Select/tailwind/index.jsx
index 79e29efd8..71a142d4f 100644
--- a/components/demos/Select/tailwind/index.jsx
+++ b/components/demos/Select/tailwind/index.jsx
@@ -6,7 +6,7 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons
 const SelectDemo = () => (
   <Select.Root>
     <Select.Trigger
-      className="inline-flex items-center justify-center rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-violet11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-violet9 outline-none"
+      className="inline-flex h-[35px] items-center justify-center gap-[5px] rounded bg-white px-[15px] text-[13px] leading-none text-violet11 shadow-[0_2px_10px] shadow-black/10 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-violet9"
       aria-label="Food"
     >
       <Select.Value placeholder="Select a fruit…" />
@@ -15,8 +15,8 @@ const SelectDemo = () => (
       </Select.Icon>
     </Select.Trigger>
     <Select.Portal>
-      <Select.Content className="overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
-        <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
+      <Select.Content className="overflow-hidden rounded-md bg-white shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
+        <Select.ScrollUpButton className="flex h-[25px] cursor-default items-center justify-center bg-white text-violet11">
           <ChevronUpIcon />
         </Select.ScrollUpButton>
         <Select.Viewport className="p-[5px]">
@@ -31,7 +31,7 @@ const SelectDemo = () => (
             <SelectItem value="pineapple">Pineapple</SelectItem>
           </Select.Group>
 
-          <Select.Separator className="h-px bg-violet6 m-[5px]" />
+          <Select.Separator className="m-[5px] h-px bg-violet6" />
 
           <Select.Group>
             <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
@@ -46,7 +46,7 @@ const SelectDemo = () => (
             <SelectItem value="leek">Leek</SelectItem>
           </Select.Group>
 
-          <Select.Separator className="h-px bg-violet6 m-[5px]" />
+          <Select.Separator className="m-[5px] h-px bg-violet6" />
 
           <Select.Group>
             <Select.Label className="px-[25px] text-xs leading-[25px] text-mauve11">
@@ -58,7 +58,7 @@ const SelectDemo = () => (
             <SelectItem value="pork">Pork</SelectItem>
           </Select.Group>
         </Select.Viewport>
-        <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
+        <Select.ScrollDownButton className="flex h-[25px] cursor-default items-center justify-center bg-white text-violet11">
           <ChevronDownIcon />
         </Select.ScrollDownButton>
       </Select.Content>
@@ -70,14 +70,14 @@ const SelectItem = React.forwardRef(({ children, className, ...props }, forwarde
   return (
     <Select.Item
       className={classnames(
-        'text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1',
-        className
+        'relative flex h-[25px] select-none items-center rounded-[3px] pl-[25px] pr-[35px] text-[13px] leading-none text-violet11 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[disabled]:text-mauve8 data-[highlighted]:text-violet1 data-[highlighted]:outline-none',
+        className,
       )}
       {...props}
       ref={forwardedRef}
     >
       <Select.ItemText>{children}</Select.ItemText>
-      <Select.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
+      <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
         <CheckIcon />
       </Select.ItemIndicator>
     </Select.Item>
diff --git a/components/demos/Separator/tailwind/index.jsx b/components/demos/Separator/tailwind/index.jsx
index 671fafd7d..f22fa28b9 100644
--- a/components/demos/Separator/tailwind/index.jsx
+++ b/components/demos/Separator/tailwind/index.jsx
@@ -2,24 +2,24 @@ import React from 'react';
 import * as Separator from '@radix-ui/react-separator';
 
 const SeparatorDemo = () => (
-  <div className="w-full max-w-[300px] mx-[15px]">
-    <div className="text-white text-[15px] leading-5 font-medium">Radix Primitives</div>
-    <div className="text-white text-[15px] leading-5">An open-source UI component library.</div>
-    <Separator.Root className="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]" />
+  <div className="mx-[15px] w-full max-w-[300px]">
+    <div className="text-[15px] font-medium leading-5 text-white">Radix Primitives</div>
+    <div className="text-[15px] leading-5 text-white">An open-source UI component library.</div>
+    <Separator.Root className="my-[15px] bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px" />
     <div className="flex h-5 items-center">
-      <div className="text-white text-[15px] leading-5">Blog</div>
+      <div className="text-[15px] leading-5 text-white">Blog</div>
       <Separator.Root
-        className="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
+        className="mx-[15px] bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px"
         decorative
         orientation="vertical"
       />
-      <div className="text-white text-[15px] leading-5">Docs</div>
+      <div className="text-[15px] leading-5 text-white">Docs</div>
       <Separator.Root
-        className="bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
+        className="mx-[15px] bg-violet6 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px"
         decorative
         orientation="vertical"
       />
-      <div className="text-white text-[15px] leading-5">Source</div>
+      <div className="text-[15px] leading-5 text-white">Source</div>
     </div>
   </div>
 );
diff --git a/components/demos/Slider/tailwind/index.jsx b/components/demos/Slider/tailwind/index.jsx
index b573a7e4a..4c9121749 100644
--- a/components/demos/Slider/tailwind/index.jsx
+++ b/components/demos/Slider/tailwind/index.jsx
@@ -4,16 +4,16 @@ import * as Slider from '@radix-ui/react-slider';
 const SliderDemo = () => (
   <form>
     <Slider.Root
-      className="relative flex items-center select-none touch-none w-[200px] h-5"
+      className="relative flex h-5 w-[200px] touch-none select-none items-center"
       defaultValue={[50]}
       max={100}
       step={1}
     >
-      <Slider.Track className="bg-blackA7 relative grow rounded-full h-[3px]">
-        <Slider.Range className="absolute bg-white rounded-full h-full" />
+      <Slider.Track className="relative h-[3px] grow rounded-full bg-blackA7">
+        <Slider.Range className="absolute h-full rounded-full bg-white" />
       </Slider.Track>
       <Slider.Thumb
-        className="block size-5 bg-white shadow-[0_2px_10px] shadow-blackA4 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA5"
+        className="block size-5 rounded-[10px] bg-white shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_5px] focus:shadow-blackA5 focus:outline-none"
         aria-label="Volume"
       />
     </Slider.Root>
diff --git a/components/demos/Switch/tailwind/index.jsx b/components/demos/Switch/tailwind/index.jsx
index f3e7cca8e..3a5bbd063 100644
--- a/components/demos/Switch/tailwind/index.jsx
+++ b/components/demos/Switch/tailwind/index.jsx
@@ -4,15 +4,15 @@ import * as Switch from '@radix-ui/react-switch';
 const SwitchDemo = () => (
   <form>
     <div className="flex items-center">
-      <label className="text-white text-[15px] leading-none pr-[15px]" htmlFor="airplane-mode">
+      <label className="pr-[15px] text-[15px] leading-none text-white" htmlFor="airplane-mode">
         Airplane mode
       </label>
       <Switch.Root
-        className="w-[42px] h-[25px] bg-blackA6 rounded-full relative shadow-[0_2px_10px] shadow-blackA4 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-black outline-none cursor-default"
+        className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blackA6 shadow-[0_2px_10px] shadow-blackA4 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-black"
         id="airplane-mode"
         style={{ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)' }}
       >
-        <Switch.Thumb className="block size-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-blackA4 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
+        <Switch.Thumb className="block size-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-blackA4 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
       </Switch.Root>
     </div>
   </form>
diff --git a/components/demos/Tabs/tailwind/index.jsx b/components/demos/Tabs/tailwind/index.jsx
index f57fddeb1..22d5575e1 100644
--- a/components/demos/Tabs/tailwind/index.jsx
+++ b/components/demos/Tabs/tailwind/index.jsx
@@ -3,104 +3,104 @@ import * as Tabs from '@radix-ui/react-tabs';
 
 const TabsDemo = () => (
   <Tabs.Root
-    className="flex flex-col w-[300px] shadow-[0_2px_10px] shadow-blackA2"
+    className="flex w-[300px] flex-col shadow-[0_2px_10px] shadow-blackA2"
     defaultValue="tab1"
   >
-    <Tabs.List className="shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
+    <Tabs.List className="flex shrink-0 border-b border-mauve6" aria-label="Manage your account">
       <Tabs.Trigger
-        className="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
+        className="flex h-[45px] flex-1 cursor-default select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-mauve11 outline-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black"
         value="tab1"
       >
         Account
       </Tabs.Trigger>
       <Tabs.Trigger
-        className="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
+        className="flex h-[45px] flex-1 cursor-default select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-mauve11 outline-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black"
         value="tab2"
       >
         Password
       </Tabs.Trigger>
     </Tabs.List>
     <Tabs.Content
-      className="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+      className="grow rounded-b-md bg-white p-5 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
       value="tab1"
     >
-      <p className="mb-5 text-mauve11 text-[15px] leading-normal">
+      <p className="mb-5 text-[15px] leading-normal text-mauve11">
         Make changes to your account here. Click save when you're done.
       </p>
-      <fieldset className="mb-[15px] w-full flex flex-col justify-start">
-        <label className="text-[13px] leading-none mb-2.5 text-violet12 block" htmlFor="name">
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label className="mb-2.5 block text-[13px] leading-none text-violet12" htmlFor="name">
           Name
         </label>
         <input
-          className="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
           id="name"
           defaultValue="Pedro Duarte"
         />
       </fieldset>
-      <fieldset className="mb-[15px] w-full flex flex-col justify-start">
-        <label className="text-[13px] leading-none mb-2.5 text-violet12 block" htmlFor="username">
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label className="mb-2.5 block text-[13px] leading-none text-violet12" htmlFor="username">
           Username
         </label>
         <input
-          className="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
           id="username"
           defaultValue="@peduarte"
         />
       </fieldset>
-      <div className="flex justify-end mt-5">
-        <button className="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default">
+      <div className="mt-5 flex justify-end">
+        <button className="inline-flex h-[35px] cursor-default items-center justify-center rounded bg-green4 px-[15px] text-[15px] font-medium leading-none text-green11 outline-none hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7">
           Save changes
         </button>
       </div>
     </Tabs.Content>
     <Tabs.Content
-      className="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+      className="grow rounded-b-md bg-white p-5 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
       value="tab2"
     >
-      <p className="mb-5 text-mauve11 text-[15px] leading-normal">
+      <p className="mb-5 text-[15px] leading-normal text-mauve11">
         Change your password here. After saving, you'll be logged out.
       </p>
-      <fieldset className="mb-[15px] w-full flex flex-col justify-start">
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
         <label
-          className="text-[13px] leading-none mb-2.5 text-violet12 block"
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
           htmlFor="currentPassword"
         >
           Current password
         </label>
         <input
-          className="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
           id="currentPassword"
           type="password"
         />
       </fieldset>
-      <fieldset className="mb-[15px] w-full flex flex-col justify-start">
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
         <label
-          className="text-[13px] leading-none mb-2.5 text-violet12 block"
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
           htmlFor="newPassword"
         >
           New password
         </label>
         <input
-          className="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
           id="newPassword"
           type="password"
         />
       </fieldset>
-      <fieldset className="mb-[15px] w-full flex flex-col justify-start">
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
         <label
-          className="text-[13px] leading-none mb-2.5 text-violet12 block"
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
           htmlFor="confirmPassword"
         >
           Confirm password
         </label>
         <input
-          className="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
           id="confirmPassword"
           type="password"
         />
       </fieldset>
-      <div className="flex justify-end mt-5">
-        <button className="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default">
+      <div className="mt-5 flex justify-end">
+        <button className="inline-flex h-[35px] cursor-default items-center justify-center rounded bg-green4 px-[15px] text-[15px] font-medium leading-none text-green11 outline-none hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7">
           Change password
         </button>
       </div>
diff --git a/components/demos/Toast/tailwind/index.jsx b/components/demos/Toast/tailwind/index.jsx
index c8ad8496b..858b0e9b6 100644
--- a/components/demos/Toast/tailwind/index.jsx
+++ b/components/demos/Toast/tailwind/index.jsx
@@ -13,7 +13,7 @@ const ToastDemo = () => {
   return (
     <Toast.Provider swipeDirection="right">
       <button
-        className="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+        className="inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] text-[15px] font-medium leading-[35px] text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
         onClick={() => {
           setOpen(false);
           window.clearTimeout(timerRef.current);
@@ -27,28 +27,28 @@ const ToastDemo = () => {
       </button>
 
       <Toast.Root
-        className="bg-white rounded-md shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-swipeOut"
+        className="grid grid-cols-[auto_max-content] items-center gap-x-[15px] rounded-md bg-white p-[15px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] [grid-template-areas:_'title_action'_'description_action'] data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-hide data-[state=open]:animate-slideIn data-[swipe=end]:animate-swipeOut data-[swipe=cancel]:transition-[transform_200ms_ease-out]"
         open={open}
         onOpenChange={setOpen}
       >
-        <Toast.Title className="[grid-area:_title] mb-[5px] font-medium text-slate12 text-[15px]">
+        <Toast.Title className="mb-[5px] text-[15px] font-medium text-slate12 [grid-area:_title]">
           Scheduled: Catch up
         </Toast.Title>
         <Toast.Description asChild>
           <time
-            className="[grid-area:_description] m-0 text-slate11 text-[13px] leading-[1.3]"
+            className="m-0 text-[13px] leading-[1.3] text-slate11 [grid-area:_description]"
             dateTime={eventDateRef.current.toISOString()}
           >
             {prettyDate(eventDateRef.current)}
           </time>
         </Toast.Description>
         <Toast.Action className="[grid-area:_action]" asChild altText="Goto schedule to undo">
-          <button className="inline-flex items-center justify-center rounded font-medium text-xs px-2.5 leading-[25px] h-[25px] bg-green2 text-green11 shadow-[inset_0_0_0_1px] shadow-green7 hover:shadow-[inset_0_0_0_1px] hover:shadow-green8 focus:shadow-[0_0_0_2px] focus:shadow-green8">
+          <button className="inline-flex h-[25px] items-center justify-center rounded bg-green2 px-2.5 text-xs font-medium leading-[25px] text-green11 shadow-[inset_0_0_0_1px] shadow-green7 hover:shadow-[inset_0_0_0_1px] hover:shadow-green8 focus:shadow-[0_0_0_2px] focus:shadow-green8">
             Undo
           </button>
         </Toast.Action>
       </Toast.Root>
-      <Toast.Viewport className="[--viewport-padding:_25px] fixed bottom-0 right-0 flex flex-col p-[var(--viewport-padding)] gap-2.5 w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
+      <Toast.Viewport className="fixed bottom-0 right-0 z-[2147483647] m-0 flex w-[390px] max-w-[100vw] list-none flex-col gap-2.5 p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]" />
     </Toast.Provider>
   );
 };
diff --git a/components/demos/Toggle/tailwind/index.jsx b/components/demos/Toggle/tailwind/index.jsx
index 9c92132d3..cd6e3e7a8 100644
--- a/components/demos/Toggle/tailwind/index.jsx
+++ b/components/demos/Toggle/tailwind/index.jsx
@@ -5,7 +5,7 @@ import { FontItalicIcon } from '@radix-ui/react-icons';
 const ToggleDemo = () => (
   <Toggle.Root
     aria-label="Toggle italic"
-    className="hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 shadow-blackA4 flex size-[35px] items-center justify-center rounded bg-white leading-4 shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black"
+    className="flex size-[35px] items-center justify-center rounded bg-white leading-4 text-mauve11 shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=on]:bg-violet6 data-[state=on]:text-violet12"
   >
     <FontItalicIcon />
   </Toggle.Root>
diff --git a/components/demos/ToggleGroup/tailwind/index.jsx b/components/demos/ToggleGroup/tailwind/index.jsx
index 47d6eee86..41372efa0 100644
--- a/components/demos/ToggleGroup/tailwind/index.jsx
+++ b/components/demos/ToggleGroup/tailwind/index.jsx
@@ -3,11 +3,11 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';
 
 const toggleGroupItemClasses =
-  'hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 flex size-[35px] items-center justify-center bg-white leading-4 first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none';
+  'flex size-[35px] items-center justify-center bg-white leading-4 text-mauve11 first:rounded-l last:rounded-r hover:bg-violet3 focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none data-[state=on]:bg-violet6 data-[state=on]:text-violet12';
 
 const ToggleGroupDemo = () => (
   <ToggleGroup.Root
-    className="inline-flex bg-mauve6 rounded shadow-[0_2px_10px] shadow-blackA4 space-x-px"
+    className="inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4"
     type="single"
     defaultValue="center"
     aria-label="Text alignment"
diff --git a/components/demos/Toolbar/tailwind/index.jsx b/components/demos/Toolbar/tailwind/index.jsx
index 6b2478a25..a0aa9793d 100644
--- a/components/demos/Toolbar/tailwind/index.jsx
+++ b/components/demos/Toolbar/tailwind/index.jsx
@@ -11,59 +11,59 @@ import {
 
 const ToolbarDemo = () => (
   <Toolbar.Root
-    className="flex p-2.5 w-full min-w-max rounded-md bg-white shadow-[0_2px_10px] shadow-blackA4"
+    className="flex w-full min-w-max rounded-md bg-white p-2.5 shadow-[0_2px_10px] shadow-blackA4"
     aria-label="Formatting options"
   >
     <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
       <Toolbar.ToggleItem
-        className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+        className="ml-0.5 inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
         value="bold"
         aria-label="Bold"
       >
         <FontBoldIcon />
       </Toolbar.ToggleItem>
       <Toolbar.ToggleItem
-        className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+        className="ml-0.5 inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
         value="italic"
         aria-label="Italic"
       >
         <FontItalicIcon />
       </Toolbar.ToggleItem>
       <Toolbar.ToggleItem
-        className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+        className="ml-0.5 inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
         value="strikethrough"
         aria-label="Strike through"
       >
         <StrikethroughIcon />
       </Toolbar.ToggleItem>
     </Toolbar.ToggleGroup>
-    <Toolbar.Separator className="w-px bg-mauve6 mx-2.5" />
+    <Toolbar.Separator className="mx-2.5 w-px bg-mauve6" />
     <Toolbar.ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
       <Toolbar.ToggleItem
-        className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+        className="ml-0.5 inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
         value="left"
         aria-label="Left aligned"
       >
         <TextAlignLeftIcon />
       </Toolbar.ToggleItem>
       <Toolbar.ToggleItem
-        className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+        className="ml-0.5 inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
         value="center"
         aria-label="Center aligned"
       >
         <TextAlignCenterIcon />
       </Toolbar.ToggleItem>
       <Toolbar.ToggleItem
-        className="flex-shrink-0 flex-grow-0 basis-auto text-mauve11 h-[25px] px-[5px] rounded inline-flex text-[13px] leading-none items-center justify-center bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+        className="ml-0.5 inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
         value="right"
         aria-label="Right aligned"
       >
         <TextAlignRightIcon />
       </Toolbar.ToggleItem>
     </Toolbar.ToggleGroup>
-    <Toolbar.Separator className="w-px bg-mauve6 mx-2.5" />
+    <Toolbar.Separator className="mx-2.5 w-px bg-mauve6" />
     <Toolbar.Link
-      className="bg-transparent text-mauve11 hidden sm:inline-flex justify-center items-center hover:bg-transparent hover:cursor-pointer flex-shrink-0 flex-grow-0 basis-auto h-[25px] px-[5px] rounded text-[13px] leading-none bg-white ml-0.5 outline-none hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 first:ml-0 data-[state=on]:bg-violet5 data-[state=on]:text-violet11"
+      className="ml-0.5 hidden h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-transparent bg-white px-[5px] text-[13px] leading-none text-mauve11 outline-none first:ml-0 hover:cursor-pointer hover:bg-transparent hover:bg-violet3 hover:text-violet11 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7 data-[state=on]:bg-violet5 data-[state=on]:text-violet11 sm:inline-flex"
       href="#"
       target="_blank"
       style={{ marginRight: 10 }}
@@ -71,7 +71,7 @@ const ToolbarDemo = () => (
       Edited 2 hours ago
     </Toolbar.Link>
     <Toolbar.Button
-      className="px-2.5 text-white bg-violet9 flex-shrink-0 flex-grow-0 basis-auto h-[25px] rounded inline-flex text-[13px] leading-none items-center justify-center outline-none hover:bg-violet10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7"
+      className="inline-flex h-[25px] flex-shrink-0 flex-grow-0 basis-auto items-center justify-center rounded bg-violet9 px-2.5 text-[13px] leading-none text-white outline-none hover:bg-violet10 focus:relative focus:shadow-[0_0_0_2px] focus:shadow-violet7"
       style={{ marginLeft: 'auto' }}
     >
       Share
diff --git a/components/demos/Tooltip/tailwind/index.jsx b/components/demos/Tooltip/tailwind/index.jsx
index cf83cd810..5d741acc5 100644
--- a/components/demos/Tooltip/tailwind/index.jsx
+++ b/components/demos/Tooltip/tailwind/index.jsx
@@ -7,13 +7,13 @@ const TooltipDemo = () => {
     <Tooltip.Provider>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <button className="text-violet11 shadow-blackA4 hover:bg-violet3 inline-flex size-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+          <button className="inline-flex size-[35px] items-center justify-center rounded-full bg-white text-violet11 shadow-[0_2px_10px] shadow-blackA4 outline-none hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black">
             <PlusIcon />
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
-            className="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded bg-white px-[15px] py-2.5 text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+            className="select-none rounded bg-white px-[15px] py-2.5 text-[15px] leading-none text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
             sideOffset={5}
           >
             Add to library