From 70d9f6dab3bef8e621743eb07878c3324bd911b7 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Mon, 15 Apr 2024 22:29:39 -0700
Subject: [PATCH 1/2] Added prettier-plugin-tailwindcss

---
 package.json   |  1 +
 pnpm-lock.yaml | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/package.json b/package.json
index 60ff631690..546a94f56a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "turbo": "^1.13.0",
     "turbo-ignore": "^1.13.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45bde5b5fa..82efa38ee8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       prettier:
         specifier: ^3.2.5
         version: 3.2.5
+      prettier-plugin-tailwindcss:
+        specifier: ^0.5.14
+        version: 0.5.14(prettier@3.2.5)
       turbo:
         specifier: ^1.13.0
         version: 1.13.0
@@ -17192,6 +17195,61 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.14(prettier@3.2.5):
+    resolution: {integrity: sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==}
+    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-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-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.2.5
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}

From 4e90643af69b0fb29b971e62fd6be23831f71980 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Mon, 15 Apr 2024 22:40:56 -0700
Subject: [PATCH 2/2] Applied prettier, with tailwind-prettier

---
 .../CodeEditor/focusGutterExtension.tsx       |  4 ++--
 .../CodeEditor/useTooltipsExtension.tsx       |  2 +-
 .../src/components/PlaygroundSettings.tsx     | 10 ++++----
 .../src/components/SquiggleEditor.tsx         |  2 +-
 .../ResizableTwoPanelLayout.tsx               |  4 ++--
 .../components/SquigglePlayground/index.tsx   |  6 ++---
 .../SquiggleViewer/ValueViewer/Title.tsx      |  4 ++--
 .../ValueViewer/WithContext.tsx               | 16 ++++++-------
 .../SquiggleViewer/ZoomedInNavigation.tsx     |  2 +-
 .../components/ViewerWithMenuBar/Layout.tsx   |  2 +-
 .../ViewerWithMenuBar/RandomizeSeedButton.tsx |  2 +-
 .../ViewerWithMenuBar/SimulatingIndicator.tsx |  2 +-
 .../ViewerWithMenuBar/ViewerBody.tsx          |  2 +-
 .../components/src/components/ui/Alert.tsx    |  2 +-
 .../src/components/ui/ErrorBoundary.tsx       |  4 ++--
 .../src/components/ui/FnDocumentation.tsx     | 12 +++++-----
 .../src/components/ui/FormSection.tsx         |  2 +-
 .../ui/PanelWithToolbar/ToolbarItem.tsx       |  2 +-
 .../components/ui/PanelWithToolbar/index.tsx  | 16 ++++++-------
 .../src/components/ui/SquiggleErrorAlert.tsx  |  6 ++---
 .../components/src/components/ui/Toggle.tsx   |  6 ++---
 .../components/src/lib/MarkdownViewer.tsx     |  4 ++--
 .../stories/SquigglePlayground.stories.tsx    |  2 +-
 .../components/src/widgets/ArrayWidget.tsx    |  2 +-
 .../components/src/widgets/BoolWidget.tsx     |  2 +-
 .../widgets/CalculatorWidget/Calculator.tsx   |  8 +++----
 .../CalculatorWidget/CalculatorInput.tsx      |  2 +-
 .../CalculatorWidget/CalculatorResult.tsx     |  4 ++--
 .../components/src/widgets/DictWidget.tsx     |  2 +-
 .../widgets/DistWidget/DistributionsChart.tsx |  8 +++----
 .../src/widgets/DistWidget/SummaryTable.tsx   |  6 ++---
 .../src/widgets/DistWidget/index.tsx          |  2 +-
 .../FunctionChart/AutomaticFunctionChart.tsx  |  2 +-
 .../FunctionChart/DistFunctionChart.tsx       |  2 +-
 .../src/widgets/PlotWidget/PlotTitle.tsx      |  2 +-
 .../RelativeValueCell.tsx                     | 16 ++++++-------
 .../RelativeValuesGridChart/index.tsx         |  8 +++----
 .../src/widgets/SpecificationWidget.tsx       | 16 ++++++-------
 .../components/src/widgets/StringWidget.tsx   |  4 ++--
 .../src/widgets/TableChartWidget.tsx          | 12 +++++-----
 .../components/src/widgets/VoidWidget.tsx     |  2 +-
 packages/hub/src/app/RootLayout.tsx           |  4 ++--
 packages/hub/src/app/admin/layout.tsx         |  2 +-
 .../upgrade-versions/UpgradeVersionsPage.tsx  |  4 ++--
 packages/hub/src/app/benchmarks/page.tsx      |  8 +++----
 .../hub/src/app/groups/[slug]/GroupLayout.tsx |  4 ++--
 .../hub/src/app/groups/[slug]/InviteForMe.tsx |  2 +-
 .../groups/[slug]/members/GroupInviteCard.tsx |  6 ++---
 .../groups/[slug]/members/GroupMemberCard.tsx |  6 ++---
 .../groups/[slug]/members/GroupMemberList.tsx |  2 +-
 .../members/GroupReusableInviteSection.tsx    |  4 ++--
 .../[slug]/EditSquiggleSnippetModel.tsx       |  2 +-
 .../[owner]/[slug]/ModelAccessControls.tsx    |  6 ++---
 .../[variableName]/CacheMenu/index.tsx        |  4 ++--
 .../RelativeValuesModelLayout.tsx             |  6 ++---
 .../[slug]/revisions/ModelRevisionsList.tsx   |  2 +-
 .../[revisionId]/ModelRevisionView.tsx        |  4 ++--
 .../SquiggleVariableRevisionPage.tsx          |  2 +-
 .../variables/[variableName]/VariablePage.tsx |  8 +++----
 .../[slug]/variables/[variableName]/page.tsx  |  2 +-
 .../app/models/[owner]/[slug]/view/page.tsx   |  2 +-
 packages/hub/src/app/new/model/NewModel.tsx   |  2 +-
 packages/hub/src/app/not-found.tsx            |  6 ++---
 .../choose-username/ChooseUsername.tsx        |  2 +-
 packages/hub/src/app/status/StatusPage.tsx    |  2 +-
 .../src/app/users/[username]/UserLayout.tsx   |  6 ++---
 packages/hub/src/components/EntityCard.tsx    |  6 ++---
 packages/hub/src/components/EntityInfo.tsx    |  4 ++--
 packages/hub/src/components/EntityLayout.tsx  |  6 ++---
 packages/hub/src/components/ErrorBoundary.tsx |  4 ++--
 .../GlobalSearch/SearchResultBox.tsx          |  2 +-
 .../GlobalSearch/SearchResultTItle.tsx        |  2 +-
 .../components/GlobalSearch/TextSnippet.tsx   |  2 +-
 .../exports/RelativeValuesExportItem.tsx      |  2 +-
 .../components/layout/NarrowPageLayout.tsx    |  2 +-
 .../layout/RootLayout/DropdownWithArrow.tsx   |  4 ++--
 .../layout/RootLayout/PageFooter.tsx          |  6 ++---
 .../components/layout/RootLayout/PageMenu.tsx | 12 +++++-----
 .../layout/RootLayout/PageMenuLink.tsx        |  4 ++--
 packages/hub/src/components/ui/Card.tsx       |  2 +-
 packages/hub/src/components/ui/EntityTab.tsx  |  4 ++--
 packages/hub/src/components/ui/Headers.tsx    |  8 +++----
 .../hub/src/groups/components/GroupList.tsx   |  2 +-
 .../hub/src/models/components/ModelCard.tsx   |  2 +-
 .../hub/src/models/components/ModelList.tsx   |  2 +-
 .../RelativeValuesDefinitionForm/HTMLForm.tsx |  6 ++---
 .../components/common/ClusterIcon.tsx         |  2 +-
 .../components/common/ClusterInfo.tsx         |  2 +-
 .../components/ui/FormHeader.tsx              |  2 +-
 .../components/views/CellBox.tsx              |  4 ++--
 .../components/views/ClusterFilter.tsx        |  4 ++--
 .../components/views/GridView/AxisMenu.tsx    |  4 ++--
 .../components/views/GridView/index.tsx       | 10 ++++----
 .../components/views/Header.tsx               |  2 +-
 .../views/ListView/ColumnHeader.tsx           | 10 ++++----
 .../components/views/ListView/index.tsx       | 14 +++++------
 .../components/views/ListView/sidebar.tsx     | 24 +++++++++----------
 .../components/views/PlotView/ItemTooltip.tsx |  2 +-
 .../components/views/PlotView/index.tsx       |  2 +-
 .../views/RelativeCell/ErrorCell.tsx          |  2 +-
 .../src/variables/components/VariableCard.tsx |  4 ++--
 .../src/variables/components/VariableList.tsx |  2 +-
 packages/ui/src/components/Button.tsx         |  8 +++----
 .../Dropdown/DropdownMenuHeader.tsx           |  2 +-
 .../Dropdown/DropdownMenuItemLayout.tsx       |  4 ++--
 packages/ui/src/components/Dropdown/index.tsx |  4 ++--
 packages/ui/src/components/Modal.tsx          | 12 +++++-----
 packages/ui/src/components/StyledTab.tsx      |  2 +-
 packages/ui/src/components/TextTooltip.tsx    |  2 +-
 .../ui/src/components/WithToasts/index.tsx    |  4 ++--
 .../ui/src/forms/common/FormFieldLayout.tsx   |  2 +-
 packages/ui/src/forms/common/WithRHFError.tsx |  8 +++----
 .../ui/src/forms/styled/StyledCheckbox.tsx    |  2 +-
 .../ui/src/forms/styled/StyledColorInput.tsx  |  6 ++---
 packages/ui/src/forms/styled/StyledInput.tsx  |  2 +-
 packages/ui/src/forms/styled/StyledRadio.tsx  |  8 +++----
 .../ui/src/forms/styled/StyledTextArea.tsx    |  2 +-
 .../ui/src/stories/MouseTooltip.stories.tsx   |  2 +-
 .../ui/src/stories/TextTooltip.stories.tsx    |  4 ++--
 .../src/SquiggleVersionShower.tsx             |  2 +-
 packages/website/src/components/Footer.tsx    |  2 +-
 .../src/components/HomepageFeatures.tsx       |  4 ++--
 .../components/PlaygroundPage/ShareButton.tsx |  2 +-
 .../src/components/PlaygroundPage/index.tsx   |  2 +-
 packages/website/src/pages/index.mdx          |  8 +++----
 packages/website/theme.config.tsx             |  2 +-
 prettier.config.js                            |  1 +
 127 files changed, 291 insertions(+), 290 deletions(-)

diff --git a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx
index bc7e6fa06b..b2bb5d2b7a 100644
--- a/packages/components/src/components/CodeEditor/focusGutterExtension.tsx
+++ b/packages/components/src/components/CodeEditor/focusGutterExtension.tsx
@@ -115,7 +115,7 @@ class FocusableMarker extends GutterMarker {
   override toDOM() {
     return reactAsDom(
       <div
-        className="pr-1 pl-0.5 cursor-pointer group/marker"
+        className="group/marker cursor-pointer pl-0.5 pr-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -128,7 +128,7 @@ class FocusableMarker extends GutterMarker {
             "bg-violet-50 [.cm-activeLineGutter_&]:bg-white",
             // highlight all markers on gutter hover; highlight the hovered markers even more
             "group-hover/gutter:bg-violet-200 group-hover/marker:!bg-violet-400",
-            "rounded-sm w-[3px] h-4 br-1 mt-[1px]",
+            "br-1 mt-[1px] h-4 w-[3px] rounded-sm",
             "transition duration-75"
           )}
         />
diff --git a/packages/components/src/components/CodeEditor/useTooltipsExtension.tsx b/packages/components/src/components/CodeEditor/useTooltipsExtension.tsx
index a7a142711f..fa588ce971 100644
--- a/packages/components/src/components/CodeEditor/useTooltipsExtension.tsx
+++ b/packages/components/src/components/CodeEditor/useTooltipsExtension.tsx
@@ -28,7 +28,7 @@ const TooltipBox: FC<PropsWithChildren<{ view: EditorView }>> = ({
   });
 
   return (
-    <div className="border rounded-sm shadow-lg h-full overflow-y-auto">
+    <div className="h-full overflow-y-auto rounded-sm border shadow-lg">
       {children}
     </div>
   );
diff --git a/packages/components/src/components/PlaygroundSettings.tsx b/packages/components/src/components/PlaygroundSettings.tsx
index bfc43b4c0e..8b2aea2467 100644
--- a/packages/components/src/components/PlaygroundSettings.tsx
+++ b/packages/components/src/components/PlaygroundSettings.tsx
@@ -269,7 +269,7 @@ export const PlaygroundSettingsForm: React.FC<{
   metaSettings,
 }) => {
   return (
-    <div className="divide-y divide-gray-200 max-w-2xl">
+    <div className="max-w-2xl divide-y divide-gray-200">
       {withGlobalSettings && (
         <>
           <div className="mb-6">
@@ -278,7 +278,7 @@ export const PlaygroundSettingsForm: React.FC<{
             </FormSection>
           </div>
 
-          <div className="pt-6 mb-6">
+          <div className="mb-6 pt-6">
             <FormSection title="General Display Settings">
               <NumberFormField<PlaygroundSettings>
                 name="chartHeight"
@@ -289,18 +289,18 @@ export const PlaygroundSettingsForm: React.FC<{
         </>
       )}
 
-      <div className="pt-6 mb-6">
+      <div className="mb-6 pt-6">
         <DistributionSettingsForm metaSettings={metaSettings} />
       </div>
 
       {withFunctionSettings ? (
-        <div className="pt-6 mb-6">
+        <div className="mb-6 pt-6">
           <FunctionSettingsForm />
         </div>
       ) : null}
 
       {withGlobalSettings ? (
-        <div className="pt-6 mb-6">
+        <div className="mb-6 pt-6">
           <EditorSettingsForm />
         </div>
       ) : null}
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index c611ebffc1..797d9aa1c0 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -56,7 +56,7 @@ export const SquiggleEditor: FC<SquiggleEditorProps> = ({
   return (
     <div>
       <div
-        className="border border-slate-300 bg-slate-50 rounded-sm p-2"
+        className="rounded-sm border border-slate-300 bg-slate-50 p-2"
         data-testid="squiggle-editor"
       >
         <CodeEditor
diff --git a/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx b/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx
index 17226d4830..7f0f266d92 100644
--- a/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx
+++ b/packages/components/src/components/SquigglePlayground/ResizableTwoPanelLayout.tsx
@@ -91,12 +91,12 @@ export const ResizableTwoPanelLayout: FC<Props> = ({
         >
           <div
             ref={handleRef}
-            className="absolute top-0 h-full border-l border-slate-300 hover:border-blue-500 transition cursor-ew-resize"
+            className="absolute top-0 h-full cursor-ew-resize border-l border-slate-300 transition hover:border-blue-500"
             style={{ width: 5, right: -5 }}
           />
         </DraggableCore>
       </div>
-      <div className="flex-1 flex flex-col overflow-y-auto">
+      <div className="flex flex-1 flex-col overflow-y-auto">
         {renderRight()}
       </div>
     </div>
diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx
index 7bc87f4f66..a08dac667e 100644
--- a/packages/components/src/components/SquigglePlayground/index.tsx
+++ b/packages/components/src/components/SquigglePlayground/index.tsx
@@ -188,13 +188,13 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
       );
     } else if (defaultAutorunMode === false) {
       return (
-        <div className="grid place-items-center h-full">
-          <div className="text-gray-500 text-sm">{`Press the "Run" button (top left) to simulate`}</div>
+        <div className="grid h-full place-items-center">
+          <div className="text-sm text-gray-500">{`Press the "Run" button (top left) to simulate`}</div>
         </div>
       );
     } else {
       return (
-        <div className="grid place-items-center h-full">
+        <div className="grid h-full place-items-center">
           <RefreshIcon className="animate-spin text-slate-400" size={24} />
         </div>
       );
diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx
index aa443add16..9015b2cce5 100644
--- a/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx
+++ b/packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx
@@ -100,7 +100,7 @@ export const Title: FC<TitleProps> = (props) => {
   return (
     <div
       className={clsx(
-        "leading-3 flex flex-row items-center",
+        "flex flex-row items-center leading-3",
         showColon && "mr-3"
       )}
     >
@@ -116,7 +116,7 @@ export const Title: FC<TitleProps> = (props) => {
       >
         {title}
       </div>
-      {showColon && <div className="text-gray-400 font-mono">:</div>}
+      {showColon && <div className="font-mono text-gray-400">:</div>}
     </div>
   );
 };
diff --git a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx
index 61aa48ee31..83443eb342 100644
--- a/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx
+++ b/packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx
@@ -137,7 +137,7 @@ export const ValueWithContextViewer: FC<Props> = ({
       return (
         <div
           className={clsx(
-            "w-4 mr-1.5 flex justify-center cursor-pointer hover:!text-stone-600",
+            "mr-1.5 flex w-4 cursor-pointer justify-center hover:!text-stone-600",
             isOpen ? "text-stone-600 opacity-40" : "text-stone-800 opacity-40"
           )}
           onClick={handle.toggleCollapsed}
@@ -146,7 +146,7 @@ export const ValueWithContextViewer: FC<Props> = ({
         </div>
       );
     } else {
-      return <div className="w-4 mr-1.5" />;
+      return <div className="mr-1.5 w-4" />;
     }
   };
 
@@ -155,7 +155,7 @@ export const ValueWithContextViewer: FC<Props> = ({
     if (isDictOrList) {
       return (
         <div
-          className="group w-4 shrink-0 flex justify-center cursor-pointer"
+          className="group flex w-4 shrink-0 cursor-pointer justify-center"
           onClick={handle.toggleCollapsed}
         >
           <div className="w-px bg-stone-100 group-hover:bg-stone-400" />
@@ -178,9 +178,9 @@ export const ValueWithContextViewer: FC<Props> = ({
             }}
             tabIndex={viewerType === "tooltip" ? undefined : 0}
             className={clsx(
-              "flex justify-between group pr-0.5 hover:bg-stone-100 rounded-sm focus-visible:outline-none",
+              "group flex justify-between rounded-sm pr-0.5 hover:bg-stone-100 focus-visible:outline-none",
               isZoomedIn
-                ? "focus:bg-indigo-50 mb-2 px-0.5 py-1"
+                ? "mb-2 px-0.5 py-1 focus:bg-indigo-50"
                 : "focus:bg-indigo-100"
             )}
             onFocus={(_) => {
@@ -207,13 +207,13 @@ export const ValueWithContextViewer: FC<Props> = ({
               />
 
               {!isOpen && (
-                <div className="text-sm text-blue-800 ml-2">
+                <div className="ml-2 text-sm text-blue-800">
                   <SquiggleValuePreview value={value} />
                 </div>
               )}
               {!isOpen && <CommentIconForValue value={value} />}
             </div>
-            <div className="inline-flex space-x-2 items-center">
+            <div className="inline-flex items-center space-x-2">
               <SpecificationDropdown value={value} />
               {enableDropdownMenu && <SquiggleValueMenu value={value} />}
               {exportData && exportData.path.length < 2 && onOpenExport && (
@@ -237,7 +237,7 @@ export const ValueWithContextViewer: FC<Props> = ({
                         )
                       }
                       className={clsx(
-                        "transition cursor-pointer",
+                        "cursor-pointer transition",
                         isRootImport
                           ? "text-violet-400 hover:!text-violet-900 group-hover:text-violet-500 group-focus:text-violet-600"
                           : "text-slate-200 hover:!text-slate-900 group-hover:text-slate-400 group-focus:text-slate-400"
diff --git a/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx b/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx
index 4ac3b1e5fe..c7de1d4384 100644
--- a/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx
+++ b/packages/components/src/components/SquiggleViewer/ZoomedInNavigation.tsx
@@ -12,7 +12,7 @@ export const ZoomedInNavigationItem: FC<{
   <div className="flex items-center">
     <span
       onClick={onClick}
-      className="text-sm text-stone-500 hover:text-stone-900 hover:underline font-mono cursor-pointer"
+      className="cursor-pointer font-mono text-sm text-stone-500 hover:text-stone-900 hover:underline"
     >
       {text}
     </span>
diff --git a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx
index 7c7dd77f57..286b90ed21 100644
--- a/packages/components/src/components/ViewerWithMenuBar/Layout.tsx
+++ b/packages/components/src/components/ViewerWithMenuBar/Layout.tsx
@@ -13,7 +13,7 @@ export const Layout: FC<{
     <div className="flex flex-col overflow-y-auto">
       <div
         className={clsx(
-          `flex justify-between items-center h-8 mb-1`,
+          `mb-1 flex h-8 items-center justify-between`,
           `px-${xPadding}`
         )}
       >
diff --git a/packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx b/packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx
index c95e603a6c..587173ae9c 100644
--- a/packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx
+++ b/packages/components/src/components/ViewerWithMenuBar/RandomizeSeedButton.tsx
@@ -61,7 +61,7 @@ export const RandomizeSeedButton: FC<{
       placement="bottom"
       offset={5}
     >
-      <div className="ml-1 px-1 cursor-pointer group" onClick={randomizeSeed}>
+      <div className="group ml-1 cursor-pointer px-1" onClick={randomizeSeed}>
         <DiceIcon
           side={stringToRandomNumber(seed)}
           isSimulating={isSimulating}
diff --git a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx
index f47319685b..d97deaa5b7 100644
--- a/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx
+++ b/packages/components/src/components/ViewerWithMenuBar/SimulatingIndicator.tsx
@@ -16,7 +16,7 @@ export const SimulatingIndicator: FC<{
   return (
     <div
       className={clsx(
-        "text-sm whitespace-nowrap",
+        "whitespace-nowrap text-sm",
         _isSimulating ? "text-zinc-200" : "text-zinc-400"
       )}
     >
diff --git a/packages/components/src/components/ViewerWithMenuBar/ViewerBody.tsx b/packages/components/src/components/ViewerWithMenuBar/ViewerBody.tsx
index 4f909f5db8..14217c714a 100644
--- a/packages/components/src/components/ViewerWithMenuBar/ViewerBody.tsx
+++ b/packages/components/src/components/ViewerWithMenuBar/ViewerBody.tsx
@@ -52,7 +52,7 @@ export const ViewerBody = forwardRef<SquiggleViewerHandle, Props>(
       return (
         <div className="relative">
           {isSimulating && (
-            <div className="absolute z-10 inset-0 bg-white opacity-50" />
+            <div className="absolute inset-0 z-10 bg-white opacity-50" />
           )}
           {
             <SquiggleViewerWithoutProvider
diff --git a/packages/components/src/components/ui/Alert.tsx b/packages/components/src/components/ui/Alert.tsx
index 0b91166181..10fc68e4f3 100644
--- a/packages/components/src/components/ui/Alert.tsx
+++ b/packages/components/src/components/ui/Alert.tsx
@@ -30,7 +30,7 @@ export const Alert: React.FC<{
     >
       <div className="flex">
         <Icon
-          className={clsx("h-4 w-4 flex-shrink-0 mt-1 ml-1", iconColor)}
+          className={clsx("ml-1 mt-1 h-4 w-4 flex-shrink-0", iconColor)}
           aria-hidden="true"
         />
         <div className="ml-3 grow">
diff --git a/packages/components/src/components/ui/ErrorBoundary.tsx b/packages/components/src/components/ui/ErrorBoundary.tsx
index ef91bd7f08..98c3e5cbe8 100644
--- a/packages/components/src/components/ui/ErrorBoundary.tsx
+++ b/packages/components/src/components/ui/ErrorBoundary.tsx
@@ -18,11 +18,11 @@ export class ErrorBoundary extends Component<PropsWithChildren, State> {
   public override render() {
     if (this.state.error) {
       return (
-        <div className="m-2 p-4 bg-red-300 rounded">
+        <div className="m-2 rounded bg-red-300 p-4">
           <header className="mb-2 font-semibold">Fatal Error</header>
           <div className="mb-2">{this.state.error.message}</div>
           <div className="mb-2">Try reloading the browser.</div>
-          <pre className="text-xs overflow-auto">{this.state.error.stack}</pre>
+          <pre className="overflow-auto text-xs">{this.state.error.stack}</pre>
         </div>
       );
     }
diff --git a/packages/components/src/components/ui/FnDocumentation.tsx b/packages/components/src/components/ui/FnDocumentation.tsx
index 15086a6a66..17a9d083e6 100644
--- a/packages/components/src/components/ui/FnDocumentation.tsx
+++ b/packages/components/src/components/ui/FnDocumentation.tsx
@@ -88,7 +88,7 @@ export const FnDocumentation: FC<{
               target="_blank"
               rel="noreferrer"
               className={clsx(
-                "text-blue-500 hover:underline leading-none",
+                "leading-none text-blue-500 hover:underline",
                 size === "small" ? "text-sm" : "text-md"
               )}
             >
@@ -117,7 +117,7 @@ export const FnDocumentation: FC<{
             {shorthand && (
               <div className={clsx("bg-orange-100 text-gray-500", tagCss)}>
                 {`${shorthand.type}:  `}
-                <span className="font-mono ml-2 text-orange-800">
+                <span className="ml-2 font-mono text-orange-800">
                   {shorthand.symbol}
                 </span>
               </div>
@@ -152,12 +152,12 @@ export const FnDocumentation: FC<{
       ) : null}
       {definitions ? (
         <Section>
-          <header className={clsx("text-slate-600 font-medium mb-2", textSize)}>
+          <header className={clsx("mb-2 font-medium text-slate-600", textSize)}>
             Signatures
           </header>
           <div
             className={clsx(
-              "text-slate-600 font-mono p-2 bg-slate-100 rounded-md space-y-2",
+              "space-y-2 rounded-md bg-slate-100 p-2 font-mono text-slate-600",
               textSize
             )}
           >
@@ -171,14 +171,14 @@ export const FnDocumentation: FC<{
       ) : null}
       {examples?.length ? (
         <Section>
-          <header className={clsx("text-slate-600 font-medium mb-2", textSize)}>
+          <header className={clsx("mb-2 font-medium text-slate-600", textSize)}>
             Examples
           </header>
 
           {examples &&
             examples.map(({ text, isInteractive }, i) =>
               isInteractive ? (
-                <div className="pt-2 pb-4" key={i}>
+                <div className="pb-4 pt-2" key={i}>
                   <SquiggleEditor
                     defaultCode={text}
                     editorFontSize={size === "small" ? 12 : 13}
diff --git a/packages/components/src/components/ui/FormSection.tsx b/packages/components/src/components/ui/FormSection.tsx
index 853ecc0f3e..aa4f0d8707 100644
--- a/packages/components/src/components/ui/FormSection.tsx
+++ b/packages/components/src/components/ui/FormSection.tsx
@@ -5,7 +5,7 @@ export const FormSection: React.FC<{
   children: React.ReactNode;
 }> = ({ title, children }) => (
   <div>
-    <header className="text-md leading-4 font-medium text-slate-600">
+    <header className="text-md font-medium leading-4 text-slate-600">
       {title}
     </header>
     <div className="mt-4">{children}</div>
diff --git a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx
index 15a7997101..e2b35535a9 100644
--- a/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx
+++ b/packages/components/src/components/ui/PanelWithToolbar/ToolbarItem.tsx
@@ -31,7 +31,7 @@ export const ToolbarItem: FC<Props> = ({
   const main = (
     <div
       className={clsx(
-        "flex items-center text-slate-600 space-x-1 text-sm px-4 h-full cursor-pointer hover:bg-slate-200 select-none whitespace-nowrap transition ",
+        "flex h-full cursor-pointer select-none items-center space-x-1 whitespace-nowrap px-4 text-sm text-slate-600 transition hover:bg-slate-200 ",
         className
       )}
       onClick={onClick}
diff --git a/packages/components/src/components/ui/PanelWithToolbar/index.tsx b/packages/components/src/components/ui/PanelWithToolbar/index.tsx
index 5673626d02..b26128b057 100644
--- a/packages/components/src/components/ui/PanelWithToolbar/index.tsx
+++ b/packages/components/src/components/ui/PanelWithToolbar/index.tsx
@@ -36,32 +36,32 @@ export function PanelWithToolbar<const ModalNames extends string[]>({
 
   //We want to center the title, so need similarly-widthed items on either side
   const modalHeader = modal && (
-    <div className="h-full flex gap-2">
+    <div className="flex h-full gap-2">
       <ToolbarItem
-        className="flex-grow-0 flex-shrink-0 w-20"
+        className="w-20 flex-shrink-0 flex-grow-0"
         onClick={closeModal}
       >
         &larr; Back
       </ToolbarItem>
-      <div className="flex-grow flex-shrink text-center self-center text-sm text-slate-600 font-semibold">
+      <div className="flex-shrink flex-grow self-center text-center text-sm font-semibold text-slate-600">
         {modal.title}
       </div>
-      <div className="flex-grow-0 flex-shrink-0 w-20 invisible"></div>
+      <div className="invisible w-20 flex-shrink-0 flex-grow-0"></div>
     </div>
   );
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="h-8 bg-slate-50 border-b border-slate-200 overflow-hidden mb-1 px-4">
+    <div className="flex h-full flex-col">
+      <div className="mb-1 h-8 overflow-hidden border-b border-slate-200 bg-slate-50 px-4">
         {modal ? (
           modalHeader
         ) : (
-          <div className="h-full grid place-items-stretch">
+          <div className="grid h-full place-items-stretch">
             {renderToolbar({ openModal })}
           </div>
         )}
       </div>
-      <div className="flex-1 grid place-items-stretch overflow-auto">
+      <div className="grid flex-1 place-items-stretch overflow-auto">
         {modal ? <div className="px-4 py-4"> {modal.body} </div> : renderBody()}
       </div>
     </div>
diff --git a/packages/components/src/components/ui/SquiggleErrorAlert.tsx b/packages/components/src/components/ui/SquiggleErrorAlert.tsx
index 63e4119966..47364a4aec 100644
--- a/packages/components/src/components/ui/SquiggleErrorAlert.tsx
+++ b/packages/components/src/components/ui/SquiggleErrorAlert.tsx
@@ -26,7 +26,7 @@ const LocationLine: FC<{
 
   return (
     <span
-      className={clsx(editor && "cursor-pointer hover:underline text-blue-500")}
+      className={clsx(editor && "cursor-pointer text-blue-500 hover:underline")}
       onClick={editor ? findInEditor : undefined}
     >
       line {location.start.line}, column {location.start.column}
@@ -39,7 +39,7 @@ const WithHeader: FC<PropsWithChildren<{ header: string }>> = ({
   children,
 }) => (
   <div>
-    <div className="text-sm font-medium mb-1 text-gray-700">{header}</div>
+    <div className="mb-1 text-sm font-medium text-gray-700">{header}</div>
     <div className="ml-1">{children}</div>
   </div>
 );
@@ -49,7 +49,7 @@ const StackTraceFrame: FC<{ frame: SqFrame }> = ({ frame }) => {
   const name = frame.name();
   return (
     <>
-      <div className="text-gray-500 font-mono font-medium truncate">{name}</div>
+      <div className="truncate font-mono font-medium text-gray-500">{name}</div>
       <div>{location && <LocationLine location={location} />}</div>
     </>
   );
diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx
index 9f067761db..0c959794ba 100644
--- a/packages/components/src/components/ui/Toggle.tsx
+++ b/packages/components/src/components/ui/Toggle.tsx
@@ -24,18 +24,18 @@ export const Toggle: React.FC<Props> = ({
     <div onClick={() => onChange(!status)}>
       <div
         className={clsx(
-          "flex items-center gap-1 text-slate-800 text-sm px-2 py-2 cursor-pointer rounded-sm hover:bg-slate-200 select-none whitespace-nowrap"
+          "flex cursor-pointer select-none items-center gap-1 whitespace-nowrap rounded-sm px-2 py-2 text-sm text-slate-800 hover:bg-slate-200"
         )}
       >
         <div className="relative" key={String(spinIcon)}>
           <CurrentIcon
             className={clsx(
-              "w-6 h-6 opacity-100 relative",
+              "relative h-6 w-6 opacity-100",
               spinIcon && "animate-hide"
             )}
           />
           {spinIcon && (
-            <RefreshIcon className="w-6 h-6 absolute top-0 opacity-0 animate-appear-and-spin" />
+            <RefreshIcon className="animate-appear-and-spin absolute top-0 h-6 w-6 opacity-0" />
           )}
         </div>
         <span>{status ? onText : offText}</span>
diff --git a/packages/components/src/lib/MarkdownViewer.tsx b/packages/components/src/lib/MarkdownViewer.tsx
index 5c33b9ed5a..82571e5dbc 100644
--- a/packages/components/src/lib/MarkdownViewer.tsx
+++ b/packages/components/src/lib/MarkdownViewer.tsx
@@ -122,7 +122,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
       components={{
         pre({ children }) {
           return (
-            <pre className="rounded bg-slate-50 p-2 my-1 not-prose text-[.9em]">
+            <pre className="not-prose my-1 rounded bg-slate-50 p-2 text-[.9em]">
               {children}
             </pre>
           );
@@ -135,7 +135,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
             return (
               <code
                 {...rest}
-                className="not-prose border-black border border-opacity-[0.04] bg-opacity-[0.03] bg-black px-1 py-0.5 rounded-sm break-words font-mono text-[.9em]"
+                className="not-prose break-words rounded-sm border border-black border-opacity-[0.04] bg-black bg-opacity-[0.03] px-1 py-0.5 font-mono text-[.9em]"
               >
                 {children}
               </code>
diff --git a/packages/components/src/stories/SquigglePlayground.stories.tsx b/packages/components/src/stories/SquigglePlayground.stories.tsx
index cac3455a5b..4605fcb281 100644
--- a/packages/components/src/stories/SquigglePlayground.stories.tsx
+++ b/packages/components/src/stories/SquigglePlayground.stories.tsx
@@ -104,7 +104,7 @@ export const WithExtraControls: Story = {
     defaultCode: "normal(5,2)",
     height: undefined,
     renderExtraControls: ({ openModal }) => (
-      <div className="ml-2 h-full flex items-center">
+      <div className="ml-2 flex h-full items-center">
         <Button size="small" onClick={() => openModal("extra")}>
           Extra modal
         </Button>
diff --git a/packages/components/src/widgets/ArrayWidget.tsx b/packages/components/src/widgets/ArrayWidget.tsx
index 4b10c2a283..5f60f0bb81 100644
--- a/packages/components/src/widgets/ArrayWidget.tsx
+++ b/packages/components/src/widgets/ArrayWidget.tsx
@@ -24,7 +24,7 @@ widgetRegistry.register("Array", {
   Chart: (value) => {
     const values = useMemo(() => value.value.getValues(), [value]);
     return (
-      <div className="space-y-1 pt-0.5 mt-0.5">
+      <div className="mt-0.5 space-y-1 pt-0.5">
         {values.map((r, i) => (
           <ValueViewer
             parentValue={value}
diff --git a/packages/components/src/widgets/BoolWidget.tsx b/packages/components/src/widgets/BoolWidget.tsx
index e84b3b0557..392579fa82 100644
--- a/packages/components/src/widgets/BoolWidget.tsx
+++ b/packages/components/src/widgets/BoolWidget.tsx
@@ -3,7 +3,7 @@ import { widgetRegistry } from "./registry.js";
 widgetRegistry.register("Bool", {
   Preview: (value) => value.value.toString(),
   Chart: (value) => (
-    <div className="text-indigo-800 text-sm font-mono font-semibold">
+    <div className="font-mono text-sm font-semibold text-indigo-800">
       {value.value.toString()}
     </div>
   ),
diff --git a/packages/components/src/widgets/CalculatorWidget/Calculator.tsx b/packages/components/src/widgets/CalculatorWidget/Calculator.tsx
index a5982956e3..05d71cafde 100644
--- a/packages/components/src/widgets/CalculatorWidget/Calculator.tsx
+++ b/packages/components/src/widgets/CalculatorWidget/Calculator.tsx
@@ -245,11 +245,11 @@ export const Calculator: FC<Props> = ({ settings, valueWithContext }) => {
 
   return (
     <FormProvider {...form}>
-      <div className="border border-slate-200 rounded-sm max-w-4xl mx-auto">
+      <div className="mx-auto max-w-4xl rounded-sm border border-slate-200">
         {hasTitleOrDescription && (
-          <div className="py-3 px-5 border-b border-slate-200 bg-slate-100 max-w-4xl">
+          <div className="max-w-4xl border-b border-slate-200 bg-slate-100 px-5 py-3">
             {calculator.title && (
-              <div className="text-lg text-slate-900 font-semibold mb-1">
+              <div className="mb-1 text-lg font-semibold text-slate-900">
                 {calculator.title}
               </div>
             )}
@@ -264,7 +264,7 @@ export const Calculator: FC<Props> = ({ settings, valueWithContext }) => {
         )}
 
         {Boolean(calculator.inputs.length) && (
-          <div className="py-3 px-5 border-b border-slate-200 bg-gray-50 space-y-3">
+          <div className="space-y-3 border-b border-slate-200 bg-gray-50 px-5 py-3">
             {calculator.inputs.map((row, i) => (
               <CalculatorInput
                 key={i}
diff --git a/packages/components/src/widgets/CalculatorWidget/CalculatorInput.tsx b/packages/components/src/widgets/CalculatorWidget/CalculatorInput.tsx
index f2914e5f93..6cbb5efdfe 100644
--- a/packages/components/src/widgets/CalculatorWidget/CalculatorInput.tsx
+++ b/packages/components/src/widgets/CalculatorWidget/CalculatorInput.tsx
@@ -30,7 +30,7 @@ export const CalculatorInput: FC<{
 
   return (
     <div className="flex flex-col">
-      <div className="flex-grow max-w-sm">
+      <div className="max-w-sm flex-grow">
         {input.tag === "text" && (
           <TextFormField
             {...commonProps}
diff --git a/packages/components/src/widgets/CalculatorWidget/CalculatorResult.tsx b/packages/components/src/widgets/CalculatorWidget/CalculatorResult.tsx
index 11e51057ce..6ed4992f92 100644
--- a/packages/components/src/widgets/CalculatorWidget/CalculatorResult.tsx
+++ b/packages/components/src/widgets/CalculatorWidget/CalculatorResult.tsx
@@ -71,7 +71,7 @@ export const CalculatorResult: FC<Props> = ({
   }, [updateSavedState, calculator, calculatorResult]);
 
   return (
-    <div className="py-3 px-5">
+    <div className="px-5 py-3">
       {!autorun && (
         <div className="mb-3">
           <Button size="small" onClick={runCalculator} theme="primary">
@@ -81,7 +81,7 @@ export const CalculatorResult: FC<Props> = ({
       )}
       {calculatorResult ? (
         <div>
-          <div className="text-sm font-semibold text-gray-700 mb-2">Result</div>
+          <div className="mb-2 text-sm font-semibold text-gray-700">Result</div>
           <SquiggleValueResultChart
             result={calculatorResult}
             settings={settings}
diff --git a/packages/components/src/widgets/DictWidget.tsx b/packages/components/src/widgets/DictWidget.tsx
index 936f825606..f16ef4f4ec 100644
--- a/packages/components/src/widgets/DictWidget.tsx
+++ b/packages/components/src/widgets/DictWidget.tsx
@@ -16,7 +16,7 @@ widgetRegistry.register("Dict", {
   Chart: (value) => {
     const entries = useMemo(() => nonHiddenDictEntries(value.value), [value]);
     return (
-      <div className="space-y-1 pt-0.5 mt-0.5">
+      <div className="mt-0.5 space-y-1 pt-0.5">
         {entries.map(([k, v]) => (
           <ValueViewer parentValue={value} key={k} value={v} />
         ))}
diff --git a/packages/components/src/widgets/DistWidget/DistributionsChart.tsx b/packages/components/src/widgets/DistWidget/DistributionsChart.tsx
index b2bc1658bc..0130e54ad3 100644
--- a/packages/components/src/widgets/DistWidget/DistributionsChart.tsx
+++ b/packages/components/src/widgets/DistWidget/DistributionsChart.tsx
@@ -432,20 +432,20 @@ const InnerDistributionsChart: FC<{
         discreteTooltip ? (
           <div
             className={clsx(
-              "bg-white border border-gray-300 rounded text-xs p-2 grid gap-x-2"
+              "grid gap-x-2 rounded border border-gray-300 bg-white p-2 text-xs"
             )}
             style={{
               gridTemplateColumns: "min-content min-content",
             }}
           >
-            <div className="text-gray-500 text-right">Value:</div>
+            <div className="text-right text-gray-500">Value:</div>
             <div>
               {xScale.tickFormat(
                 undefined,
                 plot.xScale.tickFormat
               )(discreteTooltip.value)}
             </div>
-            <div className="text-gray-500 text-right">Probability:</div>
+            <div className="text-right text-gray-500">Probability:</div>
             <div>
               {yScale.tickFormat(
                 undefined,
@@ -537,7 +537,7 @@ export const DistributionsChart: FC<DistributionsChartProps> = ({
             )}] are not valid probability distributions, because their integrals do not add up to 1.`;
     return (
       <TextTooltip text={message} placement="top">
-        <div className="font-semibold text-xs text-orange-900 bg-orange-100 rounded-md px-1.5 py-0.5 w-fit ml-2">
+        <div className="ml-2 w-fit rounded-md bg-orange-100 px-1.5 py-0.5 text-xs font-semibold text-orange-900">
           Not Normalized
         </div>
       </TextTooltip>
diff --git a/packages/components/src/widgets/DistWidget/SummaryTable.tsx b/packages/components/src/widgets/DistWidget/SummaryTable.tsx
index 83488661ad..e0b97b4747 100644
--- a/packages/components/src/widgets/DistWidget/SummaryTable.tsx
+++ b/packages/components/src/widgets/DistWidget/SummaryTable.tsx
@@ -107,18 +107,18 @@ export const SummaryTable: FC<SummaryTableProps> = ({
     } else {
       return (
         <TextTooltip text={x.value.toString()}>
-          <XIcon className="w-5 h-5 text-gray-500" />
+          <XIcon className="h-5 w-5 text-gray-500" />
         </TextTooltip>
       );
     }
   };
 
   return (
-    <div className="overflow-x-auto relative">
+    <div className="relative overflow-x-auto">
       <table className="w-full text-left font-light">
         <thead
           className={clsx(
-            "font-light border-b border-slate-200 text-slate-700",
+            "border-b border-slate-200 font-light text-slate-700",
             sizeIsLarge ? "text-sm" : "text-xs"
           )}
         >
diff --git a/packages/components/src/widgets/DistWidget/index.tsx b/packages/components/src/widgets/DistWidget/index.tsx
index 977eb57b8b..9bbe4f45b2 100644
--- a/packages/components/src/widgets/DistWidget/index.tsx
+++ b/packages/components/src/widgets/DistWidget/index.tsx
@@ -41,7 +41,7 @@ widgetRegistry.register("Dist", {
     return oneValue ? (
       showNumber(p05)
     ) : (
-      <div className="flex flex-row space-x-2 items-center">
+      <div className="flex flex-row items-center space-x-2">
         <div className="flex">
           {showNumber(p05)}
           <span className="mx-1 opacity-60">to</span>
diff --git a/packages/components/src/widgets/LambdaWidget/FunctionChart/AutomaticFunctionChart.tsx b/packages/components/src/widgets/LambdaWidget/FunctionChart/AutomaticFunctionChart.tsx
index 75c1ffe965..251847fceb 100644
--- a/packages/components/src/widgets/LambdaWidget/FunctionChart/AutomaticFunctionChart.tsx
+++ b/packages/components/src/widgets/LambdaWidget/FunctionChart/AutomaticFunctionChart.tsx
@@ -37,7 +37,7 @@ const FunctionCallErrorAlert: FC<{ error: SqError }> = ({ error }) => {
     <MessageAlert heading="Function Display Failed">
       <div className="space-y-2">
         <span
-          className="underline decoration-dashed cursor-pointer"
+          className="cursor-pointer underline decoration-dashed"
           onClick={() => setExpanded(!expanded)}
         >
           {expanded ? "Hide" : "Show"} error details
diff --git a/packages/components/src/widgets/LambdaWidget/FunctionChart/DistFunctionChart.tsx b/packages/components/src/widgets/LambdaWidget/FunctionChart/DistFunctionChart.tsx
index 6400facb9a..e45f8674e8 100644
--- a/packages/components/src/widgets/LambdaWidget/FunctionChart/DistFunctionChart.tsx
+++ b/packages/components/src/widgets/LambdaWidget/FunctionChart/DistFunctionChart.tsx
@@ -299,7 +299,7 @@ export const DistFunctionChart: FC<FunctionChart1DistProps> = ({
         <div className={tailwindSelector}>
           <div
             ref={refs.setFloating}
-            className="z-30 rounded-md bg-white shadow-lg border"
+            className="z-30 rounded-md border bg-white shadow-lg"
             style={{
               position: strategy,
               top: y ?? 0,
diff --git a/packages/components/src/widgets/PlotWidget/PlotTitle.tsx b/packages/components/src/widgets/PlotWidget/PlotTitle.tsx
index 2ca6feb1fe..864e901e02 100644
--- a/packages/components/src/widgets/PlotWidget/PlotTitle.tsx
+++ b/packages/components/src/widgets/PlotWidget/PlotTitle.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 
 export const PlotTitle: FC<{ title: string }> = ({ title }) => {
   return (
-    <div className="text-center font-semibold text-slate-700 text-sm">
+    <div className="text-center text-sm font-semibold text-slate-700">
       {title}
     </div>
   );
diff --git a/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/RelativeValueCell.tsx b/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/RelativeValueCell.tsx
index db56396c76..c412575af2 100644
--- a/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/RelativeValueCell.tsx
+++ b/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/RelativeValueCell.tsx
@@ -77,20 +77,20 @@ export const RelativeValueCell: FC<{
   showMedian,
 }) {
   return hasInvalid(item) ? (
-    <div className="h-full pt-[1px] min-h-[2em] relative bg-gray-300 bg-opacity-30">
-      <div className="text-center z-0 p-4 text-gray-500">Error</div>
+    <div className="relative h-full min-h-[2em] bg-gray-300 bg-opacity-30 pt-[1px]">
+      <div className="z-0 p-4 text-center text-gray-500">Error</div>
     </div>
   ) : (
     <div
       className={clsx(
-        "h-full pt-[1px] min-h-[2em] relative",
+        "relative h-full min-h-[2em] pt-[1px]",
         numberToColor2(item.uncertainty, uncertaintyPercentiles)
       )}
     >
-      <div className="text-center z-0 py-1">
+      <div className="z-0 py-1 text-center">
         <div>
           {showMedian && (
-            <span className="text-slate-700 text-lg font-semibold">
+            <span className="text-lg font-semibold text-slate-700">
               <NumberShower number={item.median} precision={1} />
             </span>
           )}
@@ -100,7 +100,7 @@ export const RelativeValueCell: FC<{
                 {" "}
                 <span
                   style={{ fontSize: "0.7em" }}
-                  className="text-gray-400 font-light"
+                  className="font-light text-gray-400"
                 >
                   ±
                 </span>{" "}
@@ -135,7 +135,7 @@ export const RelativeValueCell: FC<{
         {showRange && (
           <div
             style={{ fontSize: "0.7em" }}
-            className="text-gray-400 font-light"
+            className="font-light text-gray-400"
           >
             {item.min < 0 && item.max < 0 ? (
               <span>
@@ -153,7 +153,7 @@ export const RelativeValueCell: FC<{
         )}
       </div>
 
-      <div className="h-2 absolute bottom-0 inset-x-0 -z-10"></div>
+      <div className="absolute inset-x-0 bottom-0 -z-10 h-2"></div>
     </div>
   );
 });
diff --git a/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/index.tsx b/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/index.tsx
index b40223aea7..7752a33c2b 100644
--- a/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/index.tsx
+++ b/packages/components/src/widgets/PlotWidget/RelativeValuesGridChart/index.tsx
@@ -28,8 +28,8 @@ const CellBox: FC<PropsWithChildren<{ header?: boolean }>> = ({
 }) => (
   <div
     className={clsx(
-      "border-t border-l border-gray-200 h-full",
-      header && "bg-gray-50 top-0 left-0 z-10"
+      "h-full border-l border-t border-gray-200",
+      header && "left-0 top-0 z-10 bg-gray-50"
     )}
   >
     {children}
@@ -45,7 +45,7 @@ const ErrorCell: FC = () => {
 };
 
 const Header: FC<{ text: string }> = ({ text }) => (
-  <div className="p-2 text-xs break-all">{text}</div>
+  <div className="break-all p-2 text-xs">{text}</div>
 );
 
 const Cell: FC<{
@@ -114,7 +114,7 @@ export const RelativeValuesGridChart: FC<Props> = ({ plot, environment }) => {
         </div>
       )}
       <div
-        className="grid w-fit border-r border-b border-gray-200"
+        className="grid w-fit border-b border-r border-gray-200"
         style={{
           gridTemplateColumns: `repeat(${ids.length + 1}, 140px)`,
         }}
diff --git a/packages/components/src/widgets/SpecificationWidget.tsx b/packages/components/src/widgets/SpecificationWidget.tsx
index dcd9954f23..3c04bee456 100644
--- a/packages/components/src/widgets/SpecificationWidget.tsx
+++ b/packages/components/src/widgets/SpecificationWidget.tsx
@@ -45,10 +45,10 @@ const SpecificationDropdownContent: FC<{
     <div className="px-3 py-2">
       <SpecificationView specification={specification} />
       <div>
-        <div className="mt-5 mb-2">
+        <div className="mb-2 mt-5">
           <div
             className={clsx(
-              "rounded-sm px-2 py-0.5 inline-flex font-medium text-sm items-center space-x-2",
+              "inline-flex items-center space-x-2 rounded-sm px-2 py-0.5 text-sm font-medium",
               hasError
                 ? "bg-red-100 text-red-900"
                 : "bg-green-100 text-green-900"
@@ -59,12 +59,12 @@ const SpecificationDropdownContent: FC<{
           </div>
         </div>
         {specificationStatus.type === "load-error" && (
-          <div className="text-red-700 text-xs">
+          <div className="text-xs text-red-700">
             <SquiggleErrorAlert error={specificationStatus.error} />
           </div>
         )}
         {specificationStatus.type === "validation-failure" && (
-          <div className="text-red-700 text-xs">
+          <div className="text-xs text-red-700">
             {specificationStatus.error}
           </div>
         )}
@@ -103,11 +103,11 @@ const SpecificationView: FC<{ specification: SqSpecification }> = ({
 }) => {
   return (
     <div>
-      <div className="flex space-x-1.5 items-center text-green-800 opacity-80 mb-3">
+      <div className="mb-3 flex items-center space-x-1.5 text-green-800 opacity-80">
         <CubeTransparentIcon className="flex" size={16} />
         <span className="flex text-xs">Specification</span>
       </div>
-      <div className="font-medium text-green-900 mb-1">
+      <div className="mb-1 font-medium text-green-900">
         {specification.name}
       </div>
       {specification.documentation && (
@@ -126,7 +126,7 @@ const SpecificationStatusPreview: FC<{
   return (
     <div
       className={clsx(
-        "rounded-sm cursor-pointer transition px-0.5 flex flex-row items-center space-x-1.5",
+        "flex cursor-pointer flex-row items-center space-x-1.5 rounded-sm px-0.5 transition",
         hasError
           ? "bg-red-100 hover:bg-red-300"
           : "bg-green-100 hover:bg-green-300"
@@ -151,7 +151,7 @@ const SpecificationStatusPreview: FC<{
 widgetRegistry.register("Specification", {
   Preview: () => <CubeTransparentIcon className="text-green-700" size={14} />,
   Chart: (value) => (
-    <div className="py-3 px-2">
+    <div className="px-2 py-3">
       <SpecificationView specification={value.value} />
     </div>
   ),
diff --git a/packages/components/src/widgets/StringWidget.tsx b/packages/components/src/widgets/StringWidget.tsx
index 8a95762ad4..e971ce9b88 100644
--- a/packages/components/src/widgets/StringWidget.tsx
+++ b/packages/components/src/widgets/StringWidget.tsx
@@ -5,12 +5,12 @@ import { truncateStr } from "./utils.js";
 
 widgetRegistry.register("String", {
   Preview: (value) => (
-    <div className="overflow-ellipsis overflow-hidden">
+    <div className="overflow-hidden overflow-ellipsis">
       {truncateStr(value.value, SHORT_STRING_LENGTH)}
     </div>
   ),
   Chart: (value) => (
-    <div className="px-1 py-0.5 my-1 max-w-4xl">
+    <div className="my-1 max-w-4xl px-1 py-0.5">
       <MarkdownViewer md={value.value} textColor="prose-stone" textSize="sm" />
     </div>
   ),
diff --git a/packages/components/src/widgets/TableChartWidget.tsx b/packages/components/src/widgets/TableChartWidget.tsx
index 27a43a4c39..d4bfa56b90 100644
--- a/packages/components/src/widgets/TableChartWidget.tsx
+++ b/packages/components/src/widgets/TableChartWidget.tsx
@@ -11,7 +11,7 @@ import { widgetRegistry } from "./registry.js";
 
 widgetRegistry.register("TableChart", {
   Preview: (value) => (
-    <div className="items-center flex space-x-1">
+    <div className="flex items-center space-x-1">
       <TableCellsIcon size={14} className="flex opacity-60" />
       <div>
         {value.value.rowCount}
@@ -61,13 +61,13 @@ widgetRegistry.register("TableChart", {
 
     return (
       <div>
-        <div className="relative rounded-md overflow-hidden border border-stone-200 mt-0.5">
+        <div className="relative mt-0.5 overflow-hidden rounded-md border border-stone-200">
           <table
-            className="table-fixed w-full"
+            className="w-full table-fixed"
             style={{ minWidth: columnLength * 100 }}
           >
             {hasColumnNames && (
-              <thead className="text-sm text-stone-500 bg-stone-50 border-b border-stone-200 break-words">
+              <thead className="break-words border-b border-stone-200 bg-stone-50 text-sm text-stone-500">
                 <tr>
                   {Array.from({ length: columnLength }, (_, i) => (
                     <th
@@ -96,8 +96,8 @@ widgetRegistry.register("TableChart", {
                         }
                       }}
                       className={clsx(
-                        "px-1 overflow-hidden",
-                        k !== 0 && "border-stone-100 border-l",
+                        "overflow-hidden px-1",
+                        k !== 0 && "border-l border-stone-100",
                         "focus:bg-blue-50"
                       )}
                     >
diff --git a/packages/components/src/widgets/VoidWidget.tsx b/packages/components/src/widgets/VoidWidget.tsx
index cbdcc090c8..6cae4657d3 100644
--- a/packages/components/src/widgets/VoidWidget.tsx
+++ b/packages/components/src/widgets/VoidWidget.tsx
@@ -2,5 +2,5 @@ import { widgetRegistry } from "./registry.js";
 
 widgetRegistry.register("Void", {
   Preview: () => "Empty value",
-  Chart: () => <div className="italic text-slate-400 text-sm">Empty value</div>,
+  Chart: () => <div className="text-sm italic text-slate-400">Empty value</div>,
 });
diff --git a/packages/hub/src/app/RootLayout.tsx b/packages/hub/src/app/RootLayout.tsx
index 02a6fc13b8..38687c2f70 100644
--- a/packages/hub/src/app/RootLayout.tsx
+++ b/packages/hub/src/app/RootLayout.tsx
@@ -30,13 +30,13 @@ const InnerRootLayout: FC<PropsWithChildren> = ({ children }) => {
   const showFooter = !isModelRoute(pathname);
 
   return (
-    <div className={"min-h-screen flex flex-col bg-white"}>
+    <div className={"flex min-h-screen flex-col bg-white"}>
       <PageMenu queryRef={queryData} />
       <div
         // This allows us to center children vertically if necessary, e.g. in `not-found.tsx`.
         // Note that setting `height: 100%` instead of `flex-1` on children won't work;
         // see https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height for details.
-        className="flex-1 flex flex-col"
+        className="flex flex-1 flex-col"
       >
         {children}
       </div>
diff --git a/packages/hub/src/app/admin/layout.tsx b/packages/hub/src/app/admin/layout.tsx
index e0cae9092e..c038a2b828 100644
--- a/packages/hub/src/app/admin/layout.tsx
+++ b/packages/hub/src/app/admin/layout.tsx
@@ -23,7 +23,7 @@ export default async function AdminLayout({ children }: PropsWithChildren) {
     <div>
       <div className="bg-red-200 p-4">
         <H1>
-          <div className="flex gap-1 items-center">
+          <div className="flex items-center gap-1">
             <LockIcon />
             <span>Admin console</span>
           </div>
diff --git a/packages/hub/src/app/admin/upgrade-versions/UpgradeVersionsPage.tsx b/packages/hub/src/app/admin/upgrade-versions/UpgradeVersionsPage.tsx
index 19ac93bb0a..84909e4cec 100644
--- a/packages/hub/src/app/admin/upgrade-versions/UpgradeVersionsPage.tsx
+++ b/packages/hub/src/app/admin/upgrade-versions/UpgradeVersionsPage.tsx
@@ -126,7 +126,7 @@ const ModelList: FC<{ modelsRef: UpgradeVersionsPage_List$key }> = ({
 
   return (
     <div>
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <div>
           Model:{" "}
           <StyledLink
@@ -249,7 +249,7 @@ export const UpgradeVersionsPage: FC<{
           </strong>
         </p>
       </div>
-      <div className="text-sm mt-2">
+      <div className="mt-2 text-sm">
         <div>Dev models: {devCount}</div>
         <div>
           {defaultSquiggleVersion} models: {latestCount}
diff --git a/packages/hub/src/app/benchmarks/page.tsx b/packages/hub/src/app/benchmarks/page.tsx
index f4b4b5b5b3..c86e35069d 100644
--- a/packages/hub/src/app/benchmarks/page.tsx
+++ b/packages/hub/src/app/benchmarks/page.tsx
@@ -111,12 +111,12 @@ const Benchmark: FC<{ version: SquiggleVersion; code: string }> = ({
   }, [run]);
 
   return (
-    <div className="grid grid-cols-subgrid col-span-2">
-      <div className="text-slate-700 font-medium">{version}</div>
+    <div className="col-span-2 grid grid-cols-subgrid">
+      <div className="font-medium text-slate-700">{version}</div>
       {isProcessing ? (
-        <RefreshIcon className="text-slate-500 animate-spin" />
+        <RefreshIcon className="animate-spin text-slate-500" />
       ) : outcome ? (
-        <div className="flex gap-1 items-center">
+        <div className="flex items-center gap-1">
           {outcome.ok ? (
             <CheckIcon className="text-green-700" />
           ) : (
diff --git a/packages/hub/src/app/groups/[slug]/GroupLayout.tsx b/packages/hub/src/app/groups/[slug]/GroupLayout.tsx
index 05441610c9..04c1ac5dfb 100644
--- a/packages/hub/src/app/groups/[slug]/GroupLayout.tsx
+++ b/packages/hub/src/app/groups/[slug]/GroupLayout.tsx
@@ -52,7 +52,7 @@ const NewButton: FC<{ group: string }> = ({ group }) => {
 
   return (
     <Button onClick={() => router.push(link)}>
-      <div className="flex gap-1 items-center">
+      <div className="flex items-center gap-1">
         <PlusIcon size={16} />
         New Model
       </div>
@@ -76,7 +76,7 @@ export const GroupLayout: FC<
     <div className="space-y-8">
       <H1 size="large">
         <div className="flex items-center">
-          <GroupIcon className="opacity-50 mr-2" />
+          <GroupIcon className="mr-2 opacity-50" />
           {group.slug}
         </div>
       </H1>
diff --git a/packages/hub/src/app/groups/[slug]/InviteForMe.tsx b/packages/hub/src/app/groups/[slug]/InviteForMe.tsx
index dac5c4fdee..c3bdef5202 100644
--- a/packages/hub/src/app/groups/[slug]/InviteForMe.tsx
+++ b/packages/hub/src/app/groups/[slug]/InviteForMe.tsx
@@ -76,7 +76,7 @@ export const InviteForMe: FC<Props> = ({ groupRef }) => {
 
   return (
     <Card>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <div>{"You've been invited to this group."}</div>
         <div className="flex gap-2">
           <InviteReactButton
diff --git a/packages/hub/src/app/groups/[slug]/members/GroupInviteCard.tsx b/packages/hub/src/app/groups/[slug]/members/GroupInviteCard.tsx
index c2a14ac36b..797abefcd4 100644
--- a/packages/hub/src/app/groups/[slug]/members/GroupInviteCard.tsx
+++ b/packages/hub/src/app/groups/[slug]/members/GroupInviteCard.tsx
@@ -31,7 +31,7 @@ export const GroupInviteCard: FC<{
 
   return (
     <Card key={invite.id}>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <div>
           {invite.__typename === "UserGroupInvite" ? (
             <UserGroupInvite inviteRef={invite} />
@@ -39,8 +39,8 @@ export const GroupInviteCard: FC<{
             "Unknown invite type"
           )}
         </div>
-        <div className="flex gap-1 items-center">
-          <span className="text-slate-500 text-sm">Invited as:</span>
+        <div className="flex items-center gap-1">
+          <span className="text-sm text-slate-500">Invited as:</span>
           <InviteRoleButton inviteRef={invite} />
           <DotsDropdown>
             {({ close }) => (
diff --git a/packages/hub/src/app/groups/[slug]/members/GroupMemberCard.tsx b/packages/hub/src/app/groups/[slug]/members/GroupMemberCard.tsx
index 0c9af9a7c6..6ac649c61b 100644
--- a/packages/hub/src/app/groups/[slug]/members/GroupMemberCard.tsx
+++ b/packages/hub/src/app/groups/[slug]/members/GroupMemberCard.tsx
@@ -52,13 +52,13 @@ export const GroupMemberCard: FC<{
 
   return (
     <Card key={membership.id}>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <StyledLink href={userRoute({ username: membership.user.username })}>
           {membership.user.username}
         </StyledLink>
         <div>
           {isAdmin ? (
-            <div className="flex gap-1 items-center">
+            <div className="flex items-center gap-1">
               <MembershipRoleButton
                 membershipRef={membership}
                 groupRef={group}
@@ -76,7 +76,7 @@ export const GroupMemberCard: FC<{
               </DotsDropdown>
             </div>
           ) : (
-            <div className="text-slate-500 text-sm font-medium">
+            <div className="text-sm font-medium text-slate-500">
               {membership.role}
             </div>
           )}
diff --git a/packages/hub/src/app/groups/[slug]/members/GroupMemberList.tsx b/packages/hub/src/app/groups/[slug]/members/GroupMemberList.tsx
index fde61e9d5c..0e7aa9db1e 100644
--- a/packages/hub/src/app/groups/[slug]/members/GroupMemberList.tsx
+++ b/packages/hub/src/app/groups/[slug]/members/GroupMemberList.tsx
@@ -67,7 +67,7 @@ export const GroupMemberList: FC<Props> = ({ groupRef }) => {
           </DotsDropdown>
         )}
       </div>
-      <div className="space-y-2 mt-2">
+      <div className="mt-2 space-y-2">
         {group.memberships.edges.map(({ node: membership }) => (
           <GroupMemberCard
             key={membership.id}
diff --git a/packages/hub/src/app/groups/[slug]/members/GroupReusableInviteSection.tsx b/packages/hub/src/app/groups/[slug]/members/GroupReusableInviteSection.tsx
index fe0553ee77..3bcc3f1b52 100644
--- a/packages/hub/src/app/groups/[slug]/members/GroupReusableInviteSection.tsx
+++ b/packages/hub/src/app/groups/[slug]/members/GroupReusableInviteSection.tsx
@@ -68,7 +68,7 @@ export const GroupReusableInviteSection: FC<Props> = ({ groupRef }) => {
           <TextTooltip text="Click to copy">
             <div
               onClick={copy}
-              className="group flex items-center gap-1 rounded shadow bg-white p-2 cursor-pointer hover:bg-slate-200"
+              className="group flex cursor-pointer items-center gap-1 rounded bg-white p-2 shadow hover:bg-slate-200"
             >
               <ClipboardCopyIcon
                 size={24}
@@ -81,7 +81,7 @@ export const GroupReusableInviteSection: FC<Props> = ({ groupRef }) => {
           <Skeleton height={36} />
         )
       ) : null}
-      <div className="flex gap-2 mt-4">
+      <div className="mt-4 flex gap-2">
         <MutationButton<
           GroupReusableInviteSection_CreateMutation,
           "CreateReusableGroupInviteTokenResult"
diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx
index 73f39fa2f5..cab2fbbdaf 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx
@@ -324,7 +324,7 @@ export const EditSquiggleSnippetModel: FC<Props> = ({
     height: height ?? "100vh",
     onCodeChange,
     renderExtraControls: () => (
-      <div className="h-full flex items-center justify-end gap-2">
+      <div className="flex h-full items-center justify-end gap-2">
         {model.isEditable || forceVersionPicker ? (
           <SquigglePlaygroundVersionPicker
             version={version}
diff --git a/packages/hub/src/app/models/[owner]/[slug]/ModelAccessControls.tsx b/packages/hub/src/app/models/[owner]/[slug]/ModelAccessControls.tsx
index 679e0b02e2..5697bc180c 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/ModelAccessControls.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/ModelAccessControls.tsx
@@ -93,11 +93,11 @@ export const ModelAccessControls: FC<{ modelRef: ModelAccessControls$key }> = ({
     // TODO: copy-pasted from CacheMenu from relative-values, extract to <InvisibleMaybeDropdown> or something
     <div
       className={clsx(
-        "flex items-center text-sm text-gray-500 px-2 py-1 rounded-sm",
-        model.isEditable && "hover:bg-slate-200 cursor-pointer"
+        "flex items-center rounded-sm px-2 py-1 text-sm text-gray-500",
+        model.isEditable && "cursor-pointer hover:bg-slate-200"
       )}
     >
-      <Icon className="text-gray-500 mr-1" size={14} />
+      <Icon className="mr-1 text-gray-500" size={14} />
       {model.isPrivate ? "Private" : "Public"}
     </div>
   );
diff --git a/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/CacheMenu/index.tsx b/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/CacheMenu/index.tsx
index aef312f919..1a2df16d8f 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/CacheMenu/index.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/CacheMenu/index.tsx
@@ -38,8 +38,8 @@ export const CacheMenu: FC<{
   const internals = (
     <div
       className={clsx(
-        "flex items-center text-sm text-gray-500 px-2 py-1 rounded-sm",
-        isEditable && "hover:bg-slate-200 cursor-pointer"
+        "flex items-center rounded-sm px-2 py-1 text-sm text-gray-500",
+        isEditable && "cursor-pointer hover:bg-slate-200"
       )}
     >
       {fullyCached ? (
diff --git a/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/RelativeValuesModelLayout.tsx b/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/RelativeValuesModelLayout.tsx
index 924913a8d7..328a74d7e1 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/RelativeValuesModelLayout.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/RelativeValuesModelLayout.tsx
@@ -150,10 +150,10 @@ export const RelativeValuesModelLayout: FC<
   );
 
   return (
-    <div className="py-4 px-8">
-      <div className="mb-6 py-2 px-2 flex justify-between">
+    <div className="px-8 py-4">
+      <div className="mb-6 flex justify-between px-2 py-2">
         <div className="flex items-center">
-          <ScaleIcon className="text-gray-700 mr-2 opacity-40" size={22} />
+          <ScaleIcon className="mr-2 text-gray-700 opacity-40" size={22} />
           <div className="flex font-mono font-bold text-gray-700">
             {variableName}
           </div>
diff --git a/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx b/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx
index 8a15c45798..b82393d5fb 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/revisions/ModelRevisionsList.tsx
@@ -144,7 +144,7 @@ export const ModelRevisionsList: FC<{
 
   return (
     <div>
-      <div className="mt-4 mb-2 font-medium">Revision history</div>
+      <div className="mb-2 mt-4 font-medium">Revision history</div>
       <div className="space-y-2">
         {revisions.edges.map((edge) => (
           <ModelRevisionItem
diff --git a/packages/hub/src/app/models/[owner]/[slug]/revisions/[revisionId]/ModelRevisionView.tsx b/packages/hub/src/app/models/[owner]/[slug]/revisions/[revisionId]/ModelRevisionView.tsx
index 95abe3354a..fbeddc3a05 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/revisions/[revisionId]/ModelRevisionView.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/revisions/[revisionId]/ModelRevisionView.tsx
@@ -76,7 +76,7 @@ export const ModelRevisionView: FC<{
   return (
     <div>
       <div className="border-b border-gray-300">
-        <div className="pt-4 pb-4 px-8 space-y-1">
+        <div className="space-y-1 px-8 pb-4 pt-4">
           <div className="text-sm">
             <span className="text-slate-500">Version from</span>{" "}
             {format(model.revision.createdAtTimestamp, commonDateFormat)}.{" "}
@@ -87,7 +87,7 @@ export const ModelRevisionView: FC<{
             <StyledLink href={modelUrl}>Go to latest version</StyledLink>
           </div>
           {model.revision.comment ? (
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <CommentIcon size={14} className="text-slate-400" />
               <div className="text-sm">{model.revision.comment}</div>
             </div>
diff --git a/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/SquiggleVariableRevisionPage.tsx b/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/SquiggleVariableRevisionPage.tsx
index 673ef22504..049d7b38d7 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/SquiggleVariableRevisionPage.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/SquiggleVariableRevisionPage.tsx
@@ -72,7 +72,7 @@ export const SquiggleVariableRevisionPage: FC<{
 
   if (!versionSupportsExports.plain(checkedVersion)) {
     return (
-      <div className="p-4 bg-red-100 text-red-900">
+      <div className="bg-red-100 p-4 text-red-900">
         Export view pages don&apos;t support Squiggle {checkedVersion}.
       </div>
     );
diff --git a/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/VariablePage.tsx b/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/VariablePage.tsx
index f9fd323b06..f63bf1518a 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/VariablePage.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/VariablePage.tsx
@@ -27,8 +27,8 @@ const VariableRevisionsPanel: FC<{
   loadNext?: (count: number) => void;
 }> = ({ revisions, selected, changeId, loadNext }) => {
   return (
-    <div className="w-[150px] ml-4 bg-gray-50 rounded-sm py-2 px-3 flex flex-col">
-      <h3 className="text-sm font-medium text-gray-700 border-b mb-1 pb-0.5">
+    <div className="ml-4 flex w-[150px] flex-col rounded-sm bg-gray-50 px-3 py-2">
+      <h3 className="mb-1 border-b pb-0.5 text-sm font-medium text-gray-700">
         Revisions
       </h3>
       <ul>
@@ -37,7 +37,7 @@ const VariableRevisionsPanel: FC<{
             key={revision.id}
             onClick={() => changeId(revision.id)}
             className={clsx(
-              "hover:text-gray-800 cursor-pointer hover:underline text-sm pt-0.5 pb-0.5",
+              "cursor-pointer pb-0.5 pt-0.5 text-sm hover:text-gray-800 hover:underline",
               revision.id === selected ? "text-blue-900" : "text-gray-400"
             )}
           >
@@ -116,7 +116,7 @@ export const VariablePageBody: FC<{
       case "SquiggleSnippet": {
         return (
           <div className="flex">
-            <div className="flex-1 w-full">
+            <div className="w-full flex-1">
               <SquiggleVariableRevisionPage
                 key={selected}
                 variableName={variableName}
diff --git a/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/page.tsx b/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/page.tsx
index d984bbcf29..7d984f3bf9 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/page.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/variables/[variableName]/page.tsx
@@ -20,7 +20,7 @@ export default async function OuterVariablePage({ params }: Props) {
   });
 
   return (
-    <div className="py-4 px-8">
+    <div className="px-8 py-4">
       <VariablePage query={query} params={params} />
     </div>
   );
diff --git a/packages/hub/src/app/models/[owner]/[slug]/view/page.tsx b/packages/hub/src/app/models/[owner]/[slug]/view/page.tsx
index ee2cee2cb5..e2d1427452 100644
--- a/packages/hub/src/app/models/[owner]/[slug]/view/page.tsx
+++ b/packages/hub/src/app/models/[owner]/[slug]/view/page.tsx
@@ -16,7 +16,7 @@ export default async function OuterModelPage({ params }: Props) {
   });
 
   return (
-    <div className="py-4 px-8">
+    <div className="px-8 py-4">
       <ViewModelPage query={query} />
     </div>
   );
diff --git a/packages/hub/src/app/new/model/NewModel.tsx b/packages/hub/src/app/new/model/NewModel.tsx
index 14c5ffc5fe..ec22897eba 100644
--- a/packages/hub/src/app/new/model/NewModel.tsx
+++ b/packages/hub/src/app/new/model/NewModel.tsx
@@ -120,7 +120,7 @@ export const NewModel: FC = () => {
     <form onSubmit={onSubmit}>
       <FormProvider {...form}>
         <H1>New Model</H1>
-        <div className="space-y-4 mb-4 mt-4">
+        <div className="mb-4 mt-4 space-y-4">
           <SlugFormField<FormShape>
             name="slug"
             example="my-long-model"
diff --git a/packages/hub/src/app/not-found.tsx b/packages/hub/src/app/not-found.tsx
index c414de0716..e365c82e47 100644
--- a/packages/hub/src/app/not-found.tsx
+++ b/packages/hub/src/app/not-found.tsx
@@ -2,10 +2,10 @@ export default function NotFound() {
   // Note: Next.js (13.4.9) in dev mode doesn't reload this page correctly.
   // Restart `next dev` process if you edit this component.
   return (
-    <div className="flex-1 grid place-items-center">
-      <div className="flex gap-4 items-center h-10">
+    <div className="grid flex-1 place-items-center">
+      <div className="flex h-10 items-center gap-4">
         <h1 className="text-2xl font-medium">404</h1>
-        <div className="self-stretch bg-slate-400 w-px" />
+        <div className="w-px self-stretch bg-slate-400" />
         <h2 className="text-sm">This page could not be found.</h2>
       </div>
     </div>
diff --git a/packages/hub/src/app/settings/choose-username/ChooseUsername.tsx b/packages/hub/src/app/settings/choose-username/ChooseUsername.tsx
index b505affb3a..922ee2b755 100644
--- a/packages/hub/src/app/settings/choose-username/ChooseUsername.tsx
+++ b/packages/hub/src/app/settings/choose-username/ChooseUsername.tsx
@@ -58,7 +58,7 @@ export const ChooseUsername: FC = () => {
   return (
     <form onSubmit={onSubmit}>
       <FormProvider {...form}>
-        <div className="flex flex-col items-center mt-20">
+        <div className="mt-20 flex flex-col items-center">
           <div className="space-y-2">
             <div className="flex items-center gap-1">
               <SlugFormField<FormShape>
diff --git a/packages/hub/src/app/status/StatusPage.tsx b/packages/hub/src/app/status/StatusPage.tsx
index f1009d4fce..3a37d1005d 100644
--- a/packages/hub/src/app/status/StatusPage.tsx
+++ b/packages/hub/src/app/status/StatusPage.tsx
@@ -34,7 +34,7 @@ export const StatusPage: FC<{
   return (
     <div>
       <H1>Global statistics</H1>
-      <table className="table-auto mt-8 bg-white">
+      <table className="mt-8 table-auto bg-white">
         <tbody>
           <StatRow name="Users" value={stats.users} />
           <StatRow name="Models" value={stats.models} />
diff --git a/packages/hub/src/app/users/[username]/UserLayout.tsx b/packages/hub/src/app/users/[username]/UserLayout.tsx
index 4558ffdbf1..d110d0babb 100644
--- a/packages/hub/src/app/users/[username]/UserLayout.tsx
+++ b/packages/hub/src/app/users/[username]/UserLayout.tsx
@@ -80,7 +80,7 @@ const NewButton: FC = () => {
 
   return (
     <Button onClick={() => router.push(link)}>
-      <div className="flex gap-1 items-center">
+      <div className="flex items-center gap-1">
         <PlusIcon size={16} />
         {text}
       </div>
@@ -104,11 +104,11 @@ export const UserLayout: FC<
     <div className="space-y-8">
       <H1 size="large">
         <div className="flex items-center">
-          <UserIcon className="opacity-50 mr-2" />
+          <UserIcon className="mr-2 opacity-50" />
           {user.username}
         </div>
       </H1>
-      <div className="flex gap-4 items-center">
+      <div className="flex items-center gap-4">
         <StyledTabLink.List>
           {isMe || user.models.edges.length ? (
             <StyledTabLink
diff --git a/packages/hub/src/components/EntityCard.tsx b/packages/hub/src/components/EntityCard.tsx
index 07e8b17f97..b01211dfc5 100644
--- a/packages/hub/src/components/EntityCard.tsx
+++ b/packages/hub/src/components/EntityCard.tsx
@@ -39,10 +39,10 @@ export const EntityCard: FC<Props> = ({
 }) => {
   return (
     <Card>
-      <div className="flex flex-col h-full">
+      <div className="flex h-full flex-col">
         <div className="mb-1">
           <Link
-            className="text-gray-900 font-medium hover:underline"
+            className="font-medium text-gray-900 hover:underline"
             href={href}
           >
             {showOwner ? ownerName + "/" : ""}
@@ -50,7 +50,7 @@ export const EntityCard: FC<Props> = ({
           </Link>
         </div>
         {<div className="flex-grow">{children}</div>}
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-2 text-gray-500 text-xs mt-3">
+        <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-2 text-xs text-gray-500">
           {footerItems}
           {isPrivate && <LockIcon className="400" size={14} />}
           <div>
diff --git a/packages/hub/src/components/EntityInfo.tsx b/packages/hub/src/components/EntityInfo.tsx
index e4ff10eef8..03fdff203e 100644
--- a/packages/hub/src/components/EntityInfo.tsx
+++ b/packages/hub/src/components/EntityInfo.tsx
@@ -31,13 +31,13 @@ const Entity: FC<EntityNode & { isFirst: boolean; isLast: boolean }> = ({
   const content = (
     <div
       className={clsx(
-        "flex items-center gap-1 group py-2 pr-3",
+        "group flex items-center gap-1 py-2 pr-3",
         !isFirst && "pl-3"
       )}
     >
       {Icon && (
         <Icon
-          className="text-slate-600 opacity-50 group-hover:opacity-100 transition mr-1"
+          className="mr-1 text-slate-600 opacity-50 transition group-hover:opacity-100"
           size={18}
         />
       )}
diff --git a/packages/hub/src/components/EntityLayout.tsx b/packages/hub/src/components/EntityLayout.tsx
index 4aae76813a..179bc4dfa8 100644
--- a/packages/hub/src/components/EntityLayout.tsx
+++ b/packages/hub/src/components/EntityLayout.tsx
@@ -24,13 +24,13 @@ export const EntityLayout: FC<Props> = ({
   return (
     <div>
       <div
-        className="border-gray-300 border-b"
+        className="border-b border-gray-300"
         style={{ backgroundColor: "#eceef0" }}
       >
         <div
           className={clsx(
             "flex items-center justify-between gap-4 pt-1",
-            !isFluid ? "max-w-4xl mx-auto" : "px-8"
+            !isFluid ? "mx-auto max-w-4xl" : "px-8"
           )}
         >
           <div className="flex items-center gap-2">
@@ -40,7 +40,7 @@ export const EntityLayout: FC<Props> = ({
           <div>{headerRight}</div>
         </div>
       </div>
-      <div className={clsx(!isFluid && "max-w-4xl mx-auto my-4")}>
+      <div className={clsx(!isFluid && "mx-auto my-4 max-w-4xl")}>
         {children}
       </div>
     </div>
diff --git a/packages/hub/src/components/ErrorBoundary.tsx b/packages/hub/src/components/ErrorBoundary.tsx
index 28f0072632..cc2beaf579 100644
--- a/packages/hub/src/components/ErrorBoundary.tsx
+++ b/packages/hub/src/components/ErrorBoundary.tsx
@@ -18,10 +18,10 @@ export class ErrorBoundary extends Component<PropsWithChildren, State> {
   public override render() {
     if (this.state.error) {
       return (
-        <div className="mx-auto max-w-2xl mt-4 p-4 bg-red-400 rounded">
+        <div className="mx-auto mt-4 max-w-2xl rounded bg-red-400 p-4">
           <header className="mb-2">Error</header>
           <div className="mb-2">{this.state.error.message}</div>
-          <pre className="text-xs overflow-auto">{this.state.error.stack}</pre>
+          <pre className="overflow-auto text-xs">{this.state.error.stack}</pre>
         </div>
       );
     }
diff --git a/packages/hub/src/components/GlobalSearch/SearchResultBox.tsx b/packages/hub/src/components/GlobalSearch/SearchResultBox.tsx
index c058cf15e9..708b2bf558 100644
--- a/packages/hub/src/components/GlobalSearch/SearchResultBox.tsx
+++ b/packages/hub/src/components/GlobalSearch/SearchResultBox.tsx
@@ -5,7 +5,7 @@ export const SearchResultBox: FC<PropsWithChildren<{ name: string }>> = ({
   children,
 }) => (
   <div>
-    <div className="text-sm text-slate-400 capitalize">{name}</div>
+    <div className="text-sm capitalize text-slate-400">{name}</div>
     <div className="text-sm">{children}</div>
   </div>
 );
diff --git a/packages/hub/src/components/GlobalSearch/SearchResultTItle.tsx b/packages/hub/src/components/GlobalSearch/SearchResultTItle.tsx
index 728bd86cc3..9a06a19079 100644
--- a/packages/hub/src/components/GlobalSearch/SearchResultTItle.tsx
+++ b/packages/hub/src/components/GlobalSearch/SearchResultTItle.tsx
@@ -1,5 +1,5 @@
 import { FC, PropsWithChildren } from "react";
 
 export const SearchResultTitle: FC<PropsWithChildren> = ({ children }) => (
-  <div className="text-slate-700 font-medium">{children}</div>
+  <div className="font-medium text-slate-700">{children}</div>
 );
diff --git a/packages/hub/src/components/GlobalSearch/TextSnippet.tsx b/packages/hub/src/components/GlobalSearch/TextSnippet.tsx
index 00ed0bee27..a314dc0ade 100644
--- a/packages/hub/src/components/GlobalSearch/TextSnippet.tsx
+++ b/packages/hub/src/components/GlobalSearch/TextSnippet.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { Snippet } from "./Snippet";
 
 export const TextSnippet: FC<{ children: string }> = ({ children }) => (
-  <div className="text-xs text-slate-600 py-0.5">
+  <div className="py-0.5 text-xs text-slate-600">
     <Snippet>{children}</Snippet>
   </div>
 );
diff --git a/packages/hub/src/components/exports/RelativeValuesExportItem.tsx b/packages/hub/src/components/exports/RelativeValuesExportItem.tsx
index 556c3d20ee..c32acd7b80 100644
--- a/packages/hub/src/components/exports/RelativeValuesExportItem.tsx
+++ b/packages/hub/src/components/exports/RelativeValuesExportItem.tsx
@@ -25,7 +25,7 @@ export const RelativeValuesExportItemFragment = graphql`
 
 const Container: FC<PropsWithChildren> = ({ children }) => (
   <div className="px-4 py-2 hover:bg-slate-100">
-    <div className="text-slate-600 group-hover:text-slate-900 text-sm font-medium">
+    <div className="text-sm font-medium text-slate-600 group-hover:text-slate-900">
       {children}
     </div>
   </div>
diff --git a/packages/hub/src/components/layout/NarrowPageLayout.tsx b/packages/hub/src/components/layout/NarrowPageLayout.tsx
index 0d39a6d6ae..33e99c02e5 100644
--- a/packages/hub/src/components/layout/NarrowPageLayout.tsx
+++ b/packages/hub/src/components/layout/NarrowPageLayout.tsx
@@ -4,6 +4,6 @@ export const NarrowPageLayout: FC<PropsWithChildren> = ({ children }) => (
   // Outer div is important because RootLayout children are flexbox items.
   // Setting max-width on flexbox items makes them switch from stretch to center mode.
   <div>
-    <div className="mt-16 max-w-4xl mx-auto mb-8">{children}</div>
+    <div className="mx-auto mb-8 mt-16 max-w-4xl">{children}</div>
   </div>
 );
diff --git a/packages/hub/src/components/layout/RootLayout/DropdownWithArrow.tsx b/packages/hub/src/components/layout/RootLayout/DropdownWithArrow.tsx
index 253d5636ee..b4eb3cdaa2 100644
--- a/packages/hub/src/components/layout/RootLayout/DropdownWithArrow.tsx
+++ b/packages/hub/src/components/layout/RootLayout/DropdownWithArrow.tsx
@@ -3,8 +3,8 @@ import { FC } from "react";
 import { TriangleIcon } from "@quri/ui";
 
 export const DropdownWithArrow: FC<{ text: string }> = ({ text }) => (
-  <div className="flex items-center text-white cursor-pointer hover:bg-slate-700 px-2 py-1 rounded-md select-none text-sm">
+  <div className="flex cursor-pointer select-none items-center rounded-md px-2 py-1 text-sm text-white hover:bg-slate-700">
     {text}
-    <TriangleIcon size={8} className="rotate-180 ml-1.5 text-slate-300" />
+    <TriangleIcon size={8} className="ml-1.5 rotate-180 text-slate-300" />
   </div>
 );
diff --git a/packages/hub/src/components/layout/RootLayout/PageFooter.tsx b/packages/hub/src/components/layout/RootLayout/PageFooter.tsx
index b2810907e0..a5e6923127 100644
--- a/packages/hub/src/components/layout/RootLayout/PageFooter.tsx
+++ b/packages/hub/src/components/layout/RootLayout/PageFooter.tsx
@@ -23,7 +23,7 @@ const linkClasses = "items-center flex hover:text-gray-900";
 
 export const PageFooter: FC = () => {
   const logoSection = (
-    <div className="flex items-center gap-x-5 h-16">
+    <div className="flex h-16 items-center gap-x-5">
       <Image
         src={logoPic}
         width={40}
@@ -82,8 +82,8 @@ export const PageFooter: FC = () => {
   );
 
   return (
-    <div className="px-8 py-4 border-t border-t-slate-200 bg-slate-100">
-      <div className="text-sm text-slate-400 flex justify-between max-w-4xl mx-auto flex-col gap-4 sm:flex-row ">
+    <div className="border-t border-t-slate-200 bg-slate-100 px-8 py-4">
+      <div className="mx-auto flex max-w-4xl flex-col justify-between gap-4 text-sm text-slate-400 sm:flex-row ">
         {logoSection}
         {internalLinkSection}
         {externalLinkSection}
diff --git a/packages/hub/src/components/layout/RootLayout/PageMenu.tsx b/packages/hub/src/components/layout/RootLayout/PageMenu.tsx
index 9735a8f56c..7271f4b886 100644
--- a/packages/hub/src/components/layout/RootLayout/PageMenu.tsx
+++ b/packages/hub/src/components/layout/RootLayout/PageMenu.tsx
@@ -78,7 +78,7 @@ const DesktopMenu: FC<MenuProps> = ({ queryRef }) => {
   const { data: session } = useSession();
   const menu = useFragment(fragment, queryRef);
   return (
-    <div className="flex gap-4 items-center">
+    <div className="flex items-center gap-4">
       <GlobalSearch />
       <AboutMenuLink mode="desktop" />
       <DocsMenuLink mode="desktop" />
@@ -112,7 +112,7 @@ const MobileMenu: FC<MenuProps> = ({ queryRef }) => {
   const close = () => setOpen(false);
   return (
     <div>
-      <div className="p-2 cursor-pointer">
+      <div className="cursor-pointer p-2">
         <Icon
           size={20}
           className="text-slate-100"
@@ -123,11 +123,11 @@ const MobileMenu: FC<MenuProps> = ({ queryRef }) => {
         <>
           {/* overlay */}
           <div
-            className="fixed inset-0 z-10 bg-black opacity-10 overflow-scroll"
+            className="fixed inset-0 z-10 overflow-scroll bg-black opacity-10"
             onClick={close}
           />
           {/* sidebar panel */}
-          <div className="fixed inset-y-0 right-0 z-20 bg-white shadow-xl overflow-y-auto overflow-x-hidden">
+          <div className="fixed inset-y-0 right-0 z-20 overflow-y-auto overflow-x-hidden bg-white shadow-xl">
             <DropdownMenu>
               <DropdownMenuHeader>Menu</DropdownMenuHeader>
               <NewModelMenuLink mode="mobile" close={close} />
@@ -165,8 +165,8 @@ export const PageMenu: FC<MenuProps> = ({ queryRef }) => {
   useForceChooseUsername();
 
   return (
-    <div className="h-10 px-8 bg-gray-800 flex items-center justify-between">
-      <Link className="text-slate-300 font-semibold" href="/">
+    <div className="flex h-10 items-center justify-between bg-gray-800 px-8">
+      <Link className="font-semibold text-slate-300" href="/">
         Squiggle Hub
       </Link>
       <div className="hidden md:block">
diff --git a/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx b/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx
index 1604d3191c..ce9ff17a78 100644
--- a/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx
+++ b/packages/hub/src/components/layout/RootLayout/PageMenuLink.tsx
@@ -34,11 +34,11 @@ export const PageMenuLink: FC<Props> = ({
   const Icon = icon;
   return mode === "desktop" ? (
     <Link
-      className="text-white text-sm hover:bg-slate-700 px-2 py-1 rounded-md select-none"
+      className="select-none rounded-md px-2 py-1 text-sm text-white hover:bg-slate-700"
       href={href}
       target={external ? "_blank" : undefined}
     >
-      {Icon && <Icon className="inline-block mr-1 text-slate-400" size={14} />}
+      {Icon && <Icon className="mr-1 inline-block text-slate-400" size={14} />}
       {title}
     </Link>
   ) : (
diff --git a/packages/hub/src/components/ui/Card.tsx b/packages/hub/src/components/ui/Card.tsx
index a88cb8692d..787cf3bddb 100644
--- a/packages/hub/src/components/ui/Card.tsx
+++ b/packages/hub/src/components/ui/Card.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from "react";
 
 export const Card: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="px-5 py-3 rounded bg-white border border-gray-200 hover:bg-gray-50">
+    <div className="rounded border border-gray-200 bg-white px-5 py-3 hover:bg-gray-50">
       {children}
     </div>
   );
diff --git a/packages/hub/src/components/ui/EntityTab.tsx b/packages/hub/src/components/ui/EntityTab.tsx
index 7a36e53ea5..6e6db67765 100644
--- a/packages/hub/src/components/ui/EntityTab.tsx
+++ b/packages/hub/src/components/ui/EntityTab.tsx
@@ -25,11 +25,11 @@ const tabInnerSection = (
   Icon?: FC<IconProps>,
   count?: number
 ) => (
-  <div className="items-center flex group-hover:bg-white rounded-md px-3 py-1.5">
+  <div className="flex items-center rounded-md px-3 py-1.5 group-hover:bg-white">
     {Icon && <Icon className="mr-2 opacity-60" size={16} />}
     {name}
     {count && (
-      <span className="ml-2 text-xs text-gray-700 bg-gray-300 px-2 py-0.5 text-center rounded-full">
+      <span className="ml-2 rounded-full bg-gray-300 px-2 py-0.5 text-center text-xs text-gray-700">
         {count}
       </span>
     )}
diff --git a/packages/hub/src/components/ui/Headers.tsx b/packages/hub/src/components/ui/Headers.tsx
index b2b6e36abc..7e1156a493 100644
--- a/packages/hub/src/components/ui/Headers.tsx
+++ b/packages/hub/src/components/ui/Headers.tsx
@@ -9,8 +9,8 @@ export const H1: FC<Props> = ({ children, size = "normal" }) => {
   return (
     <h1
       className={clsx(
-        size === "normal" && "text-xl font-bold mb-2",
-        size === "large" && "text-2xl font-bold mb-4"
+        size === "normal" && "mb-2 text-xl font-bold",
+        size === "large" && "mb-4 text-2xl font-bold"
       )}
     >
       {children}
@@ -22,8 +22,8 @@ export const H2: FC<Props> = ({ children, size = "normal" }) => {
   return (
     <h2
       className={clsx(
-        size === "normal" && "text-lg text-gray-600 font-semibold mb-2",
-        size === "large" && "text-xl font-bold mb-4"
+        size === "normal" && "mb-2 text-lg font-semibold text-gray-600",
+        size === "large" && "mb-4 text-xl font-bold"
       )}
     >
       {children}
diff --git a/packages/hub/src/groups/components/GroupList.tsx b/packages/hub/src/groups/components/GroupList.tsx
index 66b2e2504c..96a95ebbac 100644
--- a/packages/hub/src/groups/components/GroupList.tsx
+++ b/packages/hub/src/groups/components/GroupList.tsx
@@ -32,7 +32,7 @@ export const GroupList: FC<Props> = ({ connectionRef, loadNext }) => {
 
   return (
     <div>
-      <div className="grid md:grid-cols-2 gap-4">
+      <div className="grid gap-4 md:grid-cols-2">
         {connection.edges.map((edge) => (
           <GroupCard key={edge.node.id} groupRef={edge.node} />
         ))}
diff --git a/packages/hub/src/models/components/ModelCard.tsx b/packages/hub/src/models/components/ModelCard.tsx
index d4a4c8d5f4..59aef2a065 100644
--- a/packages/hub/src/models/components/ModelCard.tsx
+++ b/packages/hub/src/models/components/ModelCard.tsx
@@ -79,7 +79,7 @@ export const ModelCard: FC<Props> = ({ modelRef, showOwner = true }) => {
         owner={model.owner.slug}
         slug={model.slug}
       >
-        <div className="cursor-pointer items-center flex text-xs text-gray-500 hover:text-gray-900 hover:underline">
+        <div className="flex cursor-pointer items-center text-xs text-gray-500 hover:text-gray-900 hover:underline">
           {`${_totalImportLength} variables`}
         </div>
       </VariablesDropdown>
diff --git a/packages/hub/src/models/components/ModelList.tsx b/packages/hub/src/models/components/ModelList.tsx
index 1a19382d31..295b392f45 100644
--- a/packages/hub/src/models/components/ModelList.tsx
+++ b/packages/hub/src/models/components/ModelList.tsx
@@ -37,7 +37,7 @@ export const ModelList: FC<Props> = ({
 
   return (
     <div>
-      <div className="grid md:grid-cols-2 gap-4">
+      <div className="grid gap-4 md:grid-cols-2">
         {connection.edges.map((edge) => (
           <ModelCard
             key={edge.node.id}
diff --git a/packages/hub/src/relative-values/components/RelativeValuesDefinitionForm/HTMLForm.tsx b/packages/hub/src/relative-values/components/RelativeValuesDefinitionForm/HTMLForm.tsx
index 7b2ec9893f..5840c74c95 100644
--- a/packages/hub/src/relative-values/components/RelativeValuesDefinitionForm/HTMLForm.tsx
+++ b/packages/hub/src/relative-values/components/RelativeValuesDefinitionForm/HTMLForm.tsx
@@ -25,7 +25,7 @@ export const FormSectionHeader: FC<{ headerName: string }> = ({
 );
 
 const FormDivider: FC = () => (
-  <div className="border-b border-slate-400 pt-8 mb-6" />
+  <div className="mb-6 border-b border-slate-400 pt-8" />
 );
 
 const FormSection: FC<PropsWithChildren<{ headerName: string }>> = ({
@@ -67,7 +67,7 @@ export const HTMLForm: FC = () => {
         <div className="space-y-3">
           <div className="space-y-2">
             {clusterFields.map((_, i) => (
-              <div key={i} className="border-t pb-4 border-slate-200 space-y-2">
+              <div key={i} className="space-y-2 border-t border-slate-200 pb-4">
                 <div className="flex items-end gap-4">
                   <SlugFormField<FormShape>
                     label="ID"
@@ -108,7 +108,7 @@ export const HTMLForm: FC = () => {
             {itemFields.map((_, i) => (
               <div
                 key={i}
-                className="border-b pt-4 pb-6 border-slate-200 space-y-2"
+                className="space-y-2 border-b border-slate-200 pb-6 pt-4"
               >
                 <SlugFormField<FormShape>
                   label="ID"
diff --git a/packages/hub/src/relative-values/components/common/ClusterIcon.tsx b/packages/hub/src/relative-values/components/common/ClusterIcon.tsx
index c75ecd8c49..a1275470e3 100644
--- a/packages/hub/src/relative-values/components/common/ClusterIcon.tsx
+++ b/packages/hub/src/relative-values/components/common/ClusterIcon.tsx
@@ -6,7 +6,7 @@ export const ClusterIcon: FC<{
 }> = ({ cluster, selected = true }) => {
   return (
     <div
-      className="w-2 h-2 rounded-sm"
+      className="h-2 w-2 rounded-sm"
       style={
         selected
           ? { backgroundColor: cluster.color }
diff --git a/packages/hub/src/relative-values/components/common/ClusterInfo.tsx b/packages/hub/src/relative-values/components/common/ClusterInfo.tsx
index 643b67b31e..64e104e20c 100644
--- a/packages/hub/src/relative-values/components/common/ClusterInfo.tsx
+++ b/packages/hub/src/relative-values/components/common/ClusterInfo.tsx
@@ -6,7 +6,7 @@ export const ClusterInfo: FC<{
   cluster: { id: string; color: string };
 }> = ({ cluster }) => {
   return (
-    <div className="flex gap-1 items-center">
+    <div className="flex items-center gap-1">
       <div className="flex-0">
         <ClusterIcon cluster={cluster} />
       </div>
diff --git a/packages/hub/src/relative-values/components/ui/FormHeader.tsx b/packages/hub/src/relative-values/components/ui/FormHeader.tsx
index 62fb46c2b8..bdae0673d3 100644
--- a/packages/hub/src/relative-values/components/ui/FormHeader.tsx
+++ b/packages/hub/src/relative-values/components/ui/FormHeader.tsx
@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren } from "react";
 
 export const FormHeader: FC<PropsWithChildren> = ({ children }) => (
-  <header className="text-gray-500 capitalize font-medium mb-2">
+  <header className="mb-2 font-medium capitalize text-gray-500">
     {children}
   </header>
 );
diff --git a/packages/hub/src/relative-values/components/views/CellBox.tsx b/packages/hub/src/relative-values/components/views/CellBox.tsx
index 88e61a2263..21aa8d2f7e 100644
--- a/packages/hub/src/relative-values/components/views/CellBox.tsx
+++ b/packages/hub/src/relative-values/components/views/CellBox.tsx
@@ -9,8 +9,8 @@ type Props = PropsWithChildren<{
 export const CellBox: FC<Props> = ({ children, header, clickable }) => (
   <div
     className={clsx(
-      "border-t border-l border-gray-200 h-full",
-      header && "bg-gray-50 sticky top-0 left-0 z-10",
+      "h-full border-l border-t border-gray-200",
+      header && "sticky left-0 top-0 z-10 bg-gray-50",
       clickable && "cursor-pointer hover:bg-gray-200"
     )}
   >
diff --git a/packages/hub/src/relative-values/components/views/ClusterFilter.tsx b/packages/hub/src/relative-values/components/views/ClusterFilter.tsx
index 36ee14ecd3..2b1d701d45 100644
--- a/packages/hub/src/relative-values/components/views/ClusterFilter.tsx
+++ b/packages/hub/src/relative-values/components/views/ClusterFilter.tsx
@@ -18,7 +18,7 @@ const ClusterItem: React.FC<{
 }> = ({ cluster, selected, toggle }) => {
   return (
     <div
-      className="flex gap-1 items-center cursor-pointer select-none"
+      className="flex cursor-pointer select-none items-center gap-1"
       onClick={toggle}
     >
       <div className="flex-none">
@@ -26,7 +26,7 @@ const ClusterItem: React.FC<{
       </div>
       <div
         className={clsx(
-          "text-sm hover:text-black font-medium",
+          "text-sm font-medium hover:text-black",
           selected ? "text-gray-600" : "text-gray-400"
         )}
       >
diff --git a/packages/hub/src/relative-values/components/views/GridView/AxisMenu.tsx b/packages/hub/src/relative-values/components/views/GridView/AxisMenu.tsx
index ab4d47ffa5..43c68ef627 100644
--- a/packages/hub/src/relative-values/components/views/GridView/AxisMenu.tsx
+++ b/packages/hub/src/relative-values/components/views/GridView/AxisMenu.tsx
@@ -51,7 +51,7 @@ const SortBy: FC<{
   };
 
   return (
-    <div className="flex items-center cursor-pointer group" onClick={setSort}>
+    <div className="group flex cursor-pointer items-center" onClick={setSort}>
       <Icon
         className={
           isCurrentMode
@@ -81,7 +81,7 @@ export const AxisMenu: FC<{ axis: Axis; sortByAverage?: boolean }> = ({
     },
   } = useRelativeValuesContext();
   return (
-    <div className="px-6 py-6 min-w-[16em] flex flex-col gap-6">
+    <div className="flex min-w-[16em] flex-col gap-6 px-6 py-6">
       <div>
         <FormHeader>Clusters</FormHeader>
         <ClusterFilter axis={axis} />
diff --git a/packages/hub/src/relative-values/components/views/GridView/index.tsx b/packages/hub/src/relative-values/components/views/GridView/index.tsx
index e9da8c4b7c..e388eb960c 100644
--- a/packages/hub/src/relative-values/components/views/GridView/index.tsx
+++ b/packages/hub/src/relative-values/components/views/GridView/index.tsx
@@ -109,12 +109,12 @@ export const ClusterGridView: FC<{
   return (
     <div>
       <div
-        className="grid relative"
+        className="relative grid"
         style={{
           gridTemplateColumns: `repeat(${clusterItems.length + 1}, 200px)`,
         }}
       >
-        <div className="top-0 left-0 z-20" />
+        <div className="left-0 top-0 z-20" />
         {clusterItems.map((item) => (
           <CellBox header key={item.id}>
             <Header item={item} />
@@ -203,7 +203,7 @@ export const GridView: FC = () => {
 
   return (
     <div>
-      <div className="flex gap-8 mb-4 items-center">
+      <div className="mb-4 flex items-center gap-8">
         <div className="flex gap-2">
           <DropdownButton text="Row Settings">
             {() => <AxisMenu axis="rows" />}
@@ -222,12 +222,12 @@ export const GridView: FC = () => {
         <GridModeControls />
       </div>
       <div
-        className="grid relative"
+        className="relative grid"
         style={{
           gridTemplateColumns: `repeat(${columnItems.length + 1}, 140px)`,
         }}
       >
-        <div className="sticky bg-white top-0 left-0 z-20" />
+        <div className="sticky left-0 top-0 z-20 bg-white" />
         {columnItems.map((item) => (
           <CellBox header key={item.id}>
             <Header item={item} />
diff --git a/packages/hub/src/relative-values/components/views/Header.tsx b/packages/hub/src/relative-values/components/views/Header.tsx
index 1f0683d2ec..05b1d48489 100644
--- a/packages/hub/src/relative-values/components/views/Header.tsx
+++ b/packages/hub/src/relative-values/components/views/Header.tsx
@@ -12,7 +12,7 @@ export const Header: FC<{
 
   const cluster = item.clusterId ? clusters[item.clusterId] : undefined;
   return (
-    <div className="text-sm p-1 font-semibold text-slate-800 flex">
+    <div className="flex p-1 text-sm font-semibold text-slate-800">
       {cluster ? (
         <div className="float-left px-0.5 pr-2 pt-1.5">
           <ClusterIcon cluster={cluster} />
diff --git a/packages/hub/src/relative-values/components/views/ListView/ColumnHeader.tsx b/packages/hub/src/relative-values/components/views/ListView/ColumnHeader.tsx
index 1936cdcbe8..ad0b45731b 100644
--- a/packages/hub/src/relative-values/components/views/ListView/ColumnHeader.tsx
+++ b/packages/hub/src/relative-values/components/views/ListView/ColumnHeader.tsx
@@ -19,18 +19,18 @@ const ColumnHeaderContextMenu: FC<{
     <div className="w-96 px-4 py-4">
       <input
         type="text"
-        className="p-1 rounded border border-gray-200 w-full mb-4"
+        className="mb-4 w-full rounded border border-gray-200 p-1"
         defaultValue={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <div className="overflow-auto max-h-96">
+      <div className="max-h-96 overflow-auto">
         <div className="flex flex-col gap-1">
           {items
             .filter((item) => item.name.match(new RegExp(search, "i")))
             .map((item) => (
               <div
                 key={item.id}
-                className="hover:bg-gray-100 rounded p-1 cursor-pointer text-xs"
+                className="cursor-pointer rounded p-1 text-xs hover:bg-gray-100"
                 onClick={() => setSelectedItem(item)}
               >
                 {item.name}
@@ -47,7 +47,7 @@ export const ColumnHeader: FC<{
   setSelectedItem(item: Item): void;
 }> = ({ selectedItem, setSelectedItem }) => {
   return (
-    <div className="sticky top-0 left-0 z-10 grid place-items-stretch h-full">
+    <div className="sticky left-0 top-0 z-10 grid h-full place-items-stretch">
       <Dropdown
         render={({ close }) => (
           <ColumnHeaderContextMenu
@@ -60,7 +60,7 @@ export const ColumnHeader: FC<{
         fullHeight
       >
         <CellBox header clickable>
-          <div className="text-sm pl-1 pt-1 text-slate-600">
+          <div className="pl-1 pt-1 text-sm text-slate-600">
             Estimated value, in terms of
           </div>
           <Header item={selectedItem} />
diff --git a/packages/hub/src/relative-values/components/views/ListView/index.tsx b/packages/hub/src/relative-values/components/views/ListView/index.tsx
index 1826edff78..1b6c75a336 100644
--- a/packages/hub/src/relative-values/components/views/ListView/index.tsx
+++ b/packages/hub/src/relative-values/components/views/ListView/index.tsx
@@ -70,7 +70,7 @@ export const ListViewTable: FC<TableProps> = ({
     <div className="mb-10">
       <div className="">
         <div
-          className="grid border-r border-b border-gray-200 w-full"
+          className="grid w-full border-b border-r border-gray-200"
           style={{
             gridTemplateColumns: showDescriptions ? "2fr 2fr 1fr" : "3fr 1fr",
           }}
@@ -85,7 +85,7 @@ export const ListViewTable: FC<TableProps> = ({
             <Fragment key={item.id}>
               <CellBox>
                 <div
-                  className="p-2 flex justify-end text-slate-700 cursor-pointer font-bold text-sm"
+                  className="flex cursor-pointer justify-end p-2 text-sm font-bold text-slate-700"
                   onClick={() => setDenominatorItem(item)}
                 >
                   <div className="flex-grow text-sm hover:text-slate-900 hover:underline">
@@ -93,7 +93,7 @@ export const ListViewTable: FC<TableProps> = ({
                   </div>
                   <div
                     onClick={() => setDenominatorItem(item)}
-                    className={"pl-2 cursor-pointer"}
+                    className={"cursor-pointer pl-2"}
                   >
                     <CompassIcon
                       className={clsx(
@@ -110,7 +110,7 @@ export const ListViewTable: FC<TableProps> = ({
 
                 <div className="flex px-2 pb-3">
                   {item.clusterId !== undefined && item.clusterId !== null ? (
-                    <div className="flex gap-1 items-center">
+                    <div className="flex items-center gap-1">
                       <div className="flex-none opacity-50">
                         <ClusterIcon
                           cluster={clusters[item.clusterId]}
@@ -230,7 +230,7 @@ export const ListView: FC = () => {
 
         <input
           type="text"
-          className="p-1 rounded border border-gray-200 mb-4"
+          className="mb-4 rounded border border-gray-200 p-1"
           defaultValue={search}
           placeholder="Filter..."
           onChange={(e) => setSearch(e.currentTarget.value)}
@@ -246,8 +246,8 @@ export const ListView: FC = () => {
         </div>
 
         {sidebarItems && (
-          <div className="w-[500px] relative">
-            <div className="sticky top-4 bg-slate-50 px-2 py-4 ml-4 rounded-sm border-gray-200 border">
+          <div className="relative w-[500px]">
+            <div className="sticky top-4 ml-4 rounded-sm border border-gray-200 bg-slate-50 px-2 py-4">
               <ItemSideBar
                 model={model}
                 variableName={model.variableName}
diff --git a/packages/hub/src/relative-values/components/views/ListView/sidebar.tsx b/packages/hub/src/relative-values/components/views/ListView/sidebar.tsx
index 8f1b6afb8d..39a14b804e 100644
--- a/packages/hub/src/relative-values/components/views/ListView/sidebar.tsx
+++ b/packages/hub/src/relative-values/components/views/ListView/sidebar.tsx
@@ -21,10 +21,10 @@ interface TableRowProps {
 
 const TableRow: React.FC<TableRowProps> = ({ label, number }) => (
   <Fragment key={label}>
-    <div className="text-slate-400 py-1 mt-1 font-normal text-left text-xs col-span-1">
+    <div className="col-span-1 mt-1 py-1 text-left text-xs font-normal text-slate-400">
       {label}
     </div>
-    <div className="py-1 pl-2 text-left text-slate-600 col-span-2">
+    <div className="col-span-2 py-1 pl-2 text-left text-slate-600">
       <NumberShower number={number} precision={2} />
     </div>
   </Fragment>
@@ -123,36 +123,36 @@ export const ItemSideBar: FC<Props> = ({
     // It would be better to not load SquiggleChart, but rather, a lower-level compontent. That can be refactored later.
     return (
       <div>
-        <div className="mt-2 mb-6 flex overflow-x-auto items-center p-1">
-          <span className="text-slate-500 whitespace-nowrap mr-1">value</span>
-          <span className="text-slate-300 text-xl whitespace-nowrap">(</span>
-          <span className="text-sm bg-slate-200 font-semibold bg-opacity-80 rounded-sm text-slate-900 px-1 text-center whitespace-pre-wrap mr-2 ml-2">
+        <div className="mb-6 mt-2 flex items-center overflow-x-auto p-1">
+          <span className="mr-1 whitespace-nowrap text-slate-500">value</span>
+          <span className="whitespace-nowrap text-xl text-slate-300">(</span>
+          <span className="ml-2 mr-2 whitespace-pre-wrap rounded-sm bg-slate-200 bg-opacity-80 px-1 text-center text-sm font-semibold text-slate-900">
             {numeratorItem.name}
           </span>
-          <span className="text-slate-300 px-1 text-xl whitespace-nowrap">
+          <span className="whitespace-nowrap px-1 text-xl text-slate-300">
             /
           </span>
 
-          <span className="text-sm bg-slate-200  font-semibold rounded-sm text-slate-900 px-1 text-center whitespace-pre-wrap mr-2 ml-2">
+          <span className="ml-2 mr-2  whitespace-pre-wrap rounded-sm bg-slate-200 px-1 text-center text-sm font-semibold text-slate-900">
             <span className="inline-block">{denominatorItem.name}</span>
           </span>
-          <span className="text-slate-300 text-xl whitespace-nowrap">)</span>
+          <span className="whitespace-nowrap text-xl text-slate-300">)</span>
         </div>
 
-        <div className="mb-4 text-slate-500 xs">
+        <div className="xs mb-4 text-slate-500">
           An estimate of the value of{" "}
           <span className="font-semibold text-slate-700">
             {numeratorItem.name}
           </span>{" "}
           in terms of{" "}
-          <span className="text-slate-700 font-semibold">
+          <span className="font-semibold text-slate-700">
             {denominatorItem.name}
           </span>
         </div>
 
         <SquiggleChart code={squggleCode} />
 
-        <div className="grid grid-cols-6 gap-1 w-full mt-10 mb-10">
+        <div className="mb-10 mt-10 grid w-full grid-cols-6 gap-1">
           <TableRow label="median" number={item.median} />
           <TableRow label="mean" number={item.mean} />
           <TableRow label="p5" number={item.min} />
diff --git a/packages/hub/src/relative-values/components/views/PlotView/ItemTooltip.tsx b/packages/hub/src/relative-values/components/views/PlotView/ItemTooltip.tsx
index ac7bc1390e..a6dd67b28e 100644
--- a/packages/hub/src/relative-values/components/views/PlotView/ItemTooltip.tsx
+++ b/packages/hub/src/relative-values/components/views/PlotView/ItemTooltip.tsx
@@ -4,7 +4,7 @@ import { Item } from "@/relative-values/types";
 
 export const ItemTooltip: FC<{ item: Item }> = ({ item }) => {
   return (
-    <div className="px-1 py-0.5 text-xs bg-white border border-slate-200 rounded">
+    <div className="rounded border border-slate-200 bg-white px-1 py-0.5 text-xs">
       {item.name}
     </div>
   );
diff --git a/packages/hub/src/relative-values/components/views/PlotView/index.tsx b/packages/hub/src/relative-values/components/views/PlotView/index.tsx
index 5b0a76023d..c9b195e69b 100644
--- a/packages/hub/src/relative-values/components/views/PlotView/index.tsx
+++ b/packages/hub/src/relative-values/components/views/PlotView/index.tsx
@@ -12,7 +12,7 @@ const Section: FC<PropsWithChildren<{ title: string; border?: boolean }>> = ({
   children,
 }) => (
   <div className="flex flex-col gap-2">
-    <header className="text-slate-800 font-bold text-center">{title}</header>
+    <header className="text-center font-bold text-slate-800">{title}</header>
     <div className={clsx(border && "border border-slate-100 p-1")}>
       {children}
     </div>
diff --git a/packages/hub/src/relative-values/components/views/RelativeCell/ErrorCell.tsx b/packages/hub/src/relative-values/components/views/RelativeCell/ErrorCell.tsx
index 01c93c815a..9c1bc71821 100644
--- a/packages/hub/src/relative-values/components/views/RelativeCell/ErrorCell.tsx
+++ b/packages/hub/src/relative-values/components/views/RelativeCell/ErrorCell.tsx
@@ -6,7 +6,7 @@ export const ErrorCell: FC<{ error: string }> = ({ error }) => {
   // TODO - truncate?
   return (
     <CellBox>
-      <div className="text-red-500 text-xs">{error}</div>
+      <div className="text-xs text-red-500">{error}</div>
     </CellBox>
   );
 };
diff --git a/packages/hub/src/variables/components/VariableCard.tsx b/packages/hub/src/variables/components/VariableCard.tsx
index 9b02ca53e5..1f2ec960dd 100644
--- a/packages/hub/src/variables/components/VariableCard.tsx
+++ b/packages/hub/src/variables/components/VariableCard.tsx
@@ -73,7 +73,7 @@ export const VariableCard: FC<Props> = ({ variableRef }) => {
       footerItems={
         <>
           <a
-            className="cursor-pointer items-center flex text-xs text-gray-500 hover:text-gray-900 hover:underline"
+            className="flex cursor-pointer items-center text-xs text-gray-500 hover:text-gray-900 hover:underline"
             href={modelRoute({
               owner: variable.owner.slug,
               slug: variable.model.slug,
@@ -81,7 +81,7 @@ export const VariableCard: FC<Props> = ({ variableRef }) => {
           >
             {`${variable.owner.slug}/${variable.model.slug}`}
           </a>
-          <div className="items-center flex text-xs text-gray-500">
+          <div className="flex items-center text-xs text-gray-500">
             <Icon size={10} className="mr-1" />
             {currentRevision.variableType}
           </div>
diff --git a/packages/hub/src/variables/components/VariableList.tsx b/packages/hub/src/variables/components/VariableList.tsx
index 9354ae283c..b1c3d9fd9f 100644
--- a/packages/hub/src/variables/components/VariableList.tsx
+++ b/packages/hub/src/variables/components/VariableList.tsx
@@ -32,7 +32,7 @@ export const VariableList: FC<Props> = ({ connectionRef, loadNext }) => {
 
   return (
     <div>
-      <div className="grid md:grid-cols-2 gap-4">
+      <div className="grid gap-4 md:grid-cols-2">
         {connection.edges.map((edge) => (
           <VariableCard key={edge.node.id} variableRef={edge.node} />
         ))}
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index 10ef9b38b3..f697505a3d 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -19,7 +19,7 @@ export type ButtonProps = PropsWithChildren<{
 
 // For internal use only, for now (see ButtonWithDropdown).
 export const ButtonGroup: FC<PropsWithChildren> = ({ children }) => {
-  return <div className="flex items-center button-group">{children}</div>;
+  return <div className="button-group flex items-center">{children}</div>;
 };
 
 export const Button: FC<ButtonProps> = ({
@@ -37,12 +37,12 @@ export const Button: FC<ButtonProps> = ({
       className={clsx(
         "border text-sm font-medium",
         theme === "primary"
-          ? "bg-green-700 border-green-900 text-white"
-          : "bg-slate-100 border-slate-300 text-gray-600",
+          ? "border-green-900 bg-green-700 text-white"
+          : "border-slate-300 bg-slate-100 text-gray-600",
         disabled
           ? "opacity-60"
           : theme === "primary"
-            ? "hover:bg-green-800 hover:border-green-800 hover:text-white"
+            ? "hover:border-green-800 hover:bg-green-800 hover:text-white"
             : "hover:bg-slate-200 hover:text-gray-900",
         wide && "w-full",
         size === "medium" && "h-8 rounded-md",
diff --git a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx
index a30e89a645..6093316aed 100644
--- a/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx
+++ b/packages/ui/src/components/Dropdown/DropdownMenuHeader.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from "react";
 
 export const DropdownMenuHeader: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="px-2 py-1.5 text-sm font-semibold bg-slate-100">
+    <div className="bg-slate-100 px-2 py-1.5 text-sm font-semibold">
       {children}
     </div>
   );
diff --git a/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx b/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx
index d73d616c0f..e98fe36cd8 100644
--- a/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx
+++ b/packages/ui/src/components/Dropdown/DropdownMenuItemLayout.tsx
@@ -30,9 +30,9 @@ export const DropdownMenuItemLayout: FC<ItemLayoutProps> = ({
   acting,
 }) => {
   return (
-    <div className="m-1 rounded px-2 py-1.5 flex items-center gap-2 group hover:bg-blue-100 transition-colors duration-75 cursor-pointer">
+    <div className="group m-1 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 transition-colors duration-75 hover:bg-blue-100">
       {iconDisplay(icon, acting)}
-      <div className="text-slate-700 group-hover:text-slate-900 text-sm font-medium flex-1">
+      <div className="flex-1 text-sm font-medium text-slate-700 group-hover:text-slate-900">
         {title}
       </div>
     </div>
diff --git a/packages/ui/src/components/Dropdown/index.tsx b/packages/ui/src/components/Dropdown/index.tsx
index 42dc641723..137f60f88f 100644
--- a/packages/ui/src/components/Dropdown/index.tsx
+++ b/packages/ui/src/components/Dropdown/index.tsx
@@ -78,7 +78,7 @@ export const Dropdown: FC<Props> = ({
       <div className={tailwindSelector}>
         <div
           ref={refs.setFloating}
-          className="z-30 rounded-md bg-white shadow-xl border border-slate-300 overflow-hidden"
+          className="z-30 overflow-hidden rounded-md border border-slate-300 bg-white shadow-xl"
           style={{
             position: strategy,
             top: y ?? 0,
@@ -109,7 +109,7 @@ export const Dropdown: FC<Props> = ({
   return (
     <DropdownContext.Provider value={{ closeDropdown }}>
       <div
-        className={clsx(fullHeight && "h-full grid place-items-stretch")}
+        className={clsx(fullHeight && "grid h-full place-items-stretch")}
         ref={refs.setReference}
         {...getReferenceProps()}
       >
diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
index 21129ee0f0..fe46e691ae 100644
--- a/packages/ui/src/components/Modal.tsx
+++ b/packages/ui/src/components/Modal.tsx
@@ -37,10 +37,10 @@ const Overlay: React.FC = () => {
 const ModalHeader: React.FC<PropsWithChildren> = ({ children }) => {
   const { close } = useContext(ModalContext);
   return (
-    <header className="pl-5 pr-4 py-3 border-b border-gray-200 font-bold flex items-center justify-between">
+    <header className="flex items-center justify-between border-b border-gray-200 py-3 pl-5 pr-4 font-bold">
       <div>{children}</div>
       <button
-        className="bg-transparent cursor-pointer text-slate-300 hover:text-slate-500"
+        className="cursor-pointer bg-transparent text-slate-300 hover:text-slate-500"
         type="button"
         onClick={close}
       >
@@ -53,12 +53,12 @@ const ModalHeader: React.FC<PropsWithChildren> = ({ children }) => {
 // TODO - get rid of forwardRef, support `focus` and `{...hotkeys}` via smart props
 const ModalBody = forwardRef<HTMLDivElement, JSX.IntrinsicElements["div"]>(
   function ModalBody(props, ref) {
-    return <div ref={ref} className="px-5 py-3 overflow-auto" {...props} />;
+    return <div ref={ref} className="overflow-auto px-5 py-3" {...props} />;
   }
 );
 
 const ModalFooter: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="px-5 py-3 border-t border-gray-200">{children}</div>
+  <div className="border-t border-gray-200 px-5 py-3">{children}</div>
 );
 
 const ModalWindow: React.FC<
@@ -124,7 +124,7 @@ const ModalWindow: React.FC<
   return (
     <div
       className={clsx(
-        "bg-white rounded-md shadow-toast flex flex-col overflow-auto border",
+        "shadow-toast flex flex-col overflow-auto rounded-md border bg-white",
         position && "fixed"
       )}
       style={{
@@ -180,7 +180,7 @@ export const Modal: ModalType = ({ children, container, close }) => {
   const modal = (
     <ModalContext.Provider value={{ close }}>
       <div className={tailwindSelector}>
-        <div className="fixed inset-0 z-40 flex justify-center items-center">
+        <div className="fixed inset-0 z-40 flex items-center justify-center">
           <Overlay />
           <ModalWindow container={container}>{children}</ModalWindow>
         </div>
diff --git a/packages/ui/src/components/StyledTab.tsx b/packages/ui/src/components/StyledTab.tsx
index f314d299a2..497df70e9d 100644
--- a/packages/ui/src/components/StyledTab.tsx
+++ b/packages/ui/src/components/StyledTab.tsx
@@ -35,7 +35,7 @@ const StyledTabInner: FC<StyledTabButtonType> = ({
   <>
     <span
       className={clsx(
-        "p-1 pl-2.5 pr-2.5 rounded-md flex items-center text-sm font-medium",
+        "flex items-center rounded-md p-1 pl-2.5 pr-2.5 text-sm font-medium",
         isSelected && "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
       )}
     >
diff --git a/packages/ui/src/components/TextTooltip.tsx b/packages/ui/src/components/TextTooltip.tsx
index 62c574c524..e14927e5a0 100644
--- a/packages/ui/src/components/TextTooltip.tsx
+++ b/packages/ui/src/components/TextTooltip.tsx
@@ -66,7 +66,7 @@ export const TextTooltip: FC<Props> = ({
                 },
               })}
             >
-              <div className="text-white max-w-sm">{text}</div>
+              <div className="max-w-sm text-white">{text}</div>
             </motion.div>
           </FloatingPortal>
         )}
diff --git a/packages/ui/src/components/WithToasts/index.tsx b/packages/ui/src/components/WithToasts/index.tsx
index 0b87db29d1..82bf98739d 100644
--- a/packages/ui/src/components/WithToasts/index.tsx
+++ b/packages/ui/src/components/WithToasts/index.tsx
@@ -64,7 +64,7 @@ const Toast: FC<{ toast: ToastShape }> = ({ toast }) => {
     <div
       className={clsx(
         "flex items-center gap-2",
-        "border px-8 py-4 bg-white rounded text-sm cursor-pointer shadow-lg",
+        "cursor-pointer rounded border bg-white px-8 py-4 text-sm shadow-lg",
         toast.type === "error" && "text-red-700",
         toast.type === "confirmation" && "text-slate-700"
       )}
@@ -102,7 +102,7 @@ export const WithToasts: FC<PropsWithChildren> = ({ children }) => {
   return (
     <Context.Provider value={dispatch}>
       <div>{children}</div>
-      <div className="fixed right-4 bottom-4 space-y-2 z-50">
+      <div className="fixed bottom-4 right-4 z-50 space-y-2">
         {state.toasts.map((toast) => (
           <Toast key={toast.id} toast={toast} />
         ))}
diff --git a/packages/ui/src/forms/common/FormFieldLayout.tsx b/packages/ui/src/forms/common/FormFieldLayout.tsx
index 8e60a23d4c..95a7aa5e85 100644
--- a/packages/ui/src/forms/common/FormFieldLayout.tsx
+++ b/packages/ui/src/forms/common/FormFieldLayout.tsx
@@ -32,7 +32,7 @@ export const FieldLayout: FC<PropsWithChildren<FormFieldLayoutProps>> = ({
         {label !== undefined && (
           <InnerTag
             className={clsx(
-              "text-sm font-medium mb-1",
+              "mb-1 text-sm font-medium",
               // TODO - add `disabled` prop?
               "text-gray-900",
               inlineLabel && "leading-none"
diff --git a/packages/ui/src/forms/common/WithRHFError.tsx b/packages/ui/src/forms/common/WithRHFError.tsx
index 71a636f05b..14bd5eaab1 100644
--- a/packages/ui/src/forms/common/WithRHFError.tsx
+++ b/packages/ui/src/forms/common/WithRHFError.tsx
@@ -38,15 +38,15 @@ export function WithRHFError<
           style={floatingStyles}
           onClick={() => clearErrors(name)}
         >
-          <div className="bg-red-700 fill-red-700 pr-4 pl-3 py-2 rounded flex gap-1 items-center shadow-md">
+          <div className="flex items-center gap-1 rounded bg-red-700 fill-red-700 py-2 pl-3 pr-4 shadow-md">
             <div
               className={clsx(
-                "rotate-45 w-2 h-2 absolute left-3 bg-red-700",
+                "absolute left-3 h-2 w-2 rotate-45 bg-red-700",
                 placement === "top-start" ? "-bottom-1" : "-top-1"
               )}
             />
-            <ErrorIcon size={16} className="text-white shrink-0" />
-            <div className="text-sm text-white font-medium leading-none">
+            <ErrorIcon size={16} className="shrink-0 text-white" />
+            <div className="text-sm font-medium leading-none text-white">
               {error?.message || error?.type || String(error)}
             </div>
           </div>
diff --git a/packages/ui/src/forms/styled/StyledCheckbox.tsx b/packages/ui/src/forms/styled/StyledCheckbox.tsx
index 1f2d1ffc5a..9cf1716a18 100644
--- a/packages/ui/src/forms/styled/StyledCheckbox.tsx
+++ b/packages/ui/src/forms/styled/StyledCheckbox.tsx
@@ -9,7 +9,7 @@ export const StyledCheckbox = forwardRef<
       type="checkbox"
       ref={ref}
       {...props}
-      className="form-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+      className="form-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
     />
   );
 });
diff --git a/packages/ui/src/forms/styled/StyledColorInput.tsx b/packages/ui/src/forms/styled/StyledColorInput.tsx
index 1b0c0b9fdf..018cc74cad 100644
--- a/packages/ui/src/forms/styled/StyledColorInput.tsx
+++ b/packages/ui/src/forms/styled/StyledColorInput.tsx
@@ -20,16 +20,16 @@ export function StyledColorInput({ value, onChange }: Props) {
               color={value}
               onChange={onChange}
               prefixed
-              className="w-20 px-1 py-0 mt-1 bg-slate-100 border border-gray-300 outline-indigo-500 text-sm"
+              className="mt-1 w-20 border border-gray-300 bg-slate-100 px-1 py-0 text-sm outline-indigo-500"
             />
           </div>
         </DropdownMenu>
       )}
     >
-      <div className="w-10 h-10 rounded p-1 border border-slate-200">
+      <div className="h-10 w-10 rounded border border-slate-200 p-1">
         <div
           style={{ backgroundColor: value }}
-          className="w-full h-full rounded"
+          className="h-full w-full rounded"
         />
       </div>
     </Dropdown>
diff --git a/packages/ui/src/forms/styled/StyledInput.tsx b/packages/ui/src/forms/styled/StyledInput.tsx
index eae3a7ff99..7e4f50a47c 100644
--- a/packages/ui/src/forms/styled/StyledInput.tsx
+++ b/packages/ui/src/forms/styled/StyledInput.tsx
@@ -19,7 +19,7 @@ export const StyledInput = forwardRef<HTMLInputElement, StyledInputProps>(
         type={type}
         {...props}
         className={clsx(
-          "form-input block w-full text-sm shadow-sm rounded-md border-slate-300 focus:ring-indigo-500 active:ring-indigo-500 focus:border-indigo-500 active:border-indigo-500 placeholder:text-slate-300 disabled:text-slate-400",
+          "form-input block w-full rounded-md border-slate-300 text-sm shadow-sm placeholder:text-slate-300 focus:border-indigo-500 focus:ring-indigo-500 active:border-indigo-500 active:ring-indigo-500 disabled:text-slate-400",
           size === "normal" ? "h-10" : "h-8"
         )}
       />
diff --git a/packages/ui/src/forms/styled/StyledRadio.tsx b/packages/ui/src/forms/styled/StyledRadio.tsx
index 66d5500426..6dbc9add2e 100644
--- a/packages/ui/src/forms/styled/StyledRadio.tsx
+++ b/packages/ui/src/forms/styled/StyledRadio.tsx
@@ -21,14 +21,14 @@ export function StyledRadio({ value, options, onChange }: StyledRadioProps) {
       {options.map((option) => {
         const htmlId = `${id}@${option.id}`;
         return (
-          <div key={option.id} className="flex items-center gap-1 group">
+          <div key={option.id} className="group flex items-center gap-1">
             <input
               id={htmlId}
               type="radio"
               onChange={() => onChange(option.id)}
               checked={option.id === value}
               className={clsx(
-                "form-radio focus:ring-transparent text-indigo-500",
+                "form-radio text-indigo-500 focus:ring-transparent",
                 option.disabled ? "cursor-not-allowed" : "cursor-pointer"
               )}
               disabled={option.disabled}
@@ -39,8 +39,8 @@ export function StyledRadio({ value, options, onChange }: StyledRadioProps) {
               className={clsx(
                 "text-sm font-medium",
                 option.disabled
-                  ? "text-gray-400 cursor-not-allowed"
-                  : "text-gray-600  group-hover:text-gray-900 cursor-pointer"
+                  ? "cursor-not-allowed text-gray-400"
+                  : "cursor-pointer  text-gray-600 group-hover:text-gray-900"
               )}
             >
               {option.name}
diff --git a/packages/ui/src/forms/styled/StyledTextArea.tsx b/packages/ui/src/forms/styled/StyledTextArea.tsx
index 42a4bab16c..6c21be99ab 100644
--- a/packages/ui/src/forms/styled/StyledTextArea.tsx
+++ b/packages/ui/src/forms/styled/StyledTextArea.tsx
@@ -16,7 +16,7 @@ export const StyledTextArea = forwardRef<
       ref={ref}
       {...props}
       className={clsx(
-        "form-input block w-full text-sm shadow-sm rounded-md border-slate-300 focus:ring-indigo-500 active:ring-indigo-500 focus:border-indigo-500 active:border-indigo-500 placeholder:text-slate-300"
+        "form-input block w-full rounded-md border-slate-300 text-sm shadow-sm placeholder:text-slate-300 focus:border-indigo-500 focus:ring-indigo-500 active:border-indigo-500 active:ring-indigo-500"
         // disabled && "text-slate-400"
       )}
     />
diff --git a/packages/ui/src/stories/MouseTooltip.stories.tsx b/packages/ui/src/stories/MouseTooltip.stories.tsx
index cdba40e1f9..af0e824f1b 100644
--- a/packages/ui/src/stories/MouseTooltip.stories.tsx
+++ b/packages/ui/src/stories/MouseTooltip.stories.tsx
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    children: <div className="flex border p-1 w-24 h-24">Hover me</div>,
+    children: <div className="flex h-24 w-24 border p-1">Hover me</div>,
     isOpen: true,
     render: () => <div>Tooltip text</div>,
   },
diff --git a/packages/ui/src/stories/TextTooltip.stories.tsx b/packages/ui/src/stories/TextTooltip.stories.tsx
index 975d50dbb2..ee5dcfad3c 100644
--- a/packages/ui/src/stories/TextTooltip.stories.tsx
+++ b/packages/ui/src/stories/TextTooltip.stories.tsx
@@ -8,7 +8,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    children: <div className="flex border p-1 w-24">Hover me</div>,
+    children: <div className="flex w-24 border p-1">Hover me</div>,
     text: "Tooltip text",
     placement: "top",
   },
@@ -16,7 +16,7 @@ export const Primary: Story = {
 
 export const Long: Story = {
   args: {
-    children: <div className="flex border p-1 w-24">Hover me</div>,
+    children: <div className="flex w-24 border p-1">Hover me</div>,
     text: "Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.",
     placement: "top",
   },
diff --git a/packages/versioned-components/src/SquiggleVersionShower.tsx b/packages/versioned-components/src/SquiggleVersionShower.tsx
index 2ecfc6191a..7e6e33e473 100644
--- a/packages/versioned-components/src/SquiggleVersionShower.tsx
+++ b/packages/versioned-components/src/SquiggleVersionShower.tsx
@@ -28,7 +28,7 @@ export const SquiggleVersionShower: FC<{ version: string }> = ({ version }) => {
   return (
     <div className="flex items-center gap-2">
       <CurrentIcon size={14} className="text-slate-500" />
-      <div className="text-slate-600 text-sm">
+      <div className="text-sm text-slate-600">
         {uncheckedVersionTitle(version)}
       </div>
     </div>
diff --git a/packages/website/src/components/Footer.tsx b/packages/website/src/components/Footer.tsx
index 153bedde62..c9cbb31d0d 100644
--- a/packages/website/src/components/Footer.tsx
+++ b/packages/website/src/components/Footer.tsx
@@ -27,7 +27,7 @@ export const Footer: FC = () => {
     </div>
   );
   return (
-    <div className="flex-1 nx-mx-auto nx-flex mt-auto">
+    <div className="nx-mx-auto nx-flex mt-auto flex-1">
       <div className="px-3 pb-4">{externalLinkSection}</div>
     </div>
   );
diff --git a/packages/website/src/components/HomepageFeatures.tsx b/packages/website/src/components/HomepageFeatures.tsx
index dae81dfe68..11ddec38a3 100644
--- a/packages/website/src/components/HomepageFeatures.tsx
+++ b/packages/website/src/components/HomepageFeatures.tsx
@@ -33,7 +33,7 @@ const Feature: FC<{ title: string; description: ReactNode }> = ({
 }) => {
   return (
     <div className="text-center">
-      <h3 className="font-lora font-bold text-2xl pb-4">{title}</h3>
+      <h3 className="font-lora pb-4 text-2xl font-bold">{title}</h3>
       <p>{description}</p>
     </div>
   );
@@ -41,7 +41,7 @@ const Feature: FC<{ title: string; description: ReactNode }> = ({
 
 export const HomepageFeatures: FC = () => {
   return (
-    <section className="max-w-7xl mx-auto p-8 grid grid-cols-1 lg:grid-cols-3 gap-4">
+    <section className="mx-auto grid max-w-7xl grid-cols-1 gap-4 p-8 lg:grid-cols-3">
       {FeatureList.map((props, idx) => (
         <Feature key={idx} {...props} />
       ))}
diff --git a/packages/website/src/components/PlaygroundPage/ShareButton.tsx b/packages/website/src/components/PlaygroundPage/ShareButton.tsx
index ad2392772d..1fdf72bae2 100644
--- a/packages/website/src/components/PlaygroundPage/ShareButton.tsx
+++ b/packages/website/src/components/PlaygroundPage/ShareButton.tsx
@@ -17,7 +17,7 @@ export const ShareButton = () => {
           "Copied!"
         ) : (
           <div className="flex items-center space-x-1">
-            <ClipboardCopyIcon className="w-4 h-4" />
+            <ClipboardCopyIcon className="h-4 w-4" />
             <span>Share link</span>
           </div>
         )}
diff --git a/packages/website/src/components/PlaygroundPage/index.tsx b/packages/website/src/components/PlaygroundPage/index.tsx
index 0f9a772806..aa68e91f3d 100644
--- a/packages/website/src/components/PlaygroundPage/index.tsx
+++ b/packages/website/src/components/PlaygroundPage/index.tsx
@@ -110,7 +110,7 @@ export const PlaygroundPage: FC<{ version: string | null }> = (props) => {
               showSummary: hashData.showSummary ?? true,
             }}
             renderExtraControls={() => (
-              <div className="h-full flex justify-end items-center gap-2">
+              <div className="flex h-full items-center justify-end gap-2">
                 <ShareButton />
                 <SquigglePlaygroundVersionPicker
                   size="small"
diff --git a/packages/website/src/pages/index.mdx b/packages/website/src/pages/index.mdx
index f7bca7d3af..54b23ff74e 100644
--- a/packages/website/src/pages/index.mdx
+++ b/packages/website/src/pages/index.mdx
@@ -8,14 +8,14 @@ import { HomepageFeatures } from "../components/HomepageFeatures";
 
 export function HomepageHeader() {
   return (
-    <header className="p-8 bg-[#fff6ed]">
+    <header className="bg-[#fff6ed] p-8">
       <div className="flex flex-col items-center">
         <img alt="Squiggle logo" src="/img/squiggle-logo.png" width={70} />
-        <h1 className="text-[4rem] font-lato font-black text-[#e6484f]">
+        <h1 className="font-lato text-[4rem] font-black text-[#e6484f]">
           Squiggle
         </h1>
-        <h2 className="text-xl text-stone-400 font-semibold">Beta</h2>
-        <p className="my-4 max-w-md font-lora text-2xl text-stone-500 font-semibold text-center leading-relaxed">
+        <h2 className="text-xl font-semibold text-stone-400">Beta</h2>
+        <p className="font-lora my-4 max-w-md text-center text-2xl font-semibold leading-relaxed text-stone-500">
           A simple programming language for intuitive probabilistic estimation
         </p>
       </div>
diff --git a/packages/website/theme.config.tsx b/packages/website/theme.config.tsx
index d6e59532bd..7c7b25cf8a 100644
--- a/packages/website/theme.config.tsx
+++ b/packages/website/theme.config.tsx
@@ -14,7 +14,7 @@ const config = {
         height={24}
         alt="Squiggle logo"
       />
-      <span style={{ color: "#cd5835" }} className="font-black font-lato">
+      <span style={{ color: "#cd5835" }} className="font-lato font-black">
         Squiggle
       </span>
     </div>
diff --git a/prettier.config.js b/prettier.config.js
index 44e73f40af..65649117c4 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   trailingComma: "es5",
+  plugins: ["prettier-plugin-tailwindcss"],
   overrides: [
     {
       files: ["tsconfig.json", "language-configuration.json"],