From 0093469e0b7435b19c0c7517d2692e9dd40708d4 Mon Sep 17 00:00:00 2001
From: Saihajpreet Singh <saihajpreet.singh@gmail.com>
Date: Thu, 19 Dec 2024 13:18:35 +0000
Subject: [PATCH] prettier

---
 .prettierrc                                   |  2 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 61 +++++++++++++++++++
 src/app/conf/2023/faq/page.tsx                |  2 +-
 src/app/conf/2023/gallery/page.tsx            | 10 +--
 src/app/conf/2023/layout.tsx                  | 12 ++--
 src/app/conf/2023/page.tsx                    | 14 ++---
 src/app/conf/2023/schedule/page.tsx           | 14 ++---
 src/app/conf/2023/sessions/[id]/page.tsx      | 24 ++++----
 src/app/conf/2023/sessions/page.tsx           |  2 +-
 src/app/conf/2023/speakers/[id]/page.tsx      | 10 +--
 src/app/conf/2023/speakers/page.tsx           |  6 +-
 src/app/conf/2024/about.tsx                   | 20 +++---
 src/app/conf/2024/faq/page.tsx                |  2 +-
 src/app/conf/2024/layout.tsx                  | 12 ++--
 src/app/conf/2024/page.tsx                    | 30 ++++-----
 src/app/conf/2024/partner/page.tsx            |  2 +-
 src/app/conf/2024/pricing.tsx                 | 18 +++---
 src/app/conf/2024/schedule/[id]/page.tsx      | 26 ++++----
 src/app/conf/2024/schedule/page.tsx           | 16 ++---
 src/app/conf/2024/speak/page.tsx              |  2 +-
 src/app/conf/2024/speakers/[id]/page.tsx      | 10 +--
 src/app/conf/2024/speakers/page.tsx           |  8 +--
 src/app/conf/2024/sponsors.tsx                | 12 ++--
 src/app/conf/2024/venue.tsx                   | 12 ++--
 src/app/conf/2025/faq.tsx                     | 18 +++---
 src/app/conf/2025/layout.tsx                  | 12 ++--
 src/app/conf/2025/page.tsx                    | 14 ++---
 src/app/conf/2025/past-sponsors.tsx           | 10 +--
 src/app/conf/2025/register.tsx                |  4 +-
 src/app/conf/2025/sponsorship.tsx             |  4 +-
 src/app/conf/2025/venue.tsx                   | 12 ++--
 src/app/conf/_components/about.tsx            | 20 +++---
 src/app/conf/_components/button.tsx           |  8 +--
 src/app/conf/_components/footer.tsx           | 10 +--
 src/app/conf/_components/grid-button.tsx      |  4 +-
 src/app/conf/_components/header.tsx           | 18 +++---
 .../_components/infinite-moving-speakers.tsx  |  2 +-
 src/app/conf/_components/info-grid.tsx        | 10 +--
 .../conf/_components/schedule/back-link.tsx   |  2 +-
 src/app/conf/_components/schedule/filters.tsx | 10 +--
 .../_components/schedule/schedule-list.tsx    | 34 +++++------
 .../_components/schedule/session-list.tsx     | 30 ++++-----
 src/app/conf/_components/social-icons.tsx     |  2 +-
 src/app/conf/_components/speakers/avatar.tsx  |  2 +-
 src/app/conf/_components/speakers/index.tsx   | 20 +++---
 src/app/conf/_components/speakers/speaker.tsx |  8 +--
 src/app/conf/_components/sponsors.tsx         | 16 ++---
 src/app/conf/_components/thanks.tsx           | 10 +--
 src/app/not-found.tsx                         |  4 +-
 src/components/card.tsx                       |  6 +-
 src/components/cards.tsx                      |  8 +--
 .../index-page/bring-your-own-code.tsx        |  6 +-
 src/components/index-page/hero.tsx            | 12 ++--
 src/components/index-page/index.tsx           |  2 +-
 .../index-page/infinite-moving-cards.tsx      |  2 +-
 src/components/index-page/powerful-tools.tsx  | 10 +--
 .../index-page/predictable-results/index.tsx  |  4 +-
 .../index-page/single-request/index.tsx       |  6 +-
 src/components/index-page/type-system.tsx     |  4 +-
 src/components/index-page/who-is-using.tsx    |  6 +-
 src/components/index-page/without-version.tsx |  4 +-
 src/components/radio.tsx                      |  4 +-
 src/components/tag.tsx                        |  2 +-
 src/components/tools-and-libraries.tsx        | 28 ++++-----
 src/globals.css                               | 38 ++++++------
 src/pages/_meta.tsx                           |  2 +-
 src/pages/blog/_meta.tsx                      |  6 +-
 src/pages/community/foundation/_meta.tsx      |  2 +-
 theme.config.tsx                              | 16 ++---
 70 files changed, 421 insertions(+), 359 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 72faee5d53..4041064071 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -18,5 +18,5 @@
       }
     }
   ],
-  "plugins": ["prettier-plugin-pkg"]
+  "plugins": ["prettier-plugin-pkg", "prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
index a558f8da45..d285e5454d 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "eslint-plugin-tailwindcss": "3.17.5",
     "prettier": "3.4.2",
     "prettier-plugin-pkg": "^0.18.1",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "remark-frontmatter": "5.0.0",
     "remark-lint-first-heading-level": "3.1.2",
     "remark-lint-heading-increment": "3.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9c3613ae9..fb67da5ff0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,6 +194,9 @@ importers:
       prettier-plugin-pkg:
         specifier: ^0.18.1
         version: 0.18.1(prettier@3.4.2)
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.9
+        version: 0.6.9(prettier@3.4.2)
       remark-frontmatter:
         specifier: 5.0.0
         version: 5.0.0
@@ -7631,6 +7634,64 @@ packages:
       prettier: 3.4.2
     dev: true
 
+  /prettier-plugin-tailwindcss@0.6.9(prettier@3.4.2):
+    resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+    dependencies:
+      prettier: 3.4.2
+    dev: true
+
   /prettier@3.4.2:
     resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
     engines: {node: '>=14'}
diff --git a/src/app/conf/2023/faq/page.tsx b/src/app/conf/2023/faq/page.tsx
index 47c15692ef..4399610933 100644
--- a/src/app/conf/2023/faq/page.tsx
+++ b/src/app/conf/2023/faq/page.tsx
@@ -12,7 +12,7 @@ export default function FAQPage() {
     <>
       <div className="bg-[#f4f6f8]">
         <div className="container">
-          <div className="prose lg:prose-lg conf-block prose-a:text-primary max-w-4xl mx-auto">
+          <div className="conf-block prose mx-auto max-w-4xl lg:prose-lg prose-a:text-primary">
             <FAQ />
           </div>
         </div>
diff --git a/src/app/conf/2023/gallery/page.tsx b/src/app/conf/2023/gallery/page.tsx
index d1656231c5..83769b843d 100644
--- a/src/app/conf/2023/gallery/page.tsx
+++ b/src/app/conf/2023/gallery/page.tsx
@@ -23,7 +23,7 @@ export default function GalleryPage() {
 
   return (
     <div className="bg-[#f4f6f8]">
-      <div className="container conf-block">
+      <div className="conf-block container">
         {currentImages.map((c, i) => {
           function getCard(index: number) {
             return (
@@ -31,7 +31,7 @@ export default function GalleryPage() {
                 <Zoom>
                   <NextImage
                     alt="Gallery"
-                    className="object-cover aspect-video w-full hover:opacity-75 rounded-md"
+                    className="aspect-video w-full rounded-md object-cover hover:opacity-75"
                     src={c[index]}
                   />
                 </Zoom>
@@ -40,15 +40,15 @@ export default function GalleryPage() {
           }
 
           return (
-            <div key={i} className="grid lg:grid-cols-2 gap-2 mb-2">
-              <div className="gap-2 flex flex-col">
+            <div key={i} className="mb-2 grid gap-2 lg:grid-cols-2">
+              <div className="flex flex-col gap-2">
                 <div className="grid grid-cols-2 gap-2">
                   {getCard(0)}
                   {getCard(1)}
                 </div>
                 {getCard(2)}
               </div>
-              <div className="gap-2 flex flex-col">
+              <div className="flex flex-col gap-2">
                 {getCard(3)}
                 <div className="grid grid-cols-2 gap-2">
                   {getCard(4)}
diff --git a/src/app/conf/2023/layout.tsx b/src/app/conf/2023/layout.tsx
index 208d9ccfa5..4669949d2c 100644
--- a/src/app/conf/2023/layout.tsx
+++ b/src/app/conf/2023/layout.tsx
@@ -49,10 +49,10 @@ export default function ConfLayout({
         logo={
           <NextLink
             href="/conf/2023"
-            className="text-white flex gap-2 items-center nextra-logo"
+            className="nextra-logo flex items-center gap-2 text-white"
           >
             <GraphQLConf className="h-6" />
-            <span className="text-xl/none select-none">2023</span>
+            <span className="select-none text-xl/none">2023</span>
           </NextLink>
         }
         links={[
@@ -72,12 +72,12 @@ export default function ConfLayout({
       {children}
       <Footer
         logo={
-          <NextLink href="/conf/2023" className="text-white nextra-logo">
-            <div className="flex gap-2 items-center">
+          <NextLink href="/conf/2023" className="nextra-logo text-white">
+            <div className="flex items-center gap-2">
               <GraphQLConf className="h-6" />
-              <span className="text-xl/none select-none">2023</span>
+              <span className="select-none text-xl/none">2023</span>
             </div>
-            <HostedByGraphQLFoundation className="h-5 mt-2" />
+            <HostedByGraphQLFoundation className="mt-2 h-5" />
           </NextLink>
         }
         links={[
diff --git a/src/app/conf/2023/page.tsx b/src/app/conf/2023/page.tsx
index f523171d09..af9d4de363 100644
--- a/src/app/conf/2023/page.tsx
+++ b/src/app/conf/2023/page.tsx
@@ -24,20 +24,20 @@ export default function ConfPage() {
 
 function Hero() {
   return (
-    <div className="text-white max-md:text-base bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover bg-blend-multiply bg-black/20">
+    <div className="bg-black/20 bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover text-white bg-blend-multiply max-md:text-base">
       <div className="container py-16 md:py-20">
-        <div className="flex gap-6 items-center">
+        <div className="flex items-center gap-6">
           <GraphQLConf className="h-14" />
-          <span className="text-5xl select-none">2023</span>
+          <span className="select-none text-5xl">2023</span>
         </div>
-        <HostedByGraphQLFoundation className="h-10 mt-5" />
-        <div className="flex md:items-center max-md:gap-3 gap-5 mt-5 max-md:flex-col">
-          <div className="flex items-center max-md:gap-3 gap-5">
+        <HostedByGraphQLFoundation className="mt-5 h-10" />
+        <div className="mt-5 flex gap-5 max-md:flex-col max-md:gap-3 md:items-center">
+          <div className="flex items-center gap-5 max-md:gap-3">
             <CalendarIcon className="h-6" />
             <span>September 19-21, 2023</span>
           </div>
           <span />
-          <div className="flex items-center max-md:gap-3 gap-5">
+          <div className="flex items-center gap-5 max-md:gap-3">
             <GlobeIcon className="size-6" />
             <span>San Francisco Bay Area, CA</span>
           </div>
diff --git a/src/app/conf/2023/schedule/page.tsx b/src/app/conf/2023/schedule/page.tsx
index 668848cd4f..673d8c60c4 100644
--- a/src/app/conf/2023/schedule/page.tsx
+++ b/src/app/conf/2023/schedule/page.tsx
@@ -12,13 +12,13 @@ export default function SchedulePage() {
   return (
     <>
       <div className="container">
-        <div className="prose lg:prose-lg py-10 text-white max-w-full">
+        <div className="prose max-w-full py-10 text-white lg:prose-lg">
           <h1 className="text-white">GraphQLConf 2023 Schedule</h1>
-          <section className="px-0 mx-0 my-8">
-            <div className="flex gap-8 mb-1.5">
+          <section className="mx-0 my-8 px-0">
+            <div className="mb-1.5 flex gap-8">
               <span className="flex items-center">
                 <svg
-                  className="mr-3 mb-0.5"
+                  className="mb-0.5 mr-3"
                   width={20}
                   height={20}
                   xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +31,7 @@ export default function SchedulePage() {
               </span>
               <span className="flex items-center">
                 <svg
-                  className="mr-3 mb-0.5"
+                  className="mb-0.5 mr-3"
                   width="20px"
                   height="20px"
                   xmlns="http://www.w3.org/2000/svg"
@@ -54,13 +54,13 @@ export default function SchedulePage() {
         </div>
       </div>
 
-      <div className="bg-[#f4f6f8] conf-block">
+      <div className="conf-block bg-[#f4f6f8]">
         <div className="container">
           <a
             href="https://graphqlconf23.sched.com"
             target="_blank"
             rel="noreferrer"
-            className="underline-offset-2 underline"
+            className="underline underline-offset-2"
           >
             🔗 Bookmark sessions & plan your days on Sched
           </a>
diff --git a/src/app/conf/2023/sessions/[id]/page.tsx b/src/app/conf/2023/sessions/[id]/page.tsx
index 858f96e2a5..9cf13d884b 100644
--- a/src/app/conf/2023/sessions/[id]/page.tsx
+++ b/src/app/conf/2023/sessions/[id]/page.tsx
@@ -50,8 +50,8 @@ const Tag = ({
   !text ? null : (
     <span
       className={clsx(
-        "border border-solid border-[#333333] font-semibold text-sm px-3 py-1 h-max rounded-full whitespace-nowrap",
-        featured ? "bg-[#F8779D] border-[#F8779D] border-2 text-white" : "",
+        "h-max whitespace-nowrap rounded-full border border-solid border-[#333333] px-3 py-1 text-sm font-semibold",
+        featured ? "border-2 border-[#F8779D] bg-[#F8779D] text-white" : "",
       )}
     >
       {text}
@@ -86,12 +86,12 @@ export default function SessionPage({ params }: SessionProps) {
     <div className="bg-[#f4f6f8]">
       <div className="container">
         <div className="py-10">
-          <section className="text-[#333333] min-h-[80vh] flex-col mx-auto px-2 xs:px-0 lg:justify-between justify-center md:container">
+          <section className="xs:px-0 mx-auto min-h-[80vh] flex-col justify-center px-2 text-[#333333] md:container lg:justify-between">
             <div className="flex flex-col lg:px-0">
               <BackLink year="2023" kind="sessions" />
               {recordingTitle.rating > 0.5 && (
                 <iframe
-                  className="aspect-video max-w-[1000px] mx-auto size-full rounded-md"
+                  className="mx-auto aspect-video size-full max-w-[1000px] rounded-md"
                   src={`https://youtube.com/embed/${
                     videos.find(e => e.title === recordingTitle.target)?.id
                   }`}
@@ -101,14 +101,14 @@ export default function SessionPage({ params }: SessionProps) {
                 />
               )}
 
-              <div className="mt-10 flex flex-col self-center prose lg:prose-lg sm:space-y-4">
+              <div className="prose mt-10 flex flex-col self-center lg:prose-lg sm:space-y-4">
                 <div className="space-y-5">
-                  <div className="flex gap-3 flex-wrap">
+                  <div className="flex flex-wrap gap-3">
                     <Tag text={eventType} featured />
                     <Tag text={event.audience} />
                     <Tag text={event.event_subtype} />
                   </div>
-                  <h1 className="mt-0 text-2xl lg:text-3xl font-medium mb-5">
+                  <h1 className="mb-5 mt-0 text-2xl font-medium lg:text-3xl">
                     {eventTitle}
                   </h1>
                   <span className="text-[#333333]">
@@ -119,22 +119,22 @@ export default function SessionPage({ params }: SessionProps) {
                     - {format(parseISO(event.event_end), "hh:mmaaaa 'PDT'")}
                   </span>
                 </div>
-                <div className="flex lg:flex-row flex-col sm:gap-5">
+                <div className="flex flex-col sm:gap-5 lg:flex-row">
                   {event.speakers!.map(speaker => (
                     <div
                       className="flex items-center gap-3"
                       key={speaker.username}
                     >
                       <Avatar
-                        className="lg:size-[120px] size-[100px] rounded-full"
+                        className="size-[100px] rounded-full lg:size-[120px]"
                         avatar={speaker.avatar}
                         name={speaker.name}
                       />
 
-                      <div className="flex flex-col lg:gap-1 gap-1.5">
+                      <div className="flex flex-col gap-1.5 lg:gap-1">
                         <a
                           href={`/conf/2023/speakers/${speaker.username}`}
-                          className="text-xl mt-0 font-bold text-[#333333] underline"
+                          className="mt-0 text-xl font-bold text-[#333333] underline"
                         >
                           {speaker.name}
                         </a>
@@ -178,7 +178,7 @@ export default function SessionPage({ params }: SessionProps) {
                     <div key={path}>
                       <a href={path} target="_blank" rel="noreferrer">
                         View Full PDF{" "}
-                        <span className="font-sans font-light text-2xl">
+                        <span className="font-sans text-2xl font-light">
                           ↗
                         </span>
                       </a>
diff --git a/src/app/conf/2023/sessions/page.tsx b/src/app/conf/2023/sessions/page.tsx
index bf4c849fcd..7e8aa29c69 100644
--- a/src/app/conf/2023/sessions/page.tsx
+++ b/src/app/conf/2023/sessions/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 export default function SessionsPage() {
   return (
     <div className="bg-[#f4f6f8]">
-      <div className="container conf-block">
+      <div className="conf-block container">
         <SessionList
           year="2023"
           eventsColors={eventsColors}
diff --git a/src/app/conf/2023/speakers/[id]/page.tsx b/src/app/conf/2023/speakers/[id]/page.tsx
index c417f2be30..8bc8773f12 100644
--- a/src/app/conf/2023/speakers/[id]/page.tsx
+++ b/src/app/conf/2023/speakers/[id]/page.tsx
@@ -54,17 +54,17 @@ export default function SpeakerPage({ params }: SpeakerProps) {
 
   return (
     <div className="bg-[#f4f6f8] py-14 text-conf-black">
-      <section className="flex flex-col container">
+      <section className="container flex flex-col">
         <div className="flex flex-col">
           <NextLink
             href="/conf/2023/speakers"
-            className="text-conf-black flex items-center text-lg hover:text-primary gap-2 transition-colors"
+            className="flex items-center gap-2 text-lg text-conf-black transition-colors hover:text-primary"
           >
             <ChevronLeftIcon className="size-5" /> Back to Speakers
           </NextLink>
 
           <div className="max-w-5xl self-center">
-            <div className="pt-14 pb-20 flex flex-col sm:flex-row gap-0 sm:gap-10 gap-y-5 justify-between max-lg:flex-col-reverse">
+            <div className="flex flex-col justify-between gap-0 gap-y-5 pb-20 pt-14 max-lg:flex-col-reverse sm:flex-row sm:gap-10">
               <div className="flex flex-col items-start gap-y-5">
                 <h1 className="conf-heading">{speaker.name}</h1>
 
@@ -85,7 +85,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
                           href={social.url}
                           target="_blank"
                           rel="noreferrer"
-                          className="flex items-center w-max"
+                          className="flex w-max items-center"
                         >
                           <SocialMediaIcon
                             service={
@@ -100,7 +100,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
               </div>
 
               <Avatar
-                className="self-center sm:self-start size-[280px] rounded-full"
+                className="size-[280px] self-center rounded-full sm:self-start"
                 avatar={speaker.avatar}
                 name={speaker.name}
               />
diff --git a/src/app/conf/2023/speakers/page.tsx b/src/app/conf/2023/speakers/page.tsx
index 6640954511..c89589d877 100644
--- a/src/app/conf/2023/speakers/page.tsx
+++ b/src/app/conf/2023/speakers/page.tsx
@@ -9,8 +9,8 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <div className="w-full flex justify-center">
-        <div className="prose lg:prose-lg py-20 md:container px-2 xs:px-0">
+      <div className="flex w-full justify-center">
+        <div className="xs:px-0 prose px-2 py-20 md:container lg:prose-lg">
           <h1 className="text-white">GraphQLConf 2023 Speakers</h1>
           <p className="text-white sm:w-2/3">
             Meet the unique lineup of insightful speakers we've carefully
@@ -20,7 +20,7 @@ export default function Page() {
         </div>
       </div>
       <div className="bg-white">
-        <section className="container flex gap-8 flex-wrap lg:justify-between justify-center conf-block">
+        <section className="conf-block container flex flex-wrap justify-center gap-8 lg:justify-between">
           {speakers.map(speaker => (
             <Speaker key={speaker.username} {...speaker} year="2023" />
           ))}
diff --git a/src/app/conf/2024/about.tsx b/src/app/conf/2024/about.tsx
index 41df9f177f..8caa5da504 100644
--- a/src/app/conf/2024/about.tsx
+++ b/src/app/conf/2024/about.tsx
@@ -63,9 +63,9 @@ const classes = {
 export function About() {
   return (
     <div className="bg-gray-100">
-      <div className="container conf-block">
+      <div className="conf-block container">
         <h2 className={classes.title}>About</h2>
-        <div className="grid lg:grid-cols-2 gap-14 xl:gap-28 mb-20">
+        <div className="mb-20 grid gap-14 lg:grid-cols-2 xl:gap-28">
           <div className="lg:text-lg">
             <p>
               GraphQLConf – is the official conference produced by the GraphQL
@@ -85,16 +85,16 @@ export function About() {
           </div>
           <NextImage
             src={ConfImage}
-            className="rounded-md w-full object-cover aspect-video"
+            className="aspect-video w-full rounded-md object-cover"
             alt="GraphQL Conf Image"
           />
         </div>
 
-        <div className="grid lg:grid-cols-2 gap-14 xl:gap-28">
+        <div className="grid gap-14 lg:grid-cols-2 xl:gap-28">
           <NextImage
             alt="GraphQL Conf Image"
             src={ConfImage2}
-            className="max-lg:order-2 rounded-md w-full object-cover aspect-square"
+            className="aspect-square w-full rounded-md object-cover max-lg:order-2"
           />
           <div className="flex flex-col gap-14">
             <p className="lg:text-lg">
@@ -104,11 +104,11 @@ export function About() {
               where we need to innovate & collaborate to help business succeed
               with GraphQL.
             </p>
-            <h4 className="font-bold text-2xl">
+            <h4 className="text-2xl font-bold">
               GraphQLConf is particularly relevant for engineers, architects,
               and managers involved in:
             </h4>
-            <ul className="grid md:grid-cols-2 gap-3">
+            <ul className="grid gap-3 md:grid-cols-2">
               {list.map((item, index) => (
                 <li key={index} className="flex gap-2 md:items-center">
                   <CheckIcon className="shrink-0 text-primary" />
@@ -125,15 +125,15 @@ export function About() {
           </div>
         </div>
       </div>
-      <div className="container conf-block">
+      <div className="conf-block container">
         <h2 className={classes.title}>Why Attend?</h2>
         <ul
           role="list"
-          className="grid sm:grid-cols-2 md:grid-cols-3 ml-0 gap-5 lg:gap-14"
+          className="ml-0 grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:gap-14"
         >
           {whyAttend.map((item, index) => (
             <li key={index} className="flex gap-4">
-              <CheckIcon className="text-primary shrink-0" />
+              <CheckIcon className="shrink-0 text-primary" />
               <span>{item.title}</span>
             </li>
           ))}
diff --git a/src/app/conf/2024/faq/page.tsx b/src/app/conf/2024/faq/page.tsx
index 9e5d858e87..ff8918f831 100644
--- a/src/app/conf/2024/faq/page.tsx
+++ b/src/app/conf/2024/faq/page.tsx
@@ -12,7 +12,7 @@ export default function FAQPage() {
     <>
       <div className="bg-[#f4f6f8]">
         <div className="container">
-          <div className="prose lg:prose-lg conf-block prose-a:text-primary max-w-4xl mx-auto">
+          <div className="conf-block prose mx-auto max-w-4xl lg:prose-lg prose-a:text-primary">
             <FAQ />
           </div>
         </div>
diff --git a/src/app/conf/2024/layout.tsx b/src/app/conf/2024/layout.tsx
index 011f624ca7..8e62aeed30 100644
--- a/src/app/conf/2024/layout.tsx
+++ b/src/app/conf/2024/layout.tsx
@@ -34,10 +34,10 @@ export default function Layout({
         logo={
           <NextLink
             href="/conf/2024"
-            className="text-white flex gap-2 items-center nextra-logo"
+            className="nextra-logo flex items-center gap-2 text-white"
           >
             <GraphQLConf className="h-6" />
-            <span className="text-xl/none select-none">2024</span>
+            <span className="select-none text-xl/none">2024</span>
           </NextLink>
         }
         links={[
@@ -50,12 +50,12 @@ export default function Layout({
       {children}
       <Footer
         logo={
-          <NextLink href="/conf/2024" className="text-white nextra-logo">
-            <div className="flex gap-2 items-center">
+          <NextLink href="/conf/2024" className="nextra-logo text-white">
+            <div className="flex items-center gap-2">
               <GraphQLConf className="h-6" />
-              <span className="text-xl/none select-none">2024</span>
+              <span className="select-none text-xl/none">2024</span>
             </div>
-            <HostedByGraphQLFoundation className="h-5 mt-2" />
+            <HostedByGraphQLFoundation className="mt-2 h-5" />
           </NextLink>
         }
         links={[
diff --git a/src/app/conf/2024/page.tsx b/src/app/conf/2024/page.tsx
index 082beab224..f968564339 100644
--- a/src/app/conf/2024/page.tsx
+++ b/src/app/conf/2024/page.tsx
@@ -46,13 +46,13 @@ export default function Page() {
   return (
     <>
       <div className="conf-hero">
-        <div className="container h-full py-16 md:py-20 flex flex-col justify-center">
-          <div className="flex text-xs lg:text-lg uppercase gap-4 lg:gap-8 leading-none mb-12">
+        <div className="container flex h-full flex-col justify-center py-16 md:py-20">
+          <div className="mb-12 flex gap-4 text-xs uppercase leading-none lg:gap-8 lg:text-lg">
             <div>September 10-12</div>
             <div className="w-px bg-current" />
             <div>San Francisco, CA</div>
           </div>
-          <div className="flex gap-10 items-center">
+          <div className="flex items-center gap-10">
             <svg
               className="w-[50%]"
               viewBox="0 0 1239 142"
@@ -76,7 +76,7 @@ export default function Page() {
               <path d="M1217.43 90.2801H1175.42V82.4447L1215.27 27.2651H1227.65V81.3097H1239V90.2801H1227.65V108.56H1217.43V90.2801ZM1217.88 81.3097V38.0516L1187.34 81.3097H1217.88Z" />
             </svg>
           </div>
-          <HostedByGraphQLFoundation className="shrink-0 h-8 lg:h-10 mt-5 mb-12 self-start" />
+          <HostedByGraphQLFoundation className="mb-12 mt-5 h-8 shrink-0 self-start lg:h-10" />
           <div className="flex items-center gap-12 max-md:flex-col">
             <Button href="/conf/2024/schedule/">
               Explore all recordings and slides!
@@ -85,9 +85,9 @@ export default function Page() {
         </div>
       </div>
 
-      <div className="container flex gap-20 flex-col py-8">
-        <div className="flex gap-12 lg:gap-24 max-md:flex-col">
-          <div className="flex flex-col gap-5 text-white flex-1">
+      <div className="container flex flex-col gap-20 py-8">
+        <div className="flex gap-12 max-md:flex-col lg:gap-24">
+          <div className="flex flex-1 flex-col gap-5 text-white">
             <h2 className="conf-heading">Thank you for Attending!</h2>
             <p className="lg:text-lg">
               Thank you to all who joined us for GraphQLConf 2024! We look
@@ -97,10 +97,10 @@ export default function Page() {
             </p>
           </div>
           {/* this div is really necessary otherwise img will appear outside from div */}
-          <div className="flex-1 flex justify-end">
+          <div className="flex flex-1 justify-end">
             <NextImage
               alt="Lee Byron"
-              className="object-cover rounded-md aspect-video"
+              className="aspect-video rounded-md object-cover"
               src={leeImage}
             />
           </div>
@@ -108,7 +108,7 @@ export default function Page() {
       </div>
 
       <div className={clsx(classes.container, "flex flex-col items-center")}>
-        <h3 className="text-[45px] text-center font-bold mb-20">
+        <h3 className="mb-20 text-center text-[45px] font-bold">
           Our Special Speakers
         </h3>
 
@@ -118,17 +118,17 @@ export default function Page() {
             .map(speaker => (
               <div
                 key={speaker.username}
-                className="group border-[1.5px] border-[rgba(255,255,255,0.4)] cursor-pointer hover:-translate-y-3 transition-transform duration-300 relative rounded-full overflow-hidden md:size-[210px]"
+                className="group relative cursor-pointer overflow-hidden rounded-full border-[1.5px] border-[rgba(255,255,255,0.4)] transition-transform duration-300 hover:-translate-y-3 md:size-[210px]"
               >
                 <a href={`/conf/2024/speakers/${speaker.username}`}>
                   <img
-                    className="size-[120px] md:size-[210px] rounded-full"
+                    className="size-[120px] rounded-full md:size-[210px]"
                     src={speaker.avatar}
                     alt={speaker.name}
                   />
                 </a>
-                <div className="pointer-events-none bg-[rgba(0,0,0,0.6)] h-[40px] text-sm md:text-base md:h-[55px] w-[120px] md:w-[210px] absolute left-0 bottom-0 opacity-1 md:opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex justify-center">
-                  <span className="mt-2.5 md:mt-3.5 font-medium">
+                <div className="opacity-1 pointer-events-none absolute bottom-0 left-0 flex h-[40px] w-[120px] justify-center bg-[rgba(0,0,0,0.6)] text-sm transition-opacity duration-300 group-hover:opacity-100 md:h-[55px] md:w-[210px] md:text-base md:opacity-0">
+                  <span className="mt-2.5 font-medium md:mt-3.5">
                     {speaker.name.split(" ")[0]}
                   </span>
                 </div>
@@ -141,7 +141,7 @@ export default function Page() {
         </div>
 
         <div className="mt-16">
-          <h3 className="text-[45px] text-center font-bold mb-16">
+          <h3 className="mb-16 text-center text-[45px] font-bold">
             The Schedule
           </h3>
 
diff --git a/src/app/conf/2024/partner/page.tsx b/src/app/conf/2024/partner/page.tsx
index 7f98a00d1b..e8c9323f60 100644
--- a/src/app/conf/2024/partner/page.tsx
+++ b/src/app/conf/2024/partner/page.tsx
@@ -11,7 +11,7 @@ export default function Page() {
     <>
       <div className="bg-[#f4f6f8]">
         <div className="container">
-          <div className="prose lg:prose-lg conf-block prose-a:text-primary max-w-4xl mx-auto">
+          <div className="conf-block prose mx-auto max-w-4xl lg:prose-lg prose-a:text-primary">
             <MDXPage />
           </div>
         </div>
diff --git a/src/app/conf/2024/pricing.tsx b/src/app/conf/2024/pricing.tsx
index 67d293bfab..4a1a6432e6 100644
--- a/src/app/conf/2024/pricing.tsx
+++ b/src/app/conf/2024/pricing.tsx
@@ -49,7 +49,7 @@ export function Pricing() {
     <>
       <div id="attend" className={classes.container}>
         <h1 className={classes.heading}>Pricing & Registration</h1>
-        <div className="my-20 flex gap-10 justify-center max-md:items-center max-md:flex-col flex-wrap">
+        <div className="my-20 flex flex-wrap justify-center gap-10 max-md:flex-col max-md:items-center">
           {pricing.map((pricing, index) => {
             const isExpired = pricing.expiredDate < new Date()
             return (
@@ -59,15 +59,15 @@ export function Pricing() {
                 target="_blank"
                 rel="noreferrer"
                 className={clsx(
-                  "shadow-md px-24 py-12 bg-[#251f30] flex flex-col items-center border border-transparent transition-colors outline-none",
+                  "flex flex-col items-center border border-transparent bg-[#251f30] px-24 py-12 shadow-md outline-none transition-colors",
                   isExpired
-                    ? "opacity-50 line-through pointer-events-none"
-                    : "hover:shadow-primary/20 focus:shadow-primary/20 focus:border-primary hover:border-primary",
+                    ? "pointer-events-none line-through opacity-50"
+                    : "hover:border-primary hover:shadow-primary/20 focus:border-primary focus:shadow-primary/20",
                 )}
               >
-                <div className="text-3xl font-bold mb-2">{pricing.title}</div>
-                <div className="text-lg mb-6">{pricing.date}</div>
-                <div className="text-[45px] text-primary font-bold [text-decoration-line:inherit]">
+                <div className="mb-2 text-3xl font-bold">{pricing.title}</div>
+                <div className="mb-6 text-lg">{pricing.date}</div>
+                <div className="text-[45px] font-bold text-primary [text-decoration-line:inherit]">
                   {pricing.price}
                 </div>
               </a>
@@ -80,10 +80,10 @@ export function Pricing() {
       </div>
       <div className={classes.container}>
         <h3 className={classes.heading}>What's Included?</h3>
-        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-10 text-2xl">
+        <div className="grid gap-10 text-2xl md:grid-cols-2 xl:grid-cols-3">
           {includes.map((item, i) => (
             <div key={i} className="flex items-center gap-4">
-              <CheckIcon className="text-primary h-7 shrink-0" />
+              <CheckIcon className="h-7 shrink-0 text-primary" />
               <p>{item}</p>
             </div>
           ))}
diff --git a/src/app/conf/2024/schedule/[id]/page.tsx b/src/app/conf/2024/schedule/[id]/page.tsx
index cb9136d3e6..cdf9b73443 100644
--- a/src/app/conf/2024/schedule/[id]/page.tsx
+++ b/src/app/conf/2024/schedule/[id]/page.tsx
@@ -67,8 +67,8 @@ const Tag = ({
   !text ? null : (
     <span
       className={clsx(
-        "border border-solid border-[#333333] font-semibold text-sm px-3 py-1 h-max rounded-full whitespace-nowrap",
-        featured && "bg-[#F8779D] border-[#F8779D] border-2 text-white",
+        "h-max whitespace-nowrap rounded-full border border-solid border-[#333333] px-3 py-1 text-sm font-semibold",
+        featured && "border-2 border-[#F8779D] bg-[#F8779D] text-white",
       )}
     >
       {text}
@@ -110,24 +110,24 @@ export default function SessionPage({ params }: SessionProps) {
     <div className="bg-[#f4f6f8]">
       <div className="container">
         <div className="py-10">
-          <section className="text-[#333333] min-h-[80vh] flex-col mx-auto px-2 xs:px-0 lg:justify-between justify-center md:container">
+          <section className="xs:px-0 mx-auto min-h-[80vh] flex-col justify-center px-2 text-[#333333] md:container lg:justify-between">
             <BackLink year="2024" kind="schedule" />
             <iframe
-              className="aspect-video w-full max-w-4xl mx-auto rounded-md mt-6"
+              className="mx-auto mt-6 aspect-video w-full max-w-4xl rounded-md"
               src={`https://youtube.com/embed/${videoId}`}
               title={recordingTitle.target}
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               allowFullScreen
             />
 
-            <div className="mt-10 flex flex-col self-center prose lg:prose-lg sm:space-y-4 mx-auto">
+            <div className="prose mx-auto mt-10 flex flex-col self-center lg:prose-lg sm:space-y-4">
               <div className="space-y-5">
-                <div className="flex gap-3 flex-wrap">
+                <div className="flex flex-wrap gap-3">
                   <Tag text={eventType} featured />
                   <Tag text={event.audience} />
                   <Tag text={event.event_subtype} />
                 </div>
-                <h1 className="mt-0 text-2xl lg:text-3xl font-medium">
+                <h1 className="mt-0 text-2xl font-medium lg:text-3xl">
                   {eventTitle}
                 </h1>
                 <span className="text-[#333333]">
@@ -138,22 +138,22 @@ export default function SessionPage({ params }: SessionProps) {
                   - {format(parseISO(event.event_end), "hh:mmaaaa 'PDT'")}
                 </span>
               </div>
-              <div className="flex flex-wrap lg:flex-row flex-col gap-5 mt-8">
+              <div className="mt-8 flex flex-col flex-wrap gap-5 lg:flex-row">
                 {event.speakers!.map(speaker => (
                   <div
-                    className={`flex items-center gap-3 w-full ${event?.speakers?.length || 0 > 1 ? "max-w-[320px]" : ""}`}
+                    className={`flex w-full items-center gap-3 ${event?.speakers?.length || 0 > 1 ? "max-w-[320px]" : ""}`}
                     key={speaker.username}
                   >
                     <Avatar
-                      className="lg:size-[120px] size-[100px] rounded-full"
+                      className="size-[100px] rounded-full lg:size-[120px]"
                       avatar={speaker.avatar}
                       name={speaker.name}
                     />
 
-                    <div className="flex flex-col lg:gap-1 gap-1.5">
+                    <div className="flex flex-col gap-1.5 lg:gap-1">
                       <a
                         href={`/conf/2024/speakers/${speaker.username}`}
-                        className="text-xl mt-0 font-bold text-[#333333] underline"
+                        className="mt-0 text-xl font-bold text-[#333333] underline"
                       >
                         {speaker.name}
                       </a>
@@ -195,7 +195,7 @@ export default function SessionPage({ params }: SessionProps) {
                   <div key={path}>
                     <a href={path} target="_blank" rel="noreferrer">
                       View Full PDF{" "}
-                      <span className="font-sans font-light text-2xl">↗</span>
+                      <span className="font-sans text-2xl font-light">↗</span>
                     </a>
                     <iframe src={path} className="aspect-video size-full" />
                   </div>
diff --git a/src/app/conf/2024/schedule/page.tsx b/src/app/conf/2024/schedule/page.tsx
index c4443d440a..eb289b75e9 100644
--- a/src/app/conf/2024/schedule/page.tsx
+++ b/src/app/conf/2024/schedule/page.tsx
@@ -10,15 +10,15 @@ export const metadata: Metadata = {
 
 export default function SchedulePage() {
   return (
-    <div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-no-repeat bg-contain'>
+    <div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-contain bg-no-repeat'>
       <div className="container">
-        <div className="prose lg:prose-lg py-20 text-white max-w-full">
+        <div className="prose max-w-full py-20 text-white lg:prose-lg">
           <h1 className="text-white">GraphQLConf 2024 Schedule</h1>
-          <section className="px-0 mx-0 my-8">
-            <div className="flex gap-8 mb-1.5">
+          <section className="mx-0 my-8 px-0">
+            <div className="mb-1.5 flex gap-8">
               <span className="flex items-center">
                 <svg
-                  className="mr-3 mb-0.5"
+                  className="mb-0.5 mr-3"
                   width={20}
                   height={20}
                   xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +31,7 @@ export default function SchedulePage() {
               </span>
               <span className="flex items-center">
                 <svg
-                  className="mr-3 mb-0.5"
+                  className="mb-0.5 mr-3"
                   width="20px"
                   height="20px"
                   xmlns="http://www.w3.org/2000/svg"
@@ -54,13 +54,13 @@ export default function SchedulePage() {
         </div>
       </div>
 
-      <div className="bg-[#f4f6f8] conf-block">
+      <div className="conf-block bg-[#f4f6f8]">
         <div className="container">
           <a
             href="https://graphqlconf2024.sched.com"
             target="_blank"
             rel="noreferrer"
-            className="underline-offset-2 underline"
+            className="underline underline-offset-2"
           >
             🔗 Bookmark sessions & plan your days on Sched
           </a>
diff --git a/src/app/conf/2024/speak/page.tsx b/src/app/conf/2024/speak/page.tsx
index 39b374fc3b..9d457188d0 100644
--- a/src/app/conf/2024/speak/page.tsx
+++ b/src/app/conf/2024/speak/page.tsx
@@ -11,7 +11,7 @@ export default function Page() {
     <>
       <div className="bg-[#f4f6f8]">
         <div className="container">
-          <div className="prose lg:prose-lg conf-block prose-a:text-primary max-w-4xl mx-auto">
+          <div className="conf-block prose mx-auto max-w-4xl lg:prose-lg prose-a:text-primary">
             <MDXPage />
           </div>
         </div>
diff --git a/src/app/conf/2024/speakers/[id]/page.tsx b/src/app/conf/2024/speakers/[id]/page.tsx
index e9ff55cc73..afca6571ee 100644
--- a/src/app/conf/2024/speakers/[id]/page.tsx
+++ b/src/app/conf/2024/speakers/[id]/page.tsx
@@ -53,17 +53,17 @@ export default function SpeakerPage({ params }: SpeakerProps) {
 
   return (
     <div className="bg-[#f4f6f8] py-14 text-conf-black">
-      <section className="flex flex-col container">
+      <section className="container flex flex-col">
         <div className="flex flex-col">
           <NextLink
             href="/conf/2024/speakers"
-            className="text-conf-black flex items-center text-lg hover:text-primary gap-2 transition-colors"
+            className="flex items-center gap-2 text-lg text-conf-black transition-colors hover:text-primary"
           >
             <ChevronLeftIcon className="size-5" /> Back to Speakers
           </NextLink>
 
           <div className="max-w-5xl self-center">
-            <div className="pt-14 pb-20 flex flex-col sm:flex-row gap-0 sm:gap-10 gap-y-5 justify-between max-lg:flex-col-reverse">
+            <div className="flex flex-col justify-between gap-0 gap-y-5 pb-20 pt-14 max-lg:flex-col-reverse sm:flex-row sm:gap-10">
               <div className="flex flex-col items-start gap-y-5">
                 <h1 className="conf-heading">{speaker.name}</h1>
 
@@ -84,7 +84,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
                           href={social.url}
                           target="_blank"
                           rel="noreferrer"
-                          className="flex items-center w-max"
+                          className="flex w-max items-center"
                         >
                           <SocialMediaIcon
                             service={
@@ -99,7 +99,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
               </div>
 
               <Avatar
-                className="self-center sm:self-start size-[280px] rounded-full"
+                className="size-[280px] self-center rounded-full sm:self-start"
                 avatar={speaker.avatar}
                 name={speaker.name}
               />
diff --git a/src/app/conf/2024/speakers/page.tsx b/src/app/conf/2024/speakers/page.tsx
index 3faa7a0828..343e76f6de 100644
--- a/src/app/conf/2024/speakers/page.tsx
+++ b/src/app/conf/2024/speakers/page.tsx
@@ -8,9 +8,9 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-no-repeat bg-contain'>
-      <div className="w-full flex justify-center">
-        <div className="prose lg:prose-lg py-20 md:container px-2 xs:px-0">
+    <div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-contain bg-no-repeat'>
+      <div className="flex w-full justify-center">
+        <div className="xs:px-0 prose px-2 py-20 md:container lg:prose-lg">
           <h1 className="text-white">GraphQLConf 2024 Speakers</h1>
           <p className="text-white sm:w-2/3">
             Meet the unique lineup of insightful speakers we've carefully
@@ -20,7 +20,7 @@ export default function Page() {
         </div>
       </div>
       <div className="bg-white">
-        <section className="container flex gap-8 flex-wrap lg:justify-between justify-center conf-block">
+        <section className="conf-block container flex flex-wrap justify-center gap-8 lg:justify-between">
           {speakers.map(speaker => (
             <Speaker key={speaker.username} {...speaker} year="2024" />
           ))}
diff --git a/src/app/conf/2024/sponsors.tsx b/src/app/conf/2024/sponsors.tsx
index 52a50071f3..7d99f9a4f3 100644
--- a/src/app/conf/2024/sponsors.tsx
+++ b/src/app/conf/2024/sponsors.tsx
@@ -56,17 +56,17 @@ function List({
   linkClassName?: string
 }) {
   return (
-    <div className={clsx("grid gap-7 w-full flex-1", className)}>
+    <div className={clsx("grid w-full flex-1 gap-7", className)}>
       {items.map(({ link, icon, name }, i) => (
         <a
           key={i}
           className={clsx(
-            "relative shrink-0 bg-[#251f30] rounded-md",
+            "relative shrink-0 rounded-md bg-[#251f30]",
             "flex justify-center",
             "items-center", // fix vertical align in Safari/iOS
             "border border-solid border-transparent hover:border-primary focus:border-primary",
             "transition-colors",
-            "hover:shadow-primary/20 focus:shadow-primary/20 shadow-md outline-none",
+            "shadow-md outline-none hover:shadow-primary/20 focus:shadow-primary/20",
             linkClassName,
           )}
           href={link}
@@ -77,9 +77,9 @@ function List({
           <NextImage
             alt={`${name} logo`}
             src={icon}
-            className="lg:w-auto lg:max-w-60 max-h-full"
+            className="max-h-full lg:w-auto lg:max-w-60"
           />
-          <span className="font-sans absolute right-5 top-5 leading-none text-white lg:text-2xl">
+          <span className="absolute right-5 top-5 font-sans leading-none text-white lg:text-2xl">
             ↗
           </span>
         </a>
@@ -97,7 +97,7 @@ const classes = {
 export function Sponsors() {
   return (
     <div id="sponsors" className="bg-conf-black">
-      <div className="container conf-block">
+      <div className="conf-block container">
         <h1 className={classes.title}>Thanks to our 2024 sponsors!</h1>
         {sponsorDiamond.length && (
           <>
diff --git a/src/app/conf/2024/venue.tsx b/src/app/conf/2024/venue.tsx
index 84a32e9143..866884669e 100644
--- a/src/app/conf/2024/venue.tsx
+++ b/src/app/conf/2024/venue.tsx
@@ -10,12 +10,12 @@ export function Venue() {
   return (
     <div
       id="location"
-      className="container conf-block text-white [&_a]:text-primary"
+      className="conf-block container text-white [&_a]:text-primary"
     >
-      <h1 className="md:text-center mb-5 lg:mb-20 conf-heading">
+      <h1 className="conf-heading mb-5 md:text-center lg:mb-20">
         Location &amp; Venue
       </h1>
-      <div className="grid lg:grid-cols-2 lg:gap-14 text-lg">
+      <div className="grid text-lg lg:grid-cols-2 lg:gap-14">
         <div>
           <h3 className={classes.heading}>Venue Information</h3>
           <a
@@ -32,7 +32,7 @@ export function Venue() {
           <NextImage
             src={cityViewImage}
             alt="San Francisco city view"
-            className="object-cover aspect-video rounded-md my-8 mx-auto"
+            className="mx-auto my-8 aspect-video rounded-md object-cover"
           />
         </div>
         <div>
@@ -77,7 +77,7 @@ export function Venue() {
           .
         </div>
       </div>
-      <div className="flex text-lg max-lg:flex-col w-full gap-14 pt-16">
+      <div className="flex w-full gap-14 pt-16 text-lg max-lg:flex-col">
         {[
           {
             title: "Public Transportation",
@@ -179,7 +179,7 @@ export function Venue() {
           },
         ].map(o => (
           <div key={o.title} className="flex-1">
-            <o.icon className="fill-primary h-16 w-auto mb-4" />
+            <o.icon className="mb-4 h-16 w-auto fill-primary" />
             <h3 className={classes.heading}>{o.title}</h3>
             {o.content}
           </div>
diff --git a/src/app/conf/2025/faq.tsx b/src/app/conf/2025/faq.tsx
index cee170f4a1..c706a573bb 100644
--- a/src/app/conf/2025/faq.tsx
+++ b/src/app/conf/2025/faq.tsx
@@ -42,18 +42,18 @@ const FAQS = [
 export function FAQ() {
   return (
     <div id="faq" className={styles.faq}>
-      <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12">
+      <div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2">
         <div>
-          <h2 className="select-none text-4xl md:text-5xl font-bold mb-4">
+          <h2 className="mb-4 select-none text-4xl font-bold md:text-5xl">
             Frequently
             <br />
             Asked Questions
           </h2>
-          <p className="text-sm select-none">
+          <p className="select-none text-sm">
             PLEASE CONTACT{" "}
             <a
               href="mailto:graphqlconf@graphql.org"
-              className="text-primary hover:underline uppercase select-text"
+              className="select-text uppercase text-primary hover:underline"
             >
               graphqlconf@graphql.org
             </a>
@@ -64,14 +64,14 @@ export function FAQ() {
           {FAQS.map((faq, index) => (
             <details
               key={index}
-              className="group border-b border-white/10 border-dashed"
+              className="group border-b border-dashed border-white/10"
             >
-              <summary className="py-6 flex items-center justify-start gap-2 text-left cursor-pointer list-none focus:outline-none">
-                <ArrowRight className="shrink-0 size-5 transition-transform duration-200 group-hover:translate-x-1 group-open:rotate-90" />
-                <span className="text-lg select-none">{faq.question}</span>
+              <summary className="flex cursor-pointer list-none items-center justify-start gap-2 py-6 text-left focus:outline-none">
+                <ArrowRight className="size-5 shrink-0 transition-transform duration-200 group-open:rotate-90 group-hover:translate-x-1" />
+                <span className="select-none text-lg">{faq.question}</span>
               </summary>
               <p
-                className="pb-6 ml-7 -mt-4 text-gray-300 whitespace-pre-wrap [&>a]:underline"
+                className="-mt-4 ml-7 whitespace-pre-wrap pb-6 text-gray-300 [&>a]:underline"
                 dangerouslySetInnerHTML={{ __html: faq.answer }}
               />
             </details>
diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx
index 20bdf00f4b..9b84eb99da 100644
--- a/src/app/conf/2025/layout.tsx
+++ b/src/app/conf/2025/layout.tsx
@@ -34,10 +34,10 @@ export default function Layout({
         logo={
           <NextLink
             href="/conf/2025"
-            className="text-white flex gap-2 items-center nextra-logo"
+            className="nextra-logo flex items-center gap-2 text-white"
           >
             <GraphQLConf className="h-6" />
-            <span className="text-xl/none select-none">2025</span>
+            <span className="select-none text-xl/none">2025</span>
           </NextLink>
         }
         links={[
@@ -52,12 +52,12 @@ export default function Layout({
       {children}
       <Footer
         logo={
-          <NextLink href="/conf/2025" className="text-white nextra-logo">
-            <div className="flex gap-2 items-center">
+          <NextLink href="/conf/2025" className="nextra-logo text-white">
+            <div className="flex items-center gap-2">
               <GraphQLConf className="h-6" />
-              <span className="text-xl/none select-none">2025</span>
+              <span className="select-none text-xl/none">2025</span>
             </div>
-            <HostedByGraphQLFoundation className="h-5 mt-2" />
+            <HostedByGraphQLFoundation className="mt-2 h-5" />
           </NextLink>
         }
         links={[
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 1f5a2d96eb..3c18672208 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -20,8 +20,8 @@ export const metadata: Metadata = {
 function Hero() {
   return (
     <section className="conf-hero-2025 relative">
-      <div className="h-full py-16 md:py-28 flex flex-col justify-center">
-        <div className="flex items-center justify-center flex-col">
+      <div className="flex h-full flex-col justify-center py-16 md:py-28">
+        <div className="flex flex-col items-center justify-center">
           <h1
             style={{
               fontSize: "min(calc(10px + 80vw / 12), 150px)",
@@ -31,14 +31,14 @@ function Hero() {
           >
             GraphQLConf <span className="font-light">2025</span>
           </h1>
-          <HostedByGraphQLFoundation className="w-full shrink-0 h-8 lg:h-10 mb-6 self-start" />
-          <span className={`${rubik.className} font-medium text-xl`}>
+          <HostedByGraphQLFoundation className="mb-6 h-8 w-full shrink-0 self-start lg:h-10" />
+          <span className={`${rubik.className} text-xl font-medium`}>
             September 08 - 10, 2025 | Amsterdam, Netherlands
           </span>
         </div>
       </div>
       <div
-        className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[90%] h-px bg-white/10"
+        className="absolute bottom-0 left-1/2 h-px w-[90%] -translate-x-1/2 bg-white/10"
         aria-hidden="true"
       />
     </section>
@@ -48,7 +48,7 @@ function Hero() {
 function Intro() {
   return (
     <section className="flex flex-col gap-20 md:gap-32">
-      <h2 className="text-3xl lg:text-5xl font-normal">
+      <h2 className="text-3xl font-normal lg:text-5xl">
         Celebrating 10 Years of GraphQL. Three transformative days of expert
         insights and innovation to shape the next decade of APIs together!
       </h2>
@@ -70,7 +70,7 @@ export default function Page() {
       className="text-white"
     >
       <Hero />
-      <div className="container flex flex-col gap-20 md:gap-32 my-20 md:my-32">
+      <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32">
         <Intro />
         <PastSponsors />
         <Sponsor />
diff --git a/src/app/conf/2025/past-sponsors.tsx b/src/app/conf/2025/past-sponsors.tsx
index cc15a1e67e..d14f44886d 100644
--- a/src/app/conf/2025/past-sponsors.tsx
+++ b/src/app/conf/2025/past-sponsors.tsx
@@ -72,7 +72,7 @@ function List({
             "border border-solid border-transparent hover:border-primary focus:border-primary",
             "transition-colors",
             "group",
-            "group-hover:shadow-primary/20 focus:shadow-primary/20 shadow-md outline-none",
+            "shadow-md outline-none focus:shadow-primary/20 group-hover:shadow-primary/20",
             linkClassName,
           )}
           href={link}
@@ -83,9 +83,9 @@ function List({
           <NextImage
             alt={`${name} logo`}
             src={icon}
-            className="lg:w-auto lg:max-w-60 max-h-full"
+            className="max-h-full lg:w-auto lg:max-w-60"
           />
-          <span className="group-hover:block hidden font-sans absolute right-5 top-5 leading-none  lg:text-2xl">
+          <span className="absolute right-5 top-5 hidden font-sans leading-none group-hover:block lg:text-2xl">
             ↗
           </span>
         </a>
@@ -100,10 +100,10 @@ export function PastSponsors() {
       <h1 className="conf-heading mb-12">Thanks to our 2024 sponsors!</h1>
       {SPONSORS.map(({ title, logos }, i) => (
         <>
-          <div className="flex items-center gap-2 mb-2 border-b-2 border-dotted pb-1.5 border-white/40">
+          <div className="mb-2 flex items-center gap-2 border-b-2 border-dotted border-white/40 pb-1.5">
             {/* Square box */}
             <div className="size-2.5 bg-primary" />
-            <h3 className=" font-medium uppercase">{title}</h3>
+            <h3 className="font-medium uppercase">{title}</h3>
           </div>
           <List
             items={logos}
diff --git a/src/app/conf/2025/register.tsx b/src/app/conf/2025/register.tsx
index c7725892e8..1c4d17469d 100644
--- a/src/app/conf/2025/register.tsx
+++ b/src/app/conf/2025/register.tsx
@@ -33,12 +33,12 @@ export function Register() {
         ]}
       />
 
-      <div className="flex justify-center mt-8">
+      <div className="mt-8 flex justify-center">
         <a
           href="https://cvent.me/PBNYEe?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=register_section"
           target="_blank"
           rel="noreferrer"
-          className="px-20 md:px-28 py-4 text-center text-3xl font-semibold bg-primary/85 hover:bg-primary/100 transition-colors"
+          className="bg-primary/85 px-20 py-4 text-center text-3xl font-semibold transition-colors hover:bg-primary/100 md:px-28"
         >
           Get Tickets
         </a>
diff --git a/src/app/conf/2025/sponsorship.tsx b/src/app/conf/2025/sponsorship.tsx
index ebd99a92bd..fd6744d130 100644
--- a/src/app/conf/2025/sponsorship.tsx
+++ b/src/app/conf/2025/sponsorship.tsx
@@ -39,12 +39,12 @@ export function Sponsor() {
         ]}
       />
 
-      <div className="flex justify-center mt-8">
+      <div className="mt-8 flex justify-center">
         <a
           href="https://events.linuxfoundation.org/wp-content/uploads/2024/12/sponsor_GraphQLConf_2025.pdf?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=sponsor_section"
           target="_blank"
           rel="noreferrer"
-          className="px-20 md:px-28 py-4 text-center text-3xl font-semibold bg-primary/85 hover:bg-primary/100 transition-colors"
+          className="bg-primary/85 px-20 py-4 text-center text-3xl font-semibold transition-colors hover:bg-primary/100 md:px-28"
         >
           Download Prospectus
         </a>
diff --git a/src/app/conf/2025/venue.tsx b/src/app/conf/2025/venue.tsx
index 5a6c60dc96..e88573e004 100644
--- a/src/app/conf/2025/venue.tsx
+++ b/src/app/conf/2025/venue.tsx
@@ -50,9 +50,9 @@ const HOW_TO_GET_TO_VENUE = [
 export function Venue() {
   return (
     <section>
-      <h1 className="text-5xl font-bold mb-4">Venue</h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
-        <div className="flex gap-2 flex-col">
+      <h1 className="mb-4 text-5xl font-bold">Venue</h1>
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="flex flex-col gap-2">
           <h2 className="text-3xl">Conference</h2>
           <p>
             <strong>Pakhuis De Zwijger</strong>
@@ -60,7 +60,7 @@ export function Venue() {
             Amsterdam, Netherlands
           </p>
           <div className="flex flex-col gap-2">
-            <h3 className="text-xl mt-4 font-semibold">
+            <h3 className="mt-4 text-xl font-semibold">
               How to get to the venue?
             </h3>
             {HOW_TO_GET_TO_VENUE.map(({ title, description, icon }) => (
@@ -69,7 +69,7 @@ export function Venue() {
                   {icon}
                   <h5 className="text-lg">{title}</h5>
                 </div>
-                <p className="max-w-96 ml-9">{description}</p>
+                <p className="ml-9 max-w-96">{description}</p>
               </div>
             ))}
           </div>
@@ -86,7 +86,7 @@ export function Venue() {
               <div key={hotel.name}>
                 <strong>
                   <a
-                    className="hover:underline flex items-center gap-1"
+                    className="flex items-center gap-1 hover:underline"
                     href={hotel.link}
                   >
                     {hotel.name}
diff --git a/src/app/conf/_components/about.tsx b/src/app/conf/_components/about.tsx
index 798f72bd3c..7308945817 100644
--- a/src/app/conf/_components/about.tsx
+++ b/src/app/conf/_components/about.tsx
@@ -63,9 +63,9 @@ const classes = {
 export function About() {
   return (
     <div className="bg-gray-100">
-      <div className="container conf-block">
+      <div className="conf-block container">
         <h2 className={classes.title}>About</h2>
-        <div className="grid lg:grid-cols-2 gap-14 xl:gap-28 mb-20">
+        <div className="mb-20 grid gap-14 lg:grid-cols-2 xl:gap-28">
           <div className="lg:text-lg">
             <p>
               GraphQLConf – is the official conference produced by the GraphQL
@@ -85,16 +85,16 @@ export function About() {
           </div>
           <NextImage
             src={ConfImage}
-            className="rounded-md w-full object-cover aspect-video"
+            className="aspect-video w-full rounded-md object-cover"
             alt="GraphQL Conf Image"
           />
         </div>
 
-        <div className="grid lg:grid-cols-2 gap-14 xl:gap-28">
+        <div className="grid gap-14 lg:grid-cols-2 xl:gap-28">
           <NextImage
             alt="GraphQL Conf Image"
             src={ConfImage2}
-            className="max-lg:order-2 rounded-md w-full object-cover aspect-square"
+            className="aspect-square w-full rounded-md object-cover max-lg:order-2"
           />
           <div className="flex flex-col gap-14">
             <p className="lg:text-lg">
@@ -104,11 +104,11 @@ export function About() {
               where we need to innovate & collaborate to help business succeed
               with GraphQL.
             </p>
-            <h4 className="font-bold text-2xl">
+            <h4 className="text-2xl font-bold">
               GraphQLConf is particularly relevant for engineers, architects,
               and managers involved in:
             </h4>
-            <ul className="grid md:grid-cols-2 gap-3">
+            <ul className="grid gap-3 md:grid-cols-2">
               {list.map((item, index) => (
                 <li key={index} className="flex gap-2 md:items-center">
                   <CheckIcon className="shrink-0 text-primary" />
@@ -125,15 +125,15 @@ export function About() {
           </div>
         </div>
       </div>
-      <div className="container conf-block">
+      <div className="conf-block container">
         <h2 className={classes.title}>Why Attend?</h2>
         <ul
           role="list"
-          className="grid sm:grid-cols-2 md:grid-cols-3 ml-0 gap-5 lg:gap-14"
+          className="ml-0 grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:gap-14"
         >
           {whyAttend.map((item, index) => (
             <li key={index} className="flex gap-4">
-              <CheckIcon className="text-primary shrink-0" />
+              <CheckIcon className="shrink-0 text-primary" />
               <span>{item.title}</span>
             </li>
           ))}
diff --git a/src/app/conf/_components/button.tsx b/src/app/conf/_components/button.tsx
index a7c8b24434..097d59d5c1 100644
--- a/src/app/conf/_components/button.tsx
+++ b/src/app/conf/_components/button.tsx
@@ -19,8 +19,8 @@ export function Button({
   return disabled ? (
     <span
       className={clsx(
-        "cursor-default transition ease-in-out no-underline inline-flex text-center w-fit border-0 py-2 px-6 rounded text-sm sm:text-base whitespace-nowrap",
-        "bg-gray-400 text-white font-medium",
+        "inline-flex w-fit cursor-default whitespace-nowrap rounded border-0 px-6 py-2 text-center text-sm no-underline transition ease-in-out sm:text-base",
+        "bg-gray-400 font-medium text-white",
         className,
       )}
     >
@@ -30,8 +30,8 @@ export function Button({
     <a
       aria-disabled={disabled}
       className={clsx(
-        "cursor-pointer transition ease-in-out no-underline inline-flex text-center w-fit border-0 py-2 px-6 focus:outline-none hover:drop-shadow-md rounded text-sm sm:text-base whitespace-nowrap",
-        "bg-primary hover:bg-primary/40 text-white font-medium",
+        "inline-flex w-fit cursor-pointer whitespace-nowrap rounded border-0 px-6 py-2 text-center text-sm no-underline transition ease-in-out hover:drop-shadow-md focus:outline-none sm:text-base",
+        "bg-primary font-medium text-white hover:bg-primary/40",
         className,
       )}
       href={href}
diff --git a/src/app/conf/_components/footer.tsx b/src/app/conf/_components/footer.tsx
index f3c340f86e..cf764ae819 100644
--- a/src/app/conf/_components/footer.tsx
+++ b/src/app/conf/_components/footer.tsx
@@ -12,8 +12,8 @@ export function Footer({
   logo: ReactNode
 }) {
   return (
-    <footer className="py-10 lg:py-20 bg-conf-black text-white">
-      <div className="container flex justify-between items-start flex-wrap gap-10 mb-10 xl:mb-32">
+    <footer className="bg-conf-black py-10 text-white lg:py-20">
+      <div className="container mb-10 flex flex-wrap items-start justify-between gap-10 xl:mb-32">
         {logo}
         {links.map((link, i) => (
           <ul key={i} className="max-md:w-full">
@@ -25,7 +25,7 @@ export function Footer({
                     "outline-none",
                     isDisabled
                       ? "pointer-events-none"
-                      : "hover:text-primary transition-colors focus:text-primary",
+                      : "transition-colors hover:text-primary focus:text-primary",
                   )}
                   tabIndex={isDisabled ? -1 : undefined}
                 >
@@ -41,8 +41,8 @@ export function Footer({
           </ul>
         ))}
       </div>
-      <div className="container text-sm flex max-lg:flex-col gap-10 justify-between">
-        <div className="flex flex-col max-md:gap-5 font-light">
+      <div className="container flex justify-between gap-10 text-sm max-lg:flex-col">
+        <div className="flex flex-col font-light max-md:gap-5">
           <p>
             Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
             rights reserved.
diff --git a/src/app/conf/_components/grid-button.tsx b/src/app/conf/_components/grid-button.tsx
index c75d9b704b..22fb892fb1 100644
--- a/src/app/conf/_components/grid-button.tsx
+++ b/src/app/conf/_components/grid-button.tsx
@@ -12,7 +12,7 @@ export function GridButton({
   return (
     <div
       id={id}
-      className="relative w-full flex items-center justify-center overflow-hidden"
+      className="relative flex w-full items-center justify-center overflow-hidden"
     >
       <div
         className="grid"
@@ -35,7 +35,7 @@ export function GridButton({
           href={href}
           target="_blank"
           rel="noreferrer"
-          className="px-20 flex items-center justify-center md:px-28 py-4 text-center text-white text-3xl font-semibold bg-primary/85 hover:bg-primary/100 transition-colors"
+          className="flex items-center justify-center bg-primary/85 px-20 py-4 text-center text-3xl font-semibold text-white transition-colors hover:bg-primary/100 md:px-28"
           style={{
             gridColumn: "6 / span 8",
             gridRow: "3 / span 2",
diff --git a/src/app/conf/_components/header.tsx b/src/app/conf/_components/header.tsx
index 8f17e50a45..0c7451b8a1 100644
--- a/src/app/conf/_components/header.tsx
+++ b/src/app/conf/_components/header.tsx
@@ -34,7 +34,7 @@ export function Header({
   }, [pathname])
 
   return (
-    <header className="border-b border-[#565060] sticky top-0 bg-conf-black z-10">
+    <header className="sticky top-0 z-10 border-b border-[#565060] bg-conf-black">
       <div
         className={`container flex items-center ${is2025 ? "justify-between" : ""} h-[70px] gap-5`}
       >
@@ -58,27 +58,27 @@ export function Header({
         {mobileDrawerOpen && (
           <div
             onClick={handleDrawerClick}
-            className="bg-black/70 fixed inset-0 z-10"
+            className="fixed inset-0 z-10 bg-black/70"
           />
         )}
 
         <nav
           className={clsx(
-            "gap-7 items-end",
-            "max-lg:py-6 max-lg:px-4 inset-y-0 right-0 z-20 max-lg:fixed max-lg:min-w-[50%]",
+            "items-end gap-7",
+            "inset-y-0 right-0 z-20 max-lg:fixed max-lg:min-w-[50%] max-lg:px-4 max-lg:py-6",
             mobileDrawerOpen ? "translate-x-0" : "max-lg:translate-x-full",
-            "bg-conf-black flex max-lg:flex-col",
+            "flex bg-conf-black max-lg:flex-col",
           )}
         >
           {mobileDrawerOpen && (
             <button className="size-6">
               <CrossIcon
                 onClick={handleDrawerClick}
-                className="lg:hidden text-white"
+                className="text-white lg:hidden"
               />
             </button>
           )}
-          <div className="lg:block lg:gap-0 lg:mt-0 flex flex-col gap-5 text-gray-400 font-semibold w-full">
+          <div className="flex w-full flex-col gap-5 font-semibold text-gray-400 lg:mt-0 lg:block lg:gap-0">
             {links.map(({ "aria-disabled": isDisabled, children, ...link }) => (
               <NextLink
                 key={link.href}
@@ -92,7 +92,7 @@ export function Header({
                   "px-4",
                   isDisabled
                     ? "pointer-events-none"
-                    : "hover:text-primary focus:text-white transition-colors",
+                    : "transition-colors hover:text-primary focus:text-white",
                   pathname === link.href && "text-white", // underline decoration-from-font underline-offset-4
                 )}
               >
@@ -108,7 +108,7 @@ export function Header({
         </nav>
 
         <button
-          className="lg:hidden text-white size-6 ml-auto"
+          className="ml-auto size-6 text-white lg:hidden"
           onClick={handleDrawerClick}
         >
           <HamburgerIcon />
diff --git a/src/app/conf/_components/infinite-moving-speakers.tsx b/src/app/conf/_components/infinite-moving-speakers.tsx
index 6982db40fc..f2c7f32477 100644
--- a/src/app/conf/_components/infinite-moving-speakers.tsx
+++ b/src/app/conf/_components/infinite-moving-speakers.tsx
@@ -31,7 +31,7 @@ export function InfiniteMovingSpeakers({
     >
       <ul
         className={clsx(
-          "flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
+          "flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4",
           "animate-scroll",
           pauseOnHover && "hover:[animation-play-state:paused]",
         )}
diff --git a/src/app/conf/_components/info-grid.tsx b/src/app/conf/_components/info-grid.tsx
index 335a22ec62..2483cffc4a 100644
--- a/src/app/conf/_components/info-grid.tsx
+++ b/src/app/conf/_components/info-grid.tsx
@@ -14,22 +14,22 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
   id,
 }) => (
   <section id={id}>
-    <h1 className="text-white text-5xl font-bold mb-4">{title}</h1>
-    <p className="text-white text-lg font-normal mb-8">{subtitle}</p>
+    <h1 className="mb-4 text-5xl font-bold text-white">{title}</h1>
+    <p className="mb-8 text-lg font-normal text-white">{subtitle}</p>
 
     {/* Horizontal Scrollable Grid */}
     <div
       style={{
         scrollSnapType: "x mandatory",
       }}
-      className="flex gap-6 overflow-x-auto scroll-snap-x snap-mandatory lg:grid lg:grid-cols-3 lg:overflow-visible"
+      className="scroll-snap-x flex snap-mandatory gap-6 overflow-x-auto lg:grid lg:grid-cols-3 lg:overflow-visible"
     >
       {listItems.map(({ title, description }, index) => (
         <div
           key={index}
-          className="snap-start flex-shrink-0 lg-w[80%] w-[70%] lg:w-full lg:max-w-sm border border-primary p-6 shadow-lg text-white"
+          className="lg-w[80%] w-[70%] flex-shrink-0 snap-start border border-primary p-6 text-white shadow-lg lg:w-full lg:max-w-sm"
         >
-          <h2 className="text-2xl font-bold mb-2">{title}</h2>
+          <h2 className="mb-2 text-2xl font-bold">{title}</h2>
           <p
             className="text-base [&>a]:underline [&>a]:hover:text-primary"
             dangerouslySetInnerHTML={{ __html: description }}
diff --git a/src/app/conf/_components/schedule/back-link.tsx b/src/app/conf/_components/schedule/back-link.tsx
index 3b173f0ea3..587d8a6bba 100644
--- a/src/app/conf/_components/schedule/back-link.tsx
+++ b/src/app/conf/_components/schedule/back-link.tsx
@@ -10,7 +10,7 @@ export function BackLink({
   return (
     <NextLink
       href={`/conf/${year}/${kind}`}
-      className="w-max rounded-md underline-offset-2 cursor-pointer transition-all text-sm no-underline text-[#333333]"
+      className="w-max cursor-pointer rounded-md text-sm text-[#333333] no-underline underline-offset-2 transition-all"
     >
       <span>&lt; &nbsp;Back to {capitalize(kind)}</span>
     </NextLink>
diff --git a/src/app/conf/_components/schedule/filters.tsx b/src/app/conf/_components/schedule/filters.tsx
index 3820d5d64f..8826098428 100644
--- a/src/app/conf/_components/schedule/filters.tsx
+++ b/src/app/conf/_components/schedule/filters.tsx
@@ -16,13 +16,13 @@ export function Filters({
   onReset,
 }: FiltersProps) {
   return (
-    <div className="flex justify-center pb-10 gap-3">
+    <div className="flex justify-center gap-3 pb-10">
       {Object.values(filterState).flat().length > 0 && (
         <button
           onClick={onReset}
-          className="cursor-pointer flex items-center gap-x-2 px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900"
+          className="flex cursor-pointer items-center gap-x-2 rounded-md bg-gray-200 px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300 hover:text-gray-900"
         >
-          Reset filters <XMarkIcon className="size-4 inline-block" />
+          Reset filters <XMarkIcon className="inline-block size-4" />
         </button>
       )}
       <Menu as="div" className="relative inline-block text-left">
@@ -61,7 +61,7 @@ export function Filters({
             id={`desktop-menu-${sectionIdx}`}
             className="relative inline-block text-left"
           >
-            <Popover.Button className="cursor-pointer bg-inherit p-1 px-2 group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
+            <Popover.Button className="group inline-flex cursor-pointer items-center justify-center bg-inherit p-1 px-2 text-sm font-medium text-gray-700 hover:text-gray-900">
               <span>{section.name}</span>
               {filterState[section.name].length ? (
                 <span className="ml-1.5 rounded bg-gray-200 px-1.5 py-0.5 text-xs font-semibold tabular-nums text-gray-700">
@@ -88,7 +88,7 @@ export function Filters({
                       }}
                       checked={filterState[section.name].includes(option)}
                       type="checkbox"
-                      className="cursor-pointer size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      className="size-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                     />
                     <label
                       htmlFor={`filter-${section.name}-${optionIdx}`}
diff --git a/src/app/conf/_components/schedule/schedule-list.tsx b/src/app/conf/_components/schedule/schedule-list.tsx
index e4ee380752..05e6d9e61a 100644
--- a/src/app/conf/_components/schedule/schedule-list.tsx
+++ b/src/app/conf/_components/schedule/schedule-list.tsx
@@ -115,7 +115,7 @@ export function ScheduleList({
 
   return (
     <>
-      <div className="h-0.5 bg-gray-200 my-6" />
+      <div className="my-6 h-0.5 bg-gray-200" />
       {showFilter && (
         <Filters
           categories={filterCategories}
@@ -140,12 +140,12 @@ export function ScheduleList({
         />
       )}
       {Object.entries(sessionsState).length === 0 ? (
-        <div className="text-gray-800 text-sm">
+        <div className="text-sm text-gray-800">
           <h3 className="mb-5">No sessions found</h3>
         </div>
       ) : (
         <>
-          <div className="flex space-x-4 mb-4">
+          <div className="mb-4 flex space-x-4">
             {/* Skip registeration prior day for graphql conf 2024 */}
             {Object.keys(sessionsState)
               .slice(year === "2024" ? 1 : 0)
@@ -153,7 +153,7 @@ export function ScheduleList({
                 <a
                   href={`#day-${(year === "2024" ? 1 : 0) + index + 1}`}
                   key={date}
-                  className={"text-gray-800 text-xs hover:underline"}
+                  className={"text-xs text-gray-800 hover:underline"}
                 >
                   Day {index + 1}
                 </a>
@@ -161,22 +161,22 @@ export function ScheduleList({
           </div>
           {Object.entries(sessionsState).map(
             ([date, concurrentSessionsGroup], index) => (
-              <div key={date} className="text-gray-800 text-sm">
+              <div key={date} className="text-sm text-gray-800">
                 <h3 className="mb-5" id={`day-${index + 1}`}>
                   {format(parseISO(date), "EEEE, MMMM d")}
                 </h3>
                 {Object.entries(concurrentSessionsGroup).map(
                   ([sessionDate, sessions]) => (
                     <div key={`concurrent sessions on ${sessionDate}`}>
-                      <div className="lg:flex-row flex flex-col mb-4">
+                      <div className="mb-4 flex flex-col lg:flex-row">
                         <div className="relative">
-                          <span className="lg:mr-7 mb-5 whitespace-nowrap text-gray-500 lg:mt-0 mt-3 inline-block lg:w-28 w-20">
+                          <span className="mb-5 mt-3 inline-block w-20 whitespace-nowrap text-gray-500 lg:mr-7 lg:mt-0 lg:w-28">
                             {format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
                           </span>
-                          <div className="lg:block hidden absolute right-3 top-0 h-full w-0.5 bg-gray-200" />
+                          <div className="absolute right-3 top-0 hidden h-full w-0.5 bg-gray-200 lg:block" />
                         </div>
-                        <div className="lg:flex-row flex flex-col gap-5 relative lg:items-start items-end w-full lg:pl-0 pl-[28px]">
-                          <div className="block lg:hidden absolute left-3 top-0 h-full w-0.5 bg-gray-200" />
+                        <div className="relative flex w-full flex-col items-end gap-5 pl-[28px] lg:flex-row lg:items-start lg:pl-0">
+                          <div className="absolute left-3 top-0 block h-full w-0.5 bg-gray-200 lg:hidden" />
 
                           {sessions.map(session => {
                             const eventType = session.event_type.endsWith("s")
@@ -203,7 +203,7 @@ export function ScheduleList({
                                   borderRadius: "5px",
                                   backgroundColor: "white",
                                 }}
-                                className="shadow-[-5px_10px_30px_20px_#d0d3da33] font-normal flex items-center py-2 px-4 rounded-md size-full text-black"
+                                className="flex size-full items-center rounded-md px-4 py-2 font-normal text-black shadow-[-5px_10px_30px_20px_#d0d3da33]"
                               >
                                 {showEventType ? eventType + " / " : ""}
                                 {eventTitle}
@@ -219,12 +219,12 @@ export function ScheduleList({
                                   borderRadius: "5px",
                                   backgroundColor: "white",
                                 }}
-                                className="group no-underline hover:no-underline shadow-[-5px_10px_30px_20px_#d0d3da33] font-normal relative py-2 px-4 rounded-md size-full text-black"
+                                className="group relative size-full rounded-md px-4 py-2 font-normal text-black no-underline shadow-[-5px_10px_30px_20px_#d0d3da33] hover:no-underline"
                               >
-                                <div className="flex flex-col justify-start h-full py-3 gap-y-2">
+                                <div className="flex h-full flex-col justify-start gap-y-2 py-3">
                                   {borderColor && (
                                     <span
-                                      className="group-hover:no-underline flex py-1 px-3 mb-3 self-start justify-center items-center text-white border rounded-3xl"
+                                      className="mb-3 flex items-center justify-center self-start rounded-3xl border px-3 py-1 text-white group-hover:no-underline"
                                       style={{
                                         backgroundColor: borderColor,
                                       }}
@@ -232,7 +232,7 @@ export function ScheduleList({
                                       {eventType}
                                     </span>
                                   )}
-                                  <div className="group-hover:underline flex flex-col justify-between h-full gap-y-2">
+                                  <div className="flex h-full flex-col justify-between gap-y-2 group-hover:underline">
                                     {showEventType ? eventType + " / " : ""}
                                     {eventTitle}
                                     <div className="flex flex-col">
@@ -241,9 +241,9 @@ export function ScheduleList({
                                           {formattedSpeakers.join(", ")}
                                         </span>
                                       )}
-                                      <span className="font-bold mt-2 flex items-center text-gray-700">
+                                      <span className="mt-2 flex items-center font-bold text-gray-700">
                                         <svg
-                                          className="mr-1 mb-0.5"
+                                          className="mb-0.5 mr-1"
                                           width="16px"
                                           height="16px"
                                           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/app/conf/_components/schedule/session-list.tsx b/src/app/conf/_components/schedule/session-list.tsx
index b723236e94..b3d4c1067f 100644
--- a/src/app/conf/_components/schedule/session-list.tsx
+++ b/src/app/conf/_components/schedule/session-list.tsx
@@ -152,11 +152,11 @@ export function SessionList({
         />
       )}
       {Object.entries(sessionsState).length === 0 ? (
-        <div className="text-gray-800 text-sm">
+        <div className="text-sm text-gray-800">
           <h3 className="mb-5">No sessions found</h3>
         </div>
       ) : (
-        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 not-prose">
+        <div className="not-prose grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {Object.entries(sessionsState).flatMap(
             ([, concurrentSessionsGroup]) =>
               Object.entries(concurrentSessionsGroup).flatMap(([, sessions]) =>
@@ -169,7 +169,7 @@ export function SessionList({
                     <NextLink
                       key={session.id}
                       className={`${clsx(
-                        "white shadow-2xl rounded-md overflow-hidden flex flex-col text-current hover:no-underline focus:no-underline",
+                        "white flex flex-col overflow-hidden rounded-md text-current shadow-2xl hover:no-underline focus:no-underline",
                       )} ${minimalVersion ? "bg-[#251f30]" : ""}`}
                       href={
                         minimalVersion
@@ -178,12 +178,12 @@ export function SessionList({
                       }
                     >
                       <div
-                        className={`${minimalVersion ? "hidden" : ""} bg-[#251F30] text-white flex justify-between py-5 px-7 relative`}
+                        className={`${minimalVersion ? "hidden" : ""} relative flex justify-between bg-[#251F30] px-7 py-5 text-white`}
                       >
-                        <div className="text-sm flex flex-col gap-2 [*:hover>*>&]:opacity-0 transition-opacity duration-300 opacity-100">
+                        <div className="flex flex-col gap-2 text-sm opacity-100 transition-opacity duration-300 [*:hover>*>&]:opacity-0">
                           {year !== "2024" && (
                             <div className="flex gap-3">
-                              <div className="font-mono w-4 text-center">
+                              <div className="w-4 text-center font-mono">
                                 ▶
                               </div>
                               Recording
@@ -203,18 +203,18 @@ export function SessionList({
                         </span>
                         <div
                           className={clsx(
-                            "right-1/2 translate-x-1/2 absolute",
-                            "font-mono leading-none text-2xl",
-                            "transition-opacity duration-300 opacity-0 size-12",
-                            "[*:hover>*>&]:opacity-100 rounded-full bg-white/30 pl-[18px] pt-2.5",
+                            "absolute right-1/2 translate-x-1/2",
+                            "font-mono text-2xl leading-none",
+                            "size-12 opacity-0 transition-opacity duration-300",
+                            "rounded-full bg-white/30 pl-[18px] pt-2.5 [*:hover>*>&]:opacity-100",
                           )}
                         >
                           ▶
                         </div>
                       </div>
-                      <div className="p-7 flex flex-col">
+                      <div className="flex flex-col p-7">
                         <span
-                          className="group-hover:no-underline flex py-1 px-3 mb-3 self-start justify-center items-center text-white border rounded-3xl text-sm"
+                          className="mb-3 flex items-center justify-center self-start rounded-3xl border px-3 py-1 text-sm text-white group-hover:no-underline"
                           style={{
                             backgroundColor: borderColor,
                           }}
@@ -222,10 +222,10 @@ export function SessionList({
                           {session.event_type}
                         </span>
                         <b>{session.name}</b>
-                        <div className="flex gap-5 flex-wrap">
+                        <div className="flex flex-wrap gap-5">
                           {speakers.map(s => (
                             <div
-                              className="flex items-center gap-5 mt-5"
+                              className="mt-5 flex items-center gap-5"
                               key={s.username}
                             >
                               <img
@@ -233,7 +233,7 @@ export function SessionList({
                                 alt={`${s.name} avatar`}
                                 width="70"
                                 height="70"
-                                className="object-cover rounded-full shrink-0 !m-0"
+                                className="!m-0 shrink-0 rounded-full object-cover"
                               />
                               <div className="flex flex-col text-sm">
                                 <b>{s.name}</b>
diff --git a/src/app/conf/_components/social-icons.tsx b/src/app/conf/_components/social-icons.tsx
index dff4b55c06..4ad7494b40 100644
--- a/src/app/conf/_components/social-icons.tsx
+++ b/src/app/conf/_components/social-icons.tsx
@@ -14,7 +14,7 @@ const anchorProps = {
 
 export function SocialIcons() {
   return (
-    <div className="flex gap-5 items-center *:outline-none hover:*:text-primary *:transition-colors focus:*:text-primary focus:*:ring focus:*:ring-primary [&_svg]:h-5">
+    <div className="flex items-center gap-5 *:outline-none *:transition-colors hover:*:text-primary focus:*:text-primary focus:*:ring focus:*:ring-primary [&_svg]:h-5">
       <a href="https://github.com/graphql" {...anchorProps}>
         <GitHubIcon />
       </a>
diff --git a/src/app/conf/_components/speakers/avatar.tsx b/src/app/conf/_components/speakers/avatar.tsx
index 1759f9d7d8..a958c63e27 100644
--- a/src/app/conf/_components/speakers/avatar.tsx
+++ b/src/app/conf/_components/speakers/avatar.tsx
@@ -25,7 +25,7 @@ export const Avatar: FC<Props> = ({ avatar, name, className, href }) => {
       />
     ) : (
       <div
-        className={`text-[#202020] hover:underline cursor-pointer  ${className} flex justify-center items-center`}
+        className={`cursor-pointer text-[#202020] hover:underline ${className} flex items-center justify-center`}
       >
         <span className="text-4xl font-medium">
           {nameInitialsAvatarFallback}
diff --git a/src/app/conf/_components/speakers/index.tsx b/src/app/conf/_components/speakers/index.tsx
index 912538a87a..504adaa6bd 100644
--- a/src/app/conf/_components/speakers/index.tsx
+++ b/src/app/conf/_components/speakers/index.tsx
@@ -55,23 +55,23 @@ const speakers: Speaker[] = [
 export function Speakers() {
   return (
     // Invisible padding so anchor links align to the header menu
-    <div id="speakers" className="bg-conf-black text-white conf-block">
+    <div id="speakers" className="conf-block bg-conf-black text-white">
       <div className="container">
-        <h1 className="md:text-center text-white conf-heading">Speakers</h1>
-        <div className="flex max-md:flex-col justify-around items-start flex-wrap gap-10 lg:px-24 my-10 md:my-20">
+        <h1 className="conf-heading text-white md:text-center">Speakers</h1>
+        <div className="my-10 flex flex-wrap items-start justify-around gap-10 max-md:flex-col md:my-20 lg:px-24">
           {speakers.map((speaker, i) => (
             <div
               key={i}
-              className="md:p-4 md:w-[220px] h-full flex md:flex-col items-center md:text-center gap-5"
+              className="flex h-full items-center gap-5 md:w-[220px] md:flex-col md:p-4 md:text-center"
             >
               <NextLink
                 href={`/conf/2023/speakers/${speaker.url}`}
-                className="[&:hover+div>a>span]:text-primary shrink-0"
+                className="shrink-0 [&:hover+div>a>span]:text-primary"
               >
                 <NextImage
                   alt={speaker.name}
                   src={speaker.image}
-                  className="shrink-0 rounded-full size-36 object-cover object-center border-2 border-transparent hover:border-primary transition-colors"
+                  className="size-36 shrink-0 rounded-full border-2 border-transparent object-cover object-center transition-colors hover:border-primary"
                 />
               </NextLink>
               <div>
@@ -82,14 +82,14 @@ export function Speakers() {
                   <span className="text-lg font-bold transition-colors">
                     {speaker.name}
                   </span>
-                  <div className="text-sm my-2">{speaker.title}</div>
+                  <div className="my-2 text-sm">{speaker.title}</div>
                 </NextLink>
                 <div className="flex gap-2 md:justify-center">
                   <a
                     href={speaker.twitter}
                     target="_blank"
                     rel="noreferrer"
-                    className="text-current hover:text-primary transition-colors"
+                    className="text-current transition-colors hover:text-primary"
                   >
                     <TwitterIcon width="17" height="17" />
                   </a>
@@ -97,7 +97,7 @@ export function Speakers() {
                     href={speaker.linkedin}
                     target="_blank"
                     rel="noreferrer"
-                    className="text-current hover:text-primary transition-colors"
+                    className="text-current transition-colors hover:text-primary"
                   >
                     <LinkedInIcon width="17" height="17" />
                   </a>
@@ -107,7 +107,7 @@ export function Speakers() {
           ))}
         </div>
         <div className="flex flex-col items-center">
-          <p className="max-w-[600px] text-center mb-10">
+          <p className="mb-10 max-w-[600px] text-center">
             GraphQLConf brings together the creators of some of the most
             important technologies behind GraphQL. These speakers will share
             their experience, insights and knowledge as they discuss the
diff --git a/src/app/conf/_components/speakers/speaker.tsx b/src/app/conf/_components/speakers/speaker.tsx
index 62903c2ea1..457ccaad10 100644
--- a/src/app/conf/_components/speakers/speaker.tsx
+++ b/src/app/conf/_components/speakers/speaker.tsx
@@ -16,12 +16,12 @@ export function Speaker({
     <div className="flex flex-col items-center">
       <NextLink href={`/conf/${year}/speakers/${username}`} className="group">
         <Avatar
-          className="group-hover:border-primary transition-colors border-2 border-transparent rounded-full size-[150px] lg:size-[230px]"
+          className="size-[150px] rounded-full border-2 border-transparent transition-colors group-hover:border-primary lg:size-[230px]"
           avatar={avatar}
           name={name}
         />
-        <div className="flex flex-col justify-center items-center mt-1.5 max-w-[150px] lg:max-w-[230px] text-center">
-          <span className="group-hover:text-primary transition-colors group-hover:no-underline text-[22px] font-bold text-[#181E26] hover:underline cursor-pointer">
+        <div className="mt-1.5 flex max-w-[150px] flex-col items-center justify-center text-center lg:max-w-[230px]">
+          <span className="cursor-pointer text-[22px] font-bold text-[#181E26] transition-colors hover:underline group-hover:text-primary group-hover:no-underline">
             {name}
           </span>
           <span className="text-sm font-bold text-[#212a35]">
@@ -30,7 +30,7 @@ export function Speaker({
           <p className="text-sm text-[#2A3544]">{position || "–"}</p>
         </div>
       </NextLink>
-      <div className="flex gap-2 pt-2 items-stretch">
+      <div className="flex items-stretch gap-2 pt-2">
         {socialurls.map(e => (
           <a key={e.service} href={e.url} target="_blank" rel="noreferrer">
             <SocialMediaIcon
diff --git a/src/app/conf/_components/sponsors.tsx b/src/app/conf/_components/sponsors.tsx
index f31184f1ba..e242472be7 100644
--- a/src/app/conf/_components/sponsors.tsx
+++ b/src/app/conf/_components/sponsors.tsx
@@ -91,16 +91,16 @@ function List({
   linkClassName?: string
 }) {
   return (
-    <div className={clsx("grid gap-7 w-full", className)}>
+    <div className={clsx("grid w-full gap-7", className)}>
       {items.map(({ link, icon, name }, i) => (
         <a
           key={i}
           className={clsx(
-            "relative shrink-0 bg-[#251f30] rounded-md",
+            "relative shrink-0 rounded-md bg-[#251f30]",
             "flex justify-center",
             "border border-solid border-transparent hover:border-primary focus:border-primary",
             "transition-colors",
-            "hover:shadow-primary/20 focus:shadow-primary/20 shadow-md outline-none",
+            "shadow-md outline-none hover:shadow-primary/20 focus:shadow-primary/20",
             linkClassName,
           )}
           href={link}
@@ -111,9 +111,9 @@ function List({
           <NextImage
             alt={`${name} logo`}
             src={icon}
-            className="h-auto lg:max-w-60 shrink"
+            className="h-auto shrink lg:max-w-60"
           />
-          <span className="font-sans absolute right-5 top-5 leading-none text-white lg:text-2xl">
+          <span className="absolute right-5 top-5 font-sans leading-none text-white lg:text-2xl">
             ↗
           </span>
         </a>
@@ -131,7 +131,7 @@ const classes = {
 export function Sponsors() {
   return (
     <div id="sponsors" className="bg-conf-black">
-      <div className="container conf-block">
+      <div className="conf-block container">
         <h1 className={classes.title}>Sponsors</h1>
         <h3 className={classes.heading}>Diamond</h3>
         <List
@@ -160,7 +160,7 @@ export function Sponsors() {
         <h3 className={classes.heading}>Workshop Day Sponsor</h3>
         <List
           items={workshopDaySponsors}
-          className="grid-cols-2 lg:grid-cols-1 lg:w-1/2 mx-auto"
+          className="mx-auto grid-cols-2 lg:w-1/2 lg:grid-cols-1"
           linkClassName="p-8 lg:p-10 h-28 lg:h-[155px]"
         />
       </div>
@@ -169,7 +169,7 @@ export function Sponsors() {
         <h3 className={classes.heading}>Media Partners</h3>
         <List
           items={mediaPartners}
-          className="grid-cols-2 xl:w-1/2 mx-auto"
+          className="mx-auto grid-cols-2 xl:w-1/2"
           linkClassName="p-9 lg:p-12 h-28 lg:h-[155px]"
         />
         <h3 className={classes.heading}>Community Partners</h3>
diff --git a/src/app/conf/_components/thanks.tsx b/src/app/conf/_components/thanks.tsx
index 609c1f8ade..fe8a978b3d 100644
--- a/src/app/conf/_components/thanks.tsx
+++ b/src/app/conf/_components/thanks.tsx
@@ -32,9 +32,9 @@ export async function Thanks() {
     .filter(item => item.speakers!.length === 1)
 
   return (
-    <div className="bg-gray-100 conf-block">
-      <div className="container flex gap-20 flex-col">
-        <div className="flex gap-12 lg:gap-24 max-md:flex-col">
+    <div className="conf-block bg-gray-100">
+      <div className="container flex flex-col gap-20">
+        <div className="flex gap-12 max-md:flex-col lg:gap-24">
           <div className="flex flex-col gap-5">
             <h2 className="conf-heading">Thank you for Attending!</h2>
             <p className="lg:text-lg">
@@ -49,7 +49,7 @@ export async function Thanks() {
           <div>
             <NextImage
               alt="Lee Byron"
-              className="object-cover rounded-md aspect-video"
+              className="aspect-video rounded-md object-cover"
               src={leeImage}
             />
           </div>
@@ -69,7 +69,7 @@ export async function Thanks() {
               ),
             }))}
         />
-        <Button href="/conf/2023/sessions" className="!block mx-auto">
+        <Button href="/conf/2023/sessions" className="mx-auto !block">
           Explore recordings and slides
         </Button>
       </div>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 3a1df29a13..d40af4652a 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -22,8 +22,8 @@ export default function Page() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <div className="flex h-dvh items-center justify-center flex-col">
-      <h1 className="text-white text-4xl">404: Page Not Found</h1>
+    <div className="flex h-dvh flex-col items-center justify-center">
+      <h1 className="text-4xl text-white">404: Page Not Found</h1>
       <a
         href={url}
         target="_blank"
diff --git a/src/components/card.tsx b/src/components/card.tsx
index 32191a7513..d745ab647f 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -15,11 +15,11 @@ export function Card({
   return (
     <Component
       className={clsx(
-        "border border-zinc-200 dark:border-[#414141] p-8 lg:p-12 bg-white dark:bg-neutral-800",
+        "border border-zinc-200 bg-white p-8 dark:border-[#414141] dark:bg-neutral-800 lg:p-12",
         "rounded-none",
         isLink && [
-          "hover:!border-primary hover:dark:bg-neutral-700/50 hover:shadow-2xl hover:shadow-primary/10",
-          "dark:shadow-none transition-colors",
+          "hover:!border-primary hover:shadow-2xl hover:shadow-primary/10 hover:dark:bg-neutral-700/50",
+          "transition-colors dark:shadow-none",
         ],
         className,
       )}
diff --git a/src/components/cards.tsx b/src/components/cards.tsx
index 8c3868044e..55c7623f96 100644
--- a/src/components/cards.tsx
+++ b/src/components/cards.tsx
@@ -14,7 +14,7 @@ export function Cards({
   }[]
 }) {
   return (
-    <div className="grid grid-cols-2 mt-6 gap-4">
+    <div className="mt-6 grid grid-cols-2 gap-4">
       {items.map(({ icon: Icon, title, link, description }) => {
         const isExternal = link.startsWith("https://")
         return (
@@ -26,14 +26,14 @@ export function Cards({
             className={clsx(
               "flex flex-col items-center",
               isExternal &&
-                "relative after:content-['_↗'] after:font-sans after:absolute after:right-4 after:top-4",
+                "relative after:absolute after:right-4 after:top-4 after:font-sans after:content-['_↗']",
             )}
           >
             {/* @ts-expect-error */}
             {typeof Icon === "function" ? <Icon className="h-6" /> : Icon}
-            <b className="mt-4 mb-2 text-lg text-center">{title}</b>
+            <b className="mb-2 mt-4 text-center text-lg">{title}</b>
             <span
-              className={`text-xs md:text-sm text-center${description ? "" : " break-all"}`}
+              className={`text-xs md:text-sm text-center${description ? "" : "break-all"}`}
             >
               {description ? description : link.replace(/^https?:\/\//, "")}
             </span>
diff --git a/src/components/index-page/bring-your-own-code.tsx b/src/components/index-page/bring-your-own-code.tsx
index 1dc3a51ba7..f69098fbb1 100644
--- a/src/components/index-page/bring-your-own-code.tsx
+++ b/src/components/index-page/bring-your-own-code.tsx
@@ -4,11 +4,11 @@ import { InfiniteMovingCards } from "./infinite-moving-cards"
 export function BringYourOwnCode() {
   return (
     <>
-      <section className="container conf-block" id="bring-your-own-code">
+      <section className="conf-block container" id="bring-your-own-code">
         <div className="mx-auto text-center">
           <h2>Bring your own data and code</h2>
           {/*Illustration of each field becoming a function?]*/}
-          <p className="lg:w-2/3 mx-auto">
+          <p className="mx-auto lg:w-2/3">
             GraphQL creates a uniform API across your entire application without
             being limited by a specific storage engine. Write GraphQL APIs that
             leverage your existing data and code with GraphQL engines available
@@ -20,7 +20,7 @@ export function BringYourOwnCode() {
       <InfiniteMovingCards
         direction="right"
         speed="normal"
-        className="mx-auto [&_pre]:h-[calc(100%-48px)] [&_div.nextra-code]:h-full"
+        className="mx-auto [&_div.nextra-code]:h-full [&_pre]:h-[calc(100%-48px)]"
       >
         <Code1 />
         <Code2 />
diff --git a/src/components/index-page/hero.tsx b/src/components/index-page/hero.tsx
index 502c341d00..93797581ba 100644
--- a/src/components/index-page/hero.tsx
+++ b/src/components/index-page/hero.tsx
@@ -6,19 +6,19 @@ import { clsx } from "clsx"
 export function Hero() {
   return (
     <div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
-      <div className="container conf-block">
+      <div className="conf-block container">
         <section
           className={clsx(
-            "flex-wrap gap-14 justify-center items-center flex max-sm:flex-col",
-            "[&_h3]:text-white [&_h3]:text-2xl max-lg:[&_h3]:text-center",
+            "flex flex-wrap items-center justify-center gap-14 max-sm:flex-col",
+            "[&_h3]:text-2xl [&_h3]:text-white max-lg:[&_h3]:text-center",
             "[&_pre]:!bg-transparent [&_pre]:ring-0 [&_pre_span]:text-[--shiki-dark]",
             "[&_h3]:font-extralight",
             "[&_code]:whitespace-pre-wrap" /* fix scroll on mobile for code-blocks */,
           )}
         >
-          <div className="max-md:grow max-xl:w-full flex flex-col items-center gap-2">
+          <div className="flex flex-col items-center gap-2 max-xl:w-full max-md:grow">
             <GraphQLLogo className="w-24" />
-            <h1 className="text-primary text-3xl">GraphQL</h1>
+            <h1 className="text-3xl text-primary">GraphQL</h1>
           </div>
 
           <div>
@@ -38,7 +38,7 @@ export function Hero() {
         </section>
 
         <Link
-          className="text-white border-white index-button block w-fit mx-auto mt-10"
+          className="index-button mx-auto mt-10 block w-fit border-white text-white"
           href="/learn"
         >
           Get Started
diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx
index 62e2d3c1f9..05c5da595f 100644
--- a/src/components/index-page/index.tsx
+++ b/src/components/index-page/index.tsx
@@ -11,7 +11,7 @@ export function IndexPage() {
   return (
     <div className="index">
       <Hero />
-      <section className="text-center flex flex-col container items-center conf-block max-w-3xl">
+      <section className="conf-block container flex max-w-3xl flex-col items-center text-center">
         <h2>A query language for your API</h2>
         <p>
           GraphQL is a query language for APIs and a runtime for fulfilling
diff --git a/src/components/index-page/infinite-moving-cards.tsx b/src/components/index-page/infinite-moving-cards.tsx
index 859a9a5dd0..97b79d86aa 100644
--- a/src/components/index-page/infinite-moving-cards.tsx
+++ b/src/components/index-page/infinite-moving-cards.tsx
@@ -42,7 +42,7 @@ export function InfiniteMovingCards({
     >
       <ul
         className={clsx(
-          "flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
+          "flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4",
           "animate-scroll",
           pauseOnHover && "hover:[animation-play-state:paused]",
         )}
diff --git a/src/components/index-page/powerful-tools.tsx b/src/components/index-page/powerful-tools.tsx
index a0532f7f8e..4c679c8993 100644
--- a/src/components/index-page/powerful-tools.tsx
+++ b/src/components/index-page/powerful-tools.tsx
@@ -1,10 +1,10 @@
 export function PowerFulTools() {
   return (
-    <section className="container conf-block lg:w-4/6" id="powerful-tools">
+    <section className="conf-block container lg:w-4/6" id="powerful-tools">
       <div className="text-center">
         <h2>Move faster with powerful developer tools</h2>
         {/*Illustration of GraphiQL validation error and typeahead, animated?]*/}
-        <p className="lg:w-2/3 mx-auto">
+        <p className="mx-auto lg:w-2/3">
           Know exactly what data you can request from your API without leaving
           your editor, highlight potential issues before sending a query, and
           take advantage of improved code intelligence. GraphQL makes it easy to
@@ -20,14 +20,14 @@ export function PowerFulTools() {
           by leveraging your API&rsquo;s type system.
         </p>
       </div>
-      <div className="rounded-t-xl overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,.2),0_16px_64px_rgba(0,0,0,.6)]">
+      <div className="overflow-hidden rounded-t-xl shadow-[0_0_0_1px_rgba(0,0,0,.2),0_16px_64px_rgba(0,0,0,.6)]">
         <video
           disablePictureInPicture
           autoPlay
           muted
           loop
           playsInline
-          className="dark:block hidden"
+          className="hidden dark:block"
         >
           {/* todo: sync with main branch in graphql.org repo */}
           <source
@@ -41,7 +41,7 @@ export function PowerFulTools() {
           muted
           loop
           playsInline
-          className="dark:hidden block"
+          className="block dark:hidden"
         >
           <source
             src="https://github.com/dimaMachina/graphql.github.io/raw/nextra/static/img/graphiql-light.mp4"
diff --git a/src/components/index-page/predictable-results/index.tsx b/src/components/index-page/predictable-results/index.tsx
index 53a53f7981..0d670546c7 100644
--- a/src/components/index-page/predictable-results/index.tsx
+++ b/src/components/index-page/predictable-results/index.tsx
@@ -69,7 +69,7 @@ export function PredictableResults() {
   return (
     <div className="index-gradient">
       <section
-        className="gap-14 justify-around container flex flex-col conf-block lg:flex-row-reverse lg:items-start lg:*:w-1/2"
+        className="conf-block container flex flex-col justify-around gap-14 lg:flex-row-reverse lg:items-start lg:*:w-1/2"
         id="predictable-results"
       >
         <div className="max-lg:text-center">
@@ -101,7 +101,7 @@ export function PredictableResults() {
             ))}
             <span
               className={clsx(
-                "inline-block !bg-primary/50 h-4 w-2 ml-px -mb-0.5",
+                "-mb-0.5 ml-px inline-block h-4 w-2 !bg-primary/50",
                 classes.cursor,
               )}
             />
diff --git a/src/components/index-page/single-request/index.tsx b/src/components/index-page/single-request/index.tsx
index d7d7408ee2..efab2127d6 100644
--- a/src/components/index-page/single-request/index.tsx
+++ b/src/components/index-page/single-request/index.tsx
@@ -7,7 +7,7 @@ import NextImage from "next-image-export-optimizer"
 export function SingleRequest() {
   return (
     <section
-      className="*:w-full lg:*:w-1/2 gap-14 flex max-lg:flex-col container conf-block !justify-around [&_pre]:!bg-transparent"
+      className="conf-block container flex !justify-around gap-14 *:w-full max-lg:flex-col lg:*:w-1/2 [&_pre]:!bg-transparent"
       id="single-request"
     >
       <div className="max-lg:text-center">
@@ -24,7 +24,7 @@ export function SingleRequest() {
           slow mobile network connections.
         </p>
       </div>
-      <div className="-my-8 h-[520px] relative pointer-events-none" aria-hidden>
+      <div className="pointer-events-none relative -my-8 h-[520px]" aria-hidden>
         <NextImage
           src={serverImage}
           alt="Server"
@@ -33,7 +33,7 @@ export function SingleRequest() {
         <NextImage
           src={phoneImage}
           alt="Phone"
-          className="absolute left-1/2 -translate-x-1/2 bottom-0"
+          className="absolute bottom-0 left-1/2 -translate-x-1/2"
         />
         <div className={classes.query}>
           <QueryHeroFriends />
diff --git a/src/components/index-page/type-system.tsx b/src/components/index-page/type-system.tsx
index 119692367a..1b6d954f6e 100644
--- a/src/components/index-page/type-system.tsx
+++ b/src/components/index-page/type-system.tsx
@@ -36,7 +36,7 @@ export function TypeSystem() {
     <div className="index-gradient">
       <section
         className={clsx(
-          "container conf-block flex gap-14 max-lg:flex-col lg:flex-row-reverse",
+          "conf-block container flex gap-14 max-lg:flex-col lg:flex-row-reverse",
           "lg:*:w-1/2",
         )}
         id="type-system"
@@ -57,7 +57,7 @@ export function TypeSystem() {
           </p>
         </div>
         <div
-          className="grid nextra-codeblocks grid-cols-2 [&_.highlighted]:!bg-primary/50"
+          className="nextra-codeblocks grid grid-cols-2 [&_.highlighted]:!bg-primary/50"
           aria-hidden
           ref={queryRef}
         >
diff --git a/src/components/index-page/who-is-using.tsx b/src/components/index-page/who-is-using.tsx
index 6dc7f53246..d7c18ebbf3 100644
--- a/src/components/index-page/who-is-using.tsx
+++ b/src/components/index-page/who-is-using.tsx
@@ -12,14 +12,14 @@ export function WhoIsUsing() {
   return (
     <div className="index-gradient">
       <section id="whos-using">
-        <div className="container conf-block flex flex-col items-center">
+        <div className="conf-block container flex flex-col items-center">
           <h2>Who's using GraphQL?</h2>
           <p className="text-balance text-center">
             Facebook's mobile apps have been powered by GraphQL since 2012. A
             GraphQL spec was open sourced in 2015 and is now available in many
             environments and used by teams of all sizes.
           </p>
-          <div className="flex flex-wrap gap-10 lg:gap-16 justify-center mt-10 mb-20">
+          <div className="mb-20 mt-10 flex flex-wrap justify-center gap-10 lg:gap-16">
             {/* Waiting for permission from some of the below */}
             {[
               {
@@ -65,7 +65,7 @@ export function WhoIsUsing() {
                   src={src}
                   alt={alt}
                   title={alt}
-                  className={clsx("h-16 lg:h-28 w-auto", className)}
+                  className={clsx("h-16 w-auto lg:h-28", className)}
                 />
               </a>
             ))}
diff --git a/src/components/index-page/without-version.tsx b/src/components/index-page/without-version.tsx
index 883074d576..64e9f50cfc 100644
--- a/src/components/index-page/without-version.tsx
+++ b/src/components/index-page/without-version.tsx
@@ -24,7 +24,7 @@ export function WithoutVersion() {
   return (
     <div className="index-gradient">
       <section
-        className="container conf-block flex max-lg:flex-col lg:flex-row-reverse lg:*:w-1/2 gap-14 justify-around"
+        className="conf-block container flex justify-around gap-14 max-lg:flex-col lg:flex-row-reverse lg:*:w-1/2"
         id="without-versions"
       >
         <div className="max-lg:text-center">
@@ -45,7 +45,7 @@ export function WithoutVersion() {
           className={clsx(
             "type-evolution mx-auto",
             "[&_div.nextra-code]:h-full",
-            "[&_pre]:ring-0 border rounded-md border-gray-300 dark:border-neutral-700 [&_pre]:rounded-none [&_pre]:h-full",
+            "rounded-md border border-gray-300 dark:border-neutral-700 [&_pre]:h-full [&_pre]:rounded-none [&_pre]:ring-0",
             // Set background as nextra code block bg color
             "_bg-white dark:_bg-black",
           )}
diff --git a/src/components/radio.tsx b/src/components/radio.tsx
index 252bde0a5a..5ed5af9e53 100644
--- a/src/components/radio.tsx
+++ b/src/components/radio.tsx
@@ -13,13 +13,13 @@ const RadioGroupItem = forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <div className="bg-primary size-2 rounded-full" />
+        <div className="size-2 rounded-full bg-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/src/components/tag.tsx b/src/components/tag.tsx
index 7dfac8d02c..0489fcef9c 100644
--- a/src/components/tag.tsx
+++ b/src/components/tag.tsx
@@ -13,7 +13,7 @@ export function Tag({
     // @ts-expect-error -- fixme
     <Component
       className={clsx(
-        "py-1 px-2.5 capitalize text-xs rounded bg-zinc-200 dark:bg-zinc-700 font-bold roboto-mono",
+        "roboto-mono rounded bg-zinc-200 px-2.5 py-1 text-xs font-bold capitalize dark:bg-zinc-700",
         className,
       )}
       {...props}
diff --git a/src/components/tools-and-libraries.tsx b/src/components/tools-and-libraries.tsx
index 9013850106..9679680936 100644
--- a/src/components/tools-and-libraries.tsx
+++ b/src/components/tools-and-libraries.tsx
@@ -188,10 +188,10 @@ export function CodePage({ allTags, data }: CodePageProps) {
         />
       </NextHead>
       <div className="container py-10 md:py-20">
-        <h1 className="text-4xl md:text-7xl font-extrabold">
+        <h1 className="text-4xl font-extrabold md:text-7xl">
           Code Using GraphQL
         </h1>
-        <div className="flex my-10 items-center border-b border-current max-w-[700px] font-extrabold text-2xl pb-2.5">
+        <div className="my-10 flex max-w-[700px] items-center border-b border-current pb-2.5 text-2xl font-extrabold">
           <div
             className={clsx(
               "flex shrink-0",
@@ -206,14 +206,14 @@ export function CodePage({ allTags, data }: CodePageProps) {
             onKeyDown={handleKeyDown}
             placeholder="Search..."
             className={clsx(
-              "grow bg-transparent block",
+              "block grow bg-transparent",
               "focus-visible:ring-0 focus-visible:ring-offset-0",
               "focus-visible:border-b-primary",
             )}
           />
           <MagnifyingGlassIcon className="shrink-0" />
         </div>
-        <div className="flex flex-wrap gap-3 md:gap-5 roboto-mono">
+        <div className="roboto-mono flex flex-wrap gap-3 md:gap-5">
           {queryTags.map(({ tag, count, name }) => {
             const isTagMatchSearch =
               !search || name.toLowerCase().includes(search.toLowerCase())
@@ -258,7 +258,7 @@ export function CodePage({ allTags, data }: CodePageProps) {
         </div>
       </RadioGroup>
 
-      <div className="container grid md:grid-cols-2 gap-10 py-20">
+      <div className="container grid gap-10 py-20 md:grid-cols-2">
         {(sort === "alphabetical"
           ? [...newData].sort((a, b) =>
               a.frontMatter.name.localeCompare(b.frontMatter.name),
@@ -279,13 +279,13 @@ export function CodePage({ allTags, data }: CodePageProps) {
               <Card
                 key={`${name}${tags.toString()}`}
                 className={clsx(
-                  "!p-0 h-max",
+                  "h-max !p-0",
                   "min-w-0", // hack to avoid overflow when opening details
                 )}
               >
-                <div className="p-8 lg:p-12 flex flex-col gap-7 grow">
+                <div className="flex grow flex-col gap-7 p-8 lg:p-12">
                   <div className="flex items-center gap-6 [&_a:hover]:text-primary [&_a]:transition-colors">
-                    <span className="text-3xl font-extrabold grow break-all">
+                    <span className="grow break-all text-3xl font-extrabold">
                       {name}
                     </span>
                     {url && (
@@ -321,20 +321,20 @@ export function CodePage({ allTags, data }: CodePageProps) {
                       </a>
                     )}
                   </div>
-                  <div className="gap-2 flex roboto-mono">
+                  <div className="roboto-mono flex gap-2">
                     {tags.map(tag => (
                       <Tag
                         key={tag}
                         // @ts-expect-error -- fixme
                         as={NextLink}
                         href={`/community/tools-and-libraries/?tags=${tag}`}
-                        className="hover:!bg-primary transition-colors hover:text-white cursor-pointer"
+                        className="cursor-pointer transition-colors hover:!bg-primary hover:text-white"
                       >
                         {allTagsMap.get(tag)!.name}
                       </Tag>
                     ))}
                   </div>
-                  <Markdown className="[&_a]:text-primary grow line-clamp-4 lg:text-lg">
+                  <Markdown className="line-clamp-4 grow lg:text-lg [&_a]:text-primary">
                     {description}
                   </Markdown>
                   {hasMetadata && (
@@ -360,16 +360,16 @@ export function CodePage({ allTags, data }: CodePageProps) {
                   <details className="bg-[#f0f0f0] dark:bg-[#2f2f2f]">
                     <summary
                       className={clsx(
-                        "flex justify-between font-bold text-primary px-8 lg:px-12 py-5 dark:[[open]>&]:shadow-[-5px_10px_30px_20px_#1b1b1b4d]",
+                        "flex justify-between px-8 py-5 font-bold text-primary lg:px-12 dark:[[open]>&]:shadow-[-5px_10px_30px_20px_#1b1b1b4d]",
                         "[[open]>&]:shadow-[0_6px_21px_0_#1b1b1b33]",
                         "cursor-pointer",
                       )}
                     >
                       README
-                      <ChevronLeftIcon className="size-5 -rotate-90 [[open]>*>&]:rotate-90 transition-transform" />
+                      <ChevronLeftIcon className="size-5 -rotate-90 transition-transform [[open]>*>&]:rotate-90" />
                     </summary>
                     <div
-                      className="px-8 lg:px-12 py-5"
+                      className="px-8 py-5 lg:px-12"
                       suppressHydrationWarning
                     >
                       <RemoteContent compiledSource={compiledSource} />
diff --git a/src/globals.css b/src/globals.css
index 669d120a6d..fbaf495fe1 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -36,7 +36,7 @@
 }
 
 .with-arrow:after {
-  @apply content-['_→'] font-sans text-xl;
+  @apply font-sans text-xl content-['_→'];
   @apply transition-all duration-75 hover:ml-1;
 }
 
@@ -124,15 +124,15 @@ div[id^="headlessui-menu-items"] {
 /*}*/
 
 .miniGraphiQL {
-  @apply !shadow-none border-2 dark:border-neutral-900 dark:!bg-neutral-900/10 !rounded-md dark:brightness-200;
+  @apply !rounded-md border-2 !shadow-none dark:border-neutral-900 dark:!bg-neutral-900/10 dark:brightness-200;
 }
 
 .result-window {
-  @apply !shadow-none border-l-2 dark:border-neutral-900 !rounded-none;
+  @apply !rounded-none border-l-2 !shadow-none dark:border-neutral-900;
 }
 
 .variable-editor {
-  @apply before:!bg-transparent border-t-2 dark:border-neutral-900;
+  @apply border-t-2 before:!bg-transparent dark:border-neutral-900;
 }
 
 .CodeMirror-selected {
@@ -186,14 +186,14 @@ div[id^="headlessui-menu-items"] {
   @apply flex flex-wrap;
 
   li {
-    @apply flex gap-3 grow md:basis-1/3;
+    @apply flex grow gap-3 md:basis-1/3;
 
     div {
       @apply grow;
     }
 
     img {
-      @apply bg-gray-200 p-4 h-20;
+      @apply h-20 bg-gray-200 p-4;
     }
   }
 }
@@ -219,10 +219,10 @@ div[id^="headlessui-menu-items"] {
   }
 
   & > ul:first-child li {
-    @apply list-none relative;
+    @apply relative list-none;
 
     &:before {
-      @apply size-4 absolute content-[''] top-1 -left-6;
+      @apply absolute -left-6 top-1 size-4 content-[''];
     }
   }
 }
@@ -269,7 +269,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 .conf-heading {
-  @apply text-3xl lg:text-[50px]/[4rem] font-bold text-balance;
+  @apply text-balance text-3xl font-bold lg:text-[50px]/[4rem];
 }
 
 .conf-block {
@@ -277,17 +277,17 @@ div[id^="headlessui-menu-items"] {
 }
 
 .tag {
-  @apply hover:text-white hover:border-transparent hover:bg-primary;
-  @apply text-sm border border-current rounded px-2.5 py-1 font-bold transition-colors;
+  @apply hover:border-transparent hover:bg-primary hover:text-white;
+  @apply rounded border border-current px-2.5 py-1 text-sm font-bold transition-colors;
 }
 
 .index {
   p {
-    @apply text-lg lg:text-xl/9 mb-5 max-w-2xl;
+    @apply mb-5 max-w-2xl text-lg lg:text-xl/9;
   }
 
   h2 {
-    @apply text-3xl lg:text-5xl font-bold mb-10 text-balance;
+    @apply mb-10 text-balance text-3xl font-bold lg:text-5xl;
   }
 
   pre {
@@ -301,7 +301,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 .add {
-  @apply !bg-green-200 dark:!bg-green-200/50 text-green-300;
+  @apply !bg-green-200 text-green-300 dark:!bg-green-200/50;
 
   &::before {
     @apply absolute start-1.5 content-['+'];
@@ -309,7 +309,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 .remove {
-  @apply !bg-red-200 dark:!bg-red-200/50 text-red-300;
+  @apply !bg-red-200 text-red-300 dark:!bg-red-200/50;
 
   &::before {
     @apply absolute start-1.5 content-['-'];
@@ -349,11 +349,11 @@ div[id^="headlessui-menu-items"] {
 }
 
 .index-button {
-  @apply border border-current rounded-md transition-colors py-2.5 px-6;
+  @apply rounded-md border border-current px-6 py-2.5 transition-colors;
 
   &:hover,
   &:focus {
-    @apply bg-primary border-transparent text-white;
+    @apply border-transparent bg-primary text-white;
   }
 }
 
@@ -413,13 +413,13 @@ div[id^="headlessui-menu-items"] {
   @apply w-full overflow-hidden;
 
   #typeEvolveView {
-    @apply select-none h-full relative left-0 flex;
+    @apply relative left-0 flex h-full select-none;
 
     .v1,
     .v2,
     .v3,
     .v4 {
-      @apply border-r dark:border-neutral-800 w-1/2 shrink-0;
+      @apply w-1/2 shrink-0 border-r dark:border-neutral-800;
     }
 
     .v5 {
diff --git a/src/pages/_meta.tsx b/src/pages/_meta.tsx
index 1941fe62db..104bf3ae14 100644
--- a/src/pages/_meta.tsx
+++ b/src/pages/_meta.tsx
@@ -35,7 +35,7 @@ export default {
   },
   spec: {
     type: "page",
-    title: <span className="after:content-['_↗'] after:font-sans">Spec</span>,
+    title: <span className="after:font-sans after:content-['_↗']">Spec</span>,
     href: "https://spec.graphql.org",
     newWindow: true,
   },
diff --git a/src/pages/blog/_meta.tsx b/src/pages/blog/_meta.tsx
index 816add5ea4..3ef582e54b 100644
--- a/src/pages/blog/_meta.tsx
+++ b/src/pages/blog/_meta.tsx
@@ -17,7 +17,7 @@ export default {
         return (
           <>
             <h1 className="text-balance">{title}</h1>
-            <div className="text-gray-500 text-center">
+            <div className="text-center text-gray-500">
               <time dateTime={date.toISOString()}>
                 {date.toLocaleDateString("en", {
                   month: "long",
@@ -27,12 +27,12 @@ export default {
               </time>{" "}
               by {byline}
             </div>
-            <div className="mt-6 gap-2 flex justify-center roboto-mono">
+            <div className="roboto-mono mt-6 flex justify-center gap-2">
               {tags.map((tag: string) => (
                 <NextLink
                   key={tag}
                   href={`/tags/${tag}`}
-                  className="transition-colors py-1 px-2.5 capitalize rounded bg-zinc-200 dark:bg-zinc-700 font-bold hover:!no-underline hover:!bg-primary hover:text-white dark:hover:text-zinc-900"
+                  className="rounded bg-zinc-200 px-2.5 py-1 font-bold capitalize transition-colors hover:!bg-primary hover:text-white hover:!no-underline dark:bg-zinc-700 dark:hover:text-zinc-900"
                 >
                   {tag.replaceAll("-", " ")}
                 </NextLink>
diff --git a/src/pages/community/foundation/_meta.tsx b/src/pages/community/foundation/_meta.tsx
index cb902bae64..5dbf604869 100644
--- a/src/pages/community/foundation/_meta.tsx
+++ b/src/pages/community/foundation/_meta.tsx
@@ -8,7 +8,7 @@ export default {
   members: "Foundation Members",
   landscape: {
     title: (
-      <span className="after:content-['_↗'] after:font-sans">
+      <span className="after:font-sans after:content-['_↗']">
         GraphQL Landscape
       </span>
     ),
diff --git a/theme.config.tsx b/theme.config.tsx
index b4418809c2..2580fae932 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -12,7 +12,7 @@ import { useRouter } from "next/router"
 // import NextImage from "next-image-export-optimizer"
 
 const graphQLLogo = (
-  <GraphQLWordmarkLogo className="h-8 nextra-logo" title="GraphQL" />
+  <GraphQLWordmarkLogo className="nextra-logo h-8" title="GraphQL" />
 )
 
 const classes = {
@@ -27,7 +27,7 @@ function List({
   items: { title: string; url: string }[]
 }) {
   return (
-    <ul className="text-sm flex flex-col gap-4 max-lg:w-[46%]">
+    <ul className="flex flex-col gap-4 text-sm max-lg:w-[46%]">
       <h3 className="text-lg font-bold">{title}</h3>
       {items.map(item => (
         <li key={item.title}>
@@ -43,7 +43,7 @@ function List({
 function Footer() {
   return (
     <div className="w-full">
-      <div className="flex justify-between items-start mb-24 flex-wrap gap-10">
+      <div className="mb-24 flex flex-wrap items-start justify-between gap-10">
         <NextLink href="/" className="max-lg:w-full">
           {graphQLLogo}
         </NextLink>
@@ -101,7 +101,7 @@ function Footer() {
           ]}
         />
       </div>
-      <div className="flex justify-between flex-wrap gap-10">
+      <div className="flex flex-wrap justify-between gap-10">
         <p className="text-sm">
           Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
           rights reserved.
@@ -133,7 +133,7 @@ function Footer() {
                   href={url}
                   target="_blank"
                   rel="noreferrer"
-                  className="hover:text-primary transition-colors block"
+                  className="block transition-colors hover:text-primary"
                 >
                   <Icon className="h-5 w-auto *:fill-current" />
                 </a>
@@ -144,13 +144,13 @@ function Footer() {
             href="https://nextra.site"
             target="_blank"
             rel="noreferrer"
-            className="text-xs hover:text-primary transition-colors flex items-center gap-2"
+            className="flex items-center gap-2 text-xs transition-colors hover:text-primary"
           >
             Powered by{" "}
             <svg
               viewBox="0 0 361 70"
               fill="currentColor"
-              className="shrink-0 h-3"
+              className="h-3 shrink-0"
             >
               <path d="M114.913 33.2763v28.7642h-11.57V12.9496h11.059v8.3416h.575c1.129-2.7485 2.93-4.9325 5.401-6.5518 2.493-1.6193 5.572-2.429 9.237-2.429 3.388 0 6.339.7244 8.853 2.1733 2.535 1.4489 4.496 3.5476 5.88 6.2962 1.407 2.7486 2.099 6.0831 2.078 10.0035v31.2571h-11.57V32.5732c0-3.2813-.852-5.8487-2.557-7.7024-1.683-1.8537-4.016-2.7806-6.999-2.7806-2.024 0-3.824.4475-5.401 1.3424-1.556.8736-2.781 2.1413-3.676 3.8032-.873 1.662-1.31 3.6755-1.31 6.0405Zm61.407 29.723c-4.922 0-9.172-1.0227-12.752-3.0681-3.558-2.0668-6.296-4.9858-8.214-8.7572-1.917-3.7926-2.876-8.2563-2.876-13.3913 0-5.0497.959-9.4815 2.876-13.2954 1.939-3.8353 4.645-6.8182 8.118-8.9489 3.473-2.152 7.553-3.228 12.241-3.228 3.026 0 5.881.4901 8.565 1.4702 2.706.9588 5.093 2.4503 7.159 4.4744 2.088 2.0242 3.729 4.6023 4.922 7.7344 1.193 3.1108 1.79 6.8182 1.79 11.1221v3.5476h-40.238v-7.7983h29.148c-.021-2.2159-.501-4.1868-1.438-5.9126-.938-1.7472-2.248-3.1215-3.931-4.1229-1.662-1.0014-3.601-1.5021-5.817-1.5021-2.365 0-4.443.5753-6.232 1.7258-1.79 1.1293-3.186 2.6208-4.187 4.4745-.98 1.8324-1.481 3.8459-1.502 6.0405v6.8075c0 2.8551.522 5.3054 1.566 7.3508 1.044 2.0242 2.503 3.5796 4.378 4.6662 1.875 1.0654 4.07 1.598 6.584 1.598 1.683 0 3.207-.2343 4.57-.7031 1.364-.49 2.546-1.2038 3.548-2.1413 1.001-.9375 1.758-2.0987 2.269-3.4837l10.803 1.2145c-.682 2.8551-1.982 5.348-3.9 7.4787-1.896 2.1094-4.325 3.75-7.286 4.9219-2.962 1.1506-6.35 1.7258-10.164 1.7258Zm34.777-50.0497 9.908 18.1215 10.067-18.1215h12.241l-14.798 24.5455 15.054 24.5454h-12.177l-10.387-17.674-10.291 17.674h-12.273l14.957-24.5454-14.574-24.5455h12.273Zm63.878 0v8.9489h-28.221v-8.9489h28.221ZM253.722 1.18825h11.569V47.2749c0 1.5554.235 2.7486.704 3.5795.49.8097 1.129 1.3637 1.917 1.662s1.662.4474 2.621.4474c.724 0 1.385-.0532 1.981-.1598.618-.1065 1.087-.2024 1.407-.2876l1.949 9.0447c-.618.2131-1.502.4475-2.652.7031-1.13.2557-2.515.4049-4.155.4475-2.898.0852-5.508-.3516-7.831-1.3104-2.322-.9801-4.165-2.4929-5.529-4.5383-1.342-2.0455-2.003-4.6023-1.981-7.6705V1.18825Zm29.129 60.85225V12.9496h11.218v8.1818h.512c.895-2.8338 2.429-5.0177 4.602-6.5518 2.173-1.5554 4.677-2.3331 7.511-2.3331 1.321 0 2.535.1598 3.643.4794 1.108.3196 2.088.7564 2.94 1.3104l-3.579 9.588c-.618-.2983-1.3-.5433-2.046-.7351-.745-.1917-1.587-.2876-2.524-.2876-2.003 0-3.814.4474-5.434 1.3423-1.619.8949-2.908 2.1414-3.867 3.7394-.937 1.5767-1.406 3.4091-1.406 5.4971v28.8601h-11.57Zm51.222.863c-3.856 0-7.308-.9908-10.355-2.9723-3.047-1.9816-5.454-4.858-7.223-8.6293-1.768-3.7713-2.652-8.3523-2.652-13.7429 0-5.4546.894-10.0568 2.684-13.8068 1.811-3.7713 4.251-6.6158 7.319-8.5334 3.068-1.9389 6.488-2.9084 10.259-2.9084 2.877 0 5.242.4901 7.095 1.4702 1.854.9588 3.324 2.12 4.411 3.4836 1.087 1.3424 1.928 2.6101 2.525 3.8033h.479v-8.1179h11.602v49.0909h-11.378v-7.7343h-.703c-.597 1.1931-1.46 2.4609-2.589 3.8032-1.129 1.321-2.621 2.4503-4.474 3.3878-1.854.9375-4.187 1.4063-7 1.4063Zm3.228-9.4922c2.451 0 4.539-.6605 6.265-1.9816 1.725-1.3423 3.036-3.2066 3.931-5.593s1.342-5.1669 1.342-8.3416c0-3.1747-.447-5.934-1.342-8.2777-.874-2.3438-2.174-4.1655-3.9-5.4652-1.704-1.2997-3.803-1.9496-6.296-1.9496-2.578 0-4.73.6712-6.456 2.0135s-3.025 3.196-3.899 5.5611c-.873 2.365-1.31 5.071-1.31 8.1179 0 3.0682.437 5.8061 1.31 8.2138.895 2.3863 2.205 4.272 3.931 5.6569 1.747 1.3636 3.889 2.0455 6.424 2.0455Z" />
               <path
@@ -208,7 +208,7 @@ export default {
         available &amp; sponsorship opportunities open •{" "}
         <NextLink
           href="/conf/2025"
-          className="underline after:content-['_→'] after:font-sans"
+          className="underline after:font-sans after:content-['_→']"
         >
           Learn more
         </NextLink>