From 7338bdd47aae4b37f76c71d6eccbdf30410693c7 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Fri, 11 Feb 2022 10:40:22 -0800
Subject: [PATCH] Automatically sort Tailwind classes with Prettier (#45)

* Add Prettier Tailwind plugin

* Autoformat Tailwind classes with Prettier
---
 web/components/add-funds-button.tsx     | 12 +++++-----
 web/components/advanced-panel.tsx       |  8 +++----
 web/components/amount-input.tsx         |  8 +++----
 web/components/avatar.tsx               |  4 ++--
 web/components/bet-panel.tsx            |  8 +++----
 web/components/bet-row.tsx              | 12 +++++-----
 web/components/bets-list.tsx            | 22 ++++++++---------
 web/components/contract-card.tsx        | 16 ++++++-------
 web/components/contract-feed.tsx        | 26 ++++++++++----------
 web/components/contract-overview.tsx    | 12 +++++-----
 web/components/contracts-list.tsx       |  6 ++---
 web/components/create-fold-button.tsx   |  4 ++--
 web/components/datetime-tooltip.tsx     |  2 +-
 web/components/edit-fold-button.tsx     |  6 ++---
 web/components/feed-create.tsx          |  8 +++----
 web/components/fold-tag.tsx             |  2 +-
 web/components/leaderboard.tsx          |  4 ++--
 web/components/loading-indicator.tsx    |  4 ++--
 web/components/manifold-logo.tsx        |  8 +++----
 web/components/menu.tsx                 |  6 ++---
 web/components/nav-bar.tsx              | 32 ++++++++++++-------------
 web/components/page.tsx                 |  2 +-
 web/components/profile-menu.tsx         |  6 ++---
 web/components/resolution-panel.tsx     |  2 +-
 web/components/site-link.tsx            |  4 ++--
 web/components/tags-input.tsx           |  2 +-
 web/components/tags-list.tsx            | 16 ++++++-------
 web/components/title.tsx                |  2 +-
 web/components/tweet-button.tsx         |  2 +-
 web/components/yes-no-selector.tsx      | 20 ++++++++--------
 web/package.json                        |  1 +
 web/pages/404.tsx                       |  2 +-
 web/pages/[username]/[contractSlug].tsx |  4 ++--
 web/pages/_document.tsx                 |  2 +-
 web/pages/account.tsx                   |  6 ++---
 web/pages/activity.tsx                  |  2 +-
 web/pages/add-funds.tsx                 | 10 ++++----
 web/pages/create.tsx                    | 22 ++++++++---------
 web/pages/fold/[...slugs]/index.tsx     | 22 ++++++++---------
 web/pages/folds.tsx                     | 14 +++++------
 web/pages/home.tsx                      | 10 ++++----
 web/pages/landing-page.tsx              | 32 ++++++++++++-------------
 web/pages/leaderboards.tsx              |  2 +-
 web/pages/make-predictions.tsx          | 26 ++++++++++----------
 web/pages/markets.tsx                   |  4 ++--
 web/pages/profile.tsx                   |  8 +++----
 web/pages/simulator.tsx                 | 12 +++++-----
 yarn.lock                               |  5 ++++
 48 files changed, 228 insertions(+), 222 deletions(-)

diff --git a/web/components/add-funds-button.tsx b/web/components/add-funds-button.tsx
index 3903f079..d17d89ce 100644
--- a/web/components/add-funds-button.tsx
+++ b/web/components/add-funds-button.tsx
@@ -20,7 +20,7 @@ export function AddFundsButton(props: { className?: string }) {
       <label
         htmlFor="add-funds"
         className={clsx(
-          'btn btn-xs btn-outline normal-case modal-button font-normal',
+          'btn btn-xs btn-outline modal-button font-normal normal-case',
           className
         )}
       >
@@ -30,21 +30,21 @@ export function AddFundsButton(props: { className?: string }) {
 
       <div className="modal">
         <div className="modal-box">
-          <div className="text-xl mb-6">Get Manifold Dollars</div>
+          <div className="mb-6 text-xl">Get Manifold Dollars</div>
 
-          <div className="text-gray-500 mb-6">
+          <div className="mb-6 text-gray-500">
             Use Manifold Dollars to trade in your favorite markets. <br /> (Not
             redeemable for cash.)
           </div>
 
-          <div className="text-gray-500 text-sm mb-2">Amount</div>
+          <div className="mb-2 text-sm text-gray-500">Amount</div>
           <FundsSelector
             selected={amountSelected}
             onSelect={setAmountSelected}
           />
 
           <div className="mt-6">
-            <div className="text-gray-500 text-sm mb-1">Price USD</div>
+            <div className="mb-1 text-sm text-gray-500">Price USD</div>
             <div className="text-xl">
               ${Math.round(amountSelected / 100)}.00
             </div>
@@ -61,7 +61,7 @@ export function AddFundsButton(props: { className?: string }) {
             >
               <button
                 type="submit"
-                className="btn btn-primary px-10 font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+                className="btn btn-primary bg-gradient-to-r from-teal-500 to-green-500 px-10 font-medium hover:from-teal-600 hover:to-green-600"
               >
                 Checkout
               </button>
diff --git a/web/components/advanced-panel.tsx b/web/components/advanced-panel.tsx
index 828d84dc..1a8cf389 100644
--- a/web/components/advanced-panel.tsx
+++ b/web/components/advanced-panel.tsx
@@ -9,7 +9,7 @@ export function AdvancedPanel(props: { children: any }) {
     <div
       tabIndex={0}
       className={clsx(
-        'relative collapse collapse-arrow',
+        'collapse collapse-arrow relative',
         collapsed ? 'collapse-close' : 'collapse-open'
       )}
     >
@@ -17,11 +17,11 @@ export function AdvancedPanel(props: { children: any }) {
         onClick={() => setCollapsed((collapsed) => !collapsed)}
         className="cursor-pointer"
       >
-        <div className="mt-4 mr-6 text-sm text-gray-500 text-right">
+        <div className="mt-4 mr-6 text-right text-sm text-gray-500">
           Advanced
         </div>
         <div
-          className="collapse-title p-0 absolute w-0 h-0 min-h-0"
+          className="collapse-title absolute h-0 min-h-0 w-0 p-0"
           style={{
             top: -2,
             right: -15,
@@ -30,7 +30,7 @@ export function AdvancedPanel(props: { children: any }) {
         />
       </div>
 
-      <div className="collapse-content !p-0 m-0 !bg-transparent">
+      <div className="collapse-content m-0 !bg-transparent !p-0">
         {children}
       </div>
     </div>
diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 32c68222..dcc29465 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -52,7 +52,7 @@ export function AmountInput(props: {
   return (
     <Col className={className}>
       <label className="input-group">
-        <span className="text-sm bg-gray-200">M$</span>
+        <span className="bg-gray-200 text-sm">M$</span>
         <input
           className={clsx(
             'input input-bordered',
@@ -69,13 +69,13 @@ export function AmountInput(props: {
         />
       </label>
       {error && (
-        <div className="font-medium tracking-wide text-red-500 text-xs whitespace-nowrap mr-auto self-center mt-4">
+        <div className="mr-auto mt-4 self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
           {error}
         </div>
       )}
       {user && (
-        <Col className="text-sm mt-3">
-          <div className="text-gray-500 whitespace-nowrap mb-2">
+        <Col className="mt-3 text-sm">
+          <div className="mb-2 whitespace-nowrap text-gray-500">
             Remaining balance
           </div>
           <Row className="gap-4">
diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx
index 7c61d0a2..b487de6d 100644
--- a/web/components/avatar.tsx
+++ b/web/components/avatar.tsx
@@ -19,11 +19,11 @@ export function Avatar(props: {
           Router.push(`/${username}`)
         }
   return (
-    <div className={`rounded-full bg-white flex-shrink-0 w-${s} h-${s}`}>
+    <div className={`flex-shrink-0 rounded-full bg-white w-${s} h-${s}`}>
       {avatarUrl ? (
         <img
           className={clsx(
-            'rounded-full flex items-center justify-center object-cover',
+            'flex items-center justify-center rounded-full object-cover',
             `w-${s} h-${s}`,
             !noLink && 'cursor-pointer'
           )}
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index a30c2c1b..3469b1c9 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -136,7 +136,7 @@ export function BetPanel(props: {
   }
 
   return (
-    <Col className={clsx('bg-white px-8 py-6 rounded-md', className)}>
+    <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
       <Title
         className={clsx('!mt-0', title ? '!text-xl' : '')}
         text={panelTitle}
@@ -149,7 +149,7 @@ export function BetPanel(props: {
         onSelect={(choice) => onBetChoice(choice)}
       />
 
-      <div className="my-3 text-sm text-gray-500 text-left">Amount </div>
+      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
       <AmountInput
         inputClassName="w-full"
         amount={betAmount}
@@ -201,7 +201,7 @@ export function BetPanel(props: {
               ? 'btn-disabled'
               : betChoice === 'YES'
               ? 'btn-primary'
-              : 'bg-red-400 hover:bg-red-500 border-none',
+              : 'border-none bg-red-400 hover:bg-red-500',
             isSubmitting ? 'loading' : ''
           )}
           onClick={betDisabled ? undefined : submitBet}
@@ -210,7 +210,7 @@ export function BetPanel(props: {
         </button>
       ) : (
         <button
-          className="btn mt-4 border-none normal-case text-lg font-medium whitespace-nowrap px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+          className="btn mt-4 whitespace-nowrap border-none bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
           onClick={firebaseLogin}
         >
           Sign in to trade!
diff --git a/web/components/bet-row.tsx b/web/components/bet-row.tsx
index f7a98623..60967e25 100644
--- a/web/components/bet-row.tsx
+++ b/web/components/bet-row.tsx
@@ -21,8 +21,8 @@ export default function BetRow(props: {
   return (
     <>
       <div className={className}>
-        <Row className="items-center gap-2 justify-end">
-          <div className={clsx('text-gray-400 mr-2', labelClassName)}>
+        <Row className="items-center justify-end gap-2">
+          <div className={clsx('mr-2 text-gray-400', labelClassName)}>
             Place a trade
           </div>
           <YesNoSelector
@@ -58,10 +58,10 @@ export function Modal(props: {
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
-        className="fixed z-50 inset-0 overflow-y-auto"
+        className="fixed inset-0 z-50 overflow-y-auto"
         onClose={setOpen}
       >
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -76,7 +76,7 @@ export function Modal(props: {
 
           {/* This element is to trick the browser into centering the modal contents. */}
           <span
-            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            className="hidden sm:inline-block sm:h-screen sm:align-middle"
             aria-hidden="true"
           >
             &#8203;
@@ -90,7 +90,7 @@ export function Modal(props: {
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6">
+            <div className="inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6 sm:align-middle">
               {children}
             </div>
           </Transition.Child>
diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 6f144c19..c66a836c 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -121,7 +121,7 @@ export function BetsList(props: { user: User }) {
 
   return (
     <Col className="mt-6 gap-6">
-      <Col className="mx-4 md:mx-0 sm:flex-row sm:justify-between gap-4">
+      <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
         <Row className="gap-8">
           <Col>
             <div className="text-sm text-gray-500">Currently invested</div>
@@ -164,7 +164,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
     <div
       tabIndex={0}
       className={clsx(
-        'p-6 bg-white card card-body shadow-xl collapse collapse-arrow cursor-pointer relative',
+        'card card-body collapse collapse-arrow relative cursor-pointer bg-white p-6 shadow-xl',
         collapsed ? 'collapse-close' : 'collapse-open pb-2'
       )}
       onClick={() => setCollapsed((collapsed) => !collapsed)}
@@ -183,12 +183,12 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
 
             {/* Show carrot for collapsing. Hack the positioning. */}
             <div
-              className="collapse-title p-0 absolute w-0 h-0 min-h-0"
+              className="collapse-title absolute h-0 min-h-0 w-0 p-0"
               style={{ top: -10, right: 4 }}
             />
           </Row>
 
-          <Row className="gap-2 text-gray-500 text-sm items-center">
+          <Row className="items-center gap-2 text-sm text-gray-500">
             {resolution ? (
               <div>
                 Resolved <OutcomeLabel outcome={resolution} />
@@ -205,7 +205,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
         </Col>
 
         <MyBetsSummary
-          className="flex-1 justify-end mr-5 sm:mr-8"
+          className="mr-5 flex-1 justify-end sm:mr-8"
           contract={contract}
           bets={bets}
         />
@@ -259,7 +259,7 @@ export function MyBetsSummary(props: {
       )}
     >
       <Col>
-        <div className="text-sm text-gray-500 whitespace-nowrap">Invested</div>
+        <div className="whitespace-nowrap text-sm text-gray-500">Invested</div>
         <div className="whitespace-nowrap">{formatMoney(betsTotal)}</div>
       </Col>
       {resolution ? (
@@ -270,20 +270,20 @@ export function MyBetsSummary(props: {
       ) : (
         <Row className="gap-4 sm:gap-6">
           <Col>
-            <div className="text-sm text-gray-500 whitespace-nowrap">
+            <div className="whitespace-nowrap text-sm text-gray-500">
               Payout if <YesLabel />
             </div>
             <div className="whitespace-nowrap">{formatMoney(yesWinnings)}</div>
           </Col>
           <Col>
-            <div className="text-sm text-gray-500 whitespace-nowrap">
+            <div className="whitespace-nowrap text-sm text-gray-500">
               Payout if <NoLabel />
             </div>
             <div className="whitespace-nowrap">{formatMoney(noWinnings)}</div>
           </Col>
           {showMKT && (
             <Col>
-              <div className="text-sm text-gray-500 whitespace-nowrap">
+              <div className="whitespace-nowrap text-sm text-gray-500">
                 Payout if <MarketLabel />
               </div>
               <div className="whitespace-nowrap">
@@ -313,7 +313,7 @@ export function ContractBetsTable(props: {
 
   return (
     <div className={clsx('overflow-x-auto', className)}>
-      <table className="table table-zebra table-compact text-gray-500 w-full">
+      <table className="table-zebra table-compact table w-full text-gray-500">
         <thead>
           <tr className="p-2">
             <th>Date</th>
@@ -415,7 +415,7 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
         setIsSubmitting(false)
       }}
     >
-      <div className="text-2xl mb-4">
+      <div className="mb-4 text-2xl">
         Sell <OutcomeLabel outcome={bet.outcome} />
       </div>
       <div>
diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index aa6f0ecc..58a05a0f 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -31,7 +31,7 @@ export function ContractCard(props: {
     <div>
       <div
         className={clsx(
-          'bg-white hover:bg-gray-100 shadow-md rounded-lg p-6 relative',
+          'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
           className
         )}
       >
@@ -118,9 +118,9 @@ function AbbrContractDetails(props: {
   const { truePool } = contractMetrics(contract)
 
   return (
-    <Col className={clsx('text-sm text-gray-500 gap-2')}>
-      <Row className="justify-between items-center">
-        <Row className="gap-2 items-center">
+    <Col className={clsx('gap-2 text-sm text-gray-500')}>
+      <Row className="items-center justify-between">
+        <Row className="items-center gap-2">
           <Avatar
             username={creatorUsername}
             avatarUrl={contract.creatorAvatarUrl}
@@ -135,12 +135,12 @@ function AbbrContractDetails(props: {
 
         {showHotVolume ? (
           <div className="whitespace-nowrap">
-            <TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '}
+            <TrendingUpIcon className="inline h-5 w-5 text-gray-500" />{' '}
             {formatMoney(volume24Hours)}
           </div>
         ) : showCloseTime ? (
           <div className="whitespace-nowrap">
-            <ClockIcon className="h-5 w-5 -my-1 text-gray-500 inline" /> Closes{' '}
+            <ClockIcon className="-my-1 inline h-5 w-5 text-gray-500" /> Closes{' '}
             {fromNow(closeTime || 0)}
           </div>
         ) : (
@@ -157,8 +157,8 @@ export function ContractDetails(props: { contract: Contract }) {
   const { truePool, createdDate, resolvedDate } = contractMetrics(contract)
 
   return (
-    <Col className="text-sm text-gray-500 gap-2 sm:flex-row sm:flex-wrap">
-      <Row className="gap-2 flex-wrap items-center">
+    <Col className="gap-2 text-sm text-gray-500 sm:flex-row sm:flex-wrap">
+      <Row className="flex-wrap items-center gap-2">
         <Avatar
           username={creatorUsername}
           avatarUrl={contract.creatorAvatarUrl}
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index cf794f74..e3e5803e 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -85,7 +85,7 @@ function Timestamp(props: { time: number }) {
   const { time } = props
   return (
     <DateTimeTooltip time={time}>
-      <span className="whitespace-nowrap text-gray-400 ml-1">
+      <span className="ml-1 whitespace-nowrap text-gray-400">
         {fromNow(time)}
       </span>
     </DateTimeTooltip>
@@ -116,7 +116,7 @@ function FeedBet(props: { activityItem: any }) {
           <Avatar avatarUrl={user?.avatarUrl} />
         ) : (
           <div className="relative px-1">
-            <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
               <UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
             </div>
           </div>
@@ -171,7 +171,7 @@ function EditContract(props: {
   return editing ? (
     <div className="mt-4">
       <Textarea
-        className="textarea h-24 textarea-bordered w-full mb-1"
+        className="textarea textarea-bordered mb-1 h-24 w-full"
         rows={3}
         value={text}
         onChange={(e) => setText(e.target.value || '')}
@@ -238,7 +238,7 @@ export function ContractDescription(props: {
   if (!isCreator && !contract.description.trim()) return null
 
   return (
-    <div className="whitespace-pre-line break-words mt-2 text-gray-700">
+    <div className="mt-2 whitespace-pre-line break-words text-gray-700">
       <Linkify text={contract.description} />
       <br />
       {isCreator && (
@@ -289,7 +289,7 @@ function TruncatedComment(props: {
   }
 
   return (
-    <div className="whitespace-pre-line break-words mt-2 text-gray-700">
+    <div className="mt-2 whitespace-pre-line break-words text-gray-700">
       <Linkify text={truncated} />
       {truncated != comment && (
         <SiteLink href={moreHref} className="text-indigo-700">
@@ -309,7 +309,7 @@ function FeedQuestion(props: { contract: Contract }) {
   // Currently hidden on mobile; ideally we'd fit this in somewhere.
   const closeMessage =
     contract.isResolved || !contract.closeTime ? null : (
-      <span className="float-right text-gray-400 hidden sm:inline">
+      <span className="float-right hidden text-gray-400 sm:inline">
         {formatMoney(truePool)} pool
         <span className="mx-2">•</span>
         {contract.closeTime > Date.now() ? 'Closes' : 'Closed'}
@@ -324,7 +324,7 @@ function FeedQuestion(props: { contract: Contract }) {
         avatarUrl={contract.creatorAvatarUrl}
       />
       <div className="min-w-0 flex-1 py-1.5">
-        <div className="text-sm text-gray-500 mb-2">
+        <div className="mb-2 text-sm text-gray-500">
           <UserLink
             className="text-gray-900"
             name={creatorName}
@@ -333,10 +333,10 @@ function FeedQuestion(props: { contract: Contract }) {
           asked
           {closeMessage}
         </div>
-        <Col className="items-start sm:flex-row justify-between gap-2 sm:gap-4 mb-4">
+        <Col className="mb-4 items-start justify-between gap-2 sm:flex-row sm:gap-4">
           <SiteLink
             href={contractPath(contract)}
-            className="text-lg sm:text-xl text-indigo-700"
+            className="text-lg text-indigo-700 sm:text-xl"
           >
             {question}
           </SiteLink>
@@ -405,7 +405,7 @@ function FeedResolve(props: { contract: Contract }) {
     <>
       <div>
         <div className="relative px-1">
-          <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
             <OutcomeIcon outcome={resolution} />
           </div>
         </div>
@@ -432,7 +432,7 @@ function FeedClose(props: { contract: Contract }) {
     <>
       <div>
         <div className="relative px-1">
-          <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
             <LockClosedIcon
               className="h-5 w-5 text-gray-500"
               aria-hidden="true"
@@ -575,7 +575,7 @@ function FeedBetGroup(props: { activityItem: any }) {
     <>
       <div>
         <div className="relative px-1">
-          <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
             <UsersIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
           </div>
         </div>
@@ -599,7 +599,7 @@ function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
     <>
       <button onClick={() => setExpanded(true)}>
         <div className="relative px-1">
-          <div className="h-8 w-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300">
             <DotsVerticalIcon
               className="h-5 w-5 text-gray-500"
               aria-hidden="true"
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index abee76f2..6245500a 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -50,11 +50,11 @@ export const ContractOverview = (props: {
     <Col className={clsx('mb-6', className)}>
       <Row className="justify-between gap-4 px-2">
         <Col className="gap-4">
-          <div className="text-2xl md:text-3xl text-indigo-700">
+          <div className="text-2xl text-indigo-700 md:text-3xl">
             <Linkify text={contract.question} />
           </div>
 
-          <Row className="justify-between items-center gap-4">
+          <Row className="items-center justify-between gap-4">
             <ResolutionOrChance
               className="md:hidden"
               resolution={resolution}
@@ -74,7 +74,7 @@ export const ContractOverview = (props: {
           <ContractDetails contract={contract} />
         </Col>
 
-        <Col className="hidden md:flex justify-between items-end">
+        <Col className="hidden items-end justify-between md:flex">
           <ResolutionOrChance
             className="items-end"
             resolution={resolution}
@@ -88,7 +88,7 @@ export const ContractOverview = (props: {
 
       <ContractProbGraph contract={contract} bets={bets} />
 
-      <Row className="hidden sm:flex justify-between items-center mt-6 ml-4 gap-4">
+      <Row className="mt-6 ml-4 hidden items-center justify-between gap-4 sm:flex">
         {folds.length === 0 ? (
           <TagsInput className={clsx('mx-4')} contract={contract} />
         ) : (
@@ -97,7 +97,7 @@ export const ContractOverview = (props: {
         <TweetButton tweetText={tweetText} />
       </Row>
 
-      <Col className="sm:hidden mt-6 ml-4 gap-4">
+      <Col className="mt-6 ml-4 gap-4 sm:hidden">
         <TweetButton className="self-end" tweetText={tweetText} />
         {folds.length === 0 ? (
           <TagsInput contract={contract} />
@@ -107,7 +107,7 @@ export const ContractOverview = (props: {
       </Col>
 
       {folds.length > 0 && (
-        <RevealableTagsInput className="mt-4 mx-4" contract={contract} />
+        <RevealableTagsInput className="mx-4 mt-4" contract={contract} />
       )}
 
       <Spacer h={12} />
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index c933cb12..495b724e 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -32,14 +32,14 @@ export function ContractsGrid(props: {
 
   if (contracts.length === 0) {
     return (
-      <p className="text-gray-500 mx-2">
+      <p className="mx-2 text-gray-500">
         No markets found. Why not create one?
       </p>
     )
   }
 
   return (
-    <ul className="w-full grid grid-cols-1 gap-6 md:grid-cols-2">
+    <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
       {contracts.map((contract) => (
         <ContractCard
           contract={contract}
@@ -250,7 +250,7 @@ export function SearchableGrid(props: {
   return (
     <div>
       {/* Show a search input next to a sort dropdown */}
-      <div className="flex justify-between gap-2 mt-2 mb-8">
+      <div className="mt-2 mb-8 flex justify-between gap-2">
         <input
           type="text"
           value={query}
diff --git a/web/components/create-fold-button.tsx b/web/components/create-fold-button.tsx
index aa8cbae0..2f1289c4 100644
--- a/web/components/create-fold-button.tsx
+++ b/web/components/create-fold-button.tsx
@@ -51,7 +51,7 @@ export function CreateFoldButton() {
       id="create-fold"
       openModelBtn={{
         label: 'New',
-        icon: <PlusCircleIcon className="w-5 h-5 mr-2" />,
+        icon: <PlusCircleIcon className="mr-2 h-5 w-5" />,
         className: clsx(
           isSubmitting ? 'loading btn-disabled' : 'btn-primary',
           'btn-sm'
@@ -65,7 +65,7 @@ export function CreateFoldButton() {
     >
       <Title className="!mt-0" text="Create a community" />
 
-      <Col className="text-gray-500 gap-1">
+      <Col className="gap-1 text-gray-500">
         <div>
           Markets are included in a community if they match one or more tags.
         </div>
diff --git a/web/components/datetime-tooltip.tsx b/web/components/datetime-tooltip.tsx
index 064943ff..69751eb6 100644
--- a/web/components/datetime-tooltip.tsx
+++ b/web/components/datetime-tooltip.tsx
@@ -20,7 +20,7 @@ export function DateTimeTooltip(props: {
   return (
     <>
       <span
-        className="tooltip cursor-default hidden sm:inline-block"
+        className="tooltip hidden cursor-default sm:inline-block"
         data-tip={toolTip}
       >
         {props.children}
diff --git a/web/components/edit-fold-button.tsx b/web/components/edit-fold-button.tsx
index 246c19b6..de88f148 100644
--- a/web/components/edit-fold-button.tsx
+++ b/web/components/edit-fold-button.tsx
@@ -48,10 +48,10 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
       <label
         htmlFor="edit"
         className={clsx(
-          'modal-button text-sm text-gray-700 cursor-pointer whitespace-nowrap'
+          'modal-button cursor-pointer whitespace-nowrap text-sm text-gray-700'
         )}
       >
-        <PencilIcon className="h-4 w-4 inline" /> Edit
+        <PencilIcon className="inline h-4 w-4" /> Edit
       </label>
       <input type="checkbox" id="edit" className="modal-toggle" />
 
@@ -118,7 +118,7 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
                 }
               }}
               className={clsx(
-                'btn btn-sm btn-outline hover:bg-red-500 hover:border-red-500 mr-auto self-center'
+                'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
               )}
             >
               Delete
diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx
index 9e14fd22..a2d52135 100644
--- a/web/components/feed-create.tsx
+++ b/web/components/feed-create.tsx
@@ -16,12 +16,12 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
       <Col className="w-full bg-white p-6 sm:rounded-lg">
         <h1 className="mt-4 text-4xl sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
           <div className="mb-2">Create your own</div>
-          <div className="font-bold bg-clip-text text-transparent bg-gradient-to-r  from-teal-400 to-green-400">
+          <div className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text  font-bold text-transparent">
             prediction markets
           </div>
         </h1>
         <Spacer h={6} />
-        <div className="text-gray-500 mb-4">
+        <div className="mb-4 text-gray-500">
           Find prediction markets run by your favorite creators, or make your
           own.
           <br />
@@ -81,7 +81,7 @@ export default function FeedCreate(props: {
 
   return (
     <div
-      className={clsx('w-full bg-white p-4 shadow-md mt-2', className)}
+      className={clsx('mt-2 w-full bg-white p-4 shadow-md', className)}
       onClick={() => !question && inputRef.current?.focus()}
     >
       <div className="relative flex items-start space-x-3">
@@ -94,7 +94,7 @@ export default function FeedCreate(props: {
           </div>
           <textarea
             ref={inputRef as any}
-            className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none focus:ring-transparent placeholder:text-gray-400"
+            className="w-full resize-none appearance-none border-transparent bg-transparent p-0 text-lg text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent sm:text-xl"
             placeholder={placeholder}
             value={question}
             onClick={(e) => e.stopPropagation()}
diff --git a/web/components/fold-tag.tsx b/web/components/fold-tag.tsx
index 3ecb2c22..bc3999e5 100644
--- a/web/components/fold-tag.tsx
+++ b/web/components/fold-tag.tsx
@@ -7,7 +7,7 @@ export function FoldTag(props: { fold: Fold }) {
   return (
     <div
       className={clsx(
-        'bg-white hover:bg-gray-100 px-4 py-2 rounded-full shadow-md',
+        'rounded-full bg-white px-4 py-2 shadow-md hover:bg-gray-100',
         'cursor-pointer'
       )}
     >
diff --git a/web/components/leaderboard.tsx b/web/components/leaderboard.tsx
index f5d7ae47..30f4d596 100644
--- a/web/components/leaderboard.tsx
+++ b/web/components/leaderboard.tsx
@@ -19,10 +19,10 @@ export function Leaderboard(props: {
     <div className={clsx('w-full px-1', className)}>
       <Title text={title} className="!mt-0" />
       {users.length === 0 ? (
-        <div className="text-gray-500 ml-2">None yet</div>
+        <div className="ml-2 text-gray-500">None yet</div>
       ) : (
         <div className="overflow-x-auto">
-          <table className="table table-zebra table-compact text-gray-500 w-full">
+          <table className="table-zebra table-compact table w-full text-gray-500">
             <thead>
               <tr className="p-2">
                 <th>#</th>
diff --git a/web/components/loading-indicator.tsx b/web/components/loading-indicator.tsx
index 7ef73099..ba0c129b 100644
--- a/web/components/loading-indicator.tsx
+++ b/web/components/loading-indicator.tsx
@@ -4,9 +4,9 @@ export function LoadingIndicator(props: { className?: string }) {
   const { className } = props
 
   return (
-    <div className={clsx('flex justify-center items-center', className)}>
+    <div className={clsx('flex items-center justify-center', className)}>
       <div
-        className="spinner-border animate-spin inline-block w-8 h-8 border-4 border-solid border-r-transparent rounded-full border-indigo-500"
+        className="spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-500 border-r-transparent"
         role="status"
       />
     </div>
diff --git a/web/components/manifold-logo.tsx b/web/components/manifold-logo.tsx
index 70e98795..75134ef8 100644
--- a/web/components/manifold-logo.tsx
+++ b/web/components/manifold-logo.tsx
@@ -13,16 +13,16 @@ export function ManifoldLogo(props: {
 
   return (
     <Link href={user ? '/home' : '/'}>
-      <a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}>
+      <a className={clsx('flex flex-shrink-0 flex-row gap-4', className)}>
         <img
-          className="hover:rotate-12 transition-all"
+          className="transition-all hover:rotate-12"
           src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
           width={45}
           height={45}
         />
         <div
           className={clsx(
-            'sm:hidden font-major-mono lowercase mt-1 text-lg',
+            'font-major-mono mt-1 text-lg lowercase sm:hidden',
             darkBackground && 'text-white'
           )}
         >
@@ -32,7 +32,7 @@ export function ManifoldLogo(props: {
         </div>
         <div
           className={clsx(
-            'hidden sm:flex font-major-mono lowercase mt-1 sm:text-2xl md:whitespace-nowrap',
+            'font-major-mono mt-1 hidden lowercase sm:flex sm:text-2xl md:whitespace-nowrap',
             darkBackground && 'text-white'
           )}
         >
diff --git a/web/components/menu.tsx b/web/components/menu.tsx
index ca1f2454..a0345e37 100644
--- a/web/components/menu.tsx
+++ b/web/components/menu.tsx
@@ -9,9 +9,9 @@ export function MenuButton(props: {
 }) {
   const { buttonContent, menuItems, className } = props
   return (
-    <Menu as="div" className={clsx('flex-shrink-0 relative z-40', className)}>
+    <Menu as="div" className={clsx('relative z-40 flex-shrink-0', className)}>
       <div>
-        <Menu.Button className="rounded-full flex">
+        <Menu.Button className="flex rounded-full">
           <span className="sr-only">Open user menu</span>
           {buttonContent}
         </Menu.Button>
@@ -25,7 +25,7 @@ export function MenuButton(props: {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 focus:outline-none">
+        <Menu.Items className="absolute right-0 mt-2 w-40 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           {menuItems.map((item) => (
             <Menu.Item key={item.name}>
               {({ active }) => (
diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx
index b451480f..1f54e090 100644
--- a/web/components/nav-bar.tsx
+++ b/web/components/nav-bar.tsx
@@ -29,16 +29,16 @@ export function NavBar(props: {
 
   return (
     <>
-      <nav className={clsx('w-full p-4 mb-4', className)} aria-label="Global">
+      <nav className={clsx('mb-4 w-full p-4', className)} aria-label="Global">
         <Row
           className={clsx(
-            'justify-between items-center mx-auto sm:px-4',
+            'mx-auto items-center justify-between sm:px-4',
             wide ? 'max-w-6xl' : 'max-w-4xl'
           )}
         >
           <ManifoldLogo className="my-1" darkBackground={darkBackground} />
 
-          <Row className="items-center gap-6 sm:gap-8 ml-6">
+          <Row className="ml-6 items-center gap-6 sm:gap-8">
             {(user || user === null || assertUser) && (
               <NavOptions
                 user={user}
@@ -58,13 +58,13 @@ export function NavBar(props: {
 function BottomNavBar(props: { user: User }) {
   const { user } = props
   return (
-    <nav className="md:hidden fixed bottom-0 inset-x-0 bg-white z-20 flex justify-between text-xs text-gray-700 border-t-2">
+    <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 md:hidden">
       <Link href="/home">
         <a
           href="#"
-          className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700 transition duration-300"
+          className="block w-full py-2 px-3 text-center transition duration-300 hover:bg-indigo-200 hover:text-indigo-700"
         >
-          <HomeIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          <HomeIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
           {/* Home */}
         </a>
       </Link>
@@ -72,9 +72,9 @@ function BottomNavBar(props: { user: User }) {
       <Link href="/markets">
         <a
           href="#"
-          className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
+          className="block w-full py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
         >
-          <SearchIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          <SearchIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
           {/* Explore */}
         </a>
       </Link>
@@ -82,9 +82,9 @@ function BottomNavBar(props: { user: User }) {
       <Link href="/folds">
         <a
           href="#"
-          className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
+          className="block w-full py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
         >
-          <UserGroupIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          <UserGroupIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
           {/* Folds */}
         </a>
       </Link>
@@ -92,9 +92,9 @@ function BottomNavBar(props: { user: User }) {
       <Link href="/trades">
         <a
           href="#"
-          className="w-full block py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
+          className="block w-full py-2 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700"
         >
-          <CollectionIcon className="h-6 w-6 my-1 mx-auto" aria-hidden="true" />
+          <CollectionIcon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
           {/* Your Trades */}
         </a>
       </Link>
@@ -118,7 +118,7 @@ function NavOptions(props: {
         <Link href="/about">
           <a
             className={clsx(
-              'text-base hidden md:block whitespace-nowrap',
+              'hidden whitespace-nowrap text-base md:block',
               themeClasses
             )}
           >
@@ -130,7 +130,7 @@ function NavOptions(props: {
       <Link href="/folds">
         <a
           className={clsx(
-            'text-base hidden md:block whitespace-nowrap',
+            'hidden whitespace-nowrap text-base md:block',
             themeClasses
           )}
         >
@@ -141,7 +141,7 @@ function NavOptions(props: {
       <Link href="/markets">
         <a
           className={clsx(
-            'text-base hidden md:block whitespace-nowrap',
+            'hidden whitespace-nowrap text-base md:block',
             themeClasses
           )}
         >
@@ -152,7 +152,7 @@ function NavOptions(props: {
       {showSignedOut && (
         <>
           <button
-            className="btn btn-sm btn-outline normal-case text-base font-medium px-6 bg-gradient-to-r"
+            className="btn btn-sm btn-outline bg-gradient-to-r px-6 text-base font-medium normal-case"
             onClick={firebaseLogin}
           >
             Sign in
diff --git a/web/components/page.tsx b/web/components/page.tsx
index 4ea43ea8..472ec9a5 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -15,7 +15,7 @@ export function Page(props: {
 
       <div
         className={clsx(
-          'w-full mx-auto pb-16',
+          'mx-auto w-full pb-16',
           wide ? 'max-w-6xl' : 'max-w-4xl',
           margin && 'px-4'
         )}
diff --git a/web/components/profile-menu.tsx b/web/components/profile-menu.tsx
index 95899146..50d2fcbc 100644
--- a/web/components/profile-menu.tsx
+++ b/web/components/profile-menu.tsx
@@ -16,7 +16,7 @@ export function ProfileMenu(props: { user: User | undefined }) {
       />
 
       <MenuButton
-        className="md:hidden mr-2"
+        className="mr-2 md:hidden"
         menuItems={getNavigationOptions(user, { mobile: true })}
         buttonContent={<ProfileSummary user={user} />}
       />
@@ -81,12 +81,12 @@ function getNavigationOptions(
 function ProfileSummary(props: { user: User | undefined }) {
   const { user } = props
   return (
-    <Col className="avatar items-center sm:flex-row gap-2 sm:gap-4">
+    <Col className="avatar items-center gap-2 sm:flex-row sm:gap-4">
       <Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
 
       <div className="truncate text-left sm:w-32">
         <div className="hidden sm:flex">{user?.name}</div>
-        <div className="text-gray-700 text-sm">
+        <div className="text-sm text-gray-700">
           {user ? formatMoney(Math.floor(user.balance)) : ' '}
         </div>
       </div>
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index 256051cc..06d5d573 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -63,7 +63,7 @@ export function ResolutionPanel(props: {
       : 'btn-disabled'
 
   return (
-    <Col className={clsx('bg-white px-8 py-6 rounded-md', className)}>
+    <Col className={clsx('rounded-md bg-white px-8 py-6', className)}>
       <Title className="mt-0" text="Your market" />
 
       <div className="pt-2 pb-1 text-sm text-gray-500">Resolve outcome</div>
diff --git a/web/components/site-link.tsx b/web/components/site-link.tsx
index 95b2758c..d1dbca10 100644
--- a/web/components/site-link.tsx
+++ b/web/components/site-link.tsx
@@ -12,7 +12,7 @@ export const SiteLink = (props: {
     <a
       href={href}
       className={clsx(
-        'hover:underline hover:decoration-indigo-400 hover:decoration-2 z-10',
+        'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
         className
       )}
       onClick={(e) => e.stopPropagation()}
@@ -23,7 +23,7 @@ export const SiteLink = (props: {
     <Link href={href}>
       <a
         className={clsx(
-          'hover:underline hover:decoration-indigo-400 hover:decoration-2 z-10',
+          'z-10 hover:underline hover:decoration-indigo-400 hover:decoration-2',
           className
         )}
         onClick={(e) => e.stopPropagation()}
diff --git a/web/components/tags-input.tsx b/web/components/tags-input.tsx
index 1e1678dc..947ad66b 100644
--- a/web/components/tags-input.tsx
+++ b/web/components/tags-input.tsx
@@ -57,7 +57,7 @@ export function RevealableTagsInput(props: {
     return (
       <div
         className={clsx(
-          'text-gray-500 cursor-pointer hover:underline hover:decoration-indigo-400 hover:decoration-2',
+          'cursor-pointer text-gray-500 hover:underline hover:decoration-indigo-400 hover:decoration-2',
           className
         )}
         onClick={() => setHidden((hidden) => !hidden)}
diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx
index 33b54e96..e307c577 100644
--- a/web/components/tags-list.tsx
+++ b/web/components/tags-list.tsx
@@ -7,11 +7,11 @@ function Hashtag(props: { tag: string; noLink?: boolean }) {
   const body = (
     <div
       className={clsx(
-        'bg-gray-100 border-2 px-3 py-1 rounded-full shadow-md',
+        'rounded-full border-2 bg-gray-100 px-3 py-1 shadow-md',
         !noLink && 'cursor-pointer'
       )}
     >
-      <span className="text-gray-600 text-sm">{tag}</span>
+      <span className="text-sm text-gray-600">{tag}</span>
     </div>
   )
 
@@ -31,8 +31,8 @@ export function TagsList(props: {
 }) {
   const { tags, className, noLink, noLabel } = props
   return (
-    <Row className={clsx('items-center flex-wrap gap-2', className)}>
-      {!noLabel && <div className="text-gray-500 mr-1">Tags</div>}
+    <Row className={clsx('flex-wrap items-center gap-2', className)}>
+      {!noLabel && <div className="mr-1 text-gray-500">Tags</div>}
       {tags.map((tag) => (
         <Hashtag
           key={tag}
@@ -51,11 +51,11 @@ export function FoldTag(props: { fold: { slug: string; name: string } }) {
     <SiteLink href={`/fold/${slug}`} className="flex items-center">
       <div
         className={clsx(
-          'bg-white border-2 px-4 py-1 rounded-full shadow-md',
+          'rounded-full border-2 bg-white px-4 py-1 shadow-md',
           'cursor-pointer'
         )}
       >
-        <span className="text-gray-500 text-sm">{name}</span>
+        <span className="text-sm text-gray-500">{name}</span>
       </div>
     </SiteLink>
   )
@@ -68,10 +68,10 @@ export function FoldTagList(props: {
 }) {
   const { folds, noLabel, className } = props
   return (
-    <Row className={clsx('flex-wrap gap-2 items-center', className)}>
+    <Row className={clsx('flex-wrap items-center gap-2', className)}>
       {folds.length > 0 && (
         <>
-          {!noLabel && <div className="text-gray-500 mr-1">Communities</div>}
+          {!noLabel && <div className="mr-1 text-gray-500">Communities</div>}
           {folds.map((fold) => (
             <FoldTag key={fold.slug} fold={fold} />
           ))}
diff --git a/web/components/title.tsx b/web/components/title.tsx
index f08e2b09..e58aee39 100644
--- a/web/components/title.tsx
+++ b/web/components/title.tsx
@@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
   return (
     <h1
       className={clsx(
-        'sm:text-3xl text-2xl text-indigo-700 inline-block sm:my-6 my-4',
+        'my-4 inline-block text-2xl text-indigo-700 sm:my-6 sm:text-3xl',
         className
       )}
     >
diff --git a/web/components/tweet-button.tsx b/web/components/tweet-button.tsx
index 121c46fe..f4ddf19e 100644
--- a/web/components/tweet-button.tsx
+++ b/web/components/tweet-button.tsx
@@ -6,7 +6,7 @@ export function TweetButton(props: { className?: string; tweetText?: string }) {
   return (
     <a
       className={clsx(
-        'btn btn-xs normal-case border-none flex flex-row flex-nowrap',
+        'btn btn-xs flex flex-row flex-nowrap border-none normal-case',
         className
       )}
       style={{ backgroundColor: '#1da1f2' }}
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index 64270d05..43d9975a 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -16,10 +16,10 @@ export function YesNoSelector(props: {
     <Row className={clsx('space-x-3', className)}>
       <button
         className={clsx(
-          'flex-1 inline-flex justify-center items-center p-2  hover:bg-primary-focus hover:text-white rounded-lg border-primary hover:border-primary-focus border-2',
+          'hover:bg-primary-focus border-primary hover:border-primary-focus inline-flex flex-1  items-center justify-center rounded-lg border-2 p-2 hover:text-white',
           selected == 'YES'
             ? 'bg-primary text-white'
-            : 'bg-transparent text-primary',
+            : 'text-primary bg-transparent',
           btnClassName
         )}
         onClick={() => onSelect('YES')}
@@ -28,7 +28,7 @@ export function YesNoSelector(props: {
       </button>
       <button
         className={clsx(
-          'flex-1 inline-flex justify-center items-center p-2  hover:bg-red-500 hover:text-white rounded-lg border-red-400 hover:border-red-500 border-2',
+          'inline-flex flex-1 items-center justify-center rounded-lg  border-2 border-red-400 p-2 hover:border-red-500 hover:bg-red-500 hover:text-white',
           selected == 'NO'
             ? 'bg-red-400 text-white'
             : 'bg-transparent text-red-400',
@@ -54,7 +54,7 @@ export function YesNoCancelSelector(props: {
 
   return (
     <Col>
-      <Row className={clsx('space-x-3 w-full', className)}>
+      <Row className={clsx('w-full space-x-3', className)}>
         <Button
           color={selected === 'YES' ? 'green' : 'gray'}
           onClick={() => onSelect('YES')}
@@ -72,7 +72,7 @@ export function YesNoCancelSelector(props: {
         </Button>
       </Row>
 
-      <Row className={clsx('space-x-3 w-full', className)}>
+      <Row className={clsx('w-full space-x-3', className)}>
         <Button
           color={selected === 'MKT' ? 'blue' : 'gray'}
           onClick={() => onSelect('MKT')}
@@ -132,12 +132,12 @@ function Button(props: {
     <button
       type="button"
       className={clsx(
-        'flex-1 inline-flex justify-center items-center px-8 py-3 border border-transparent rounded-md shadow-sm text-sm font-medium',
+        'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 text-sm font-medium shadow-sm',
         color === 'green' && 'btn-primary text-white',
-        color === 'red' && 'bg-red-400 hover:bg-red-500 text-white',
-        color === 'yellow' && 'bg-yellow-400 hover:bg-yellow-500 text-white',
-        color === 'blue' && 'bg-blue-400 hover:bg-blue-500 text-white',
-        color === 'gray' && 'text-gray-700 bg-gray-300 hover:bg-gray-400',
+        color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
+        color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
+        color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
+        color === 'gray' && 'bg-gray-300 text-gray-700 hover:bg-gray-400',
         className
       )}
       onClick={onClick}
diff --git a/web/package.json b/web/package.json
index 55c6c49a..6a7caecf 100644
--- a/web/package.json
+++ b/web/package.json
@@ -44,6 +44,7 @@
     "lint-staged": "12.1.3",
     "postcss": "8.3.5",
     "prettier": "2.5.0",
+    "prettier-plugin-tailwindcss": "^0.1.5",
     "pretty-quick": "3.1.2",
     "tailwindcss": "3.0.1",
     "tsc-files": "1.1.3",
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index efc4eb10..7e9c9e27 100644
--- a/web/pages/404.tsx
+++ b/web/pages/404.tsx
@@ -5,7 +5,7 @@ import { Title } from '../components/title'
 export default function Custom404() {
   return (
     <Page>
-      <div className="flex flex-col items-center justify-center h-full">
+      <div className="flex h-full flex-col items-center justify-center">
         <Title text="404: Oops!" />
         <p>Nothing exists at this location.</p>
         <p>If you didn't expect this, let us know on Discord!</p>
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 8af285d7..7beaef44 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -110,8 +110,8 @@ export default function ContractPage(props: {
         ogCardProps={ogCardProps}
       />
 
-      <Col className="w-full md:flex-row justify-between">
-        <div className="flex-[3] bg-white px-2 py-6 md:px-6 md:py-8 rounded border-0 border-gray-100">
+      <Col className="w-full justify-between md:flex-row">
+        <div className="flex-[3] rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
           <ContractOverview
             contract={contract}
             bets={bets ?? []}
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 245f9641..2388a222 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -33,7 +33,7 @@ export default function Document() {
         />
       </Head>
 
-      <body className="min-h-screen font-readex-pro bg-base-200">
+      <body className="font-readex-pro bg-base-200 min-h-screen">
         <Main />
         <NextScript />
       </body>
diff --git a/web/pages/account.tsx b/web/pages/account.tsx
index fac283f3..194e3680 100644
--- a/web/pages/account.tsx
+++ b/web/pages/account.tsx
@@ -6,14 +6,14 @@ import { firebaseLogin } from '../lib/firebase/users'
 
 function SignInCard() {
   return (
-    <div className="card glass sm:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-4 sm:mx-auto my-12">
+    <div className="card glass sm:card-side text-neutral-content mx-4 my-12 max-w-sm bg-green-600 shadow-xl transition-all hover:bg-green-600 hover:shadow-xl sm:mx-auto">
       <div className="p-4">
         <img
           src="/logo-bg-white.png"
-          className="rounded-lg shadow-lg w-20 h-20"
+          className="h-20 w-20 rounded-lg shadow-lg"
         />
       </div>
-      <div className="max-w-md card-body">
+      <div className="card-body max-w-md">
         <h2 className="card-title font-major-mono">Welcome!</h2>
         <p>Sign in to get started</p>
         <div className="card-actions">
diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx
index c118b9ee..e7683298 100644
--- a/web/pages/activity.tsx
+++ b/web/pages/activity.tsx
@@ -97,7 +97,7 @@ export function ActivityFeed(props: {
   return contracts.length > 0 ? (
     <Col className="items-center">
       <Col className="w-full max-w-3xl">
-        <Col className="w-full bg-white self-center divide-gray-300 divide-y">
+        <Col className="w-full divide-y divide-gray-300 self-center bg-white">
           {contracts.map((contract, i) => (
             <div key={contract.id} className="py-6 px-2 sm:px-4">
               <ContractFeed
diff --git a/web/pages/add-funds.tsx b/web/pages/add-funds.tsx
index 820696a9..dcf65088 100644
--- a/web/pages/add-funds.tsx
+++ b/web/pages/add-funds.tsx
@@ -22,18 +22,18 @@ export default function AddFundsPage() {
         <Col>
           <Title text="Get Manifold Dollars" />
           <img
-            className="block mt-6"
+            className="mt-6 block"
             src="/praying-mantis-light.svg"
             width={200}
             height={200}
           />
 
-          <div className="text-gray-500 mb-6">
+          <div className="mb-6 text-gray-500">
             Use Manifold Dollars to trade in your favorite markets. <br /> (Not
             redeemable for cash.)
           </div>
 
-          <div className="text-gray-500 text-sm mb-2">Amount</div>
+          <div className="mb-2 text-sm text-gray-500">Amount</div>
           <FundsSelector
             className="max-w-md"
             selected={amountSelected}
@@ -41,7 +41,7 @@ export default function AddFundsPage() {
           />
 
           <div className="mt-6">
-            <div className="text-gray-500 text-sm mb-1">Price USD</div>
+            <div className="mb-1 text-sm text-gray-500">Price USD</div>
             <div className="text-xl">
               ${Math.round(amountSelected / 100)}.00
             </div>
@@ -54,7 +54,7 @@ export default function AddFundsPage() {
           >
             <button
               type="submit"
-              className="btn btn-primary w-full font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+              className="btn btn-primary w-full bg-gradient-to-r from-teal-500 to-green-500 font-medium hover:from-teal-600 hover:to-green-600"
             >
               Checkout
             </button>
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 016906fc..ad223a59 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -23,10 +23,10 @@ export default function Create() {
 
   return (
     <Page>
-      <div className="w-full max-w-2xl mx-auto">
+      <div className="mx-auto w-full max-w-2xl">
         <Title text="Create a new prediction market" />
 
-        <div className="bg-gray-100 rounded-lg shadow-md px-6 py-4">
+        <div className="rounded-lg bg-gray-100 px-6 py-4 shadow-md">
           <form>
             <div className="form-control w-full">
               <label className="label">
@@ -141,13 +141,13 @@ export function NewContract(props: { question: string; tag?: string }) {
 
       <Spacer h={4} />
 
-      <div className="form-control items-start mb-1">
-        <label className="label gap-2 mb-1">
+      <div className="form-control mb-1 items-start">
+        <label className="label mb-1 gap-2">
           <span className="mb-1">Description</span>
           <InfoTooltip text="Optional. Describe how you will resolve this market." />
         </label>
         <Textarea
-          className="textarea w-full textarea-bordered"
+          className="textarea textarea-bordered w-full"
           rows={3}
           placeholder={descriptionPlaceholder}
           value={description}
@@ -159,7 +159,7 @@ export function NewContract(props: { question: string; tag?: string }) {
 
       <Spacer h={4} />
 
-      <div className="form-control items-start max-w-sm">
+      <div className="form-control max-w-sm items-start">
         <label className="label gap-2">
           <span className="mb-1">Tags</span>
           <InfoTooltip text="Optional. Help categorize your market with related tags." />
@@ -178,8 +178,8 @@ export function NewContract(props: { question: string; tag?: string }) {
       <TagsList tags={tags} noLink noLabel />
       <Spacer h={4} />
 
-      <div className="form-control items-start mb-1">
-        <label className="label gap-2 mb-1">
+      <div className="form-control mb-1 items-start">
+        <label className="label mb-1 gap-2">
           <span>Market close</span>
           <InfoTooltip text="Trading will be halted after this time (local timezone)." />
         </label>
@@ -196,8 +196,8 @@ export function NewContract(props: { question: string; tag?: string }) {
 
       <Spacer h={4} />
 
-      <div className="form-control items-start mb-1">
-        <label className="label gap-2 mb-1">
+      <div className="form-control mb-1 items-start">
+        <label className="label mb-1 gap-2">
           <span>Market ante</span>
           <InfoTooltip
             text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. 
@@ -216,7 +216,7 @@ export function NewContract(props: { question: string; tag?: string }) {
 
       <Spacer h={4} />
 
-      <div className="flex justify-end my-4">
+      <div className="my-4 flex justify-end">
         <button
           type="submit"
           className={clsx(
diff --git a/web/pages/fold/[...slugs]/index.tsx b/web/pages/fold/[...slugs]/index.tsx
index 245c5dcb..aa3742a4 100644
--- a/web/pages/fold/[...slugs]/index.tsx
+++ b/web/pages/fold/[...slugs]/index.tsx
@@ -187,7 +187,7 @@ export default function FoldPage(props: {
       />
 
       <div className="px-3 lg:px-1">
-        <Row className="justify-between mb-6">
+        <Row className="mb-6 justify-between">
           <Title className="!m-0" text={fold.name} />
           {isCurator ? (
             <EditFoldButton className="ml-1" fold={fold} />
@@ -196,7 +196,7 @@ export default function FoldPage(props: {
           )}
         </Row>
 
-        <Col className="md:hidden text-gray-500 gap-2 mb-6">
+        <Col className="mb-6 gap-2 text-gray-500 md:hidden">
           <Row>
             <div className="mr-1">Curated by</div>
             <UserLink
@@ -263,7 +263,7 @@ export default function FoldPage(props: {
                   contractComments={activeContractComments}
                 />
                 {activeContracts.length === 0 && (
-                  <div className="text-gray-500 mt-4 mx-2 lg:mx-0">
+                  <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
                     No activity from matching markets.{' '}
                     {isCurator && 'Try editing to add more tags!'}
                   </div>
@@ -279,7 +279,7 @@ export default function FoldPage(props: {
               />
             )}
           </Col>
-          <Col className="hidden md:flex max-w-xs w-full gap-12">
+          <Col className="hidden w-full max-w-xs gap-12 md:flex">
             <FoldOverview fold={fold} curator={curator} />
             <FoldLeaderboards
               traderScores={traderScores}
@@ -293,7 +293,7 @@ export default function FoldPage(props: {
       )}
 
       {page === 'leaderboards' && (
-        <Col className="gap-8 lg:flex-row px-4">
+        <Col className="gap-8 px-4 lg:flex-row">
           <FoldLeaderboards
             traderScores={traderScores}
             creatorScores={creatorScores}
@@ -314,12 +314,12 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
 
   return (
     <Col>
-      <div className="px-4 py-3 bg-indigo-500 text-white text-sm rounded-t">
+      <div className="rounded-t bg-indigo-500 px-4 py-3 text-sm text-white">
         About community
       </div>
-      <Col className="p-4 bg-white gap-2 rounded-b">
+      <Col className="gap-2 rounded-b bg-white p-4">
         <Row>
-          <div className="text-gray-500 mr-1">Curated by</div>
+          <div className="mr-1 text-gray-500">Curated by</div>
           <UserLink
             className="text-neutral"
             name={curator.name}
@@ -338,7 +338,7 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
 
         <div className="divider" />
 
-        <div className="text-gray-500 mb-2">
+        <div className="mb-2 text-gray-500">
           Includes markets matching any of these tags:
         </div>
 
@@ -375,11 +375,11 @@ function FoldLeaderboards(props: {
     <>
       {user && (
         <Col className={yourPerformanceClassName}>
-          <div className="bg-indigo-500 text-white text-sm px-4 py-3 rounded">
+          <div className="rounded bg-indigo-500 px-4 py-3 text-sm text-white">
             Your performance
           </div>
           <div className="bg-white p-2">
-            <table className="table table-compact text-gray-500 w-full">
+            <table className="table-compact table w-full text-gray-500">
               <tbody>
                 <tr>
                   <td>Trading profit</td>
diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx
index f4583bfc..cd59fac9 100644
--- a/web/pages/folds.tsx
+++ b/web/pages/folds.tsx
@@ -64,14 +64,14 @@ export default function Folds(props: {
   return (
     <Page>
       <Col className="items-center">
-        <Col className="max-w-xl w-full">
+        <Col className="w-full max-w-xl">
           <Col className="px-4 sm:px-0">
-            <Row className="justify-between items-center">
+            <Row className="items-center justify-between">
               <Title text="Explore communities" />
               {user && <CreateFoldButton />}
             </Row>
 
-            <div className="text-gray-500 mb-6">
+            <div className="mb-6 text-gray-500">
               Communities on Manifold are centered around a collection of
               markets.
             </div>
@@ -98,16 +98,16 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
   return (
     <Col
       key={fold.id}
-      className="bg-white hover:bg-gray-100 p-8 rounded-xl gap-1 shadow-md relative"
+      className="relative gap-1 rounded-xl bg-white p-8 shadow-md hover:bg-gray-100"
     >
       <Link href={foldPath(fold)}>
         <a className="absolute left-0 right-0 top-0 bottom-0" />
       </Link>
-      <Row className="justify-between items-center gap-2">
+      <Row className="items-center justify-between gap-2">
         <span className="text-xl">{fold.name}</span>
         <FollowFoldButton className="z-10 mb-1" fold={fold} />
       </Row>
-      <Row className="items-center gap-2 text-gray-500 text-sm">
+      <Row className="items-center gap-2 text-sm text-gray-500">
         <div>{fold.followCount} followers</div>
         <div>•</div>
         <Row>
@@ -119,7 +119,7 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
           />
         </Row>
       </Row>
-      <div className="text-gray-500 text-sm">{fold.about}</div>
+      <div className="text-sm text-gray-500">{fold.about}</div>
       {tags.length > 0 && (
         <TagsList className="mt-4" tags={tags} noLink noLabel />
       )}
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index c53d644e..2e37b7fa 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -120,11 +120,11 @@ const Home = (props: {
   return (
     <Page assertUser="signed-in">
       <Col className="items-center">
-        <Col className="max-w-3xl w-full">
+        <Col className="w-full max-w-3xl">
           <FeedCreate user={user ?? undefined} />
           <Spacer h={6} />
-          <Row className="text-sm text-gray-800 mx-3 mb-3 gap-2 items-center">
-            <SearchIcon className="inline w-5 h-5" aria-hidden="true" />
+          <Row className="mx-3 mb-3 items-center gap-2 text-sm text-gray-800">
+            <SearchIcon className="inline h-5 w-5" aria-hidden="true" />
             Explore our communities
           </Row>
           <FoldTagList
@@ -144,9 +144,9 @@ const Home = (props: {
             ]}
           />
           <Spacer h={10} />
-          <Col className="sm:flex-row text-sm text-gray-800 mx-3 mb-3 gap-2">
+          <Col className="mx-3 mb-3 gap-2 text-sm text-gray-800 sm:flex-row">
             <Row className="gap-2">
-              <SparklesIcon className="inline w-5 h-5" aria-hidden="true" />
+              <SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
               <span className="whitespace-nowrap">Recent activity</span>
               <span className="hidden sm:flex">—</span>
             </Row>
diff --git a/web/pages/landing-page.tsx b/web/pages/landing-page.tsx
index b4c6aa5b..cbd41e55 100644
--- a/web/pages/landing-page.tsx
+++ b/web/pages/landing-page.tsx
@@ -33,17 +33,17 @@ const scrollToAbout = () => {
 
 function Hero() {
   return (
-    <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
+    <div className="bg-world-trading h-screen overflow-hidden bg-gray-900 bg-cover bg-center lg:bg-left">
       <NavBar darkBackground />
       <main>
-        <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden">
+        <div className="pt-32 sm:pt-8 lg:overflow-hidden lg:pt-0 lg:pb-14">
           <div className="mx-auto max-w-7xl lg:px-8 xl:px-0">
             <div className="lg:grid lg:grid-cols-2 lg:gap-8">
-              <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
+              <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
                 <div className="lg:py-24">
                   <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
                     <div className="mb-2">Create your own</div>
-                    <div className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-green-400">
+                    <div className="bg-gradient-to-r from-teal-300 to-green-400 bg-clip-text font-bold text-transparent">
                       prediction markets
                     </div>
                   </h1>
@@ -54,7 +54,7 @@ function Hero() {
                   </p>
                   <div className="mt-10 sm:mt-12">
                     <button
-                      className="btn normal-case text-lg font-medium px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+                      className="btn bg-gradient-to-r from-teal-500 to-green-500 px-10 text-lg font-medium normal-case hover:from-teal-600 hover:to-green-600"
                       onClick={firebaseLogin}
                     >
                       Sign in to get started!
@@ -66,7 +66,7 @@ function Hero() {
           </div>
           <div className="absolute bottom-12 w-full">
             <ArrowDownIcon
-              className="text-white mx-auto cursor-pointer animate-bounce"
+              className="mx-auto animate-bounce cursor-pointer text-white"
               width={32}
               height={32}
               onClick={scrollToAbout}
@@ -106,14 +106,14 @@ function FeaturesSection() {
   ]
 
   return (
-    <div id="about" className="w-full py-16 bg-green-50">
-      <div className="max-w-4xl py-12 mx-auto">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+    <div id="about" className="w-full bg-green-50 py-16">
+      <div className="mx-auto max-w-4xl py-12">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="lg:text-center">
-            <h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase">
+            <h2 className="text-base font-semibold uppercase tracking-wide text-teal-600">
               Manifold Markets
             </h2>
-            <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+            <p className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
               Better forecasting for everyone
             </p>
             <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
@@ -122,14 +122,14 @@ function FeaturesSection() {
           </div>
 
           <div className="mt-10">
-            <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+            <dl className="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 md:space-y-0">
               {features.map((feature) => (
                 <div key={feature.name} className="relative">
                   <dt>
-                    <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-teal-500 text-white">
+                    <div className="absolute flex h-12 w-12 items-center justify-center rounded-md bg-teal-500 text-white">
                       <feature.icon className="h-6 w-6" aria-hidden="true" />
                     </div>
-                    <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    <p className="ml-16 text-lg font-medium leading-6 text-gray-900">
                       {feature.name}
                     </p>
                   </dt>
@@ -155,8 +155,8 @@ function FeaturesSection() {
 function ExploreMarketsSection(props: { hotContracts: Contract[] }) {
   const { hotContracts } = props
   return (
-    <div className="max-w-4xl px-4 py-8 mx-auto">
-      <p className="my-12 text-3xl leading-8 font-extrabold tracking-tight text-indigo-700 sm:text-4xl">
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      <p className="my-12 text-3xl font-extrabold leading-8 tracking-tight text-indigo-700 sm:text-4xl">
         Today's top markets
       </p>
 
diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx
index e1d9c24c..fd2b8114 100644
--- a/web/pages/leaderboards.tsx
+++ b/web/pages/leaderboards.tsx
@@ -30,7 +30,7 @@ export default function Leaderboards(props: {
 
   return (
     <Page margin>
-      <Col className="items-center lg:flex-row gap-10">
+      <Col className="items-center gap-10 lg:flex-row">
         <Leaderboard
           title="🏅 Top traders"
           users={topTraders}
diff --git a/web/pages/make-predictions.tsx b/web/pages/make-predictions.tsx
index 177bc078..6a11b7de 100644
--- a/web/pages/make-predictions.tsx
+++ b/web/pages/make-predictions.tsx
@@ -41,12 +41,12 @@ function toPrediction(contract: Contract): Prediction {
 function PredictionRow(props: { prediction: Prediction }) {
   const { prediction } = props
   return (
-    <Row className="gap-4 justify-between hover:bg-gray-300 p-4">
+    <Row className="justify-between gap-4 p-4 hover:bg-gray-300">
       <Col className="justify-between">
-        <div className="font-medium text-indigo-700 mb-2">
+        <div className="mb-2 font-medium text-indigo-700">
           <Linkify text={prediction.question} />
         </div>
-        <div className="text-gray-500 text-sm">{prediction.description}</div>
+        <div className="text-sm text-gray-500">{prediction.description}</div>
       </Col>
       {/* Initial probability */}
       <div className="ml-auto">
@@ -72,7 +72,7 @@ function PredictionRow(props: { prediction: Prediction }) {
 function PredictionList(props: { predictions: Prediction[] }) {
   const { predictions } = props
   return (
-    <Col className="divide-gray-300 divide-y border-gray-300 border rounded-md">
+    <Col className="divide-y divide-gray-300 rounded-md border border-gray-300">
       {predictions.map((prediction) =>
         prediction.createdUrl ? (
           <Link href={prediction.createdUrl}>
@@ -166,19 +166,19 @@ ${TEST_VALUE}
   return (
     <Page>
       <Title text="Make Predictions" />
-      <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4">
+      <div className="w-full rounded-lg bg-gray-100 px-6 py-4 shadow-xl">
         <form>
           <div className="form-control">
             <label className="label">
               <span className="label-text">Prediction</span>
-              <div className="text-sm text-gray-500 ml-1">
+              <div className="ml-1 text-sm text-gray-500">
                 One prediction per line, each formatted like "The sun will rise
                 tomorrow: 99%"
               </div>
             </label>
 
             <textarea
-              className="textarea h-60 textarea-bordered"
+              className="textarea textarea-bordered h-60"
               placeholder={bulkPlaceholder}
               value={predictionsString}
               onChange={(e) => setPredictionsString(e.target.value || '')}
@@ -215,8 +215,8 @@ ${TEST_VALUE}
           />
         </div>
 
-        <div className="form-control items-start mb-1">
-          <label className="label gap-2 mb-1">
+        <div className="form-control mb-1 items-start">
+          <label className="label mb-1 gap-2">
             <span>Market close</span>
             <InfoTooltip text="Trading will be halted after this time (local timezone)." />
           </label>
@@ -233,8 +233,8 @@ ${TEST_VALUE}
 
         <Spacer h={4} />
 
-        <div className="form-control items-start mb-1">
-          <label className="label gap-2 mb-1">
+        <div className="form-control mb-1 items-start">
+          <label className="label mb-1 gap-2">
             <span>Market ante</span>
             <InfoTooltip
               text={`Subsidize your market to encourage trading. Ante bets are set to match your initial probability. 
@@ -263,7 +263,7 @@ ${TEST_VALUE}
 
         <Spacer h={4} />
 
-        <div className="flex justify-end my-4">
+        <div className="my-4 flex justify-end">
           <button
             type="submit"
             className={clsx('btn btn-primary', {
@@ -284,7 +284,7 @@ ${TEST_VALUE}
         <>
           <Spacer h={16} />
           <Title text="Created Predictions" />
-          <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4">
+          <div className="w-full rounded-lg bg-gray-100 px-6 py-4 shadow-xl">
             <PredictionList predictions={createdContracts.map(toPrediction)} />
           </div>
         </>
diff --git a/web/pages/markets.tsx b/web/pages/markets.tsx
index 5d9742e1..53156a33 100644
--- a/web/pages/markets.tsx
+++ b/web/pages/markets.tsx
@@ -51,7 +51,7 @@ export const HotMarkets = (props: { contracts: Contract[] }) => {
   if (contracts.length === 0) return <></>
 
   return (
-    <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
+    <div className="w-full rounded-lg border-2 border-indigo-100 bg-indigo-50 p-6 shadow-md">
       <Title className="!mt-0" text="🔥 Markets" />
       <ContractsGrid contracts={contracts} showHotVolume />
     </div>
@@ -63,7 +63,7 @@ export const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
   if (contracts.length === 0) return <></>
 
   return (
-    <div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md">
+    <div className="w-full rounded-lg border-2 border-green-100 bg-green-50 p-6 shadow-md">
       <Title className="!mt-0" text="⏰ Closing soon" />
       <ContractsGrid contracts={contracts} showCloseTime />
     </div>
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index f7e7dd60..036f2972 100644
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@@ -93,7 +93,7 @@ export default function ProfilePage() {
     <Page>
       <SEO title="Profile" description="User profile settings" url="/profile" />
 
-      <Col className="max-w-lg p-6 sm:mx-auto bg-white rounded shadow-md">
+      <Col className="max-w-lg rounded bg-white p-6 shadow-md sm:mx-auto">
         <Row className="justify-between">
           <Title className="!mt-0" text="Profile" />
           {isEditing ? (
@@ -108,7 +108,7 @@ export default function ProfilePage() {
               className="btn btn-ghost"
               onClick={() => setIsEditing(true)}
             >
-              <PencilIcon className="w-5 h-5" />{' '}
+              <PencilIcon className="h-5 w-5" />{' '}
               <div className="ml-2">Edit</div>
             </button>
           )}
@@ -123,7 +123,7 @@ export default function ProfilePage() {
                   src={avatarUrl}
                   width={80}
                   height={80}
-                  className="rounded-full bg-gray-400 flex items-center justify-center"
+                  className="flex items-center justify-center rounded-full bg-gray-400"
                 />
                 {isEditing && (
                   <input type="file" name="file" onChange={fileHandler} />
@@ -175,7 +175,7 @@ export default function ProfilePage() {
 
           <div>
             <label className="label">Balance</label>
-            <Row className="ml-1 gap-4 items-start text-gray-500">
+            <Row className="ml-1 items-start gap-4 text-gray-500">
               {formatMoney(user?.balance || 0)}
               <AddFundsButton />
             </Row>
diff --git a/web/pages/simulator.tsx b/web/pages/simulator.tsx
index 3df8a83d..c75b849d 100644
--- a/web/pages/simulator.tsx
+++ b/web/pages/simulator.tsx
@@ -162,7 +162,7 @@ function NewBidTable(props: {
 
   return (
     <>
-      <table className="table table-compact my-8 w-full text-center">
+      <table className="table-compact my-8 table w-full text-center">
         <thead>
           <tr>
             <th>Order #</th>
@@ -255,10 +255,10 @@ export default function Simulator() {
   return (
     <Col>
       <NavBar />
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 w-full mt-8 p-2 mx-auto text-center">
+      <div className="mx-auto mt-8 grid w-full grid-cols-1 gap-4 p-2 text-center xl:grid-cols-2">
         {/* Left column */}
         <div>
-          <h1 className="text-2xl font-bold mb-8">
+          <h1 className="mb-8 text-2xl font-bold">
             Dynamic Parimutuel Market Simulator
           </h1>
 
@@ -286,13 +286,13 @@ export default function Simulator() {
 
         {/* Right column */}
         <Col>
-          <h1 className="text-2xl font-bold mb-8">
+          <h1 className="mb-8 text-2xl font-bold">
             Probability of
-            <div className="badge badge-success text-2xl h-8 w-18 ml-3">
+            <div className="badge badge-success w-18 ml-3 h-8 text-2xl">
               YES
             </div>
           </h1>
-          <div className="w-full mb-10" style={{ height: 500 }}>
+          <div className="mb-10 w-full" style={{ height: 500 }}>
             <ResponsiveLine
               data={data}
               yScale={{ min: 0, max: 100, type: 'linear' }}
diff --git a/yarn.lock b/yarn.lock
index c78b5ee2..2afa5dda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4928,6 +4928,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-plugin-tailwindcss@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.5.tgz#1709b4cea44873cbfefe9862f9f0827a51fe8cc3"
+  integrity sha512-e+jTxwiHL4I3Ot8OjV1LAiiaAx0Zgy71xTL7xNmJtNmhpja7GKzFSAoulqBDS1D57B7lbZDCvDEKIWIQSBUmBQ==
+
 prettier@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893"