format playgrounds

Author: RobinMalfait

packages/playground-react/pages/_app.tsx

@@ -132,7 +132,7 @@ function KeyCaster() {
   if (keys.length <= 0) return null
 
   return (
-    <div className="pointer-events-none fixed right-4 bottom-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow">
+    <div className="pointer-events-none fixed bottom-4 right-4 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow">
       {keys.slice().reverse().join(' ')}
     </div>
   )

packages/playground-react/pages/combinations/form.tsx

@@ -260,7 +260,7 @@ export default function App() {
                       <div className="flex w-full flex-col">
                         <Combobox.Input
                           onChange={(e) => setQuery(e.target.value)}
-                          className="w-full rounded-md rounded border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                          className="w-full rounded rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                           placeholder="Search users..."
                         />
                         <div

packages/playground-react/pages/combinations/tabs-in-dialog.tsx

@@ -11,7 +11,7 @@ export default function App() {
       <Dialog open={open} onClose={setOpen} className="fixed inset-0 grid place-content-center">
         <div className="fixed inset-0 bg-gray-500/70" />
         <Dialog.Panel className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
-          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
             <Tab.Group>
               <Tab.List className="flex gap-4 py-4">
                 <Tab as={Button}>Tab 1</Tab>

packages/playground-react/pages/dialog/dialog-scroll-issue.tsx

@@ -15,7 +15,7 @@ function MyDialog({ open, close }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed left-0 top-0 bottom-0 flex items-center justify-center bg-red-500 p-4">
+            <div className="fixed bottom-0 left-0 top-0 flex items-center justify-center bg-red-500 p-4">
               <Dialog.Panel className="mx-auto w-48 rounded bg-white p-4">
                 <p className="my-2">Gray area should be scrollable</p>
 

packages/playground-react/pages/dialog/dialog-with-shadow-children.tsx

@@ -63,7 +63,7 @@ export default function App() {
             <ShadowChildren id="btn_outside_shadow" />
           </div>
         </div>
-        <Dialog.Panel className="fixed top-16 left-16 z-50 h-64 w-64 rounded-lg border border-black/10 bg-white bg-clip-padding p-12 shadow-lg">
+        <Dialog.Panel className="fixed left-16 top-16 z-50 h-64 w-64 rounded-lg border border-black/10 bg-white bg-clip-padding p-12 shadow-lg">
           <div>
             <button
               className="m-4 rounded border-0 bg-gray-500 px-3 py-1 font-medium text-white hover:bg-gray-600"

packages/playground-react/pages/dialog/dialog.tsx

@@ -77,7 +77,7 @@ export default function Home() {
           }}
         >
           <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
               <Transition.Child
                 as={Fragment}
                 enter="ease-out duration-300"
@@ -115,7 +115,7 @@ export default function Home() {
                   &#8203;
                 </span>
                 <Dialog.Panel className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
-                  <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                         {/* Heroicon name: exclamation */}
@@ -135,7 +135,7 @@ export default function Home() {
                           />
                         </svg>
                       </div>
-                      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900"
@@ -152,7 +152,7 @@ export default function Home() {
                               <Menu.Button as={Button} ref={trigger}>
                                 <span>Choose a reason</span>
                                 <svg
-                                  className="ml-2 -mr-1 h-5 w-5"
+                                  className="-mr-1 ml-2 h-5 w-5"
                                   viewBox="0 0 20 20"
                                   fill="currentColor"
                                 >

packages/playground-react/pages/dialog/scrollable-dialog.tsx

@@ -43,12 +43,12 @@ export default function Example() {
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                         Deactivate account
                       </Dialog.Title>
@@ -70,7 +70,7 @@ export default function Example() {
                       </div>
                     </div>
                   </div>
-                  <div className="mt-5 sm:mt-4 sm:ml-10 sm:flex sm:pl-4">
+                  <div className="mt-5 sm:ml-10 sm:mt-4 sm:flex sm:pl-4">
                     <button
                       type="button"
                       className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:w-auto sm:text-sm"
@@ -80,7 +80,7 @@ export default function Example() {
                     </button>
                     <button
                       type="button"
-                      className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:mt-0 sm:w-auto sm:text-sm"
                       onClick={() => setOpen(false)}
                       ref={cancelButtonRef}
                     >

packages/playground-react/pages/dialog/scrollable-page-with-dialog.tsx

@@ -50,7 +50,7 @@ export default function Home() {
           }}
         >
           <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
               <Transition.Child
                 as={Fragment}
                 enter="ease-out duration-300"
@@ -88,7 +88,7 @@ export default function Home() {
                   &#8203;
                 </span>
                 <Dialog.Panel className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
-                  <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                         {/* Heroicon name: exclamation */}
@@ -108,7 +108,7 @@ export default function Home() {
                           />
                         </svg>
                       </div>
-                      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900"

packages/playground-react/pages/menu/menu-with-floating-ui.tsx

@@ -28,7 +28,7 @@ export default function Home() {
           <span className="inline-flex rounded-md shadow-sm">
             <Menu.Button ref={refs.setReference} as={Button}>
               <span>Options</span>
-              <svg className="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"

packages/playground-react/pages/menu/menu-with-framer-motion.tsx

@@ -16,7 +16,7 @@ export default function Home() {
               <span className="rounded-md shadow-sm">
                 <Menu.Button as={Button}>
                   <span>Options</span>
-                  <svg className="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                     <path
                       fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"