diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index ca3afa851..cb9334124 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -13,14 +13,14 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
         (crumb, i) =>
           crumb.path &&
           !crumb.skipBreadcrumb && (
-            <div className="flex mb-3 mt-0.5 items-center" key={i}>
+            <div className="mb-3 mt-0.5 flex items-center" key={i}>
               <Fragment key={crumb.path}>
                 <Link href={crumb.path}>
-                  <a className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
+                  <a className="mr-1 text-sm font-bold uppercase tracking-wide text-link hover:underline dark:text-link-dark">
                     {crumb.title}
                   </a>
                 </Link>
-                <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
+                <span className="mr-1 inline-block text-lg text-link dark:text-link-dark">
                   <svg
                     width="20"
                     height="20"
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1dc5b4b87..9d58e7aa8 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -30,11 +30,11 @@ export function Button({
       onClick={onClick}
       className={cn(
         className,
-        'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',
+        'my-1 inline-flex items-center rounded-full py-2 px-4 text-base font-bold leading-tight focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark',
         {
-          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+          'border-link bg-link text-white hover:bg-link focus:bg-link active:bg-link':
             active,
-          'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
+          'bg-transparent text-primary shadow-secondary-button-stroke hover:bg-gray-40/5 active:bg-gray-40/10 active:text-primary dark:text-primary-dark dark:shadow-secondary-button-stroke-dark  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
             !active,
         }
       )}>
diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index d2c2c25de..4440a6976 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -27,7 +27,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
       <>
         {prevRoute?.path || nextRoute?.path ? (
           <>
-            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
+            <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 py-4 md:grid-cols-2 md:py-12">
               {prevRoute?.path ? (
                 <FooterLink
                   type="Previous"
@@ -69,17 +69,17 @@ function FooterLink({
     <NextLink href={href}>
       <a
         className={cn(
-          'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
+          'group flex w-full items-center gap-x-4 rounded-lg border-2 border-transparent px-4 py-6 text-base leading-base text-link hover:bg-gray-5 focus:border-2 focus:border-link focus:border-opacity-100 focus:bg-highlight focus:text-link focus:ring-1 focus:ring-blue-40 focus:ring-offset-4 active:ring-0 active:ring-offset-0 dark:text-link-dark dark:hover:bg-gray-80 dark:focus:border-link-dark dark:focus:bg-highlight-dark dark:focus:text-link-dark md:w-80 md:gap-x-6 md:px-5',
           {
             'flex-row-reverse justify-self-end text-right': type === 'Next',
           }
         )}>
         <IconNavArrow
-          className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
+          className="inline text-tertiary group-focus:text-link dark:text-tertiary-dark dark:group-focus:text-link-dark"
           displayDirection={type === 'Previous' ? 'left' : 'right'}
         />
         <span>
-          <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
+          <span className="block text-sm font-bold uppercase tracking-wide text-secondary no-underline group-focus:text-link group-focus:text-opacity-100 dark:text-secondary-dark dark:group-focus:text-link-dark">
             {type}
           </span>
           <span className="block text-lg group-hover:underline">{title}</span>
diff --git a/src/components/Icon/IconHint.tsx b/src/components/Icon/IconHint.tsx
index b802bc79c..500f032d6 100644
--- a/src/components/Icon/IconHint.tsx
+++ b/src/components/Icon/IconHint.tsx
@@ -10,7 +10,7 @@ export const IconHint = memo<JSX.IntrinsicElements['svg']>(function IconHint({
 }) {
   return (
     <svg
-      className={cn('inline -mt-0.5', className)}
+      className={cn('-mt-0.5 inline', className)}
       width="12"
       height="14"
       viewBox="0 0 12 15"
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 6bb8a4aac..b881a8a3a 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -61,14 +61,14 @@ function sendGAEvent(isPositive: boolean) {
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
-    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
-      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
+    <div className="m-4 flex w-80 max-w-xs rounded-lg bg-wash py-3 px-4 shadow-lg dark:bg-gray-95 lg:w-auto">
+      <p className="mr-4 w-full text-lg font-bold text-primary dark:text-primary-dark">
         {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
       </p>
       {!isSubmitted && (
         <button
           aria-label="Yes"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
+          className="mr-2 rounded-lg bg-secondary-button px-3 text-primary dark:bg-secondary-button-dark dark:text-primary-dark"
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
@@ -80,7 +80,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       {!isSubmitted && (
         <button
           aria-label="No"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
+          className="rounded-lg bg-secondary-button px-3 text-primary dark:bg-secondary-button-dark dark:text-primary-dark"
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 677899eec..561479771 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -14,8 +14,8 @@ export function Footer() {
   const socialLinkClasses = 'hover:text-primary dark:text-primary-dark';
   return (
     <footer className={cn('text-secondary dark:text-secondary-dark')}>
-      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto">
-        <div className="col-span-2 md:col-span-1 justify-items-start mt-3.5 text-left">
+      <div className="mx-auto grid max-w-7xl grid-cols-2 gap-x-12 gap-y-8 md:grid-cols-3 xl:grid-cols-5">
+        <div className="col-span-2 mt-3.5 justify-items-start text-left md:col-span-1">
           <ExternalLink
             href="https://opensource.fb.com/"
             aria-label="Meta Open Source">
@@ -280,7 +280,7 @@ export function Footer() {
             </div>
           </ExternalLink>
 
-          <div className="text-xs text-left mt-2 pr-0.5">
+          <div className="mt-2 pr-0.5 text-left text-xs">
             &copy;{new Date().getFullYear()}
           </div>
         </div>
@@ -306,7 +306,7 @@ export function Footer() {
           <FooterLink href="/reference/react">React APIs</FooterLink>
           <FooterLink href="/reference/react-dom">React DOM APIs</FooterLink>
         </div>
-        <div className="md:col-start-2 xl:col-start-4 flex flex-col">
+        <div className="flex flex-col md:col-start-2 xl:col-start-4">
           <FooterLink href="/community" isHeader={true}>
             Community
           </FooterLink>
@@ -331,7 +331,7 @@ export function Footer() {
           <FooterLink href="https://opensource.fb.com/legal/terms/">
             Terms
           </FooterLink>
-          <div className="flex flex-row mt-8 gap-x-2">
+          <div className="mt-8 flex flex-row gap-x-2">
             <ExternalLink
               aria-label="React on Facebook"
               href="https://www.facebook.com/react"
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index a5a15ea50..280097970 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -34,17 +34,17 @@ function Section({children, background = null}) {
   return (
     <div
       className={cn(
-        'mx-auto flex flex-col w-full',
+        'mx-auto flex w-full flex-col',
         background === null && 'max-w-7xl',
         background === 'left-card' &&
-          'bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10 ',
+          'border-t border-primary/10 bg-gradient-left dark:border-primary-dark/10 dark:bg-gradient-left-dark ',
         background === 'right-card' &&
-          'bg-gradient-right dark:bg-gradient-right-dark border-t border-primary/5 dark:border-primary-dark/5'
+          'border-t border-primary/5 bg-gradient-right dark:border-primary-dark/5 dark:bg-gradient-right-dark'
       )}
       style={{
         contain: 'content',
       }}>
-      <div className="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center">
+      <div className="my-20 mx-auto flex w-full grow flex-col items-center gap-2 lg:my-32">
         {children}
       </div>
     </div>
@@ -53,7 +53,7 @@ function Section({children, background = null}) {
 
 function Header({children}) {
   return (
-    <h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">
+    <h2 className="-mt-4 mb-7 w-full max-w-3xl font-display text-5xl font-semibold leading-xl text-primary dark:text-primary-dark lg:max-w-xl lg:text-6xl">
       {children}
     </h2>
   );
@@ -61,7 +61,7 @@ function Header({children}) {
 
 function Para({children}) {
   return (
-    <p className="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
+    <p className="mx-auto max-w-3xl text-lg leading-normal text-secondary dark:text-secondary-dark lg:text-xl">
       {children}
     </p>
   );
@@ -69,7 +69,7 @@ function Para({children}) {
 
 function Left({children}) {
   return (
-    <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
+    <div className="max-w-4xl px-5 text-white text-opacity-80 lg:px-0 lg:text-left">
       {children}
     </div>
   );
@@ -77,7 +77,7 @@ function Left({children}) {
 
 function Center({children}) {
   return (
-    <div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
+    <div className="flex max-w-4xl flex-col items-center justify-center px-5 text-white text-opacity-80 lg:px-0 lg:text-center">
       {children}
     </div>
   );
@@ -85,7 +85,7 @@ function Center({children}) {
 
 function FullBleed({children}) {
   return (
-    <div className="max-w-7xl mx-auto flex flex-col w-full">{children}</div>
+    <div className="mx-auto flex w-full max-w-7xl flex-col">{children}</div>
   );
 }
 
@@ -121,24 +121,24 @@ export function HomeContent() {
   return (
     <>
       <div className="pl-0">
-        <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
+        <div className="mx-5 mt-12 mb-20 flex flex-col justify-center lg:mt-24 lg:mb-32">
           <Logo
             className={cn(
-              'mt-4 mb-3 text-link dark:text-link-dark w-24 lg:w-28 self-center text-sm mr-0 flex origin-center transition-all ease-in-out'
+              'mt-4 mb-3 mr-0 flex w-24 origin-center self-center text-sm text-link transition-all ease-in-out dark:text-link-dark lg:w-28'
             )}
           />
-          <h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
+          <h1 className="flex self-center font-display text-5xl font-semibold leading-snug text-primary dark:text-primary-dark lg:text-6xl">
             React
           </h1>
-          <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
+          <p className="max-w-lg self-center py-1 text-center font-display text-4xl leading-snug text-secondary dark:text-primary-dark md:max-w-full">
             The library for web and native user interfaces
           </p>
-          <div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
+          <div className="mt-5 flex w-full flex-col gap-2 self-center sm:w-auto sm:flex-row">
             <ButtonLink
               href={'/learn'}
               type="primary"
               size="lg"
-              className="w-full sm:w-auto justify-center"
+              className="w-full justify-center sm:w-auto"
               label="Learn React">
               Learn React
             </ButtonLink>
@@ -146,7 +146,7 @@ export function HomeContent() {
               href={'/reference/react'}
               type="secondary"
               size="lg"
-              className="w-full sm:w-auto justify-center"
+              className="w-full justify-center sm:w-auto"
               label="API Reference">
               API Reference
             </ButtonLink>
@@ -219,7 +219,7 @@ export function HomeContent() {
               your existing HTML page, and render interactive React components
               anywhere on it.
             </Para>
-            <div className="flex justify-start w-full lg:justify-center">
+            <div className="flex w-full justify-start lg:justify-center">
               <CTA
                 color="gray"
                 icon="code"
@@ -254,7 +254,7 @@ export function HomeContent() {
               or even during the build. Read data from a file or a database, and
               pass it down to your interactive components.
             </Para>
-            <div className="flex justify-start w-full lg:justify-center">
+            <div className="flex w-full justify-start lg:justify-center">
               <CTA
                 color="gray"
                 icon="framework"
@@ -265,8 +265,8 @@ export function HomeContent() {
           </Center>
         </Section>
         <Section background="left-card">
-          <div className="mx-auto flex flex-col w-full">
-            <div className="mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col">
+          <div className="mx-auto flex w-full flex-col">
+            <div className="mx-auto flex max-w-4xl flex-col items-center px-5 lg:text-center">
               <Header>Use the best from every platform</Header>
               <Para>
                 People love web and native apps for different reasons. React
@@ -275,20 +275,20 @@ export function HomeContent() {
                 your interfaces feel just right on every platform.
               </Para>
             </div>
-            <div className="max-w-7xl mx-auto flex flex-col lg:flex-row mt-16 mb-20 lg:mb-28 px-5 gap-20 lg:gap-5">
-              <div className="relative lg:w-6/12 flex">
-                <div className="absolute -bottom-8 lg:-bottom-10 z-10 w-full">
+            <div className="mx-auto mt-16 mb-20 flex max-w-7xl flex-col gap-20 px-5 lg:mb-28 lg:flex-row lg:gap-5">
+              <div className="relative flex lg:w-6/12">
+                <div className="absolute -bottom-8 z-10 w-full lg:-bottom-10">
                   <WebIcons />
                 </div>
                 <BrowserChrome hasRefresh={false} domain="example.com">
                   <div className="relative overflow-hidden">
                     <div className="absolute inset-0 bg-gradient-right" />
-                    <div className="bg-wash relative h-14 w-full" />
-                    <div className="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8">
-                      <h4 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
+                    <div className="relative h-14 w-full bg-wash" />
+                    <div className="relative flex flex-1 flex-col items-start justify-center gap-3 px-5 pb-16 pt-5 lg:px-10 lg:pt-8">
+                      <h4 className="text-3xl font-semibold leading-tight text-primary lg:text-4xl">
                         Stay true to the web
                       </h4>
-                      <p className="lg:text-xl leading-normal text-secondary">
+                      <p className="leading-normal text-secondary lg:text-xl">
                         People expect web app pages to load fast. On the server,
                         React lets you start streaming HTML while you’re still
                         fetching data, progressively filling in the remaining
@@ -300,18 +300,18 @@ export function HomeContent() {
                   </div>
                 </BrowserChrome>
               </div>
-              <div className="relative lg:w-6/12 flex">
-                <div className="absolute -bottom-8 lg:-bottom-10 z-10 w-full">
+              <div className="relative flex lg:w-6/12">
+                <div className="absolute -bottom-8 z-10 w-full lg:-bottom-10">
                   <NativeIcons />
                 </div>
-                <figure className="mx-auto max-w-3xl h-auto">
-                  <div className="p-2.5 bg-gray-95 dark:bg-black rounded-2xl shadow-nav dark:shadow-nav-dark">
-                    <div className="bg-gradient-right dark:bg-gradient-right-dark px-3 sm:px-3 pb-12 lg:pb-20 rounded-lg overflow-hidden">
-                      <div className="select-none w-full h-14 flex flex-row items-start pt-3 -mb-2.5 justify-between text-tertiary dark:text-tertiary-dark">
-                        <span className="uppercase tracking-wide leading-none font-bold text-sm text-tertiary dark:text-tertiary-dark">
+                <figure className="mx-auto h-auto max-w-3xl">
+                  <div className="rounded-2xl bg-gray-95 p-2.5 shadow-nav dark:bg-black dark:shadow-nav-dark">
+                    <div className="overflow-hidden rounded-lg bg-gradient-right px-3 pb-12 dark:bg-gradient-right-dark sm:px-3 lg:pb-20">
+                      <div className="-mb-2.5 flex h-14 w-full select-none flex-row items-start justify-between pt-3 text-tertiary dark:text-tertiary-dark">
+                        <span className="text-sm font-bold uppercase leading-none tracking-wide text-tertiary dark:text-tertiary-dark">
                           <CurrentTime />
                         </span>
-                        <div className="gap-2 flex -mt-0.5">
+                        <div className="-mt-0.5 flex gap-2">
                           <svg
                             width="16"
                             height="20"
@@ -370,11 +370,11 @@ export function HomeContent() {
                           </svg>
                         </div>
                       </div>
-                      <div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
-                        <h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
+                      <div className="flex flex-col items-start justify-center gap-3 px-2.5 pt-0 lg:px-8 lg:pt-8">
+                        <h4 className="text-3xl font-semibold leading-tight text-primary dark:text-primary-dark lg:text-4xl">
                           Go truly native
                         </h4>
-                        <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
+                        <p className="h-full leading-normal text-secondary dark:text-secondary-dark lg:text-xl">
                           People expect native apps to look and feel like their
                           platform.{' '}
                           <Link href="https://reactnative.dev">
@@ -394,14 +394,14 @@ export function HomeContent() {
                 </figure>
               </div>
             </div>
-            <div className="px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark">
+            <div className="mx-auto max-w-4xl px-5 text-secondary dark:text-secondary-dark lg:px-0 lg:text-center">
               <Para>
                 With React, you can be a web <i>and</i> a native developer. Your
                 team can ship to many platforms without sacrificing the user
                 experience. Your organization can bridge the platform silos, and
                 form teams that own entire features end-to-end.
               </Para>
-              <div className="flex justify-start w-full lg:justify-center">
+              <div className="flex w-full justify-start lg:justify-center">
                 <CTA color="gray" icon="native" href="https://reactnative.dev/">
                   Build for native platforms
                 </CTA>
@@ -411,9 +411,9 @@ export function HomeContent() {
         </Section>
 
         <Section background="right-card">
-          <div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
-            <div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
-              <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
+          <div className="mx-auto flex max-w-7xl flex-col px-5 lg:flex-row">
+            <div className="flex max-w-3xl flex-col gap-5 lg:max-w-7xl lg:flex-row lg:px-5">
+              <div className="flex w-full max-w-3xl flex-col items-start justify-start lg:w-6/12 lg:pl-5 lg:pr-10">
                 <Header>Upgrade when the future is ready</Header>
                 <Para>
                   React approaches changes with care. Every React commit is
@@ -428,7 +428,7 @@ export function HomeContent() {
                     for taking a research idea into production. Only proven
                     approaches become a part of React.
                   </Para>
-                  <div className="hidden lg:flex justify-start w-full">
+                  <div className="hidden w-full justify-start lg:flex">
                     <CTA color="gray" icon="news" href="/blog">
                       Read more React news
                     </CTA>
@@ -436,25 +436,25 @@ export function HomeContent() {
                 </div>
               </div>
               <div className="w-full lg:w-6/12">
-                <p className="uppercase tracking-wide font-bold text-sm text-tertiary dark:text-tertiary-dark flex flex-row gap-2 items-center mt-5 lg:-mt-2 w-full">
+                <p className="mt-5 flex w-full flex-row items-center gap-2 text-sm font-bold uppercase tracking-wide text-tertiary dark:text-tertiary-dark lg:-mt-2">
                   <IconChevron />
                   Latest React News
                 </p>
-                <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5">
-                  <div className="flex-1 min-w-[40%]">
+                <div className="my-5 flex flex-col flex-wrap gap-5 text-left sm:flex-row">
+                  <div className="min-w-[40%] flex-1">
                     <BlogCard {...recentPosts[0]} />
                   </div>
-                  <div className="flex-1 min-w-[40%]">
+                  <div className="min-w-[40%] flex-1">
                     <BlogCard {...recentPosts[1]} />
                   </div>
-                  <div className="flex-1 min-w-[40%]">
+                  <div className="min-w-[40%] flex-1">
                     <BlogCard {...recentPosts[2]} />
                   </div>
-                  <div className="hidden sm:flex-1 sm:inline">
+                  <div className="hidden sm:inline sm:flex-1">
                     <BlogCard {...recentPosts[3]} />
                   </div>
                 </div>
-                <div className="flex lg:hidden justify-start w-full">
+                <div className="flex w-full justify-start lg:hidden">
                   <CTA color="gray" icon="news" href="/blog">
                     Read more React news
                   </CTA>
@@ -466,7 +466,7 @@ export function HomeContent() {
 
         <Section background="left-card">
           <div className="w-full">
-            <div className="mx-auto flex flex-col max-w-4xl">
+            <div className="mx-auto flex max-w-4xl flex-col">
               <Center>
                 <Header>
                   Join a community <br className="hidden lg:inline" />
@@ -480,7 +480,7 @@ export function HomeContent() {
               </Center>
             </div>
             <CommunityGallery />
-            <div className="mx-auto flex flex-col max-w-4xl">
+            <div className="mx-auto flex max-w-4xl flex-col">
               <Center>
                 <Para>
                   This is why React is more than a library, an architecture, or
@@ -495,8 +495,8 @@ export function HomeContent() {
             </div>
           </div>
 
-          <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
-            <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
+          <div className="mt-20 mb-6 max-w-4xl px-5 text-center text-opacity-80 lg:px-0">
+            <Logo className="mx-auto mb-10 mt-12 h-auto w-24 self-start text-link dark:text-link-dark lg:mb-8 lg:w-28" />
             <Header>
               Welcome to the <br className="" />
               React community
@@ -528,7 +528,7 @@ function CTA({children, icon, href}) {
     <Tag
       {...extraProps}
       href={href}
-      className="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark">
+      className="group mt-10 inline-flex w-auto cursor-pointer items-center justify-center rounded-full py-2.5 px-4 text-lg font-bold leading-tight text-primary shadow-secondary-button-stroke outline-none ease-in-out hover:bg-gray-40/5 hover:bg-opacity-80 focus:outline-none focus:outline-offset-2 focus-visible:outline focus-visible:outline-link active:bg-gray-40/10 dark:text-primary-dark dark:shadow-secondary-button-stroke-dark hover:dark:bg-gray-60/5 focus-visible:dark:focus:outline-link-dark active:dark:bg-gray-60/10 sm:px-6">
       {icon === 'native' && (
         <svg
           className="mr-2.5 text-primary dark:text-primary-dark"
@@ -637,14 +637,14 @@ function CTA({children, icon, href}) {
         viewBox="0 0 72 72"
         aria-hidden="true">
         <path
-          className="transition-transform ease-in-out translate-x-[-8px] group-hover:translate-x-[8px]"
+          className="translate-x-[-8px] transition-transform ease-in-out group-hover:translate-x-[8px]"
           fillRule="evenodd"
           clipRule="evenodd"
           d="M40.0001 19.0245C41.0912 17.7776 42.9864 17.6513 44.2334 18.7423L58.9758 33.768C59.6268 34.3377 60.0002 35.1607 60.0002 36.0257C60.0002 36.8908 59.6268 37.7138 58.9758 38.2835L44.2335 53.3078C42.9865 54.3988 41.0913 54.2725 40.0002 53.0256C38.9092 51.7786 39.0355 49.8835 40.2824 48.7924L52.4445 36.0257L40.2823 23.2578C39.0354 22.1667 38.9091 20.2714 40.0001 19.0245Z"
           fill="currentColor"
         />
         <path
-          className="opacity-0 ease-in-out transition-opacity group-hover:opacity-100"
+          className="opacity-0 transition-opacity ease-in-out group-hover:opacity-100"
           d="M60 36.0273C60 37.6842 58.6569 39.0273 57 39.0273H15C13.3431 39.0273 12 37.6842 12 36.0273C12 34.3704 13.3431 33.0273 15 33.0273H57C58.6569 33.0273 60 34.3704 60 36.0273Z"
           fill="currentColor"
         />
@@ -744,9 +744,9 @@ function CommunityGallery() {
   return (
     <div
       ref={ref}
-      className="relative flex overflow-x-hidden overflow-y-visible w-auto">
+      className="relative flex w-auto overflow-x-hidden overflow-y-visible">
       <div
-        className="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee"
+        className="flex w-full animate-marquee flex-row whitespace-nowrap py-12 lg:animate-large-marquee lg:py-20"
         style={{
           animationPlayState: shouldPlay ? 'running' : 'paused',
         }}>
@@ -754,7 +754,7 @@ function CommunityGallery() {
       </div>
       <div
         aria-hidden="true"
-        className="w-full absolute top-0 py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee2 lg:animate-large-marquee2"
+        className="absolute top-0 flex w-full animate-marquee2 flex-row whitespace-nowrap py-12 lg:animate-large-marquee2 lg:py-20"
         style={{
           animationPlayState: shouldPlay ? 'running' : 'paused',
         }}>
@@ -771,20 +771,20 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
         <div
           key={i}
           className={cn(
-            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative`
+            `group relative flex min-w-[50%] justify-center rounded-2xl px-5 lg:min-w-[25%]`
           )}>
           <div
             className={cn(
-              'h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300',
+              'relative h-auto overflow-hidden rounded-2xl transition-all duration-300 ease-in-out before:absolute before:inset-0 before:-translate-x-full before:-skew-x-12 before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent group-hover:before:animate-[shimmer_1s_forwards]',
               i % 2 === 0
                 ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
-                : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
+                : 'rotate-[-2deg] group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
             )}>
             <img
               loading={isLazy ? 'lazy' : 'eager'}
               src={src}
               alt={alt}
-              className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+              className="flex aspect-[4/3] h-full w-full rounded-2xl bg-gray-10 object-cover dark:bg-gray-80"
             />
           </div>
         </div>
@@ -833,12 +833,12 @@ function ExampleLayout({
     }
   }, [activeArea]);
   return (
-    <div className="lg:pl-10 lg:pr-5 w-full">
-      <div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
-        <div className="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark">
-          <div className="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col">
-            <div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5">
-              <h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
+    <div className="w-full lg:pl-10 lg:pr-5">
+      <div className="mx-auto mt-12 mb-2 flex w-full max-w-7xl flex-col lg:my-16 lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
+        <div className="mx-auto flex w-full grow flex-col items-center gap-0 bg-meta-gradient bg-cover bg-center bg-no-repeat shadow-inner-border dark:bg-meta-gradient-dark dark:shadow-inner-border-dark lg:flex-row lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:bg-[length:60%_100%] lg:bg-right lg:dark:bg-gray-70">
+          <div className="flex h-full w-full grow flex-col bg-wash shadow-nav dark:bg-gray-95 dark:shadow-nav-dark lg:-m-5 lg:rounded-2xl">
+            <div className="w-full border-b border-black/5 bg-card dark:border-white/5 dark:bg-wash-dark lg:rounded-t-2xl">
+              <h3 className="my-1 mx-5 select-none text-sm text-tertiary dark:text-tertiary-dark">
                 {filename}
               </h3>
             </div>
@@ -846,17 +846,17 @@ function ExampleLayout({
           </div>
           <div
             ref={contentRef}
-            className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center">
+            className="relative mt-0 flex w-full grow justify-center p-2.5 lg:-my-20 lg:p-10 xs:p-5">
             {right}
             <div
               className={cn(
-                'absolute z-10 inset-0 pointer-events-none transition-opacity transform-gpu',
+                'pointer-events-none absolute inset-0 z-10 transform-gpu transition-opacity',
                 activeArea ? 'opacity-100' : 'opacity-0'
               )}>
               {overlayStyles.map((styles, i) => (
                 <div
                   key={i}
-                  className="top-0 left-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
+                  className="absolute top-0 left-0 rounded-lg border-2 border-link bg-blue-30/5 dark:border-link-dark"
                   style={styles}
                 />
               ))}
@@ -1090,10 +1090,10 @@ function SearchableVideoList({ videos }) {
             noPadding={true}
             contentMarginTop="72px"
             height="30rem">
-            <h1 className="mx-4 mb-1 font-bold text-3xl text-primary">
+            <h1 className="mx-4 mb-1 text-3xl font-bold text-primary">
               React Videos
             </h1>
-            <p className="mx-4 mb-0 leading-snug text-secondary text-xl">
+            <p className="mx-4 mb-0 text-xl leading-snug text-secondary">
               A brief history of React
             </p>
             <div className="px-4 pb-4">
@@ -1224,7 +1224,7 @@ function ExamplePanel({
   return (
     <div
       className={cn(
-        'max-w-3xl rounded-2xl mx-auto text-secondary leading-normal bg-white overflow-hidden w-full overflow-y-auto',
+        'mx-auto w-full max-w-3xl overflow-hidden overflow-y-auto rounded-2xl bg-white leading-normal text-secondary',
         noShadow ? 'shadow-none' : 'shadow-nav dark:shadow-nav-dark'
       )}
       style={{height}}>
@@ -1271,13 +1271,13 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
   }
 
   return (
-    <div className="mx-auto max-w-3xl shadow-nav dark:shadow-nav-dark relative overflow-hidden w-full dark:border-opacity-10 rounded-2xl">
-      <div className="w-full h-14 rounded-t-2xl shadow-outer-border backdrop-filter overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 px-3 gap-2 flex flex-row items-center">
-        <div className="select-none h-8 relative bg-gray-30/20 text-sm text-tertiary text-center rounded-full w-full flex-row flex space-between items-center">
+    <div className="relative mx-auto w-full max-w-3xl overflow-hidden rounded-2xl shadow-nav dark:border-opacity-10 dark:shadow-nav-dark">
+      <div className="absolute top-0 z-10 flex h-14 w-full flex-row items-center gap-2 overflow-hidden rounded-t-2xl bg-white bg-opacity-90 px-3 shadow-outer-border backdrop-blur-lg backdrop-saturate-200 backdrop-filter">
+        <div className="space-between relative flex h-8 w-full select-none flex-row items-center rounded-full bg-gray-30/20 text-center text-sm text-tertiary">
           <div className="h-4 w-6" />
-          <div className="w-full leading-snug flex flex-row items-center justify-center">
+          <div className="flex w-full flex-row items-center justify-center leading-snug">
             <svg
-              className="text-tertiary mr-1 opacity-60"
+              className="mr-1 text-tertiary opacity-60"
               width="12"
               height="12"
               viewBox="0 0 44 44"
@@ -1301,22 +1301,22 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
             <div
               ref={refreshRef}
               className={cn(
-                'relative rounded-full flex justify-center items-center ',
+                'relative flex items-center justify-center rounded-full ',
                 isPulsing && shouldAnimatePulse && 'animation-pulse-button'
               )}>
               {isPulsing && shouldAnimatePulse && (
-                <div className="z-0 absolute shadow-[0_0_0_8px_rgba(0,0,0,0.5)] inset-0 rounded-full animation-pulse-shadow" />
+                <div className="animation-pulse-shadow absolute inset-0 z-0 rounded-full shadow-[0_0_0_8px_rgba(0,0,0,0.5)]" />
               )}
               <button
                 aria-label="Reload"
                 onClick={handleRestart}
                 className={
-                  'z-10 flex items-center p-1.5 rounded-full cursor-pointer justify-center' +
+                  'z-10 flex cursor-pointer items-center justify-center rounded-full p-1.5' +
                   // bg-transparent hover:bg-gray-20/50,
                   // but opaque to obscure the pulsing wave.
                   ' bg-[#ebecef] hover:bg-[#d3d7de]'
                 }>
-                <IconRestart className="text-tertiary text-lg" />
+                <IconRestart className="text-lg text-tertiary" />
               </button>
             </div>
           )}
@@ -1324,14 +1324,14 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
         {restartId > 0 && (
           <div
             key={restartId}
-            className="z-10 loading h-0.5 bg-link transition-all duration-200 absolute bottom-0 left-0"
+            className="loading absolute bottom-0 left-0 z-10 h-0.5 bg-link transition-all duration-200"
             style={{
               animation: `progressbar ${loadTalksDelay + 100}ms ease-in-out`,
             }}
           />
         )}
       </div>
-      <div className="h-full flex flex-1" key={restartId}>
+      <div className="flex h-full flex-1" key={restartId}>
         {children}
       </div>
     </div>
@@ -1353,9 +1353,9 @@ function ConferencePage({slug}) {
 
 function TalksLoading() {
   return (
-    <div className="flex flex-col items-center h-[25rem] overflow-hidden">
+    <div className="flex h-[25rem] flex-col items-center overflow-hidden">
       <div className="w-full">
-        <div className="relative overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/50 before:to-transparent">
+        <div className="relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:-skew-x-12 before:animate-[shimmer_2.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/50 before:to-transparent">
           <div className="space-y-4">
             <div className="pt-4 pb-1">
               <div className="h-10 w-full rounded-full bg-gray-10"></div>
@@ -1364,7 +1364,7 @@ function TalksLoading() {
               <div className="h-5 w-20 rounded-lg bg-gray-10"></div>
             </div>
             <div className="flex flex-row items-center gap-3">
-              <div className="aspect-video w-32 xs:w-36 rounded-lg bg-gray-10"></div>
+              <div className="aspect-video w-32 rounded-lg bg-gray-10 xs:w-36"></div>
               <div className="flex flex-col gap-2">
                 <div className="h-3 w-40 rounded-lg bg-gray-10"></div>
                 <div className="h-3 w-32 rounded-lg bg-gray-10"></div>
@@ -1372,7 +1372,7 @@ function TalksLoading() {
               </div>
             </div>
             <div className="flex flex-row items-center gap-3">
-              <div className="aspect-video w-32 xs:w-36 rounded-lg bg-gray-10"></div>
+              <div className="aspect-video w-32 rounded-lg bg-gray-10 xs:w-36"></div>
               <div className="flex flex-col gap-2">
                 <div className="h-3 w-40 rounded-lg bg-gray-10"></div>
                 <div className="h-3 w-32 rounded-lg bg-gray-10"></div>
@@ -1380,7 +1380,7 @@ function TalksLoading() {
               </div>
             </div>
             <div className="flex flex-row items-center gap-3">
-              <div className="aspect-video w-32 xs:w-36 rounded-lg bg-gray-10"></div>
+              <div className="aspect-video w-32 rounded-lg bg-gray-10 xs:w-36"></div>
               <div className="flex flex-col gap-2">
                 <div className="h-3 w-40 rounded-lg bg-gray-10"></div>
                 <div className="h-3 w-32 rounded-lg bg-gray-10"></div>
@@ -1388,7 +1388,7 @@ function TalksLoading() {
               </div>
             </div>
             <div className="flex flex-row items-center gap-3">
-              <div className="aspect-video w-32 xs:w-36 rounded-lg bg-gray-10"></div>
+              <div className="aspect-video w-32 rounded-lg bg-gray-10 xs:w-36"></div>
               <div className="flex flex-col gap-2">
                 <div className="h-3 w-40 rounded-lg bg-gray-10"></div>
                 <div className="h-3 w-32 rounded-lg bg-gray-10"></div>
@@ -1447,7 +1447,7 @@ function VideoList({videos, emptyHeading}) {
   return (
     <section className="relative" data-hover="VideoList">
       <h2
-        className="font-bold text-xl text-primary mb-4 leading-snug"
+        className="mb-4 text-xl font-bold leading-snug text-primary"
         data-hover="h2">
         {heading}
       </h2>
@@ -1468,13 +1468,13 @@ function SearchInput({value, onChange}) {
         Search
       </label>
       <div className="relative w-full">
-        <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
-          <IconSearch className="text-gray-30 w-4" />
+        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+          <IconSearch className="w-4 text-gray-30" />
         </div>
         <input
           type="text"
           id={id}
-          className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
+          className="pointer flex h-10 w-full items-center rounded-full bg-secondary-button py-4 pl-11 text-left align-middle text-base text-primary outline-none betterhover:hover:bg-opacity-80"
           placeholder="Search"
           value={value}
           onChange={(e) => onChange(e.target.value)}
@@ -1503,7 +1503,7 @@ function ConferenceLayout({conf, children}) {
               navigate(e.target.value);
             });
           }}
-          className="appearance-none pr-8 bg-transparent text-primary-dark text-2xl font-bold mb-0.5"
+          className="mb-0.5 appearance-none bg-transparent pr-8 text-2xl font-bold text-primary-dark"
           style={{
             backgroundSize: '4px 4px, 4px 4px',
             backgroundRepeat: 'no-repeat',
@@ -1525,8 +1525,8 @@ function ConferenceLayout({conf, children}) {
 
 function Cover({background, children}) {
   return (
-    <div className="h-40 overflow-hidden relative items-center flex">
-      <div className="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0">
+    <div className="relative flex h-40 items-center overflow-hidden">
+      <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/40 via-black/0 px-4 py-2">
         {children}
       </div>
       <img
@@ -1548,17 +1548,17 @@ function Video({video}) {
         href={video.url}
         target="_blank"
         rel="noreferrer"
-        className="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5"
+        className="group flex flex-1 flex-col gap-0.5 outline-offset-4 outline-link dark:outline-link"
         data-hover="a">
         <h3
           className={cn(
-            'text-base leading-tight text-primary font-bold',
+            'text-base font-bold leading-tight text-primary',
             video.url && 'group-hover:underline'
           )}
           data-hover="h3">
           {video.title}
         </h3>
-        <p className="text-tertiary text-sm leading-snug" data-hover="p">
+        <p className="text-sm leading-snug text-tertiary" data-hover="p">
           {video.description}
         </p>
       </a>
@@ -1569,7 +1569,7 @@ function Video({video}) {
 
 function Code({children}) {
   return (
-    <span className="font-mono inline rounded-lg bg-secondary-button dark:bg-secondary-button-dark py-0.5 px-1">
+    <span className="inline rounded-lg bg-secondary-button py-0.5 px-1 font-mono dark:bg-secondary-button-dark">
       {children}
     </span>
   );
@@ -1586,13 +1586,13 @@ function Thumbnail({video}) {
       aria-hidden="true"
       tabIndex={-1}
       className={cn(
-        'outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))]',
+        'flex aspect-video w-32 select-none flex-col items-center justify-center overflow-hidden rounded-lg bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] bg-cover align-middle text-white/50 shadow-inner-border outline-offset-2 outline-link dark:outline-link xs:w-36',
         image === 'blue' && 'from-yellow-50 via-blue-50 to-purple-60',
         image === 'red' && 'from-yellow-50 via-red-50 to-purple-60',
         image === 'green' && 'from-yellow-50 via-green-50 to-purple-60',
         image === 'purple' && 'from-yellow-50 via-purple-50 to-purple-60',
         typeof image === 'object' && 'from-gray-80 via-gray-95 to-gray-70',
-        video.url && 'hover:opacity-95 transition-opacity'
+        video.url && 'transition-opacity hover:opacity-95'
       )}
       style={{
         backgroundImage:
@@ -1602,19 +1602,19 @@ function Thumbnail({video}) {
       }}>
       {typeof image !== 'string' ? (
         <>
-          <div className="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center">
+          <div className="mt-2.5 flex w-full flex-row justify-center -space-x-2 transition-opacity">
             {image.speakers.map((src, i) => (
               <img
                 key={i}
-                className="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full"
+                className="h-8 w-8 rounded-full border-2 border-gray-70 object-cover shadow-md"
                 src={src}
                 alt=""
               />
             ))}
           </div>
           <div className="mt-1">
-            <span className="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg">
-              <Logo className="text-xs mr-1 w-4 h-4 text-link-dark" />
+            <span className="inline-flex items-center whitespace-nowrap rounded-lg py-1 px-1.5 text-xs font-normal text-primary-dark outline-link">
+              <Logo className="mr-1 h-4 w-4 text-xs text-link-dark" />
               React Conf
             </span>
           </div>
@@ -1656,7 +1656,7 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        'relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full text-tertiary outline-none hover:bg-card focus:bg-red-50/5 focus:text-red-50 active:scale-95 active:bg-red-50/5 active:text-red-50',
         isLiked && 'text-red-50'
       )}
       aria-label={isLiked ? 'Unsave' : 'Save'}
@@ -1677,7 +1677,7 @@ function LikeButton({video}) {
         xmlns="http://www.w3.org/2000/svg">
         <circle
           className={cn(
-            'text-red-50/50 origin-center transition-all ease-in-out',
+            'origin-center text-red-50/50 transition-all ease-in-out',
             isLiked && animate && 'animate-[circle_.3s_forwards]'
           )}
           cx="12"
@@ -1691,7 +1691,7 @@ function LikeButton({video}) {
       {isLiked ? (
         <svg
           className={cn(
-            'w-6 h-6 origin-center transition-all ease-in-out',
+            'h-6 w-6 origin-center transition-all ease-in-out',
             isLiked && animate && 'animate-[scale_.35s_ease-in-out_forwards]'
           )}
           viewBox="0 0 24 24"
@@ -1704,7 +1704,7 @@ function LikeButton({video}) {
         </svg>
       ) : (
         <svg
-          className="w-6 h-6"
+          className="h-6 w-6"
           viewBox="0 0 24 24"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">
@@ -1722,7 +1722,7 @@ function LikeButton({video}) {
 function SvgContainer({children}) {
   return (
     <svg
-      className="w-16 h-16 lg:w-20 lg:h-20 rounded-2xl lg:rounded-3xl shadow-nav bg-wash"
+      className="h-16 w-16 rounded-2xl bg-wash shadow-nav lg:h-20 lg:w-20 lg:rounded-3xl"
       viewBox="0 0 120 120"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 48d60dde6..056a5a917 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -52,7 +52,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
       <div className="pl-0">
         <div
           className={cn(
-            section === 'blog' && 'mx-auto px-0 lg:px-4 max-w-5xl'
+            section === 'blog' && 'mx-auto max-w-5xl px-0 lg:px-4'
           )}>
           <PageHeading
             title={title}
@@ -64,7 +64,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         <div className="px-5 sm:px-12">
           <div
             className={cn(
-              'max-w-7xl mx-auto',
+              'mx-auto max-w-7xl',
               section === 'blog' && 'lg:flex lg:flex-col lg:items-center'
             )}>
             <TocContext.Provider value={toc}>{children}</TocContext.Provider>
@@ -116,7 +116,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         )}>
         {showSidebar && (
           <div className="lg:-mt-16">
-            <div className="lg:pt-16 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
+            <div className="fixed top-0 left-0 right-0 py-0 shadow lg:sticky lg:pt-16 lg:shadow-none">
               <SidebarNav
                 key={section}
                 routeTree={routeTree}
@@ -127,24 +127,24 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         )}
         {/* No fallback UI so need to be careful not to suspend directly inside. */}
         <Suspense fallback={null}>
-          <main className="min-w-0 isolate">
+          <main className="isolate min-w-0">
             <article className="break-words" key={asPath}>
               {content}
             </article>
             <div
               className={cn(
-                'self-stretch w-full',
-                isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]'
+                'w-full self-stretch',
+                isHomePage && 'mt-[-1px] bg-wash dark:bg-gray-95'
               )}>
               {!isHomePage && (
-                <div className="mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10">
+                <div className="mx-auto w-full px-5 pt-10 sm:px-12 md:px-12 md:pt-12 lg:pt-10">
                   {
-                    <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
+                    <hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
                   }
                   {showSurvey && (
                     <>
-                      <div className="flex flex-col items-center m-4 p-4">
-                        <p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
+                      <div className="m-4 flex flex-col items-center p-4">
+                        <p className="mb-4 text-lg font-bold text-primary dark:text-primary-dark">
                           How do you like these docs?
                         </p>
                         <div>
@@ -157,19 +157,19 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
                             Take our survey!
                             <IconNavArrow
                               displayDirection="right"
-                              className="inline ml-1"
+                              className="ml-1 inline"
                             />
                           </ButtonLink>
                         </div>
                       </div>
-                      <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
+                      <hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
                     </>
                   )}
                 </div>
               )}
               <div
                 className={cn(
-                  'py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14',
+                  'py-12 px-5 sm:px-12 sm:py-12 md:px-12 md:py-16 lg:py-14',
                   isHomePage && 'lg:pt-0'
                 )}>
                 <Footer />
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx
index b1276cdb8..67e543b27 100644
--- a/src/components/Layout/Sidebar/SidebarButton.tsx
+++ b/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -31,16 +31,16 @@ export function SidebarButton({
       })}>
       <button
         className={cn(
-          'p-2 pr-2 pl-5 w-full rounded-r-lg text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'relative flex w-full items-center justify-between rounded-r-lg p-2 pr-2 pl-5 text-left hover:bg-gray-5 dark:hover:bg-gray-80',
           {
             'p-2 text-base': level > 1,
-            'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':
+            'bg-highlight text-base font-bold text-link hover:bg-highlight hover:text-link dark:bg-highlight-dark dark:hover:bg-highlight-dark dark:hover:text-link-dark':
               !heading && isBreadcrumb && !isExpanded,
-            'p-4 my-6 text-2xl lg:my-auto lg:text-sm font-bold': heading,
-            'p-2 hover:text-gray-70 text-base font-bold text-primary dark:text-primary-dark':
+            'my-6 p-4 text-2xl font-bold lg:my-auto lg:text-sm': heading,
+            'p-2 text-base font-bold text-primary hover:text-gray-70 dark:text-primary-dark':
               !heading && !isBreadcrumb,
             'text-primary dark:text-primary-dark': heading && !isBreadcrumb,
-            'text-primary dark:text-primary-dark text-base font-bold bg-card dark:bg-card-dark':
+            'bg-card text-base font-bold text-primary dark:bg-card-dark dark:text-primary-dark':
               !heading && isExpanded,
           }
         )}
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 0d69b30be..ac8fcdf58 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -58,17 +58,17 @@ export function SidebarLink({
         target={target}
         aria-current={selected ? 'page' : undefined}
         className={cn(
-          'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'relative flex w-full items-center justify-between rounded-none p-2 pr-2 text-left hover:bg-gray-5 dark:hover:bg-gray-80 lg:rounded-r-2xl',
           {
-            'text-sm pl-6': level > 0,
+            'pl-6 text-sm': level > 0,
             'pl-5': level < 2,
             'text-base font-bold': level === 0,
             'text-primary dark:text-primary-dark': level === 0 && !selected,
             'text-base text-secondary dark:text-secondary-dark':
               level > 0 && !selected,
-            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+            'border-blue-40 bg-highlight text-base text-link hover:bg-highlight hover:text-link dark:bg-highlight-dark dark:text-link-dark dark:hover:bg-highlight-dark dark:hover:text-link-dark':
               selected,
-            'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
+            'bg-gray-3 hover:bg-gray-3 dark:bg-gray-70 dark:hover:bg-gray-70':
               isPending,
           }
         )}>
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index b8db801c6..c528bf5e2 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -153,7 +153,7 @@ export function SidebarRouteTree({
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 ml-5 text-sm font-bold text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 24fe86fa5..224dda446 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -32,21 +32,21 @@ export default function SidebarNav({
   return (
     <div
       className={cn(
-        'sticky top-0 lg:bottom-0 lg:h-[calc(100vh-4rem)] flex flex-col'
+        'sticky top-0 flex flex-col lg:bottom-0 lg:h-[calc(100vh-4rem)]'
       )}>
       <div
-        className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark"
+        className="no-bg-scrollbar grow overflow-y-scroll bg-wash dark:bg-wash-dark lg:w-[342px]"
         style={{
           overscrollBehavior: 'contain',
         }}>
         <aside
           className={cn(
-            `lg:grow flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`
+            `z-10 hidden w-full flex-col pb-8 lg:block lg:max-w-xs lg:grow lg:pb-0`
           )}>
           <nav
             role="navigation"
             style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-            className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+            className="scrolling-touch scrolling-gpu w-full grow pr-0 pt-6 md:pt-4 lg:h-auto lg:pr-5 lg:pb-16 lg:pt-4">
             {/* No fallback UI so need to be careful not to suspend directly inside. */}
             <Suspense fallback={null}>
               <SidebarRouteTree
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index a24bbced6..09809f32f 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -13,14 +13,14 @@ export function Toc({headings}: {headings: Toc}) {
   // Select the max TOC item we have here for now, but remove this after the fix.
   const selectedIndex = Math.min(currentIndex, headings.length - 1);
   return (
-    <nav role="navigation" className="pt-20 sticky top-0 right-0">
+    <nav role="navigation" className="sticky top-0 right-0 pt-20">
       {headings.length > 0 && (
-        <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
+        <h2 className="mb-3 w-full px-4 text-sm font-bold uppercase tracking-wide text-secondary dark:text-secondary-dark lg:mb-3">
           On this page
         </h2>
       )}
       <div
-        className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]"
+        className="h-full max-h-[calc(100vh-7.5rem)] overflow-y-auto pl-4"
         style={{
           overscrollBehavior: 'contain',
         }}>
@@ -35,7 +35,7 @@ export function Toc({headings}: {headings: Toc}) {
                 <li
                   key={`heading-${h.url}-${i}`}
                   className={cx(
-                    'text-sm px-2 rounded-l-xl',
+                    'rounded-l-xl px-2 text-sm',
                     selectedIndex === i
                       ? 'bg-highlight dark:bg-highlight-dark'
                       : null,
@@ -47,9 +47,9 @@ export function Toc({headings}: {headings: Toc}) {
                   <a
                     className={cx(
                       selectedIndex === i
-                        ? 'text-link dark:text-link-dark font-bold'
+                        ? 'font-bold text-link dark:text-link-dark'
                         : 'text-secondary dark:text-secondary-dark',
-                      'block hover:text-link dark:hover:text-link-dark leading-normal py-2'
+                      'block py-2 leading-normal hover:text-link dark:hover:text-link-dark'
                     )}
                     href={h.url}>
                     {h.text}
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 23860a16f..a08c87b9a 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -95,7 +95,7 @@ function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
     <NextLink href={`${href}`}>
       {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
       <a
-        className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
+        className="inline border-b border-link border-opacity-0 leading-normal text-primary transition duration-100 ease-in hover:border-opacity-100 hover:text-link dark:text-primary-dark hover:dark:text-link-dark"
         {...props}>
         {children}
       </a>
@@ -109,10 +109,10 @@ function NavItem({url, isActive, children}: any) {
       <Link
         href={url}
         className={cn(
-          'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize',
+          'w-full rounded-full py-1.5 px-1.5 text-center capitalize outline-link transition-transform active:scale-95 sm:px-4 xs:px-3',
           !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
           isActive &&
-            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
+            'bg-highlight text-link dark:bg-highlight-dark dark:text-link-dark'
         )}>
         {children}
       </Link>
@@ -126,7 +126,7 @@ function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
 
   return (
     <kbd
-      className={`${width} h-5 border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded-md`}
+      className={`${width} mr-1 inline-flex h-5 items-center justify-center rounded-md border border-transparent bg-wash p-0 text-center align-middle text-xs text-gray-30 dark:bg-wash-dark`}
       {...rest}
     />
   );
@@ -224,35 +224,35 @@ export default function TopNav({
       <div
         className={cn(
           isOpen
-            ? 'h-screen sticky top-0 lg:bottom-0 lg:h-screen flex flex-col shadow-nav dark:shadow-nav-dark z-20'
-            : 'z-50 sticky top-0'
+            ? 'sticky top-0 z-20 flex h-screen flex-col shadow-nav dark:shadow-nav-dark lg:bottom-0 lg:h-screen'
+            : 'sticky top-0 z-50'
         )}>
         <nav
           className={cn(
-            'duration-300 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:pr-5 lg:pl-4 z-50',
-            {'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
+            'z-50 flex w-full items-center justify-between bg-wash bg-opacity-90 px-1.5 backdrop-blur-lg backdrop-saturate-200 backdrop-filter transition-shadow duration-300 dark:bg-wash-dark dark:bg-opacity-95 lg:pr-5 lg:pl-4',
+            {'shadow-nav dark:shadow-nav-dark': isScrolled || isOpen}
           )}>
-          <div className="h-16 w-full gap-0 sm:gap-3 flex items-center justify-between">
-            <div className="3xl:flex-1 flex flex-row ">
+          <div className="flex h-16 w-full items-center justify-between gap-0 sm:gap-3">
+            <div className="flex flex-row 3xl:flex-1 ">
               <button
                 type="button"
                 aria-label="Menu"
                 onClick={() => setIsOpen(!isOpen)}
                 className={cn(
-                  'active:scale-95 transition-transform flex lg:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link',
+                  'flex h-12 w-12 items-center justify-center rounded-full outline-link transition-transform hover:bg-primary/5 active:scale-95 hover:dark:bg-primary-dark/5 lg:hidden',
                   {
                     'text-link dark:text-link-dark': isOpen,
                   }
                 )}>
                 {isOpen ? <IconClose /> : <IconHamburger />}
               </button>
-              <div className="3xl:flex-1 flex align-center">
+              <div className="align-center flex 3xl:flex-1">
                 <NextLink href="/">
                   <a
-                    className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
+                    className={`relative inline-flex items-center gap-2 overflow-hidden whitespace-nowrap rounded-full p-1 text-lg font-normal text-primary outline-link transition-transform active:scale-95 dark:text-primary-dark 3xl:rounded-xl`}>
                     <Logo
                       className={cn(
-                        'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                        'mr-0 flex h-10 w-10 origin-center text-sm text-link transition-all ease-in-out dark:text-link-dark'
                       )}
                     />
                     <span className="sr-only 3xl:not-sr-only">React</span>
@@ -260,16 +260,16 @@ export default function TopNav({
                 </NextLink>
               </div>
             </div>
-            <div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
+            <div className="hidden w-full flex-1 items-center justify-center md:flex 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
               <button
                 type="button"
                 className={cn(
-                  'flex 3xl:w-[56rem] 3xl:mx-0 relative pl-4 pr-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-left w-full text-gray-30 rounded-full align-middle text-base'
+                  'pointer relative flex h-10 w-full items-center rounded-full bg-gray-30/20 py-1 pl-4 pr-1 text-left align-middle text-base text-gray-30 outline-none focus:outline-link dark:bg-gray-40/20 betterhover:hover:bg-opacity-80 3xl:mx-0 3xl:w-[56rem]'
                 )}
                 onClick={onOpenSearch}>
-                <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
+                <IconSearch className="group-betterhover:hover:text-gray-70 mr-3 shrink-0 align-middle text-gray-30" />
                 Search
-                <span className="ml-auto hidden sm:flex item-center mr-1">
+                <span className="item-center ml-auto mr-1 hidden sm:flex">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
                     Ctrl
@@ -278,8 +278,8 @@ export default function TopNav({
                 </span>
               </button>
             </div>
-            <div className="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
-              <div className="mx-2.5 gap-1.5 hidden lg:flex">
+            <div className="flex flex-row items-center justify-center gap-1.5 text-base 3xl:flex-1 3xl:justify-end">
+              <div className="mx-2.5 hidden gap-1.5 lg:flex">
                 <NavItem isActive={section === 'learn'} url="/learn">
                   Learn
                 </NavItem>
@@ -301,9 +301,9 @@ export default function TopNav({
                   <button
                     aria-label="Search"
                     type="button"
-                    className="active:scale-95 transition-transform flex md:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
+                    className="flex h-12 w-12 items-center justify-center rounded-full outline-link transition-transform hover:bg-secondary-button active:scale-95 hover:dark:bg-secondary-button-dark md:hidden"
                     onClick={onOpenSearch}>
-                    <IconSearch className="align-middle w-5 h-5" />
+                    <IconSearch className="h-5 w-5 align-middle" />
                   </button>
                 </div>
                 <div className="flex dark:hidden">
@@ -313,7 +313,7 @@ export default function TopNav({
                     onClick={() => {
                       window.__setPreferredTheme('dark');
                     }}
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="flex h-12 w-12 items-center justify-center rounded-full outline-link transition-transform hover:bg-primary/5 active:scale-95 hover:dark:bg-primary-dark/5">
                     {darkIcon}
                   </button>
                 </div>
@@ -324,7 +324,7 @@ export default function TopNav({
                     onClick={() => {
                       window.__setPreferredTheme('light');
                     }}
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="flex h-12 w-12 items-center justify-center rounded-full outline-link transition-transform hover:bg-primary/5 active:scale-95 hover:dark:bg-primary-dark/5">
                     {lightIcon}
                   </button>
                 </div>
@@ -334,7 +334,7 @@ export default function TopNav({
                     target="_blank"
                     rel="noreferrer noopener"
                     aria-label="Open on GitHub"
-                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    className="flex h-12 w-12 items-center justify-center rounded-full outline-link transition-transform hover:bg-primary/5 active:scale-95 hover:dark:bg-primary-dark/5">
                     {githubIcon}
                   </Link>
                 </div>
@@ -346,19 +346,19 @@ export default function TopNav({
         {isOpen && (
           <div
             ref={scrollParentRef}
-            className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+            className="no-bg-scrollbar isolate grow overflow-y-scroll bg-wash dark:bg-wash-dark lg:w-[342px]">
             <aside
               className={cn(
-                `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-50`,
-                isOpen ? 'block z-40' : 'hidden lg:block'
+                `z-50 w-full flex-col pb-8 lg:flex lg:max-w-xs lg:grow lg:pb-0`,
+                isOpen ? 'z-40 block' : 'hidden lg:block'
               )}>
               <nav
                 role="navigation"
                 style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-                className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+                className="scrolling-touch scrolling-gpu w-full grow pr-0 pt-4 md:pt-4 lg:h-auto lg:py-6 lg:pr-5 lg:pt-4">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
-                  <div className="pl-3 xs:pl-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
+                  <div className="flex flex-row overflow-x-auto pl-3 text-base font-bold text-secondary dark:text-secondary-dark lg:hidden xs:gap-0.5 xs:pl-5 xs:text-base">
                     <NavItem isActive={section === 'learn'} url="/learn">
                       Learn
                     </NavItem>
diff --git a/src/components/MDX/BlogCard.tsx b/src/components/MDX/BlogCard.tsx
index 9d86f9211..3bb09d2ca 100644
--- a/src/components/MDX/BlogCard.tsx
+++ b/src/components/MDX/BlogCard.tsx
@@ -17,18 +17,18 @@ export interface BlogCardProps {
 function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
   return (
     <Link href={url as string}>
-      <a className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
-        <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
-          <div className="flex flex-row gap-3 w-full">
-            <h2 className="font-semibold flex-1 text-2xl lg:text-3xl hover:underline leading-snug mb-4">
+      <a className="block h-full w-full rounded-2xl outline-none focus:outline-none focus:outline-offset-2 focus-visible:outline focus-visible:outline-link focus-visible:dark:focus:outline-link-dark">
+        <div className="flex h-full w-full flex-1 cursor-pointer flex-col justify-between rounded-2xl p-5 text-xl leading-relaxed text-primary shadow-secondary-button-stroke  hover:bg-gray-40/5 active:bg-gray-40/10 dark:text-primary-dark dark:shadow-secondary-button-stroke-dark hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 sm:p-5">
+          <div className="flex w-full flex-row gap-3">
+            <h2 className="mb-4 flex-1 text-2xl font-semibold leading-snug hover:underline lg:text-3xl">
               {title}
             </h2>
           </div>
           <div>
-            <div className="flex flex-row justify-start gap-2 items-center text-base text-tertiary dark:text-tertiary-dark">
+            <div className="flex flex-row items-center justify-start gap-2 text-base text-tertiary dark:text-tertiary-dark">
               {icon === 'labs' && (
                 <svg
-                  className="w-6 h-6 text-tertiary dark:text-tertiary-dark"
+                  className="h-6 w-6 text-tertiary dark:text-tertiary-dark"
                   viewBox="0 0 72 72"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg">
@@ -42,7 +42,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
               )}
               {icon === 'blog' && (
                 <svg
-                  className="w-6 h-6 text-tertiary dark:text-tertiary-dark"
+                  className="h-6 w-6 text-tertiary dark:text-tertiary-dark"
                   viewBox="0 0 72 72"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg">
@@ -56,7 +56,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
               )}
               {date}
               {badge ? (
-                <div className="h-fit px-1 bg-highlight dark:bg-highlight-dark rounded uppercase text-link dark:text-link-dark font-bold tracking-wide text-xs whitespace-nowrap">
+                <div className="h-fit whitespace-nowrap rounded bg-highlight px-1 text-xs font-bold uppercase tracking-wide text-link dark:bg-highlight-dark dark:text-link-dark">
                   New
                 </div>
               ) : null}
@@ -65,7 +65,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
               {children}
             </span>
             {children != null && (
-              <div className="text-link text-base dark:text-link-dark hover:underline mt-4">
+              <div className="mt-4 text-base text-link hover:underline dark:text-link-dark">
                 Read more
               </div>
             )}
diff --git a/src/components/MDX/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx
index 24e99541c..ef2b31791 100644
--- a/src/components/MDX/Challenges/Challenge.tsx
+++ b/src/components/MDX/Challenges/Challenge.tsx
@@ -47,9 +47,9 @@ export function Challenge({
     <div className="p-5 sm:py-8 sm:px-8">
       <div>
         <H4
-          className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
+          className="mb-2 mt-0 text-xl font-medium text-primary dark:text-primary-dark"
           id={currentChallenge.id}>
-          <div className="font-bold block md:inline">
+          <div className="block font-bold md:inline">
             {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
             {totalChallenges}
             <span className="text-primary dark:text-primary-dark">: </span>
@@ -58,7 +58,7 @@ export function Challenge({
         </H4>
         {currentChallenge.content}
       </div>
-      <div className="flex justify-between items-center mt-4">
+      <div className="mt-4 flex items-center justify-between">
         {currentChallenge.hint ? (
           <div>
             <Button className="mr-2" onClick={toggleHint} active={showHint}>
@@ -89,13 +89,13 @@ export function Challenge({
           <Button
             className={cn(
               isRecipes
-                ? 'bg-purple-50 border-purple-50 hover:bg-purple-50 focus:bg-purple-50 active:bg-purple-50'
+                ? 'border-purple-50 bg-purple-50 hover:bg-purple-50 focus:bg-purple-50 active:bg-purple-50'
                 : 'bg-link dark:bg-link-dark'
             )}
             onClick={handleClickNextChallenge}
             active>
             Next {isRecipes ? 'Example' : 'Challenge'}
-            <IconArrowSmall displayDirection="right" className="block ml-1.5" />
+            <IconArrowSmall displayDirection="right" className="ml-1.5 block" />
           </Button>
         )}
       </div>
@@ -107,7 +107,7 @@ export function Challenge({
             Solution
           </h3>
           {currentChallenge.solution}
-          <div className="flex justify-between items-center mt-4">
+          <div className="mt-4 flex items-center justify-between">
             <Button onClick={() => setShowSolution(false)}>
               Close solution
             </Button>
@@ -121,7 +121,7 @@ export function Challenge({
                 Next Challenge
                 <IconArrowSmall
                   displayDirection="right"
-                  className="block ml-1.5"
+                  className="ml-1.5 block"
                 />
               </Button>
             )}
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index 661269f0e..1907cfae7 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -117,17 +117,17 @@ export function Challenges({
 
   const Heading = isRecipes ? H4 : H2;
   return (
-    <div className="max-w-7xl mx-auto py-4 w-full">
+    <div className="mx-auto w-full max-w-7xl py-4">
       <div
         className={cn(
-          'border-gray-10 bg-card dark:bg-card-dark shadow-inner rounded-none -mx-5 sm:mx-auto sm:rounded-2xl'
+          '-mx-5 rounded-none border-gray-10 bg-card shadow-inner dark:bg-card-dark sm:mx-auto sm:rounded-2xl'
         )}>
-        <div ref={scrollAnchorRef} className="py-2 px-5 sm:px-8 pb-0 md:pb-0">
+        <div ref={scrollAnchorRef} className="py-2 px-5 pb-0 sm:px-8 md:pb-0">
           {!noTitle && (
             <Heading
               id={titleId}
               className={cn(
-                'mb-2 leading-10 relative',
+                'relative mb-2 leading-10',
                 isRecipes
                   ? 'text-xl text-purple-50 dark:text-purple-30'
                   : 'text-3xl text-link'
diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx
index e448828cf..c5676a5d0 100644
--- a/src/components/MDX/Challenges/Navigation.tsx
+++ b/src/components/MDX/Challenges/Navigation.tsx
@@ -83,17 +83,17 @@ export function Navigation({
       <div className="overflow-hidden">
         <div
           ref={containerRef}
-          className="flex relative transition-transform content-box overflow-x-auto">
+          className="content-box relative flex overflow-x-auto transition-transform">
           {challenges.map(({name, id, order}, index) => (
             <button
               className={cn(
-                'py-2 mr-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap text-ellipsis',
+                'mr-4 text-ellipsis whitespace-nowrap border-b-4 py-2 text-base transition duration-100 ease-in',
                 isRecipes &&
                   currentChallenge.id === id &&
-                  'text-purple-50 border-purple-50 hover:text-purple-50 dark:text-purple-30 dark:border-purple-30 dark:hover:text-purple-30',
+                  'border-purple-50 text-purple-50 hover:text-purple-50 dark:border-purple-30 dark:text-purple-30 dark:hover:text-purple-30',
                 !isRecipes &&
                   currentChallenge.id === id &&
-                  'text-link border-link hover:text-link dark:text-link-dark dark:border-link-dark dark:hover:text-link-dark'
+                  'border-link text-link hover:text-link dark:border-link-dark dark:text-link-dark dark:hover:text-link-dark'
               )}
               onClick={() => handleSelectNav(index)}
               key={`button-${id}`}
@@ -103,12 +103,12 @@ export function Navigation({
           ))}
         </div>
       </div>
-      <div className="flex z-10 pb-2 pl-2">
+      <div className="z-10 flex pb-2 pl-2">
         <button
           onClick={handleScrollLeft}
           aria-label="Scroll left"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r',
+            'h-8 rounded-l border-r border-gray-20 bg-secondary-button px-2 dark:bg-secondary-button-dark',
             {
               'text-primary dark:text-primary-dark': canScrollLeft,
               'text-gray-30': !canScrollLeft,
@@ -120,7 +120,7 @@ export function Navigation({
           onClick={handleScrollRight}
           aria-label="Scroll right"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-r',
+            'h-8 rounded-r bg-secondary-button px-2 dark:bg-secondary-button-dark',
             {
               'text-primary dark:text-primary-dark': canScrollRight,
               'text-gray-30': !canScrollRight,
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 3195bbe8f..7f12b3fb2 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -204,16 +204,16 @@ const CodeBlock = function CodeBlock({
     <div
       className={cn(
         'sandpack sandpack--codeblock',
-        'rounded-2xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
+        'flex h-full w-full items-center overflow-x-auto rounded-2xl bg-wash shadow-lg dark:bg-gray-95',
         !noMargin && 'my-8',
         noShadow &&
-          'shadow-none rounded-2xl overflow-hidden w-full flex bg-transparent'
+          'flex w-full overflow-hidden rounded-2xl bg-transparent shadow-none'
       )}
       style={{contain: 'content'}}>
       <div className="sp-wrapper">
         <div className="sp-stack">
           <div className="sp-code-editor">
-            <pre className="sp-cm sp-pristine sp-javascript flex align-start">
+            <pre className="sp-cm sp-pristine sp-javascript align-start flex">
               <code
                 className="sp-pre-placeholder grow-[2]"
                 onMouseLeave={
diff --git a/src/components/MDX/CodeBlock/index.tsx b/src/components/MDX/CodeBlock/index.tsx
index e449e6b9e..18aa6da72 100644
--- a/src/components/MDX/CodeBlock/index.tsx
+++ b/src/components/MDX/CodeBlock/index.tsx
@@ -25,7 +25,7 @@ export default memo(function CodeBlockWrapper(props: {
       fallback={
         <pre
           className={cn(
-            'rounded-lg leading-6 h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg text-[13.6px] overflow-hidden',
+            'flex h-full w-full items-center overflow-hidden overflow-x-auto rounded-lg bg-wash text-[13.6px] leading-6 shadow-lg dark:bg-gray-95',
             !isFromPackageImport && 'my-8'
           )}>
           <div className="py-[18px] pl-5 font-normal ">
diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx
index 7a503f068..8ae246d12 100644
--- a/src/components/MDX/CodeDiagram.tsx
+++ b/src/components/MDX/CodeDiagram.tsx
@@ -26,14 +26,14 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
   });
   if (flip) {
     return (
-      <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+      <section className="my-8 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
         {illustration}
         <div className="flex flex-col justify-center">{content}</div>
       </section>
     );
   }
   return (
-    <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+    <section className="my-8 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
       <div className="flex flex-col justify-center">{content}</div>
       <div className="py-4">{illustration}</div>
     </section>
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index de6201b6a..f2bd21cea 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -40,33 +40,33 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   return (
     <div className="mb-4 text-secondary" translate="no">
       <div className="flex w-full rounded-t-lg bg-gray-200 dark:bg-gray-80">
-        <div className="px-4 py-2 border-gray-300 dark:border-gray-90 border-r">
+        <div className="border-r border-gray-300 px-4 py-2 dark:border-gray-90">
           <Box className="bg-gray-300 dark:bg-gray-70" width="15px" />
         </div>
-        <div className="flex text-sm px-4">
-          <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
+        <div className="flex px-4 text-sm">
+          <div className="border-b-2 border-gray-300 text-tertiary dark:border-gray-90 dark:text-tertiary-dark">
             Console
           </div>
-          <div className="px-4 py-2 flex">
+          <div className="flex px-4 py-2">
             <Box className="mr-2 bg-gray-300 dark:bg-gray-70" />
-            <Box className="mr-2 hidden md:block bg-gray-300 dark:bg-gray-70" />
-            <Box className="hidden md:block bg-gray-300 dark:bg-gray-70" />
+            <Box className="mr-2 hidden bg-gray-300 dark:bg-gray-70 md:block" />
+            <Box className="hidden bg-gray-300 dark:bg-gray-70 md:block" />
           </div>
         </div>
       </div>
       <div
         className={cn(
-          'flex px-4 pt-4 pb-6 items-center content-center font-mono text-code rounded-b-md',
+          'flex content-center items-center rounded-b-md px-4 pt-4 pb-6 font-mono text-code',
           {
-            'bg-red-30 text-red-50 dark:text-red-30 bg-opacity-5':
+            'bg-red-30 bg-opacity-5 text-red-50 dark:text-red-30':
               level === 'error',
             'bg-yellow-5 text-yellow-50': level === 'warning',
             'bg-gray-5 text-secondary dark:text-secondary-dark':
               level === 'info',
           }
         )}>
-        {level === 'error' && <IconError className="self-start mt-1.5" />}
-        {level === 'warning' && <IconWarning className="self-start mt-1" />}
+        {level === 'error' && <IconError className="mt-1.5 self-start" />}
+        {level === 'warning' && <IconWarning className="mt-1 self-start" />}
         <div className="px-3">{message}</div>
       </div>
     </div>
diff --git a/src/components/MDX/Diagram.tsx b/src/components/MDX/Diagram.tsx
index 7920661da..a44c0a9ab 100644
--- a/src/components/MDX/Diagram.tsx
+++ b/src/components/MDX/Diagram.tsx
@@ -15,8 +15,8 @@ interface DiagramProps {
 
 function Caption({text}: {text: string}) {
   return (
-    <div className="w-full table">
-      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-tight table-caption">
+    <div className="table w-full">
+      <figcaption className="mt-0 table-caption p-1 text-center text-base leading-tight text-gray-40 sm:mt-0 sm:p-2 lg:text-lg">
         {text}
       </figcaption>
     </div>
@@ -32,7 +32,7 @@ export function Diagram({
   captionPosition,
 }: DiagramProps) {
   return (
-    <figure className="flex flex-col px-0 p-0 sm:p-10 first:mt-0 mt-10 sm:mt-0 justify-center items-center">
+    <figure className="mt-10 flex flex-col items-center justify-center p-0 px-0 first:mt-0 sm:mt-0 sm:p-10">
       {captionPosition === 'top' && <Caption text={children} />}
       <div className="dark-image">
         <Image
diff --git a/src/components/MDX/DiagramGroup.tsx b/src/components/MDX/DiagramGroup.tsx
index 6c5130a3d..53abaafde 100644
--- a/src/components/MDX/DiagramGroup.tsx
+++ b/src/components/MDX/DiagramGroup.tsx
@@ -10,7 +10,7 @@ interface DiagramGroupProps {
 
 export function DiagramGroup({children}: DiagramGroupProps) {
   return (
-    <div className="flex flex-col sm:flex-row py-2 sm:p-0 sm:space-y-0 justify-center items-start sm:items-center w-full">
+    <div className="flex w-full flex-col items-start justify-center py-2 sm:flex-row sm:items-center sm:space-y-0 sm:p-0">
       {children}
     </div>
   );
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 372c070de..06841fbf7 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -60,12 +60,12 @@ function ExpandableCallout({children, type}: ExpandableCalloutProps) {
     <div
       className={cn(
         'expandable-callout',
-        'pt-8 pb-4 px-5 sm:px-8 my-8 relative rounded-none shadow-inner-border -mx-5 sm:mx-auto sm:rounded-2xl',
+        'relative my-8 -mx-5 rounded-none px-5 pt-8 pb-4 shadow-inner-border sm:mx-auto sm:rounded-2xl sm:px-8',
         variant.containerClasses
       )}>
-      <h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
+      <h3 className={cn('font-display text-2xl font-bold', variant.textColor)}>
         <variant.Icon
-          className={cn('inline mr-3 mb-1 text-lg', variant.textColor)}
+          className={cn('mr-3 mb-1 inline text-lg', variant.textColor)}
         />
         {variant.title}
       </h3>
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index 1ad1e0313..1d9683043 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -47,10 +47,10 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
         setIsExpanded(e.currentTarget!.open);
       }}
       className={cn(
-        'my-12 rounded-2xl shadow-inner-border dark:shadow-inner-border-dark relative',
+        'relative my-12 rounded-2xl shadow-inner-border dark:shadow-inner-border-dark',
         {
-          'dark:bg-opacity-20 dark:bg-purple-60 bg-purple-5': isDeepDive,
-          'dark:bg-opacity-20 dark:bg-yellow-60 bg-yellow-5': isExample,
+          'bg-purple-5 dark:bg-purple-60 dark:bg-opacity-20': isDeepDive,
+          'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20': isExample,
         }
       )}>
       <summary
@@ -64,19 +64,19 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           }
         }}>
         <h5
-          className={cn('mb-4 uppercase font-bold flex items-center text-sm', {
-            'dark:text-purple-30 text-purple-50': isDeepDive,
-            'dark:text-yellow-30 text-yellow-60': isExample,
+          className={cn('mb-4 flex items-center text-sm font-bold uppercase', {
+            'text-purple-50 dark:text-purple-30': isDeepDive,
+            'text-yellow-60 dark:text-yellow-30': isExample,
           })}>
           {isDeepDive && (
             <>
-              <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
+              <IconDeepDive className="mr-2 inline text-purple-40 dark:text-purple-30" />
               Deep Dive
             </>
           )}
           {isExample && (
             <>
-              <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
+              <IconCodeBlock className="mr-2 inline text-yellow-50 dark:text-yellow-30" />
               Example
             </>
           )}
@@ -92,9 +92,9 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
         <Button
           active={true}
           className={cn({
-            'bg-purple-50 border-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50':
+            'border-purple-50 bg-purple-50 hover:bg-purple-40 focus:bg-purple-50 active:bg-purple-50':
               isDeepDive,
-            'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
+            'border-yellow-50 bg-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
               isExample,
           })}
           onClick={() => setIsExpanded((current) => !current)}>
@@ -105,9 +105,9 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
         </Button>
       </summary>
       <div
-        className={cn('p-8 border-t', {
-          'dark:border-purple-60 border-purple-10 ': isDeepDive,
-          'dark:border-yellow-60 border-yellow-50': isExample,
+        className={cn('border-t p-8', {
+          'border-purple-10 dark:border-purple-60 ': isDeepDive,
+          'border-yellow-50 dark:border-yellow-60': isExample,
         })}>
         {children.slice(1)}
       </div>
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index 707e5e3ca..eee29f7db 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -39,7 +39,7 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
             height="1em"
             viewBox="0 0 13 13"
             xmlns="http://www.w3.org/2000/svg"
-            className="text-gray-70 ml-2 h-5 w-5">
+            className="ml-2 h-5 w-5 text-gray-70">
             <g fill="currentColor" fillRule="evenodd">
               <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
               <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
@@ -54,7 +54,7 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
 export const H1 = ({className, ...props}: HeadingProps) => (
   <Heading
     as="h1"
-    className={cn(className, 'text-5xl font-display font-bold leading-tight')}
+    className={cn(className, 'font-display text-5xl font-bold leading-tight')}
     {...props}
   />
 );
@@ -63,7 +63,7 @@ export const H2 = ({className, ...props}: HeadingProps) => (
   <Heading
     as="h2"
     className={cn(
-      'text-3xl font-display leading-10 text-primary dark:text-primary-dark font-bold my-6',
+      'my-6 font-display text-3xl font-bold leading-10 text-primary dark:text-primary-dark',
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ export const H3 = ({className, ...props}: HeadingProps) => (
     as="h3"
     className={cn(
       className,
-      'text-2xl font-display leading-9 text-primary dark:text-primary-dark font-bold my-6'
+      'my-6 font-display text-2xl font-bold leading-9 text-primary dark:text-primary-dark'
     )}
     {...props}
   />
@@ -84,7 +84,7 @@ export const H3 = ({className, ...props}: HeadingProps) => (
 export const H4 = ({className, ...props}: HeadingProps) => (
   <Heading
     as="h4"
-    className={cn(className, 'text-xl font-display font-bold leading-9 my-4')}
+    className={cn(className, 'my-4 font-display text-xl font-bold leading-9')}
     {...props}
   />
 );
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index 4a87c2a53..bd3ac7761 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -14,10 +14,10 @@ function InlineCode({
   return (
     <code
       className={cn(
-        'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',
+        'inline rounded-md px-1 text-code text-secondary no-underline dark:text-secondary-dark',
         {
           'bg-gray-30 bg-opacity-10 py-px': !isLink,
-          'bg-highlight dark:bg-highlight-dark py-0': isLink,
+          'bg-highlight py-0 dark:bg-highlight-dark': isLink,
         }
       )}
       {...props}
diff --git a/src/components/MDX/Intro.tsx b/src/components/MDX/Intro.tsx
index 0522df678..90a7c80c3 100644
--- a/src/components/MDX/Intro.tsx
+++ b/src/components/MDX/Intro.tsx
@@ -10,7 +10,7 @@ export interface IntroProps {
 
 function Intro({children}: IntroProps) {
   return (
-    <div className="font-display text-xl text-primary dark:text-primary-dark leading-relaxed">
+    <div className="font-display text-xl leading-relaxed text-primary dark:text-primary-dark">
       {children}
     </div>
   );
diff --git a/src/components/MDX/MDXComponents.module.css b/src/components/MDX/MDXComponents.module.css
index 9840e77ce..746739632 100644
--- a/src/components/MDX/MDXComponents.module.css
+++ b/src/components/MDX/MDXComponents.module.css
@@ -4,7 +4,7 @@
 
 /* Stop purging. */
 .markdown p {
-  @apply mb-4 leading-7 whitespace-pre-wrap text-gray-70;
+  @apply mb-4 whitespace-pre-wrap leading-7 text-gray-70;
 }
 
 .markdown ol {
@@ -30,7 +30,7 @@
 }
 
 .markdown code {
-  @apply text-gray-70 bg-card dark:bg-card-dark   p-1 rounded-lg no-underline;
+  @apply rounded-lg bg-card p-1   text-gray-70 no-underline dark:bg-card-dark;
   font-size: 90%;
 }
 
@@ -39,5 +39,5 @@
 }
 
 .markdown a {
-  @apply inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal;
+  @apply inline break-normal border-b border-link border-opacity-0 leading-normal text-link transition duration-100 ease-in hover:border-opacity-100 dark:text-link-dark;
 }
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index ba531c9f0..5fa1f9a21 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -36,15 +36,15 @@ function CodeStep({children, step}: {children: any; step: number}) {
     <span
       data-step={step}
       className={cn(
-        'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-[6px] py-[1.5px] border-b-[2px] border-opacity-60',
+        'code-step relative rounded border-b-[2px] border-opacity-60 bg-opacity-10 px-[6px] py-[1.5px] dark:bg-opacity-20',
         {
-          'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30':
+          'border-blue-40 bg-blue-40 text-blue-60 dark:text-blue-30':
             step === 1,
-          'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30':
+          'border-yellow-40 bg-yellow-40 text-yellow-60 dark:text-yellow-30':
             step === 2,
-          'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30':
+          'border-purple-40 bg-purple-40 text-purple-60 dark:text-purple-30':
             step === 3,
-          'bg-green-40 border-green-40 text-green-60 dark:text-green-30':
+          'border-green-40 bg-green-40 text-green-60 dark:text-green-30':
             step === 4,
         }
       )}>
@@ -54,7 +54,7 @@ function CodeStep({children, step}: {children: any; step: number}) {
 }
 
 const P = (p: JSX.IntrinsicElements['p']) => (
-  <p className="whitespace-pre-wrap my-4" {...p} />
+  <p className="my-4 whitespace-pre-wrap" {...p} />
 );
 
 const Strong = (strong: JSX.IntrinsicElements['strong']) => (
@@ -62,13 +62,13 @@ const Strong = (strong: JSX.IntrinsicElements['strong']) => (
 );
 
 const OL = (p: JSX.IntrinsicElements['ol']) => (
-  <ol className="ml-6 my-3 list-decimal" {...p} />
+  <ol className="my-3 ml-6 list-decimal" {...p} />
 );
 const LI = (p: JSX.IntrinsicElements['li']) => (
-  <li className="leading-relaxed mb-1" {...p} />
+  <li className="mb-1 leading-relaxed" {...p} />
 );
 const UL = (p: JSX.IntrinsicElements['ul']) => (
-  <ul className="ml-6 my-3 list-disc" {...p} />
+  <ul className="my-3 ml-6 list-disc" {...p} />
 );
 
 const Divider = () => (
@@ -93,9 +93,9 @@ const Blockquote = ({
 }: JSX.IntrinsicElements['blockquote']) => {
   return (
     <blockquote
-      className="mdx-blockquote py-4 px-8 my-8 shadow-inner-border dark:shadow-inner-border-dark bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-2xl leading-6 flex relative"
+      className="mdx-blockquote relative my-8 flex rounded-2xl bg-highlight bg-opacity-50 py-4 px-8 leading-6 shadow-inner-border dark:bg-highlight-dark dark:shadow-inner-border-dark"
       {...props}>
-      <span className="block relative">{children}</span>
+      <span className="relative block">{children}</span>
     </blockquote>
   );
 };
@@ -110,9 +110,9 @@ function LearnMore({
 }) {
   return (
     <>
-      <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner-border dark:shadow-inner-border-dark justify-between items-center bg-card dark:bg-card-dark rounded-2xl">
+      <section className="mt-16 mb-16 flex flex-row items-center justify-between rounded-2xl bg-card p-8 shadow-inner-border dark:bg-card-dark dark:shadow-inner-border-dark">
         <div className="flex-col">
-          <h2 className="text-primary font-display dark:text-primary-dark font-bold text-2xl leading-tight">
+          <h2 className="font-display text-2xl font-bold leading-tight text-primary dark:text-primary-dark">
             Ready to learn this topic?
           </h2>
           {children}
@@ -123,12 +123,12 @@ function LearnMore({
               href={path}
               type="primary">
               Read More
-              <IconNavArrow displayDirection="right" className="inline ml-1" />
+              <IconNavArrow displayDirection="right" className="ml-1 inline" />
             </ButtonLink>
           ) : null}
         </div>
       </section>
-      <hr className="border-border dark:border-border-dark mb-14" />
+      <hr className="mb-14 border-border dark:border-border-dark" />
     </>
   );
 }
@@ -137,7 +137,7 @@ function ReadBlogPost({path}: {path: string}) {
   return (
     <ButtonLink className="mt-1" label="Read Post" href={path} type="primary">
       Read Post
-      <IconNavArrow displayDirection="right" className="inline ml-1" />
+      <IconNavArrow displayDirection="right" className="ml-1 inline" />
     </ButtonLink>
   );
 }
@@ -190,8 +190,8 @@ function AuthorCredit({
   authorLink: string;
 }) {
   return (
-    <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
-      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+    <div className="sr-only hover:sr-only group-focus-within:not-sr-only group-hover:not-sr-only">
+      <p className="absolute left-1/2 -top-4 -translate-x-1/2 -translate-y-full rounded-lg bg-card p-2 text-center text-sm leading-tight text-secondary opacity-0 transition-opacity duration-300 after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:content-[''] group-hover:flex group-hover:opacity-100 dark:bg-card-dark dark:text-secondary-dark dark:text-secondary-dark after:dark:border-t-card-dark">
         <cite>
           Illustrated by{' '}
           {authorLink ? (
@@ -233,16 +233,16 @@ function Illustration({
   const {isInBlock} = React.useContext(IllustrationContext);
 
   return (
-    <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+    <div className="group relative my-16 mx-0 max-w-4xl before:absolute before:-inset-y-16 before:inset-x-0 2xl:mx-auto 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
         <img
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
-          className="bg-white rounded-lg"
+          className="rounded-lg bg-white"
         />
         {caption ? (
-          <figcaption className="text-center leading-tight mt-4">
+          <figcaption className="mt-4 text-center leading-tight">
             {caption}
           </figcaption>
         ) : null}
@@ -270,11 +270,11 @@ function IllustrationBlock({
   );
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
-      <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
+      <div className="my-4 flex flex-1 items-center justify-center rounded-lg bg-white p-4 xl:p-6">
         <img src={info.src} alt={info.alt} height={info.height} />
       </div>
       {info.caption ? (
-        <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
+        <figcaption className="mt-4 text-center leading-tight text-secondary dark:text-secondary-dark">
           {info.caption}
         </figcaption>
       ) : null}
@@ -282,7 +282,7 @@ function IllustrationBlock({
   ));
   return (
     <IllustrationContext.Provider value={isInBlockTrue}>
-      <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+      <div className="group relative my-16 mx-0 max-w-4xl before:absolute before:-inset-y-16 before:inset-x-0 2xl:mx-auto 2xl:max-w-6xl">
         {sequential ? (
           <ol className="mdx-illustration-block flex">
             {images.map((x: any, i: number) => (
@@ -357,7 +357,7 @@ function YouTubeIframe(props: any) {
   return (
     <div className="relative h-0 overflow-hidden pt-[56.25%]">
       <iframe
-        className="absolute inset-0 w-full h-full"
+        className="absolute inset-0 h-full w-full"
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
@@ -402,7 +402,7 @@ export const MDXComponents = {
     return children;
   },
   MaxWidth({children}: {children: any}) {
-    return <div className="max-w-4xl ml-0 2xl:mx-auto">{children}</div>;
+    return <div className="ml-0 max-w-4xl 2xl:mx-auto">{children}</div>;
   },
   Pitfall,
   Deprecated,
diff --git a/src/components/MDX/PackageImport.tsx b/src/components/MDX/PackageImport.tsx
index 5e2da820e..fd4baf8b0 100644
--- a/src/components/MDX/PackageImport.tsx
+++ b/src/components/MDX/PackageImport.tsx
@@ -30,7 +30,7 @@ export function PackageImport({children}: PackageImportProps) {
     }
   });
   return (
-    <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+    <section className="my-8 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
       <div className="flex flex-col justify-center">{terminal}</div>
       <div className="flex flex-col justify-center">{code}</div>
     </section>
diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx
index 23194c870..729646991 100644
--- a/src/components/MDX/Sandpack/Console.tsx
+++ b/src/components/MDX/Sandpack/Console.tsx
@@ -156,7 +156,7 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
   }
 
   return (
-    <div className="absolute dark:border-gray-700 bg-white dark:bg-gray-95 border-t bottom-0 w-full dark:text-white">
+    <div className="absolute bottom-0 w-full border-t bg-white dark:border-gray-700 dark:bg-gray-95 dark:text-white">
       <div className="flex justify-between">
         <button
           className="flex items-center p-1"
@@ -184,14 +184,14 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => {
         </button>
       </div>
       {isExpanded && (
-        <div className="w-full h-full border-t bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
-          <div className="max-h-40 h-auto overflow-auto" ref={wrapperRef}>
+        <div className="console h-full min-h-[28px] w-full border-t bg-white dark:border-gray-700 dark:bg-gray-95">
+          <div className="h-auto max-h-40 overflow-auto" ref={wrapperRef}>
             {logs.map(({data, id, method}) => {
               return (
                 <div
                   key={id}
                   className={cn(
-                    'first:border-none border-t dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px] whitespace-pre-wrap',
+                    'text-md min-h-[32px] whitespace-pre-wrap border-t p-1 pl-2 font-mono leading-6 first:border-none dark:border-gray-700',
                     `console-${getType(method)}`,
                     getColor(method)
                   )}>
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 6e0862564..2077e8664 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -74,7 +74,7 @@ const SandboxShell = memo(function SandboxShell({
   return (
     <>
       <div
-        className="shadow-lg dark:shadow-lg-dark rounded-lg"
+        className="rounded-lg shadow-lg dark:shadow-lg-dark"
         ref={containerRef}
         style={{
           contain: 'content',
@@ -83,7 +83,7 @@ const SandboxShell = memo(function SandboxShell({
         <SandpackLayout
           className={cn(
             showDevTools && devToolsLoaded && 'sp-layout-devtools',
-            !(isExpandable || isExpanded) && 'rounded-b-lg overflow-hidden',
+            !(isExpandable || isExpanded) && 'overflow-hidden rounded-b-lg',
             isExpanded && 'sp-layout-expanded'
           )}>
           <Editor lintExtensions={lintExtensions} />
@@ -95,7 +95,7 @@ const SandboxShell = memo(function SandboxShell({
           {(isExpandable || isExpanded) && (
             <button
               translate="yes"
-              className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
+              className="sandpack-expand border-b-1 relative top-0 z-10 order-2 flex w-full items-center justify-between bg-wash p-1 text-base dark:border-card-dark dark:bg-card-dark xl:order-last"
               onClick={() => {
                 const nextIsExpanded = !isExpanded;
                 flushSync(() => {
@@ -114,9 +114,9 @@ const SandboxShell = memo(function SandboxShell({
                   }
                 }
               }}>
-              <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark leading-[20px]">
+              <span className="flex p-2 leading-[20px] text-primary focus:outline-none dark:text-primary-dark">
                 <IconChevron
-                  className="inline mr-1.5 text-xl"
+                  className="mr-1.5 inline text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}
                 />
                 {isExpanded ? 'Show less' : 'Show more'}
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 4181dbe95..04fc4f774 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -96,11 +96,11 @@ ${css}
 
   return (
     <button
-      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      className="mx-1 inline-flex items-center text-sm text-primary transition duration-100 ease-in hover:text-link dark:text-primary-dark"
       onClick={downloadHTML}
       title="Download Sandbox"
       type="button">
-      <IconDownload className="inline mr-1" /> Download
+      <IconDownload className="mr-1 inline" /> Download
     </button>
   );
 }
diff --git a/src/components/MDX/Sandpack/ErrorMessage.tsx b/src/components/MDX/Sandpack/ErrorMessage.tsx
index 7c67ee461..6fbe71d24 100644
--- a/src/components/MDX/Sandpack/ErrorMessage.tsx
+++ b/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -14,9 +14,9 @@ export function ErrorMessage({error, ...props}: {error: ErrorType}) {
   const {message, title} = error;
 
   return (
-    <div className="bg-white border-2 border-red-40 rounded-lg p-6" {...props}>
-      <h2 className="text-red-40 text-xl mb-4">{title || 'Error'}</h2>
-      <pre className="text-secondary whitespace-pre-wrap break-words leading-tight">
+    <div className="rounded-lg border-2 border-red-40 bg-white p-6" {...props}>
+      <h2 className="mb-4 text-xl text-red-40">{title || 'Error'}</h2>
+      <pre className="whitespace-pre-wrap break-words leading-tight text-secondary">
         {message}
       </pre>
     </div>
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 8c884a5d8..a116c5f65 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -111,8 +111,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
   };
 
   return (
-    <div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg text-lg">
-      <div className="flex-1 grow min-w-0 px-4 lg:px-6">
+    <div className="relative z-10 flex items-center justify-between rounded-t-lg border-b border-border bg-wash text-lg dark:border-border-dark dark:bg-card-dark">
+      <div className="min-w-0 flex-1 grow px-4 lg:px-6">
         <Listbox value={activeFile} onChange={setActiveFile}>
           <div ref={containerRef}>
             <div className="relative overflow-hidden">
@@ -140,7 +140,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
                     )}>
                     <span
                       className={cn(
-                        'h-full py-2 px-1 mt-px -mb-px flex border-b text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate'
+                        'text-md mt-px -mb-px flex h-full items-center truncate border-b border-link py-2 px-1 leading-tight text-link dark:border-link-dark dark:text-link-dark'
                       )}
                       style={{maxWidth: '160px'}}>
                       {getFileName(activeFile)}
@@ -158,7 +158,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
             </div>
           </div>
           {isMultiFile && showDropdown && (
-            <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
+            <Listbox.Options className="border-1 absolute left-0 right-0 mx-0 mt-0.5 rounded-sm rounded-b-lg border-border bg-card px-2 shadow-md dark:border-border-dark dark:bg-card-dark">
               {visibleFiles.map((filePath: string) => (
                 <Listbox.Option key={filePath} value={filePath} as={Fragment}>
                   {({active}) => (
@@ -177,7 +177,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         </Listbox>
       </div>
       <div
-        className="px-3 flex items-center justify-end text-right"
+        className="flex items-center justify-end px-3 text-right"
         translate="yes">
         <DownloadButton providedFiles={providedFiles} />
         <ResetButton onReset={handleReset} />
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index 42a2d2743..a701bf887 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -8,10 +8,10 @@ import {IconNewPage} from '../../Icon/IconNewPage';
 export const OpenInCodeSandboxButton = () => {
   return (
     <UnstyledOpenInCodeSandboxButton
-      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
+      className="mx-1 ml-2 inline-flex items-center text-sm text-primary transition duration-100 ease-in hover:text-link dark:text-primary-dark md:ml-1"
       title="Open in CodeSandbox">
       <IconNewPage
-        className="inline ml-1 mr-1 relative top-[1px]"
+        className="relative top-[1px] ml-1 mr-1 inline"
         width="1em"
         height="1em"
       />
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 2e140360c..e1aa9e002 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -176,7 +176,7 @@ export function Preview({
     <SandpackStack className={className}>
       <div
         className={cn(
-          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
+          'relative h-full bg-card p-0 dark:bg-wash-dark sm:p-2 md:rounded-b-lg md:p-4 lg:rounded-b-none lg:p-8',
           // Allow content to be scrolled if it's too high to fit.
           // Note we don't want this in the expanded state
           // because it breaks position: sticky (and isn't needed anyway).
@@ -186,14 +186,14 @@ export function Preview({
           <iframe
             ref={iframeRef}
             className={cn(
-              'rounded-t-none bg-white md:shadow-md sm:rounded-lg w-full max-w-full transition-opacity',
+              'w-full max-w-full rounded-t-none bg-white transition-opacity sm:rounded-lg md:shadow-md',
               // We can't *actually* hide content because that would
               // break calculating the computed height in the iframe
               // (which we're using for autosizing). This is noticeable
               // if you make a compiler error and then fix it with code
               // that expands the content. You want to measure that.
               hideContent
-                ? 'absolute opacity-0 pointer-events-none duration-75'
+                ? 'pointer-events-none absolute opacity-0 duration-75'
                 : 'opacity-100 duration-150'
             )}
             title="Sandbox Preview"
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
index 1ac413138..8807c15b5 100644
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ b/src/components/MDX/Sandpack/ResetButton.tsx
@@ -11,11 +11,11 @@ export interface ResetButtonProps {
 export function ResetButton({onReset}: ResetButtonProps) {
   return (
     <button
-      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      className="mx-1 inline-flex items-center text-sm text-primary transition duration-100 ease-in hover:text-link dark:text-primary-dark"
       onClick={onReset}
       title="Reset Sandbox"
       type="button">
-      <IconRestart className="inline ml-1 mr-1 relative" /> Reset
+      <IconRestart className="relative ml-1 mr-1 inline" /> Reset
     </button>
   );
 }
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index defb6ba66..b04488fc5 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -78,7 +78,7 @@ function SandpackRoot(props: SandpackProps) {
   };
 
   return (
-    <div className="sandpack sandpack--playground w-full my-8">
+    <div className="sandpack sandpack--playground my-8 w-full">
       <SandpackProvider
         template="react"
         files={files}
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 3591e0581..8a2fc9e9e 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/src/components/MDX/Sandpack/index.tsx
@@ -10,21 +10,21 @@ const SandpackRoot = lazy(() => import('./SandpackRoot'));
 const SandpackGlimmer = ({code}: {code: string}) => (
   <div className="sandpack sandpack--playground my-8">
     <div className="sp-wrapper">
-      <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
-        <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
+      <div className="rounded-lg shadow-lg dark:shadow-lg-dark">
+        <div className="relative z-10 flex h-10 items-center justify-between rounded-t-lg rounded-b-none border-b border-border bg-wash dark:border-border-dark dark:bg-card-dark">
           <div className="px-4 lg:px-6">
             <div className="sp-tabs"></div>
           </div>
-          <div className="px-3 flex items-center justify-end grow text-right"></div>
+          <div className="flex grow items-center justify-end px-3 text-right"></div>
         </div>
-        <div className="sp-layout min-h-[216px] flex items-stretch flex-wrap">
-          <div className="sp-stack sp-editor max-h-[406px] h-auto overflow-auto">
+        <div className="sp-layout flex min-h-[216px] flex-wrap items-stretch">
+          <div className="sp-stack sp-editor h-auto max-h-[406px] overflow-auto">
             <div className="sp-code-editor">
               <div className="sp-cm sp-pristine">
                 <div className="cm-editor">
                   <div>
-                    <div className="cm-gutters pl-9 sticky min-h-[192px]">
-                      <div className="cm-gutter cm-lineNumbers whitespace-pre sp-pre-placeholder">
+                    <div className="cm-gutters sticky min-h-[192px] pl-9">
+                      <div className="cm-gutter cm-lineNumbers sp-pre-placeholder whitespace-pre">
                         {code}
                       </div>
                     </div>
@@ -33,11 +33,11 @@ const SandpackGlimmer = ({code}: {code: string}) => (
               </div>
             </div>
           </div>
-          <div className="sp-stack order-last xl:order-2 max-h-[406px] h-auto">
-            <div className="p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none overflow-auto"></div>
+          <div className="sp-stack order-last h-auto max-h-[406px] xl:order-2">
+            <div className="relative h-full overflow-auto rounded-b-lg bg-card p-0 dark:bg-wash-dark sm:p-2 md:p-4 lg:rounded-b-none lg:p-8"></div>
           </div>
           {code.split('\n').length > 16 && (
-            <div className="flex h-[45px] text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"></div>
+            <div className="border-b-1 relative top-0 z-10 order-2 flex h-[45px] w-full items-center justify-between rounded-t-none bg-wash p-1 text-base dark:border-card-dark dark:bg-card-dark xl:order-last"></div>
           )}
         </div>
       </div>
diff --git a/src/components/MDX/SimpleCallout.tsx b/src/components/MDX/SimpleCallout.tsx
index ae259bcf5..5732120a6 100644
--- a/src/components/MDX/SimpleCallout.tsx
+++ b/src/components/MDX/SimpleCallout.tsx
@@ -15,11 +15,11 @@ function SimpleCallout({title, children, className}: SimpleCalloutProps) {
   return (
     <div
       className={cn(
-        'p-6 xl:p-8 pb-4 xl:pb-6 bg-card dark:bg-card-dark rounded-2xl shadow-inner-border dark:shadow-inner-border-dark text-base text-secondary dark:text-secondary-dark my-8',
+        'my-8 rounded-2xl bg-card p-6 pb-4 text-base text-secondary shadow-inner-border dark:bg-card-dark dark:text-secondary-dark dark:shadow-inner-border-dark xl:p-8 xl:pb-6',
         className
       )}>
       <H3
-        className="text-primary dark:text-primary-dark mt-0 mb-3 leading-tight"
+        className="mt-0 mb-3 leading-tight text-primary dark:text-primary-dark"
         isPageAnchor={false}>
         {title}
       </H3>
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 887e9f691..4838a72c0 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -43,18 +43,18 @@ export function TeamMember({
   }
   return (
     <div className="pb-6 sm:pb-10">
-      <div className="flex flex-col sm:flex-row height-auto">
+      <div className="height-auto flex flex-col sm:flex-row">
         <div
-          className="hidden sm:block basis-2/5 rounded overflow-hidden relative"
+          className="relative hidden basis-2/5 overflow-hidden rounded sm:block"
           style={{width: 300, height: 250}}>
           <Image src={photo} layout="fill" objectFit="cover" alt={name} />
         </div>
         <div
           style={{minHeight: 300}}
-          className="block w-full sm:hidden flex-grow basis-2/5 rounded overflow-hidden relative">
+          className="relative block w-full flex-grow basis-2/5 overflow-hidden rounded sm:hidden">
           <Image src={photo} layout="fill" objectFit="cover" alt={name} />
         </div>
-        <div className="pl-0 sm:pl-6 basis-3/5 items-start">
+        <div className="basis-3/5 items-start pl-0 sm:pl-6">
           <H3 className="mb-1 sm:my-0" id={permalink}>
             {name}
           </H3>
@@ -66,7 +66,7 @@ export function TeamMember({
                 <ExternalLink
                   aria-label="React on Twitter"
                   href={`https://twitter.com/${twitter}`}
-                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  className="flex flex-row items-center hover:text-primary dark:text-primary-dark">
                   <IconTwitter className="pr-2" />
                   {twitter}
                 </ExternalLink>
@@ -77,7 +77,7 @@ export function TeamMember({
                 <ExternalLink
                   aria-label="GitHub Profile"
                   href={`https://github.com/${github}`}
-                  className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                  className="flex flex-row items-center hover:text-primary dark:text-primary-dark">
                   <IconGitHub className="pr-2" /> {github}
                 </ExternalLink>
               </div>
@@ -86,7 +86,7 @@ export function TeamMember({
               <ExternalLink
                 aria-label="Personal Site"
                 href={`https://${personal}`}
-                className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
+                className="flex flex-row items-center hover:text-primary dark:text-primary-dark">
                 <IconLink className="pr-2" /> {personal}
               </ExternalLink>
             )}
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 9fb5ff35f..9f75f86fd 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -17,9 +17,9 @@ interface TerminalBlockProps {
 function LevelText({type}: {type: LogLevel}) {
   switch (type) {
     case 'warning':
-      return <span className="text-yellow-50 bg-none mr-1">Warning: </span>;
+      return <span className="mr-1 bg-none text-yellow-50">Warning: </span>;
     case 'error':
-      return <span className="text-red-40 mr-1">Error: </span>;
+      return <span className="mr-1 text-red-40">Error: </span>;
     default:
       return null;
   }
@@ -51,11 +51,11 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
   }, [copied]);
 
   return (
-    <div className="rounded-lg bg-secondary dark:bg-gray-50 h-full">
-      <div className="bg-gray-90 dark:bg-gray-60 w-full rounded-t-lg">
-        <div className="text-primary-dark dark:text-primary-dark flex text-sm px-4 py-0.5 relative justify-between">
+    <div className="h-full rounded-lg bg-secondary dark:bg-gray-50">
+      <div className="w-full rounded-t-lg bg-gray-90 dark:bg-gray-60">
+        <div className="relative flex justify-between px-4 py-0.5 text-sm text-primary-dark dark:text-primary-dark">
           <div>
-            <IconTerminal className="inline-flex mr-2 self-center" /> Terminal
+            <IconTerminal className="mr-2 inline-flex self-center" /> Terminal
           </div>
           <div>
             <button
@@ -64,13 +64,13 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
                 window.navigator.clipboard.writeText(message ?? '');
                 setCopied(true);
               }}>
-              <IconCopy className="inline-flex mr-2 self-center" />{' '}
+              <IconCopy className="mr-2 inline-flex self-center" />{' '}
               {copied ? 'Copied' : 'Copy'}
             </button>
           </div>
         </div>
       </div>
-      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre">
+      <div className="whitespace-pre px-8 pt-4 pb-6 font-mono text-code text-primary-dark dark:text-primary-dark">
         <LevelText type={level} />
         {message}
       </div>
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx
index 839876029..935d4f5bd 100644
--- a/src/components/MDX/YouWillLearnCard.tsx
+++ b/src/components/MDX/YouWillLearnCard.tsx
@@ -14,9 +14,9 @@ interface YouWillLearnCardProps {
 
 function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
   return (
-    <div className="flex flex-col h-full bg-card dark:bg-card-dark shadow-inner justify-between rounded-lg pb-8 p-6 xl:p-8 mt-3">
+    <div className="mt-3 flex h-full flex-col justify-between rounded-lg bg-card p-6 pb-8 shadow-inner dark:bg-card-dark xl:p-8">
       <div>
-        <h4 className="text-primary dark:text-primary-dark font-bold text-2xl leading-tight">
+        <h4 className="text-2xl font-bold leading-tight text-primary dark:text-primary-dark">
           {title}
         </h4>
         <div className="my-4">{children}</div>
@@ -29,7 +29,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
           size="md"
           label={title}>
           Read More
-          <IconNavArrow displayDirection="right" className="inline ml-1" />
+          <IconNavArrow displayDirection="right" className="ml-1 inline" />
         </ButtonLink>
       </div>
     </div>
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index a92cd8f60..4363929d6 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -23,15 +23,15 @@ function PageHeading({
   breadcrumbs,
 }: PageHeadingProps) {
   return (
-    <div className="px-5 sm:px-12 pt-3.5">
-      <div className="max-w-4xl ml-0 2xl:mx-auto">
+    <div className="px-5 pt-3.5 sm:px-12">
+      <div className="ml-0 max-w-4xl 2xl:mx-auto">
         {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
-        <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
+        <H1 className="-mx-.5 mt-0 break-words text-primary dark:text-primary-dark">
           {title}
           {status ? <em>—{status}</em> : ''}
         </H1>
         {description && (
-          <p className="mt-4 mb-6 text-primary dark:text-primary-dark text-xl text-gray-90 leading-large">
+          <p className="mt-4 mb-6 text-xl leading-large text-primary text-gray-90 dark:text-primary-dark">
             {description}
           </p>
         )}
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index 826119c14..fb8481305 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -33,11 +33,11 @@ export default function SocialBanner() {
     <div
       ref={ref}
       className={cn(
-        `h-[40px] hidden lg:flex w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 items-center justify-center flex-col sm:flex-row z-[100]`
+        `z-[100] hidden h-[40px] w-full flex-col items-center justify-center bg-gray-100 py-2 text-base dark:bg-gray-700 sm:flex-row sm:py-0 md:text-lg lg:flex`
       )}>
       <div className="hidden sm:block">{bannerText}</div>
       <ExternalLink
-        className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"
+        className="ml-0 text-link hover:underline dark:text-link-dark sm:ml-1"
         href={bannerLink}>
         <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 7033e030a..f07f31a50 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -40,7 +40,7 @@ function Tag({text, variant, className}: TagProps) {
     <span className={cn('mr-2', className)}>
       <span
         className={cn(
-          'inline font-bold text-sm uppercase py-1 px-2 rounded',
+          'inline rounded py-1 px-2 text-sm font-bold uppercase',
           classes
         )}>
         {text || name}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 4596b7bc9..3ecdb68fe 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -9,7 +9,7 @@ const MyDocument = () => {
   return (
     <Html lang="en">
       <Head />
-      <body className="font-text antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+      <body className="bg-wash font-text text-lg leading-base text-secondary antialiased dark:bg-wash-dark dark:text-secondary-dark">
         <script
           dangerouslySetInnerHTML={{
             __html: `