Tailwind class autosorting is inconsistent between runs tailwindlabs/prettier-plugin-tailwindcss#246

Author: hasparus

src/app/conf/2023/sessions/[id]/page.tsx

@@ -86,7 +86,7 @@ export default function SessionPage({ params }: SessionProps) {
     <div className="bg-[#f4f6f8]">
       <div className="container">
         <div className="py-10">
-          <section className="xs:px-0 mx-auto min-h-[80vh] flex-col justify-center px-2 text-[#333333] md:container lg:justify-between">
+          <section className="mx-auto min-h-[80vh] flex-col justify-center px-2 text-[#333333] md:container xs:px-0 lg:justify-between">
             <div className="flex flex-col lg:px-0">
               <BackLink year="2023" kind="sessions" />
               {recordingTitle.rating > 0.5 && (

src/app/conf/2023/speakers/page.tsx

@@ -10,7 +10,7 @@ export default function Page() {
   return (
     <>
       <div className="flex w-full justify-center">
-        <div className="xs:px-0 prose px-2 py-20 md:container lg:prose-lg">
+        <div className="prose px-2 py-20 md:container lg:prose-lg xs:px-0">
           <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

src/app/conf/2024/schedule/[id]/page.tsx

@@ -110,7 +110,7 @@ export default function SessionPage({ params }: SessionProps) {
     <div className="bg-[#f4f6f8]">
       <div className="container">
         <div className="py-10">
-          <section className="xs:px-0 mx-auto min-h-[80vh] flex-col justify-center px-2 text-[#333333] md:container lg:justify-between">
+          <section className="mx-auto min-h-[80vh] flex-col justify-center px-2 text-[#333333] md:container xs:px-0 lg:justify-between">
             <BackLink year="2024" kind="schedule" />
             <iframe
               className="mx-auto mt-6 aspect-video w-full max-w-4xl rounded-md"

src/app/conf/2024/speakers/page.tsx

@@ -10,7 +10,7 @@ export default function Page() {
   return (
     <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">
+        <div className="prose px-2 py-20 md:container lg:prose-lg xs:px-0">
           <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

src/app/conf/2025/components/become-a-sponsor/index.tsx

@@ -13,7 +13,7 @@ export function BecomeASponsor() {
         <header className="flex flex-col gap-x-48 gap-y-4 md:flex-row md:items-end md:justify-between">
           <div>
             <h2 className="typography-h2">Become a Sponsor</h2>
-            <p className="mt-6 text-pretty typography-body-lg">
+            <p className="typography-body-lg mt-6 text-pretty">
               Connect with the global GraphQL community and showcase your brand
               to industry leaders and decision-makers.
             </p>
@@ -75,10 +75,10 @@ function DefinitionListItem({
         "flex border-b border-neu-300 last:border-b-0 max-sm:flex-col",
       )}
     >
-      <dt className="flex min-w-[320px] shrink-0 items-center whitespace-pre border-b border-neu-300 p-4 typography-body-lg max-sm:w-full sm:border-b-0 sm:border-r">
+      <dt className="typography-body-lg flex min-w-[320px] shrink-0 items-center whitespace-pre border-b border-neu-300 p-4 max-sm:w-full sm:border-b-0 sm:border-r">
         {term}
       </dt>
-      <dd className="flex items-center p-4 typography-body-md">{definition}</dd>
+      <dd className="typography-body-md flex items-center p-4">{definition}</dd>
     </div>
   )
 }

src/app/conf/2025/components/footer/index.tsx

@@ -21,11 +21,11 @@ export function Footer({
   logo: ReactNode
 }) {
   return (
-    <footer className="gql-all-anchors-focusable relative !bg-neu-100 text-neu-900 typography-menu dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
+    <footer className="gql-all-anchors-focusable typography-menu relative !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
       <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:px-6 lg:py-10 2xl:px-10">
         {logo}
-        <div className="flex gap-x-4 typography-body-lg max-sm:grid max-sm:grid-cols-2 max-sm:items-start max-sm:text-lg sm:gap-y-2">
+        <div className="typography-body-lg flex gap-x-4 max-sm:grid max-sm:grid-cols-2 max-sm:items-start max-sm:text-lg sm:gap-y-2">
           <p className="flex items-center whitespace-pre">
             <time dateTime="2025-09-08">September 08</time>
             <span>-</span>

src/app/conf/2025/components/gallery-strip/index.tsx

@@ -29,7 +29,7 @@ export function GalleryStrip({ className, ...rest }: GalleryStripProps) {
             key={year}
             onClick={() => setSelectedYear(year)}
             className={clsx(
-              "gql-focus-visible p-1 typography-menu",
+              "gql-focus-visible typography-menu p-1",
               selectedYear === year
                 ? "bg-sec-light text-neu-900 dark:text-neu-0"
                 : "text-neu-800",

src/app/conf/2025/components/get-your-ticket/index.tsx

@@ -17,10 +17,10 @@ export function GetYourTicket({ className }: { className?: string }) {
       <Stripes />
       <div className="gql-conf-container gql-conf-section relative">
         <header className="flex flex-wrap justify-between gap-6 md:items-end">
-          <h2 className="whitespace-pre text-white typography-h2">
+          <h2 className="typography-h2 whitespace-pre text-white">
             Get your ticket
           </h2>
-          <p className="text-neu-800 typography-body-lg">
+          <p className="typography-body-lg text-neu-800">
             The registration deadline is 23:59 CET on the respective date.
           </p>
         </header>

src/app/conf/2025/components/get-your-ticket/ticket-period.tsx

@@ -32,15 +32,15 @@ export function TicketPeriod({
       )}
     >
       <header className="border-b border-pri-lighter p-6">
-        <h3 className="text-white typography-h3">{name}</h3>
+        <h3 className="typography-h3 text-white">{name}</h3>
       </header>
       <div className="flex h-full flex-col justify-end gap-6 p-6">
         <div className="flex items-end justify-between gap-2">
-          <span className="text-white typography-h3 @[356px]:typography-h2">
+          <span className="typography-h3 text-white @[356px]:typography-h2">
             {price}
           </span>
           {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-          <span className="ticket-period--date text-right text-white typography-body-md">
+          <span className="ticket-period--date typography-body-md text-right text-white">
             {Array.isArray(date) ? (
               <>
                 <Time date={date[0]} />

src/app/conf/2025/components/graphql-foundation-card.tsx

@@ -9,7 +9,7 @@ export function GraphQLFoundationCard({ className }: { className?: string }) {
         <div className="flex items-center justify-center px-8 py-10 lg:px-16 lg:py-24">
           <FoundationWordmark className="h-[68px] text-rhodamine dark:text-current lg:h-[100px] [&_g]:fill-current" />
         </div>
-        <p className="text-pretty px-8 py-10 typography-body-lg max-md:text-center lg:px-16 lg:py-24">
+        <p className="typography-body-lg text-pretty px-8 py-10 max-md:text-center lg:px-16 lg:py-24">
           GraphQLConf is presented by the GraphQL Foundation, uniting the global
           GraphQL community to promote education, adoption, and advancement of
           GraphQL.

src/app/conf/2025/components/register-section/index.tsx

@@ -16,12 +16,12 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
     >
       <div>
         <h2 className="typography-h2">Register</h2>
-        <p className="mt-6 typography-body-lg">
+        <p className="typography-body-lg mt-6">
           Join a diverse community of GraphQL developers, architects, and
           enthusiasts while experiencing premium content and networking
           opportunities in a vendor-neutral environment.
         </p>
-        <p className="mt-6 typography-body-sm md:mt-16">
+        <p className="typography-body-sm mt-6 md:mt-16">
           We never sell attendee lists or contact information, nor do we
           authorize others to do so. If you receive an email claiming to sell an
           attendee list for a Linux Foundation event, please forward it to
@@ -31,7 +31,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
       <div className="flex flex-col gap-6 md:gap-8">
         <article className="border border-neu-400 p-6">
           <h3 className="typography-h3">Speakers</h3>
-          <p className="mt-6 typography-body-lg">
+          <p className="typography-body-lg mt-6">
             You should have received a registration link in your acceptance
             email. If you did not, please contact us for more details:{" "}
             <a
@@ -51,7 +51,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
         </article>
         <article className="border border-neu-400 p-6">
           <h3 className="typography-h3">Sponsors</h3>
-          <p className="mt-6 typography-body-lg">
+          <p className="typography-body-lg mt-6">
             A registration link was shared in an email to your company's
             sponsorship contact. Please reach out to them if you need to
             register as a Sponsor. For further questions, please email us:{" "}
@@ -72,7 +72,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
         </article>
         <article className="border border-neu-400 p-6">
           <h3 className="typography-h3">Media</h3>
-          <p className="mt-6 typography-body-lg">
+          <p className="typography-body-lg mt-6">
             If you are a member of the media interested in attending this event,
             write us an email.
           </p>

src/app/conf/2025/components/register-today/index.tsx

@@ -28,10 +28,10 @@ export function RegisterToday({ className }: RegisterTodayProps) {
       />
       <div className="flex flex-col justify-between">
         <div>
-          <h2 className="text-neu-900 typography-h2">
+          <h2 className="typography-h2 text-neu-900">
             Let's celebrate 10 years of GraphQL together
           </h2>
-          <p className="mt-6 text-neu-800 typography-h3 md:mt-10">
+          <p className="typography-h3 mt-6 text-neu-800 md:mt-10">
             Join three transformative days of expert insights and innovation to
             shape the next decade of APIs!
           </p>

src/app/conf/2025/resources/client-mdx.tsx

@@ -17,7 +17,7 @@ export default function ResourcesPage() {
         h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
           return (
             <h3
-              className="border-t border-neu-100 pt-2 text-pri-base typography-menu dark:border-neu-50 dark:text-pri-light"
+              className="typography-menu border-t border-neu-100 pt-2 text-pri-base dark:border-neu-50 dark:text-pri-light"
               {...props}
             >
               {props.children}

src/app/conf/2025/resources/prose.css

@@ -4,7 +4,7 @@
   --grid-col-content: 1;
 
   @apply xl:[--grid-col-content:3];
-  @apply grid grid-cols-1 gap-6 typography-body-md xl:my-12 xl:grid-cols-[auto_1fr_var(--prose-width)_1fr];
+  @apply typography-body-md grid grid-cols-1 gap-6 xl:my-12 xl:grid-cols-[auto_1fr_var(--prose-width)_1fr];
 
   & > * {
     grid-column: var(--grid-col-content);

src/app/conf/2025/schedule/[id]/page.tsx

@@ -73,8 +73,8 @@ export default function SessionPage({ params }: SessionProps) {
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
           <div className="gql-conf-container">
-            <div className="gql-conf-section max-xs:px-0 !py-0">
-              <div className="xs:border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
+            <div className="gql-conf-section !py-0 max-xs:px-0">
+              <div className="border-neu-200 pt-8 dark:border-neu-100 xs:border-x 2xl:pt-16">
                 <SessionHeader
                   event={session}
                   eventTitle={eventTitle}

src/app/conf/2025/speakers/[id]/page.tsx

@@ -56,8 +56,8 @@ export default function SpeakerPage({ params }: SpeakerProps) {
       <main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-neu-50/40 before:dark:bg-blk/30">
         <div className="bg-neu-50 dark:bg-neu-0">
           <div className="gql-conf-container">
-            <div className="gql-conf-section max-xs:px-0 !py-0">
-              <div className="xs:border-x border-neu-200 dark:border-neu-100">
+            <div className="gql-conf-section !py-0 max-xs:px-0">
+              <div className="border-neu-200 dark:border-neu-100 xs:border-x">
                 <SpeakerHeader
                   speaker={speaker}
                   year="2025"

src/app/conf/_components/info-grid.tsx

@@ -14,7 +14,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
   id,
 }) => (
   <section id={id}>
-    <h1 className="mb-4 typography-h2">{title}</h1>
+    <h1 className="typography-h2 mb-4">{title}</h1>
     <p className="typography-body-lg xl:mb-4">{subtitle}</p>
     <div
       style={{
@@ -24,7 +24,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
     >
       {listItems.map(({ title, description }, index) => (
         <div key={index} className="min-w-64 border border-neu-400 p-3">
-          <h2 className="mb-2 typography-body-lg">{title}</h2>
+          <h2 className="typography-body-lg mb-2">{title}</h2>
           <p
             className="typography-body-md [&_a]:typography-link"
             dangerouslySetInnerHTML={{ __html: description }}

src/globals.css

@@ -17,7 +17,8 @@
 }
 
 .conf-hero {
-  background: linear-gradient(
+  background:
+    linear-gradient(
       360deg,
       #0e031c 10.63%,
       #0e031c 10.65%,
@@ -228,7 +229,8 @@ div[id^="headlessui-menu-items"] {
 }
 
 .code-page {
-  background: linear-gradient(
+  background:
+    linear-gradient(
       303.75deg,
       rgba(124, 124, 124, 0.2) 0.8%,
       rgba(124, 124, 124, 0) 74.17%
@@ -237,7 +239,8 @@ div[id^="headlessui-menu-items"] {
 }
 
 .dark .code-page {
-  background: linear-gradient(
+  background:
+    linear-gradient(
       303.75deg,
       rgba(124, 124, 124, 0.2) 0.8%,
       rgba(124, 124, 124, 0) 74.17%
@@ -246,7 +249,8 @@ div[id^="headlessui-menu-items"] {
 }
 
 .dark .blog-page {
-  background: linear-gradient(
+  background:
+    linear-gradient(
       250.93deg,
       rgba(115, 119, 125, 0.1),
       rgba(115, 119, 125, 0)
@@ -255,7 +259,8 @@ div[id^="headlessui-menu-items"] {
 }
 
 .blog-page {
-  background: linear-gradient(
+  background:
+    linear-gradient(
       231.79deg,
       rgba(225, 0, 152, 0.4) -23.67%,
       rgba(225, 0, 152, 0) 25.9%
@@ -388,15 +393,17 @@ div[id^="headlessui-menu-items"] {
 }
 
 .index-bg {
-  background: linear-gradient(
+  background:
+    linear-gradient(
       303.75deg,
       rgba(124, 124, 124, 0.2) 0.8%,
       rgba(124, 124, 124, 0) 74.17%
     ),
     linear-gradient(0deg, #f8f8f8, #f8f8f8);
 
   .dark & {
-    background: linear-gradient(0deg, #111, #111),
+    background:
+      linear-gradient(0deg, #111, #111),
       linear-gradient(
         303.75deg,
         rgba(124, 124, 124, 0.2) 0.8%,