From eee23c1bb5dda1788031d55405630f04737a9cd5 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sat, 16 Apr 2022 10:25:29 +0100
Subject: [PATCH] Use prettier to order tailwind classes

---
 components/button/button.tsx                  |  4 +-
 components/compact-button.tsx                 |  4 +-
 components/cookie-consent.tsx                 |  6 +--
 components/date-card.tsx                      | 10 ++--
 components/discussion/discussion.tsx          | 14 +++---
 components/dropdown.tsx                       |  6 +--
 components/error-page.tsx                     |  6 +--
 .../date-navigation-toolbar.tsx               |  6 +--
 .../month-calendar/month-calendar.tsx         | 32 ++++++-------
 .../month-calendar/time-picker.tsx            |  8 ++--
 .../poll-options-form/poll-options-form.tsx   |  8 ++--
 .../forms/poll-options-form/week-calendar.tsx | 10 ++--
 components/full-page-loader.tsx               |  6 +--
 components/header.tsx                         |  4 +-
 components/home/bonus.tsx                     |  2 +-
 components/home/features.tsx                  | 20 ++++----
 components/home/hero.tsx                      | 22 ++++-----
 components/home/how-it-works.tsx              |  2 +-
 components/home/poll-demo.tsx                 | 12 ++---
 components/home/stats.tsx                     |  6 +--
 components/modal/modal.tsx                    | 10 ++--
 components/name-input.tsx                     |  2 +-
 components/page-layout.tsx                    | 22 ++++-----
 components/page-layout/footer.tsx             | 24 +++++-----
 components/poll/legacy-poll-notice.tsx        |  8 ++--
 components/poll/manage-poll.tsx               |  2 +-
 components/poll/mobile-poll/mobile-poll.tsx   | 22 ++++-----
 components/poll/notifications-toggle.tsx      |  2 +-
 components/poll/participant-row-form.tsx      |  8 ++--
 components/poll/participant-row.tsx           |  8 ++--
 components/poll/poll-subheader.tsx            |  6 +--
 components/poll/poll.tsx                      | 22 ++++-----
 components/poll/score.tsx                     |  2 +-
 components/poll/time-range.tsx                |  2 +-
 components/poll/truncated-linkify.tsx         |  2 +-
 components/poll/user-avatar.tsx               |  6 +--
 components/poll/vote-icon.tsx                 |  2 +-
 components/popover.tsx                        |  2 +-
 components/sharing.tsx                        |  6 +--
 components/standard-layout.tsx                | 26 +++++-----
 components/steps/steps.tsx                    |  8 ++--
 components/support.tsx                        | 48 +++++++++----------
 components/switch.tsx                         |  4 +-
 .../time-zone-picker/time-zone-picker.tsx     |  8 ++--
 components/tooltip.tsx                        |  4 +-
 package.json                                  |  1 +
 pages/maintenance.tsx                         |  6 +--
 pages/new.tsx                                 | 12 ++---
 pages/poll.tsx                                | 18 +++----
 pages/privacy-policy.tsx                      |  2 +-
 style.css                                     | 42 ++++++++--------
 yarn.lock                                     |  5 ++
 52 files changed, 268 insertions(+), 262 deletions(-)

diff --git a/components/button/button.tsx b/components/button/button.tsx
index 4a5134220..27a138abd 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -44,7 +44,7 @@ const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
           "btn-danger": type === "danger",
           "btn-link": type === "link",
           "btn-disabled": disabled,
-          "rounded-full p-2 h-auto": rounded,
+          "h-auto rounded-full p-2": rounded,
           "w-10 p-0": !children,
         },
         className,
@@ -54,7 +54,7 @@ const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
     >
       {loading ? (
         <SpinnerIcon
-          className={clsx("w-5 animate-spin inline-block", {
+          className={clsx("inline-block w-5 animate-spin", {
             "mr-2": !!children,
           })}
         />
diff --git a/components/compact-button.tsx b/components/compact-button.tsx
index d1e60fd47..e4cbf947f 100644
--- a/components/compact-button.tsx
+++ b/components/compact-button.tsx
@@ -17,10 +17,10 @@ const CompactButton: React.VoidFunctionComponent<CompactButtonProps> = ({
   return (
     <button
       type="button"
-      className="h-5 w-5 rounded-full hover:bg-gray-200 transition-colors active:text-gray-500 active:bg-gray-300 text-gray-400 bg-gray-100 inline-flex items-center justify-center"
+      className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 active:bg-gray-300 active:text-gray-500"
       onClick={onClick}
     >
-      {Icon ? <Icon className="w-3 h-3" /> : children}
+      {Icon ? <Icon className="h-3 w-3" /> : children}
     </button>
   );
 };
diff --git a/components/cookie-consent.tsx b/components/cookie-consent.tsx
index 037286933..284a04113 100644
--- a/components/cookie-consent.tsx
+++ b/components/cookie-consent.tsx
@@ -21,14 +21,14 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
       leave="duration-200"
       leaveFrom="opacity-100 translate-y-0"
       leaveTo="opacity-0 translate-y-8"
-      className="bg-white z-50 p-4 pt-8 shadow-lg fixed rounded-lg w-60 text-sm bottom-8 right-8"
+      className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
     >
       <CookiesIllustration className="absolute -top-6" />
       <div className="mb-3">
         Your privacy is important to us. We only use cookies to improve the
         browsing experience on this website.
       </div>
-      <div className="flex space-x-6 items-center">
+      <div className="flex items-center space-x-6">
         <Link href="/privacy-policy">
           <a className="text-slate-400 hover:text-indigo-500">Privacy Policy</a>
         </Link>
@@ -37,7 +37,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
             Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
             setVisible(false);
           }}
-          className="grow text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90  px-5 py-1 font-semibold shadow-sm rounded-md"
+          className="grow rounded-md bg-indigo-500 px-5 py-1 font-semibold text-white shadow-sm  transition-all hover:bg-indigo-500/90 focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90"
         >
           OK
         </button>
diff --git a/components/date-card.tsx b/components/date-card.tsx
index b75e3c246..f4aa18ad9 100644
--- a/components/date-card.tsx
+++ b/components/date-card.tsx
@@ -19,20 +19,20 @@ const DateCard: React.VoidFunctionComponent<DateCardProps> = ({
   return (
     <div
       className={clsx(
-        "inline-block bg-white text-center border h-14 w-14 rounded-md relative shadow-md shadow-slate-100",
+        "relative inline-block h-14 w-14 rounded-md border bg-white text-center shadow-md shadow-slate-100",
         className,
       )}
     >
       {annotation ? (
         <div className="absolute -top-3 -right-3">{annotation}</div>
       ) : null}
-      <div className="text-xs -mt-2 mb-[-1px] text-slate-400 relative">
-        <span className="relative inline-block after:content-[''] after:inline-block after:absolute after:left-0 px-1 after:top-[7px] after:border-white after:-z-10 z-10 after:border-t after:w-full">
+      <div className="relative -mt-2 mb-[-1px] text-xs text-slate-400">
+        <span className="relative z-10 inline-block px-1 after:absolute after:left-0 after:top-[7px] after:-z-10 after:inline-block after:w-full after:border-t after:border-white after:content-['']">
           {dow}
         </span>
       </div>
-      <div className="text-red-500 text-lg -mb-1 text-center">{day}</div>
-      <div className="text-gray-800 text-center text-xs uppercase font-semibold">
+      <div className="-mb-1 text-center text-lg text-red-500">{day}</div>
+      <div className="text-center text-xs font-semibold uppercase text-gray-800">
         {month}
       </div>
     </div>
diff --git a/components/discussion/discussion.tsx b/components/discussion/discussion.tsx
index 2395e0217..b4691c95e 100644
--- a/components/discussion/discussion.tsx
+++ b/components/discussion/discussion.tsx
@@ -45,7 +45,7 @@ const Comments: React.VoidFunctionComponent<{
   canDelete?: boolean;
 }> = ({ comments, deletedComments, onDelete, canDelete }) => {
   return (
-    <div className="bg-slate-50 p-4 space-y-3 border-b">
+    <div className="space-y-3 border-b bg-slate-50 p-4">
       {comments.map((comment, i) => {
         return (
           <div className="flex" key={i}>
@@ -58,9 +58,9 @@ const Comments: React.VoidFunctionComponent<{
               leave="transition transform duration-100"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
-              className="bg-white border rounded-xl px-3 py-2 shadow-sm w-fit"
+              className="w-fit rounded-xl border bg-white px-3 py-2 shadow-sm"
             >
-              <div className="flex space-x-2 items-center">
+              <div className="flex items-center space-x-2">
                 <UserAvater name={comment.authorName} />
                 <div className="mb-1">
                   <span className="mr-1">{comment.authorName}</span>
@@ -175,8 +175,8 @@ const Discussion: React.VoidFunctionComponent<DiscussionProps> = ({
   }
 
   return (
-    <div className="border-t border-b md:border md:rounded-lg overflow-hidden shadow-sm">
-      <div className="px-4 py-2 bg-white border-b">
+    <div className="overflow-hidden border-t border-b shadow-sm md:rounded-lg md:border">
+      <div className="border-b bg-white px-4 py-2">
         <div className="font-medium">Comments</div>
       </div>
       {comments.length ? (
@@ -211,10 +211,10 @@ const Discussion: React.VoidFunctionComponent<DiscussionProps> = ({
         <textarea
           id="comment"
           placeholder="Add your comment…"
-          className="input pl-3 pr-4 py-2 w-full"
+          className="input w-full py-2 pl-3 pr-4"
           {...register("content", { validate: requiredString })}
         />
-        <div className="flex mt-1 space-x-3">
+        <div className="mt-1 flex space-x-3">
           <Controller
             name="authorName"
             control={control}
diff --git a/components/dropdown.tsx b/components/dropdown.tsx
index ac2a017b6..1c18a2450 100644
--- a/components/dropdown.tsx
+++ b/components/dropdown.tsx
@@ -52,7 +52,7 @@ const Dropdown: React.VoidFunctionComponent<DropdownProps> = ({
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
-            className="z-30 p-1 bg-white divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            className="z-30 divide-gray-100 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
           >
             {children}
           </Menu.Items>,
@@ -74,7 +74,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
         <button
           onClick={onClick}
           className={clsx(
-            "group flex rounded items-center w-full py-2 pl-2 pr-4",
+            "group flex w-full items-center rounded py-2 pl-2 pr-4",
             {
               "bg-indigo-500 text-white": active,
               "text-gray-700": !active,
@@ -84,7 +84,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
         >
           {Icon && (
             <Icon
-              className={clsx("w-5 h-5 mr-2", {
+              className={clsx("mr-2 h-5 w-5", {
                 "text-white": active,
                 "text-indigo-500": !disabled,
               })}
diff --git a/components/error-page.tsx b/components/error-page.tsx
index fe64c7aae..5903a03aa 100644
--- a/components/error-page.tsx
+++ b/components/error-page.tsx
@@ -22,19 +22,19 @@ const ErrorPage: React.VoidFunctionComponent<ComponentProps> = ({
 }) => {
   return (
     <StandardLayout>
-      <div className="h-full bg-gray-50 px-4 py-8 flex items-center justify-center lg:w-[1024px] max-w-full">
+      <div className="flex h-full max-w-full items-center justify-center bg-gray-50 px-4 py-8 lg:w-[1024px]">
         <Head>
           <title>{title}</title>
           <meta name="robots" content="noindex,nofollow" />
         </Head>
         <div className="flex items-start">
           <div className="text-center">
-            <Icon className="w-24 inline-block mb-4 text-slate-400" />
+            <Icon className="mb-4 inline-block w-24 text-slate-400" />
             <div className="text-3xl font-bold uppercase text-indigo-500 ">
               {title}
             </div>
             <p>{description}</p>
-            <div className="flex space-x-3 justify-center">
+            <div className="flex justify-center space-x-3">
               <Link href="/" passHref={true}>
                 <a className="btn-default">Go to home</a>
               </Link>
diff --git a/components/forms/poll-options-form/date-navigation-toolbar.tsx b/components/forms/poll-options-form/date-navigation-toolbar.tsx
index 8685f9409..785f4b5dd 100644
--- a/components/forms/poll-options-form/date-navigation-toolbar.tsx
+++ b/components/forms/poll-options-form/date-navigation-toolbar.tsx
@@ -14,12 +14,12 @@ export interface DateNavigationToolbarProps {
 const DateNavigationToolbar: React.VoidFunctionComponent<DateNavigationToolbarProps> =
   ({ year, label, onPrevious, onToday, onNext }) => {
     return (
-      <div className="flex border-b items-center w-full px-4 h-14 shrink-0">
+      <div className="flex h-14 w-full shrink-0 items-center border-b px-4">
         <div className="grow">
-          <span className="text-sm font-bold text-gray-400 mr-2">{year}</span>
+          <span className="mr-2 text-sm font-bold text-gray-400">{year}</span>
           <span className="text-lg font-bold text-gray-700">{label}</span>
         </div>
-        <div className="flex space-x-2 items-center">
+        <div className="flex items-center space-x-2">
           <div className="segment-button">
             <button type="button" onClick={onPrevious}>
               <ChevronLeft className="h-5" />
diff --git a/components/forms/poll-options-form/month-calendar/month-calendar.tsx b/components/forms/poll-options-form/month-calendar/month-calendar.tsx
index a35a00787..34f31c4bd 100644
--- a/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/components/forms/poll-options-form/month-calendar/month-calendar.tsx
@@ -81,17 +81,17 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
   });
 
   return (
-    <div className="lg:flex overflow-hidden">
-      <div className="p-4 border-b lg:border-r lg:border-b-0 shrink-0">
+    <div className="overflow-hidden lg:flex">
+      <div className="shrink-0 border-b p-4 lg:border-r lg:border-b-0">
         <div>
-          <div className="w-full flex flex-col">
-            <div className="flex space-x-4 items-center justify-center mb-3">
+          <div className="flex w-full flex-col">
+            <div className="mb-3 flex items-center justify-center space-x-4">
               <Button
                 icon={<ChevronLeft />}
                 title="Previous month"
                 onClick={datepicker.prev}
               />
-              <div className="grow text-center font-medium text-lg">
+              <div className="grow text-center text-lg font-medium">
                 {datepicker.label}
               </div>
               <Button
@@ -105,14 +105,14 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                 return (
                   <div
                     key={dayOfWeek}
-                    className="flex items-center justify-center pb-2 text-slate-400 text-sm font-medium"
+                    className="flex items-center justify-center pb-2 text-sm font-medium text-slate-400"
                   >
                     {dayOfWeek.substring(0, 2)}
                   </div>
                 );
               })}
             </div>
-            <div className="grid grid-cols-7 grow border shadow-sm rounded-lg overflow-hidden bg-white">
+            <div className="grid grow grid-cols-7 overflow-hidden rounded-lg border bg-white shadow-sm">
               {datepicker.days.map((day, i) => {
                 return (
                   <button
@@ -152,13 +152,13 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                       }
                     }}
                     className={clsx(
-                      "flex items-center relative lg:w-14 justify-center focus:ring-0 focus:ring-offset-0 hover:bg-slate-50 px-4 py-3 text-sm active:bg-slate-100",
+                      "relative flex items-center justify-center px-4 py-3 text-sm hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 active:bg-slate-100 lg:w-14",
                       {
-                        "text-slate-400 bg-slate-50": day.outOfMonth,
+                        "bg-slate-50 text-slate-400": day.outOfMonth,
                         "font-bold text-indigo-500": day.today,
                         "border-r": (i + 1) % 7 !== 0,
                         "border-b": i < datepicker.days.length - 7,
-                        "font-normal after:content-[''] after:animate-popIn after:absolute after:w-8 after:h-8 after:rounded-full after:bg-green-500 after:-z-0 text-white":
+                        "font-normal text-white after:absolute after:-z-0 after:h-8 after:w-8 after:animate-popIn after:rounded-full after:bg-green-500 after:content-['']":
                           day.selected,
                       },
                     )}
@@ -174,13 +174,13 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
           </div>
         </div>
       </div>
-      <div className="grow flex flex-col">
+      <div className="flex grow flex-col">
         <div
           className={clsx("border-b", {
             hidden: datepicker.selection.length === 0,
           })}
         >
-          <div className="p-4 flex space-x-3 items-center">
+          <div className="flex items-center space-x-3 p-4">
             <div className="grow">
               <div className="font-medium">Specify times</div>
               <div className="text-sm text-slate-400">
@@ -233,7 +233,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                   return (
                     <div
                       key={dateString}
-                      className="py-4 space-y-3 xs:space-y-0 xs:space-x-4 xs:flex"
+                      className="space-y-3 py-4 xs:flex xs:space-y-0 xs:space-x-4"
                     >
                       <div>
                         <DateCard
@@ -249,7 +249,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                           return (
                             <div
                               key={index}
-                              className="flex space-x-3 items-center"
+                              className="flex items-center space-x-3"
                             >
                               <TimePicker
                                 value={startDate}
@@ -301,7 +301,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                             </div>
                           );
                         })}
-                        <div className="flex space-x-3 items-center">
+                        <div className="flex items-center space-x-3">
                           <Button
                             icon={<PlusSm />}
                             onClick={() => {
@@ -414,7 +414,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
           ) : (
             <div className="flex h-full items-center justify-center py-12">
               <div className="text-center font-medium text-gray-400">
-                <Calendar className="inline-block h-12 w-12 mb-2" />
+                <Calendar className="mb-2 inline-block h-12 w-12" />
                 <div>No dates selected</div>
               </div>
             </div>
diff --git a/components/forms/poll-options-form/month-calendar/time-picker.tsx b/components/forms/poll-options-form/month-calendar/time-picker.tsx
index ebe6d1bbe..29d91df0d 100644
--- a/components/forms/poll-options-form/month-calendar/time-picker.tsx
+++ b/components/forms/poll-options-form/month-calendar/time-picker.tsx
@@ -79,12 +79,12 @@ const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
             setQuery(e.target.value.toUpperCase().replace(/[\:\s]/g, ""));
           }}
         />
-        <Combobox.Button className="absolute inset-0 flex items-center cursor-default px-2 h-9 text-left">
+        <Combobox.Button className="absolute inset-0 flex h-9 cursor-default items-center px-2 text-left">
           <span className="grow truncate">
             {!query ? format(value, "p") : null}
           </span>
-          <span className="flex pointer-events-none">
-            <ChevronDown className="w-5 h-5" />
+          <span className="pointer-events-none flex">
+            <ChevronDown className="h-5 w-5" />
           </span>
         </Combobox.Button>
         {portal &&
@@ -93,7 +93,7 @@ const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
               style={styles.popper}
               {...attributes.popper}
               ref={setPopperElement}
-              className="z-50 w-32 py-1 overflow-auto bg-white rounded-md shadow-lg max-h-72 ring-1 ring-black ring-opacity-5 focus:outline-none"
+              className="z-50 max-h-72 w-32 overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             >
               {options}
             </Combobox.Options>,
diff --git a/components/forms/poll-options-form/poll-options-form.tsx b/components/forms/poll-options-form/poll-options-form.tsx
index d4424a806..f4ab6a3d6 100644
--- a/components/forms/poll-options-form/poll-options-form.tsx
+++ b/components/forms/poll-options-form/poll-options-form.tsx
@@ -144,7 +144,7 @@ const PollOptionsForm: React.VoidFunctionComponent<
     >
       {calendarHelpModal}
       {dateOrTimeRangeModal}
-      <div className="py-3 space-y-2 lg:space-y-0 border-b w-full lg:space-x-2 bg-slate-50 items-center lg:flex px-4">
+      <div className="w-full items-center space-y-2 border-b bg-slate-50 py-3 px-4 lg:flex lg:space-y-0 lg:space-x-2">
         <div className="grow">
           <Controller
             control={control}
@@ -172,7 +172,7 @@ const PollOptionsForm: React.VoidFunctionComponent<
               }}
               type="button"
             >
-              <Calendar className="h-5 w-5 mr-2" /> Month view
+              <Calendar className="mr-2 h-5 w-5" /> Month view
             </button>
             <button
               className={clsx({
@@ -183,12 +183,12 @@ const PollOptionsForm: React.VoidFunctionComponent<
                 setValue("view", "week");
               }}
             >
-              <Table className="h-5 w-5 mr-2" /> Week view
+              <Table className="mr-2 h-5 w-5" /> Week view
             </button>
           </div>
         </div>
       </div>
-      <div className="w-full relative">
+      <div className="relative w-full">
         <React.Suspense
           fallback={
             <FullPageLoader className="h-[400px]">Loading…</FullPageLoader>
diff --git a/components/forms/poll-options-form/week-calendar.tsx b/components/forms/poll-options-form/week-calendar.tsx
index 8f3608876..46865f3c3 100644
--- a/components/forms/poll-options-form/week-calendar.tsx
+++ b/components/forms/poll-options-form/week-calendar.tsx
@@ -95,7 +95,7 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
             <div
               // onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element
               onMouseUp={props.onClick}
-              className="absolute p-1 ml-1 max-h-full hover:bg-opacity-50 transition-colors cursor-pointer overflow-hidden bg-green-100 bg-opacity-80 text-green-500 rounded-md text-xs"
+              className="absolute ml-1 max-h-full cursor-pointer overflow-hidden rounded-md bg-green-100 bg-opacity-80 p-1 text-xs text-green-500 transition-colors hover:bg-opacity-50"
               style={{
                 top: `calc(${props.style?.top}% + 4px)`,
                 height: `calc(${props.style?.height}% - 8px)`,
@@ -104,7 +104,7 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
               }}
             >
               <div>{format(props.event.start, "p")}</div>
-              <div className="font-bold w-full truncate">
+              <div className="w-full truncate font-bold">
                 {props.event.title}
               </div>
             </div>
@@ -134,14 +134,14 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
                   }
                 }}
                 className={clsx(
-                  "inline-flex w-full justify-center hover:text-gray-700 hover:bg-slate-50 rounded-md items-center text-sm py-2",
+                  "inline-flex w-full items-center justify-center rounded-md py-2 text-sm hover:bg-slate-50 hover:text-gray-700",
                   {
-                    "bg-green-50 text-green-600 hover:bg-opacity-75 hover:bg-green-50 hover:text-green-600":
+                    "bg-green-50 text-green-600 hover:bg-green-50 hover:bg-opacity-75 hover:text-green-600":
                       !!selectedOption,
                   },
                 )}
               >
-                <span className="font-normal opacity-50 mr-1">
+                <span className="mr-1 font-normal opacity-50">
                   {format(date, "E")}
                 </span>
                 <span className="font-medium">{format(date, "dd")}</span>
diff --git a/components/full-page-loader.tsx b/components/full-page-loader.tsx
index 38b8eb993..2debcb4c3 100644
--- a/components/full-page-loader.tsx
+++ b/components/full-page-loader.tsx
@@ -14,10 +14,10 @@ const FullPageLoader: React.VoidFunctionComponent<FullPageLoaderProps> = ({
 }) => {
   return (
     <div
-      className={clsx(" h-full flex items-center justify-center", className)}
+      className={clsx(" flex h-full items-center justify-center", className)}
     >
-      <div className="bg-indigo-500 text-white text-sm px-4 py-3 shadow-sm rounded-lg flex items-center">
-        <Spinner className="h-5 mr-3 animate-spin" />
+      <div className="flex items-center rounded-lg bg-indigo-500 px-4 py-3 text-sm text-white shadow-sm">
+        <Spinner className="mr-3 h-5 animate-spin" />
         {children}
       </div>
     </div>
diff --git a/components/header.tsx b/components/header.tsx
index 709e6ca43..d2d87229a 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -5,10 +5,10 @@ const Header: React.FunctionComponent<{ className?: string }> = (props) => {
   const { t } = useTranslation();
   return (
     <div
-      className="h-10 shrink-0 border-gray-200 px-6 flex items-center"
+      className="flex h-10 shrink-0 items-center border-gray-200 px-6"
       {...props}
     >
-      <div className="text-base font-bold text-gray-400 uppercase">
+      <div className="text-base font-bold uppercase text-gray-400">
         {t("appName")}
       </div>
       <div className="ml-2 text-xs text-gray-400">v2-alpha</div>
diff --git a/components/home/bonus.tsx b/components/home/bonus.tsx
index 8caa46a33..404848ab1 100644
--- a/components/home/bonus.tsx
+++ b/components/home/bonus.tsx
@@ -8,7 +8,7 @@ import Ban from "./ban-ads.svg";
 
 const Bonus: React.VoidFunctionComponent = () => {
   return (
-    <div className="pt-8 pb-24 max-w-7xl mx-auto px-8">
+    <div className="mx-auto max-w-7xl px-8 pt-8 pb-24">
       <h2 className="heading">Principles</h2>
       <p className="subheading">We&apos;re not like the others</p>
       <div className="grid grid-cols-4 gap-16">
diff --git a/components/home/features.tsx b/components/home/features.tsx
index e62ae47e1..19766f319 100644
--- a/components/home/features.tsx
+++ b/components/home/features.tsx
@@ -7,17 +7,17 @@ import DeviceMobile from "@/components/icons/device-mobile.svg";
 
 const Features: React.VoidFunctionComponent = () => {
   return (
-    <div className="py-16 px-8 max-w-7xl mx-auto">
+    <div className="mx-auto max-w-7xl py-16 px-8">
       <h2 className="heading">Features</h2>
       <p className="subheading">Everything you need to get the job done</p>
       <div className="grid grid-cols-2 gap-12">
         <div className="col-span-2 md:col-span-1">
-          <div className="p-3 bg-green-100/50 text-green-400 inline-block rounded-2xl mb-4">
-            <Clock className="w-8 h-8" />
+          <div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-400">
+            <Clock className="h-8 w-8" />
           </div>
           <h3 className="heading-sm flex items-center">
             Time slots
-            <span className="ml-2 font-normal text-sm bg-green-500 text-white rounded-full px-2 py-1">
+            <span className="ml-2 rounded-full bg-green-500 px-2 py-1 text-sm font-normal text-white">
               New
             </span>
           </h3>
@@ -28,8 +28,8 @@ const Features: React.VoidFunctionComponent = () => {
           </p>
         </div>
         <div className="col-span-2 md:col-span-1">
-          <div className="p-3 bg-cyan-100/50 text-cyan-400 inline-block rounded-2xl mb-4">
-            <DeviceMobile className="w-8 h-8" />
+          <div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-400">
+            <DeviceMobile className="h-8 w-8" />
           </div>
           <h3 className="heading-sm">Mobile friendly design</h3>
           <p className="text">
@@ -38,8 +38,8 @@ const Features: React.VoidFunctionComponent = () => {
           </p>
         </div>
         <div className="col-span-2 md:col-span-1">
-          <div className="p-3 bg-rose-100/50 text-rose-400 inline-block rounded-2xl mb-4">
-            <Bell className="w-8 h-8" />
+          <div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-400">
+            <Bell className="h-8 w-8" />
           </div>
           <h3 className="heading-sm">Notifications</h3>
           <p className="text">
@@ -48,8 +48,8 @@ const Features: React.VoidFunctionComponent = () => {
           </p>
         </div>
         <div className="col-span-2 md:col-span-1">
-          <div className="p-3 bg-yellow-100/50 text-yellow-400 inline-block rounded-2xl mb-4">
-            <Chat className="w-8 h-8" />
+          <div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-400">
+            <Chat className="h-8 w-8" />
           </div>
           <h3 className="heading-sm">Comments</h3>
           <p className="text">
diff --git a/components/home/hero.tsx b/components/home/hero.tsx
index 6b154ce44..b5076aa81 100644
--- a/components/home/hero.tsx
+++ b/components/home/hero.tsx
@@ -12,27 +12,27 @@ const Hero: React.VoidFunctionComponent = () => {
   const names = ["Peter", "Christine", "Samantha", "Joseph"];
 
   return (
-    <div className="lg:flex lg:justify-between p-8 items-end max-w-7xl mx-auto">
+    <div className="mx-auto max-w-7xl items-end p-8 lg:flex lg:justify-between">
       <div className="my-8 text-center lg:text-left">
-        <h1 className="text-4xl sm:text-5xl font-bold">
+        <h1 className="text-4xl font-bold sm:text-5xl">
           Schedule
           <br />
           <span className="text-indigo-500">group&nbsp;meetings</span>
           <br />
           with ease
         </h1>
-        <div className="text-xl text-gray-400 mb-12">
+        <div className="mb-12 text-xl text-gray-400">
           Find the right date without the back and&nbsp;forth.
         </div>
         <div className="space-x-3">
           <Link href="/new">
-            <a className="focus:ring-2 focus:ring-indigo-200 transition-all text-white bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90  px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm  hover:shadow-md rounded-lg">
+            <a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-indigo-200 active:bg-indigo-600/90">
               {t("getStarted")}
             </a>
           </Link>
           <Link href="/demo">
             <a
-              className="text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-slate-500 hover:bg-slate-500/90 active:bg-slate-600/90  px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm  hover:shadow-md rounded-lg"
+              className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-indigo-200 active:bg-slate-600/90"
               rel="nofollow"
             >
               {t("viewDemo")}
@@ -40,17 +40,17 @@ const Hero: React.VoidFunctionComponent = () => {
           </Link>
         </div>
       </div>
-      <div className="hidden mt-16 lg:mt-0 lg:ml-24 pointer-events-none select-none h-[380px] md:flex items-end justify-center">
+      <div className="pointer-events-none mt-16 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-0 lg:ml-24">
         <UserAvatarProvider seed="mock" names={names}>
-          <div className="inline-block relative">
+          <div className="relative inline-block">
             <motion.div
-              className="absolute z-20 border-4 shadow-md bg-indigo-200/10 rounded-2xl border-indigo-500 h-full"
+              className="absolute z-20 h-full rounded-2xl border-4 border-indigo-500 bg-indigo-200/10 shadow-md"
               initial={{ opacity: 0, width: 100, scale: 1.2, translateX: 384 }}
               animate={{ opacity: 1, scale: 1.1 }}
               transition={{ type: "spring", delay: 1 }}
             />
             <motion.div
-              className="absolute bg-indigo-500 text-slate-100 py-1 px-3 rounded-full z-20 text-sm"
+              className="absolute z-20 rounded-full bg-indigo-500 py-1 px-3 text-sm text-slate-100"
               initial={{
                 opacity: 0,
                 right: 190,
@@ -61,10 +61,10 @@ const Hero: React.VoidFunctionComponent = () => {
               transition={{ type: "spring", delay: 2 }}
             >
               Perfect! 🤩
-              <ScribbleArrow className="absolute text-slate-400 -right-8 top-3" />
+              <ScribbleArrow className="absolute -right-8 top-3 text-slate-400" />
             </motion.div>
             <motion.div
-              className="shadow-lg rounded-lg"
+              className="rounded-lg shadow-lg"
               transition={{ type: "spring", delay: 0.5 }}
               initial={{ opacity: 0, translateY: -100 }}
               animate={{ opacity: 1, translateY: 0 }}
diff --git a/components/home/how-it-works.tsx b/components/home/how-it-works.tsx
index 293259508..83d0a2cbf 100644
--- a/components/home/how-it-works.tsx
+++ b/components/home/how-it-works.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 const HowItWorks: React.VoidFunctionComponent = () => {
   return (
     <div className="bg-gradient-to-b from-transparent via-white to-white">
-      <div className="py-16 px-8 mx-auto max-w-7xl">
+      <div className="mx-auto max-w-7xl py-16 px-8">
         <h2 className="heading text-center">How it works</h2>
         <p className="subheading text-center">It&#39;s simple!</p>
         <div className="grid grid-cols-3 gap-16">
diff --git a/components/home/poll-demo.tsx b/components/home/poll-demo.tsx
index ddd054ad9..21304e246 100644
--- a/components/home/poll-demo.tsx
+++ b/components/home/poll-demo.tsx
@@ -43,15 +43,15 @@ const PollDemo: React.VoidFunctionComponent = () => {
 
   return (
     <div
-      className="rounded-lg bg-white border shadow-md"
+      className="rounded-lg border bg-white shadow-md"
       style={{ width: 600 }}
     >
       <div className="flex border-b shadow-sm">
         <div
-          className="flex items-center pl-4 pr-2 py-4 shrink-0 font-medium"
+          className="flex shrink-0 items-center py-4 pl-4 pr-2 font-medium"
           style={{ width: sidebarWidth }}
         >
-          <div className="grow h-full flex items-end">
+          <div className="flex h-full grow items-end">
             {t("participantCount", { count: participants.length })}
           </div>
         </div>
@@ -66,7 +66,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
           return (
             <div
               key={i}
-              className="py-4 text-center shrink-0 transition-colors"
+              className="shrink-0 py-4 text-center transition-colors"
               style={{ width: 100 }}
             >
               <DateCard
@@ -84,7 +84,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
       {participants.map((participant, i) => (
         <div className="flex h-14" key={i}>
           <div
-            className="flex items-center px-4 shrink-0"
+            className="flex shrink-0 items-center px-4"
             style={{ width: sidebarWidth }}
           >
             <UserAvater
@@ -101,7 +101,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
               return (
                 <div
                   key={i}
-                  className="justify-center items-center flex shrink-0"
+                  className="flex shrink-0 items-center justify-center"
                   style={{ width: 100 }}
                 >
                   {participant.votes.some((vote) => vote === i) ? (
diff --git a/components/home/stats.tsx b/components/home/stats.tsx
index 116abff5b..f4a68d3b4 100644
--- a/components/home/stats.tsx
+++ b/components/home/stats.tsx
@@ -8,15 +8,15 @@ const Stats: React.VoidFunctionComponent = () => {
     <div className="py-16">
       <h2 className="heading text-center">Stats</h2>
       <p className="subheading text-center">100,000+ polls created</p>
-      <div className="flex space-x-3 justify-center">
+      <div className="flex justify-center space-x-3">
         <Link href="/new">
-          <a className="focus:ring-2 focus:ring-indigo-200 transition-all text-white bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90  px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm  hover:shadow-md rounded-lg">
+          <a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-indigo-200 active:bg-indigo-600/90">
             {t("getStarted")}
           </a>
         </Link>
         <Link href="/demo">
           <a
-            className="text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-slate-500 hover:bg-slate-500/90 active:bg-slate-600/90  px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm  hover:shadow-md rounded-lg"
+            className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2  focus:ring-indigo-200 active:bg-slate-600/90"
             rel="nofollow"
           >
             {t("viewDemo")}
diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx
index 3ebd43b6a..c8a75d00e 100644
--- a/components/modal/modal.tsx
+++ b/components/modal/modal.tsx
@@ -35,13 +35,13 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
     <Transition appear={true} as={React.Fragment} show={visible}>
       <Dialog
         open={visible}
-        className="fixed z-40 inset-0 overflow-y-auto"
+        className="fixed inset-0 z-40 overflow-y-auto"
         initialFocus={initialFocusRef}
         onClose={() => {
           if (overlayClosable) onCancel?.();
         }}
       >
-        <div className="flex items-center justify-center min-h-screen">
+        <div className="flex min-h-screen items-center justify-center">
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-200"
@@ -62,13 +62,13 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
             leaveTo="opacity-0 scale-95"
           >
             <div
-              className="inline-block w-fit my-8 mx-4 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-xl"
+              className="my-8 mx-4 inline-block w-fit transform overflow-hidden rounded-xl bg-white text-left align-middle shadow-xl transition-all"
               onMouseDown={(e) => {
                 e.stopPropagation();
               }}
             >
               {content ?? (
-                <div className="p-4 max-w-lg">
+                <div className="max-w-lg p-4">
                   {title ? <Dialog.Title>{title}</Dialog.Title> : null}
                   {description ? (
                     <Dialog.Description>{description}</Dialog.Description>
@@ -76,7 +76,7 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
                 </div>
               )}
               {footer ?? (
-                <div className="px-4 space-x-3 h-14 flex justify-end bg-slate-50 items-center border-t">
+                <div className="flex h-14 items-center justify-end space-x-3 border-t bg-slate-50 px-4">
                   {cancelText ? (
                     <Button
                       ref={initialFocusRef}
diff --git a/components/name-input.tsx b/components/name-input.tsx
index 07fa6067d..f310b67d6 100644
--- a/components/name-input.tsx
+++ b/components/name-input.tsx
@@ -17,7 +17,7 @@ const NameInput: React.ForwardRefRenderFunction<
   NameInputProps
 > = ({ value, defaultValue, className, ...forwardProps }, ref) => {
   return (
-    <div className="flex items-center relative">
+    <div className="relative flex items-center">
       <UserAvater
         name={value ?? defaultValue ?? ""}
         className="absolute left-2"
diff --git a/components/page-layout.tsx b/components/page-layout.tsx
index 20e0c4520..81964d3c9 100644
--- a/components/page-layout.tsx
+++ b/components/page-layout.tsx
@@ -28,9 +28,9 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
       <Link href="/">
         <a
           className={clsx(
-            "text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors",
+            "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
             {
-              "font-bold text-gray-600 pointer-events-none":
+              "pointer-events-none font-bold text-gray-600":
                 pathname === "/home",
             },
           )}
@@ -41,7 +41,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
       <Link href="https://blog.rallly.co">
         <a
           className={clsx(
-            "text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors",
+            "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
           )}
         >
           Blog
@@ -50,9 +50,9 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
       <Link href="/support">
         <a
           className={clsx(
-            "text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors",
+            "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
             {
-              "font-bold text-gray-600 pointer-events-none":
+              "pointer-events-none font-bold text-gray-600":
                 pathname === "/support",
             },
           )}
@@ -61,7 +61,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
         </a>
       </Link>
       <Link href="https://github.com/lukevella/rallly">
-        <a className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors">
+        <a className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
           <Github className="w-8" />
         </a>
       </Link>
@@ -78,25 +78,25 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
       <Head>
         <title>Rallly - Support</title>
       </Head>
-      <div className="py-8 flex items-center px-8 max-w-7xl mx-auto">
+      <div className="mx-auto flex max-w-7xl items-center py-8 px-8">
         <div className="grow">
-          <div className="inline-block relative">
+          <div className="relative inline-block">
             <Link href="/">
               <a>
                 <Logo className="w-40 text-indigo-500" alt="Rallly" />
               </a>
             </Link>
-            <span className="absolute transition-colors text-sm text-slate-400 -bottom-6 right-0">
+            <span className="absolute -bottom-6 right-0 text-sm text-slate-400 transition-colors">
               Yes&mdash;with 3 <em>L</em>s
             </span>
           </div>
         </div>
-        <Menu className="hidden md:flex space-x-8 items-center" />
+        <Menu className="hidden items-center space-x-8 md:flex" />
         {breakpoint === "sm" ? (
           <Popover
             placement="left-start"
             trigger={
-              <button className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors">
+              <button className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
                 <DotsVertical className="w-5" />
               </button>
             }
diff --git a/components/page-layout/footer.tsx b/components/page-layout/footer.tsx
index 7870300c7..d98cb31fa 100644
--- a/components/page-layout/footer.tsx
+++ b/components/page-layout/footer.tsx
@@ -10,9 +10,9 @@ const Footer: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("homepage");
   return (
     <div className="mt-16 bg-slate-50/70">
-      <div className="py-20 px-8 mx-auto max-w-7xl grid grid-cols-10 gap-8">
+      <div className="mx-auto grid max-w-7xl grid-cols-10 gap-8 py-20 px-8">
         <div className="col-span-12 md:col-span-4">
-          <Logo className="w-32 mb-4 text-gray-400" />
+          <Logo className="mb-4 w-32 text-gray-400" />
           <p className="text-sm text-gray-400">
             <Trans
               t={t}
@@ -20,7 +20,7 @@ const Footer: React.VoidFunctionComponent = () => {
               components={{
                 a: (
                   <a
-                    className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"
+                    className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
                     href="https://twitter.com/imlukevella"
                   />
                 ),
@@ -46,11 +46,11 @@ const Footer: React.VoidFunctionComponent = () => {
           </div>
         </div>
         <div className="col-span-6 md:col-span-2">
-          <div className="font-medium mb-4">Links</div>
+          <div className="mb-4 font-medium">Links</div>
           <ul>
             <li>
               <a
-                className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"
+                className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
                 href="https://github.com/lukevella/rallly/discussions"
               >
                 Forum
@@ -58,21 +58,21 @@ const Footer: React.VoidFunctionComponent = () => {
             </li>
             <li>
               <Link href="/blog">
-                <a className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose">
+                <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
                   Blog
                 </a>
               </Link>
             </li>
             <li>
               <Link href="/support">
-                <a className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose">
+                <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
                   Support
                 </a>
               </Link>
             </li>
             <li>
               <Link href="/privacy-policy">
-                <a className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose">
+                <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
                   Privacy Policy
                 </a>
               </Link>
@@ -80,11 +80,11 @@ const Footer: React.VoidFunctionComponent = () => {
           </ul>
         </div>
         <div className="col-span-6 md:col-span-2">
-          <div className="font-medium mb-4">Follow</div>
+          <div className="mb-4 font-medium">Follow</div>
           <ul>
             <li>
               <a
-                className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"
+                className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
                 href="https://github.com/lukevella/rallly"
               >
                 Github
@@ -92,7 +92,7 @@ const Footer: React.VoidFunctionComponent = () => {
             </li>
             <li>
               <a
-                className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"
+                className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
                 href="https://twitter.com/ralllyco"
               >
                 Twitter
@@ -105,7 +105,7 @@ const Footer: React.VoidFunctionComponent = () => {
             href="https://vercel.com?utm_source=rallly&utm_campaign=oss"
             className="inline-block text-white"
           >
-            <span className="inline-block w-full text-right italic text-gray-400 text-xs mb-1">
+            <span className="mb-1 inline-block w-full text-right text-xs italic text-gray-400">
               Powered by
             </span>
             <Vercel className="w-24" />
diff --git a/components/poll/legacy-poll-notice.tsx b/components/poll/legacy-poll-notice.tsx
index a7e6d58e0..dadfc54da 100644
--- a/components/poll/legacy-poll-notice.tsx
+++ b/components/poll/legacy-poll-notice.tsx
@@ -28,16 +28,16 @@ const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({
   };
 
   return (
-    <div className="md:flex md:items-center space-y-3 md:space-y-0 text-sm shadow-sm rounded-lg mb-4 border md:space-x-4 p-2 bg-yellow-200 text-yellow-700">
+    <div className="mb-4 space-y-3 rounded-lg border bg-yellow-200 p-2 text-sm text-yellow-700 shadow-sm md:flex md:items-center md:space-y-0 md:space-x-4">
       <div className="flex space-x-3 md:grow md:items-center">
-        <div className="bg-yellow-400 w-9 h-9 p-2 rounded-lg">
+        <div className="h-9 w-9 rounded-lg bg-yellow-400 p-2">
           <Speakerphone className="w-5" />
         </div>
         <div className="grow">
           Notice anything different? We&apos;ve announced a new version release.
         </div>
       </div>
-      <div className="flex space-x-3 ml-12">
+      <div className="ml-12 flex space-x-3">
         <a
           onClick={() => setCookie()}
           className="btn-default border-0"
@@ -47,7 +47,7 @@ const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({
         </a>
         <button
           onClick={() => setCookie()}
-          className="py-2 px-3 transition-colors bg-yellow-300 rounded-lg active:bg-yellow-400"
+          className="rounded-lg bg-yellow-300 py-2 px-3 transition-colors active:bg-yellow-400"
         >
           Hide
         </button>
diff --git a/components/poll/manage-poll.tsx b/components/poll/manage-poll.tsx
index 780873d24..583bd815c 100644
--- a/components/poll/manage-poll.tsx
+++ b/components/poll/manage-poll.tsx
@@ -1,6 +1,6 @@
 import { Placement } from "@popperjs/core";
 import { format } from "date-fns";
-import { Trans,useTranslation  } from "next-i18next";
+import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 import { decodeDateOption, encodeDateOption } from "utils/date-time-utils";
 
diff --git a/components/poll/mobile-poll/mobile-poll.tsx b/components/poll/mobile-poll/mobile-poll.tsx
index 29d529e98..edbfa8352 100644
--- a/components/poll/mobile-poll/mobile-poll.tsx
+++ b/components/poll/mobile-poll/mobile-poll.tsx
@@ -92,7 +92,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
 
   return (
     <form
-      className="border-t border-b shadow-sm bg-white"
+      className="border-t border-b bg-white shadow-sm"
       onSubmit={handleSubmit((data) => {
         return new Promise<ParticipantForm>((resolve, reject) => {
           if (selectedParticipant) {
@@ -124,7 +124,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
       })}
     >
       {checkboxGroupHack}
-      <div className="sticky top-0 px-4 py-2 space-y-2 flex flex-col border-b z-30 bg-gray-50">
+      <div className="sticky top-0 z-30 flex flex-col space-y-2 border-b bg-gray-50 px-4 py-2">
         {mode === "default" ? (
           <div className="flex space-x-3">
             <Listbox
@@ -135,7 +135,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
                 <Listbox.Button className="btn-default w-full text-left">
                   <div className="grow">
                     {selectedParticipant ? (
-                      <div className="flex space-x-2 items-center">
+                      <div className="flex items-center space-x-2">
                         <UserAvater name={selectedParticipant.name} />
                         <span>{selectedParticipant.name}</span>
                       </div>
@@ -146,7 +146,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
                   <ChevronDown className="h-5" />
                 </Listbox.Button>
                 <TransitionPopInOut>
-                  <Listbox.Options className="menu-items w-full max-h-72 overflow-auto">
+                  <Listbox.Options className="menu-items max-h-72 w-full overflow-auto">
                     <Listbox.Option value={undefined} className={styleMenuItem}>
                       Show all
                     </Listbox.Option>
@@ -156,7 +156,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
                         value={participant.id}
                         className={styleMenuItem}
                       >
-                        <div className="flex space-x-2 items-center">
+                        <div className="flex items-center space-x-2">
                           <UserAvater name={participant.name} />
                           <span>{participant.name}</span>
                         </div>
@@ -240,7 +240,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
           return (
             <div
               key={option.id}
-              className="px-4 py-2 flex items-center space-x-4"
+              className="flex items-center space-x-4 px-4 py-2"
             >
               <div>
                 <DateCard
@@ -257,11 +257,11 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
                 />
               ) : null}
 
-              <div className="grow space-y-1 items-center">
+              <div className="grow items-center space-y-1">
                 <div>
                   <span
                     className={clsx(
-                      "inline-block px-2 leading-relaxed border rounded-full text-xs",
+                      "inline-block rounded-full border px-2 text-xs leading-relaxed",
                       {
                         "border-slate-200": numVotes !== highScore,
                         "border-rose-500 text-rose-500": numVotes === highScore,
@@ -286,14 +286,14 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
                         );
                       })}
                     {option.votes.length > 6 ? (
-                      <span className="inline-flex ring-1 ring-white items-center justify-center rounded-full font-medium bg-slate-100 text-xs px-1 h-5">
+                      <span className="inline-flex h-5 items-center justify-center rounded-full bg-slate-100 px-1 text-xs font-medium ring-1 ring-white">
                         +{option.votes.length - 5}
                       </span>
                     ) : null}
                   </div>
                 ) : null}
               </div>
-              <div className="w-12 items-center justify-center h-14 flex">
+              <div className="flex h-14 w-12 items-center justify-center">
                 {mode === "edit" ? (
                   <input
                     type="checkbox"
@@ -314,7 +314,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
         })}
       </div>
       {mode === "edit" ? (
-        <div className="p-2 border-t flex space-x-3">
+        <div className="flex space-x-3 border-t p-2">
           <Button className="grow" onClick={() => setMode("default")}>
             Cancel
           </Button>
diff --git a/components/poll/notifications-toggle.tsx b/components/poll/notifications-toggle.tsx
index 8f3b44ef7..09d6b017d 100644
--- a/components/poll/notifications-toggle.tsx
+++ b/components/poll/notifications-toggle.tsx
@@ -40,7 +40,7 @@ const NotificationsToggle: React.VoidFunctionComponent<NotificationsToggleProps>
                     }}
                     components={{
                       b: (
-                        <span className="text-indigo-300 whitespace-nowrap font-medium font-mono " />
+                        <span className="whitespace-nowrap font-mono font-medium text-indigo-300 " />
                       ),
                     }}
                   />
diff --git a/components/poll/participant-row-form.tsx b/components/poll/participant-row-form.tsx
index 1f5d773d8..628850fec 100644
--- a/components/poll/participant-row-form.tsx
+++ b/components/poll/participant-row-form.tsx
@@ -74,7 +74,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
           });
           reset();
         })}
-        className={clsx("flex shrink-0 h-14", className)}
+        className={clsx("flex h-14 shrink-0", className)}
       >
         {checkboxGroupHack}
         <div className="flex items-center px-2" style={{ width: sidebarWidth }}>
@@ -88,7 +88,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
                 <NameInput
                   autoFocus={true}
                   className={clsx("w-full", {
-                    "animate-wiggle input-error":
+                    "input-error animate-wiggle":
                       errors.name && submitCount > 0,
                   })}
                   placeholder="Your name"
@@ -114,7 +114,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
               <div
                 key={option.id}
                 className={clsx(
-                  "flex justify-center items-center shrink-0 transition-colors",
+                  "flex shrink-0 items-center justify-center transition-colors",
                   {
                     "bg-slate-50": activeOptionId === option.id,
                   },
@@ -160,7 +160,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
             );
           })}
         </ControlledScrollDiv>
-        <div className="flex items-center px-2 space-x-2 transition-all">
+        <div className="flex items-center space-x-2 px-2 transition-all">
           <Tooltip content="Save" placement="top">
             <Button
               htmlType="submit"
diff --git a/components/poll/participant-row.tsx b/components/poll/participant-row.tsx
index 71be45109..26d03f19c 100644
--- a/components/poll/participant-row.tsx
+++ b/components/poll/participant-row.tsx
@@ -81,11 +81,11 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
   return (
     <div
       key={participant.id}
-      className="group flex hover:bg-slate-50 h-14 transition-colors"
+      className="group flex h-14 transition-colors hover:bg-slate-50"
     >
       {deleteParticipantConfirModal}
       <div
-        className="flex items-center px-4 shrink-0"
+        className="flex shrink-0 items-center px-4"
         style={{ width: sidebarWidth }}
       >
         <UserAvater className="mr-2" name={participant.name} />
@@ -99,7 +99,7 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
             <div
               key={option.id}
               className={clsx(
-                "justify-center items-center flex shrink-0 transition-colors",
+                "flex shrink-0 items-center justify-center transition-colors",
                 {
                   "bg-slate-50": activeOptionId === option.id,
                 },
@@ -122,7 +122,7 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
       {!poll.closed ? (
         <div
           style={{ width: actionColumnWidth }}
-          className="flex items-center overflow-hidden px-2 opacity-0 group-hover:opacity-100 delay-100 transition-all space-x-2"
+          className="flex items-center space-x-2 overflow-hidden px-2 opacity-0 transition-all delay-100 group-hover:opacity-100"
         >
           <Button
             icon={<Pencil />}
diff --git a/components/poll/poll-subheader.tsx b/components/poll/poll-subheader.tsx
index d1a502ded..2f60238c0 100644
--- a/components/poll/poll-subheader.tsx
+++ b/components/poll/poll-subheader.tsx
@@ -45,13 +45,13 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
         &nbsp;
         {poll.role === "admin" ? (
           poll.verified ? (
-            <span className="cursor-default inline-block border px-1 rounded-lg text-sm border-green-400 bg-green-50 text-green-500">
+            <span className="inline-block cursor-default rounded-lg border border-green-400 bg-green-50 px-1 text-sm text-green-500">
               Verified
             </span>
           ) : (
             <Popover
               trigger={
-                <button className="inline-block border px-2 rounded-lg text-sm hover:shadow-sm transition-colors hover:text-slate-700 hover:bg-white text-slate-400 active:bg-gray-100">
+                <button className="inline-block rounded-lg border px-2 text-sm text-slate-400 transition-colors hover:bg-white hover:text-slate-700 hover:shadow-sm active:bg-gray-100">
                   Unverified
                 </button>
               }
@@ -64,7 +64,7 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
                     values={{ email: poll.user.email }}
                     components={{
                       b: (
-                        <span className="text-indigo-500 font-medium font-mono whitespace-nowrap" />
+                        <span className="whitespace-nowrap font-mono font-medium text-indigo-500" />
                       ),
                     }}
                   />
diff --git a/components/poll/poll.tsx b/components/poll/poll.tsx
index 067fc362f..49d78a594 100644
--- a/components/poll/poll.tsx
+++ b/components/poll/poll.tsx
@@ -171,17 +171,17 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
       }}
     >
       <div
-        className="relative max-w-full min-w-full" // Don't add styles like border, margin, padding – that can mess up the sizing calculations
+        className="relative min-w-full max-w-full" // Don't add styles like border, margin, padding – that can mess up the sizing calculations
         style={{ width: `min(${pollWidth}px, calc(100vw - 3rem))` }}
         ref={ref}
       >
-        <div className="md:rounded-lg shadow-sm bg-white border-t border-b md:border">
-          <div className="shadow-sm shadow-slate-50 bg-white/80 backdrop-blur-md rounded-t-lg border-gray-200 border-b sticky top-0 z-10">
+        <div className=" border-t border-b bg-white shadow-sm md:rounded-lg md:border">
+          <div className="sticky top-0 z-10 rounded-t-lg border-b border-gray-200 bg-white/80 shadow-sm shadow-slate-50 backdrop-blur-md">
             {role !== "readOnly" ? (
-              <div className="flex px-4 h-14 items-center justify-end space-x-4 border-b bg-gray-50 rounded-t-lg">
+              <div className="flex h-14 items-center justify-end space-x-4 rounded-t-lg border-b bg-gray-50 px-4">
                 {timeZone ? (
-                  <div className="flex items-center grow">
-                    <div className="text-sm mr-2 font-medium text-slate-500">
+                  <div className="flex grow items-center">
+                    <div className="mr-2 text-sm font-medium text-slate-500">
                       {t("timeZone")}
                     </div>
                     <TimeZonePicker
@@ -191,7 +191,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
                     />
                   </div>
                 ) : null}
-                <div className="shrink-0 flex">
+                <div className="flex shrink-0">
                   {!shouldShowNewParticipantForm && !poll.closed ? (
                     <Button
                       type="primary"
@@ -208,10 +208,10 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
             ) : null}
             <div className="flex">
               <div
-                className="flex items-center pl-4 pr-2 py-4 shrink-0 font-medium"
+                className="flex shrink-0 items-center py-4 pl-4 pr-2 font-medium"
                 style={{ width: sidebarWidth }}
               >
-                <div className="grow h-full flex items-end">
+                <div className="flex h-full grow items-end">
                   {t("participantCount", { count: participants.length })}
                 </div>
                 <TransitionPopInOut show={scrollPosition > 0}>
@@ -232,7 +232,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
                     <div
                       key={option.id}
                       className={clsx(
-                        "py-4 text-center shrink-0 transition-colors",
+                        "shrink-0 py-4 text-center transition-colors",
                         {
                           "bg-slate-50": activeOptionId === option.id,
                         },
@@ -281,7 +281,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
                     }}
                   >
                     {didUsePagination ? (
-                      <ArrowRight className="w-4 h-4" />
+                      <ArrowRight className="h-4 w-4" />
                     ) : (
                       `+${numberOfInvisibleColumns} more…`
                     )}
diff --git a/components/poll/score.tsx b/components/poll/score.tsx
index 14652a24a..4897fbfcb 100644
--- a/components/poll/score.tsx
+++ b/components/poll/score.tsx
@@ -17,7 +17,7 @@ const Score: React.VoidFunctionComponent<ScoreProps> = ({
   return (
     <div
       className={clsx(
-        " rounded-full text-xs w-5 h-5 flex justify-center items-center shadow-slate-200 shadow-sm transition-colors z-20",
+        " z-20 flex h-5 w-5 items-center justify-center rounded-full text-xs shadow-sm shadow-slate-200 transition-colors",
         {
           "bg-rose-500 text-white": highlight,
           "bg-slate-200 text-slate-500": !highlight,
diff --git a/components/poll/time-range.tsx b/components/poll/time-range.tsx
index f85063139..6f27c1b75 100644
--- a/components/poll/time-range.tsx
+++ b/components/poll/time-range.tsx
@@ -15,7 +15,7 @@ const TimeRange: React.VoidFunctionComponent<TimeRangeProps> = ({
   return (
     <div
       className={clsx(
-        "inline-block font-mono text-xs text-right pr-2 relative after:content-[''] after:absolute after:w-1 after:h-4 after:border-t after:border-r after:border-b after:border-slate-300 after:top-2 after:right-0",
+        "relative inline-block pr-2 text-right font-mono text-xs after:absolute after:top-2 after:right-0 after:h-4 after:w-1 after:border-t after:border-r after:border-b after:border-slate-300 after:content-['']",
         className,
       )}
     >
diff --git a/components/poll/truncated-linkify.tsx b/components/poll/truncated-linkify.tsx
index 85056b5a5..0f1629624 100644
--- a/components/poll/truncated-linkify.tsx
+++ b/components/poll/truncated-linkify.tsx
@@ -22,7 +22,7 @@ export const truncateLink = (href: string, text: string, key: number) => {
       <Tooltip
         key={key}
         content={
-          <div className="text-xs font-mono max-w-md break-all">{href}</div>
+          <div className="max-w-md break-all font-mono text-xs">{href}</div>
         }
       >
         <a href={href}>{finalText}</a>
diff --git a/components/poll/user-avatar.tsx b/components/poll/user-avatar.tsx
index a538a19e6..38369413c 100644
--- a/components/poll/user-avatar.tsx
+++ b/components/poll/user-avatar.tsx
@@ -91,11 +91,11 @@ const UserAvater: React.VoidFunctionComponent<UserAvaterProps> = ({
   return (
     <span
       className={clsx(
-        "inline-block w-5 h-5 text-white rounded-full shrink-0 text-center",
+        "inline-block h-5 w-5 shrink-0 rounded-full text-center text-white",
         color,
         {
-          "w-5 h-5 text-xs leading-5": size === "default",
-          "w-10 h-10 leading-10": size === "large",
+          "h-5 w-5 text-xs leading-5": size === "default",
+          "h-10 w-10 leading-10": size === "large",
         },
         className,
       )}
diff --git a/components/poll/vote-icon.tsx b/components/poll/vote-icon.tsx
index 942b462dc..bf224a861 100644
--- a/components/poll/vote-icon.tsx
+++ b/components/poll/vote-icon.tsx
@@ -8,7 +8,7 @@ const VoteIcon: React.VoidFunctionComponent<{
   if (type === "yes") {
     return <CheckCircle className="h-5 w-5 text-green-400" />;
   }
-  return <span className="inline-block bg-slate-300 w-2 h-2 rounded-full" />;
+  return <span className="inline-block h-2 w-2 rounded-full bg-slate-300" />;
 };
 
 export default VoteIcon;
diff --git a/components/popover.tsx b/components/popover.tsx
index 223d6c28f..5e093b510 100644
--- a/components/popover.tsx
+++ b/components/popover.tsx
@@ -45,7 +45,7 @@ const Popover: React.VoidFunctionComponent<PopoverProps> = ({
       {portal &&
         ReactDOM.createPortal(
           <HeadlessPopover.Panel
-            className="shadow-md bg-white rounded-lg max-w-full border p-4"
+            className="max-w-full rounded-lg border bg-white p-4 shadow-md"
             style={styles.popper}
             {...attributes.popper}
             ref={setPopperElement}
diff --git a/components/sharing.tsx b/components/sharing.tsx
index c101c046e..d921471fe 100644
--- a/components/sharing.tsx
+++ b/components/sharing.tsx
@@ -53,7 +53,7 @@ const Sharing: React.VoidFunctionComponent<SharingProps> = ({ links }) => {
   const [didCopy, setDidCopy] = React.useState(false);
   return (
     <div className="w-[300px] md:w-[400px]">
-      <div className="segment-button inline-flex mb-3">
+      <div className="segment-button mb-3 inline-flex">
         <button
           className={clsx({
             "segment-button-active": role === "participant",
@@ -77,10 +77,10 @@ const Sharing: React.VoidFunctionComponent<SharingProps> = ({ links }) => {
           {roleData["admin"].label}
         </button>
       </div>
-      <div className="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3 mb-2">
+      <div className="mb-2 flex flex-col space-y-3 lg:flex-row lg:space-y-0 lg:space-x-3">
         <input readOnly={true} className="input lg:w-[280px]" value={pollUrl} />
         <Button
-          className="shrink-0 w-24"
+          className="w-24 shrink-0"
           disabled={didCopy}
           onClick={() => {
             copyToClipboard(pollUrl);
diff --git a/components/standard-layout.tsx b/components/standard-layout.tsx
index f56f1834c..de19b59d1 100644
--- a/components/standard-layout.tsx
+++ b/components/standard-layout.tsx
@@ -8,40 +8,40 @@ import Support from "./icons/support.svg";
 
 const StandardLayout: React.FunctionComponent = ({ children, ...rest }) => {
   return (
-    <div className="relative min-h-full lg:flex bg-gray-50" {...rest}>
-      <div className="bg-gray-100 border-b lg:border-b-0 px-4 py-2 lg:py-6 lg:px-4 lg:border-r lg:grow">
-        <div className="flex lg:float-right items-center lg:items-start lg:w-40 lg:flex-col">
-          <div className="grow lg:grow-0 lg:mb-8">
+    <div className="relative min-h-full bg-gray-50 lg:flex" {...rest}>
+      <div className="border-b bg-gray-100 px-4 py-2 lg:grow lg:border-b-0 lg:border-r lg:py-6 lg:px-4">
+        <div className="flex items-center lg:float-right lg:w-40 lg:flex-col lg:items-start">
+          <div className="grow lg:mb-8 lg:grow-0">
             <Link href="/">
               <a>
-                <Logo className="text-slate-500 transition-colors w-24 lg:w-28 hover:text-indigo-500 active:text-indigo-600" />
+                <Logo className="w-24 text-slate-500 transition-colors hover:text-indigo-500 active:text-indigo-600 lg:w-28" />
               </a>
             </Link>
           </div>
-          <div className="flex shrink-0 lg:block lg:w-full text-sm lg:text-base items-center lg:pb-4 lg:mb-4">
+          <div className="flex shrink-0 items-center text-sm lg:mb-4 lg:block lg:w-full lg:pb-4 lg:text-base">
             <Link passHref={true} href="/new">
-              <a className="flex items-center whitespace-nowrap hover:text-gray-600 hover:bg-gray-200 px-2 py-1 lg:-ml-2 rounded-md font-medium hover:no-underline space-x-2 text-gray-600 cursor-pointer transition-colors active:bg-gray-300">
-                <Pencil className="w-6 h-6 opacity-75" />
+              <a className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-600 hover:no-underline active:bg-gray-300 lg:-ml-2">
+                <Pencil className="h-6 w-6 opacity-75" />
                 <span className="hidden md:inline-block">New Poll</span>
               </a>
             </Link>
             <a
               href="https://blog.rallly.co"
-              className="flex items-center whitespace-nowrap hover:text-gray-600 hover:bg-gray-200 px-2 py-1 lg:-ml-2 rounded-md font-medium hover:no-underline space-x-2 text-gray-600 cursor-pointer transition-colors active:bg-gray-300"
+              className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-600 hover:no-underline active:bg-gray-300 lg:-ml-2"
             >
-              <Newspaper className="w-6 h-6 opacity-75" />
+              <Newspaper className="h-6 w-6 opacity-75" />
               <span className="hidden md:inline-block">Blog</span>
             </a>
             <Link passHref={true} href="/support">
-              <a className="flex items-center whitespace-nowrap hover:text-gray-600 hover:bg-gray-200 px-2 py-1 lg:-ml-2 rounded-md font-medium hover:no-underline space-x-2 text-gray-600 cursor-pointer transition-colors active:bg-gray-300">
-                <Support className="w-6 h-6 opacity-75" />
+              <a className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-600 hover:no-underline active:bg-gray-300 lg:-ml-2">
+                <Support className="h-6 w-6 opacity-75" />
                 <span className="hidden md:inline-block">Support</span>
               </a>
             </Link>
           </div>
         </div>
       </div>
-      <div className="grow min-w-0">{children}</div>
+      <div className="min-w-0 grow">{children}</div>
     </div>
   );
 };
diff --git a/components/steps/steps.tsx b/components/steps/steps.tsx
index ea6dab66a..efe77ba46 100644
--- a/components/steps/steps.tsx
+++ b/components/steps/steps.tsx
@@ -17,21 +17,21 @@ const Steps: React.VoidFunctionComponent<StepsProps> = ({
 
   return (
     <div className={clsx("inline-flex items-center", className)}>
-      <div className="font-medium text-sm tracking-tight">
+      <div className="text-sm font-medium tracking-tight">
         {t("stepSummary", {
           current: current + 1,
           total,
         })}
       </div>
-      <div className="flex ml-2 items-center">
+      <div className="ml-2 flex items-center">
         {[...Array(total)].map((_, i) => {
           return (
             <span
               key={i}
-              className={clsx("w-2 h-2  rounded-full ml-3 transition-all", {
+              className={clsx("ml-3 h-2  w-2 rounded-full transition-all", {
                 "bg-indigo-400": i <= current,
                 "bg-gray-300": i > current,
-                "ring-4 ring-indigo-200 animate-pulse": i === current,
+                "animate-pulse ring-4 ring-indigo-200": i === current,
               })}
             />
           );
diff --git a/components/support.tsx b/components/support.tsx
index 4344622a9..6092f2366 100644
--- a/components/support.tsx
+++ b/components/support.tsx
@@ -12,16 +12,16 @@ const Support: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("support");
   return (
     <PageLayout>
-      <div className="pt-16 px-8 mx-auto max-w-7xl">
+      <div className="mx-auto max-w-7xl px-8 pt-16">
         <h1 className="text-5xl">Support</h1>
-        <div className="lg:flex py-16">
-          <div className="grow mb-8">
-            <h2 className="text-3xl mb-4">General</h2>
+        <div className="py-16 lg:flex">
+          <div className="mb-8 grow">
+            <h2 className="mb-4 text-3xl">General</h2>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 <Trans t={t} i18nKey="howDoIShareQuestion" />
               </Disclosure.Button>
               <Disclosure.Panel className="text py-2 px-3">
@@ -34,9 +34,9 @@ const Support: React.VoidFunctionComponent = () => {
             </Disclosure>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 <Trans
                   t={t}
                   i18nKey="canRalllyDoQuestion"
@@ -57,9 +57,9 @@ const Support: React.VoidFunctionComponent = () => {
             </Disclosure>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 {t("legacyPollsQuestion")}
               </Disclosure.Button>
               <Disclosure.Panel className="text py-2 px-3">
@@ -72,9 +72,9 @@ const Support: React.VoidFunctionComponent = () => {
             </Disclosure>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 {t("contributeQuestion")}
               </Disclosure.Button>
               <Disclosure.Panel className="text py-2 px-3">
@@ -87,12 +87,12 @@ const Support: React.VoidFunctionComponent = () => {
                 />
               </Disclosure.Panel>
             </Disclosure>
-            <h2 className="text-3xl mb-4 mt-8">Privacy & Security</h2>
+            <h2 className="mb-4 mt-8 text-3xl">Privacy & Security</h2>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 {t("isMyDataSafeQuestion")}
               </Disclosure.Button>
               <Disclosure.Panel className="text py-2 px-3">
@@ -103,12 +103,12 @@ const Support: React.VoidFunctionComponent = () => {
                 />
               </Disclosure.Panel>
             </Disclosure>
-            <h2 className="text-3xl mb-4 mt-8">Self-hosting</h2>
+            <h2 className="mb-4 mt-8 text-3xl">Self-hosting</h2>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 {t("selfHostQuestion")}
               </Disclosure.Button>
               <Disclosure.Panel className="text py-2 px-3">
@@ -123,9 +123,9 @@ const Support: React.VoidFunctionComponent = () => {
             </Disclosure>
             <Disclosure
               as="div"
-              className="bg-white p-2 rounded-lg mb-4 shadow-md"
+              className="mb-4 rounded-lg bg-white p-2 shadow-md"
             >
-              <Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer">
+              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
                 {t("canYouHelpMeSetUpRalllyQuestion")}
               </Disclosure.Button>
               <Disclosure.Panel className="text py-2 px-3">
@@ -141,10 +141,10 @@ const Support: React.VoidFunctionComponent = () => {
               </Disclosure.Panel>
             </Disclosure>
           </div>
-          <div className="lg:ml-16 shrink-0 lg:w-96">
-            <div className="p-8 bg-white rounded-xl shadow-md">
-              <div className="flex lg:flex-col items-start max-w-3xl">
-                <Chat className="hidden sm:block w-20 text-indigo-500 shrink-0 mr-8 mb-8" />
+          <div className="shrink-0 lg:ml-16 lg:w-96">
+            <div className="rounded-xl bg-white p-8 shadow-md">
+              <div className="flex max-w-3xl items-start lg:flex-col">
+                <Chat className="mr-8 mb-8 hidden w-20 shrink-0 text-indigo-500 sm:block" />
                 <div>
                   <h2 className="mb-2">{t("supportContactTitle")}</h2>
                   <p className="text">
diff --git a/components/switch.tsx b/components/switch.tsx
index ab0a6f961..264c17117 100644
--- a/components/switch.tsx
+++ b/components/switch.tsx
@@ -19,7 +19,7 @@ const Switch: React.VoidFunctionComponent<SwitchProps> = ({
       checked={checked}
       onChange={onChange}
       className={clsx(
-        "relative inline-flex flex-shrink-0 h-6 w-10 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75",
+        "relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75",
         {
           "bg-gray-200": !checked,
           "bg-green-500": checked,
@@ -31,7 +31,7 @@ const Switch: React.VoidFunctionComponent<SwitchProps> = ({
       <span
         aria-hidden="true"
         className={clsx(
-          "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200",
+          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out",
           {
             "translate-x-4": checked,
             "translate-x-0": !checked,
diff --git a/components/time-zone-picker/time-zone-picker.tsx b/components/time-zone-picker/time-zone-picker.tsx
index 3272d4efc..41491a477 100644
--- a/components/time-zone-picker/time-zone-picker.tsx
+++ b/components/time-zone-picker/time-zone-picker.tsx
@@ -174,15 +174,15 @@ const TimeZonePicker: React.VoidFunctionComponent<{
           }}
           onBlur={onBlur}
         />
-        <Combobox.Button className="absolute inset-0 w-full flex items-center cursor-default px-2 h-9 text-left">
+        <Combobox.Button className="absolute inset-0 flex h-9 w-full cursor-default items-center px-2 text-left">
           <span className="grow truncate">
             {!query ? selectedTimeZone.label : null}
           </span>
-          <span className="flex pointer-events-none">
-            <ChevronDown className="w-5 h-5" />
+          <span className="pointer-events-none flex">
+            <ChevronDown className="h-5 w-5" />
           </span>
         </Combobox.Button>
-        <Combobox.Options className="absolute w-full z-50 py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg max-h-72 ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Combobox.Options className="absolute z-50 mt-1 max-h-72 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           {filteredTimeZones.map((timeZone) => (
             <Combobox.Option
               key={timeZone.value}
diff --git a/components/tooltip.tsx b/components/tooltip.tsx
index 1ff58a809..ae7d80922 100644
--- a/components/tooltip.tsx
+++ b/components/tooltip.tsx
@@ -99,7 +99,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
               {...attributes.popper}
             >
               <Transition
-                className="px-3 py-2 rounded-md pointer-events-none bg-slate-700 text-slate-200 shadow-md"
+                className="pointer-events-none rounded-md bg-slate-700 px-3 py-2 text-slate-200 shadow-md"
                 as={"div"}
                 show={debouncedValue}
                 enter="transition transform duration-100"
@@ -108,7 +108,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
               >
                 <div
                   ref={setArrowElement}
-                  className="tooltip-arrow w-3 h-3 border-transparent border-[6px]"
+                  className="tooltip-arrow h-3 w-3 border-[6px] border-transparent"
                   style={styles.arrow}
                   data-popper-arrow
                 ></div>
diff --git a/package.json b/package.json
index cdd4bee2a..56d1ed068 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "postcss": "^8.4.6",
     "prettier": "^2.3.0",
+    "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23",
     "wait-on": "^6.0.1"
   }
diff --git a/pages/maintenance.tsx b/pages/maintenance.tsx
index c4bd47873..e5cb8f19c 100644
--- a/pages/maintenance.tsx
+++ b/pages/maintenance.tsx
@@ -5,9 +5,9 @@ import { isInMaintenanceMode } from "../utils/constants";
 
 const Maintenance: NextPage = () => {
   return (
-    <div className="h-full bg-gray-100 flex flex-col justify-center items-center">
-      <div className="bg-white text-center p-8 rounded-lg border shadow-sm w-96">
-        <Logo className="h-8 inline-block text-indigo-500 mb-4" />
+    <div className="flex h-full flex-col items-center justify-center bg-gray-100">
+      <div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
+        <Logo className="mb-4 inline-block h-8 text-indigo-500" />
         <div className="">
           The site is currently under maintenance and will be back shortly…
         </div>
diff --git a/pages/new.tsx b/pages/new.tsx
index 3e6cce440..1dc607806 100644
--- a/pages/new.tsx
+++ b/pages/new.tsx
@@ -148,18 +148,18 @@ const Page: NextPage<{
       <Head>
         <title>{formData?.eventDetails?.title ?? t("newPoll")}</title>
       </Head>
-      <div className="max-w-full w-[1024px] py-4 px-3 lg:px-6">
-        <div className="flex space-x-4 items-center mb-4">
+      <div className="w-[1024px] max-w-full py-4 px-3 lg:px-6">
+        <div className="mb-4 flex items-center space-x-4">
           <h1 className="m-0">New Poll</h1>
           <Steps current={currentStepIndex} total={steps.length} />
         </div>
-        <div className="bg-white overflow-hidden rounded-lg max-w-full w-fit shadow-sm border">
+        <div className="w-fit max-w-full overflow-hidden rounded-lg border bg-white shadow-sm">
           {(() => {
             switch (currentStepName) {
               case "eventDetails":
                 return (
                   <PollDetailsForm
-                    className="px-4 pt-4 max-w-full"
+                    className="max-w-full px-4 pt-4"
                     name={currentStepName}
                     defaultValues={formData?.eventDetails}
                     onSubmit={handleSubmit}
@@ -180,7 +180,7 @@ const Page: NextPage<{
               case "userDetails":
                 return (
                   <UserDetailsForm
-                    className="px-4 pt-4 grow"
+                    className="grow px-4 pt-4"
                     name={currentStepName}
                     defaultValues={formData?.userDetails}
                     onSubmit={handleSubmit}
@@ -189,7 +189,7 @@ const Page: NextPage<{
                 );
             }
           })()}
-          <div className="bg-slate-50 w-full justify-end px-4 py-3 flex border-t space-x-3">
+          <div className="flex w-full justify-end space-x-3 border-t bg-slate-50 px-4 py-3">
             {currentStepIndex > 0 ? (
               <Button
                 disabled={isBusy}
diff --git a/pages/poll.tsx b/pages/poll.tsx
index cbc051c80..07333ddb2 100644
--- a/pages/poll.tsx
+++ b/pages/poll.tsx
@@ -216,7 +216,7 @@ const PollPage: NextPage = () => {
   return (
     <UserAvatarProvider seed={poll.pollId} names={names}>
       <StandardLayout>
-        <div className="max-w-full lg:w-[1024px] bg-gray-50 relative py-4 md:px-4 lg:px-8">
+        <div className="relative max-w-full bg-gray-50 py-4 md:px-4 lg:w-[1024px] lg:px-8">
           <Head>
             <title>{poll.title}</title>
             <meta name="robots" content="noindex,nofollow" />
@@ -228,14 +228,14 @@ const PollPage: NextPage = () => {
             }}
           >
             <div className="mb-6 px-4 md:px-0">
-              <div className="md:flex md:space-x-4 items-start mb-3">
-                <div className="mb-3 md:mb-0 grow">
+              <div className="mb-3 items-start md:flex md:space-x-4">
+                <div className="mb-3 grow md:mb-0">
                   <div className="flex flex-col-reverse md:flex-row">
-                    <h1 className="grow mb-2 leading-tight text-3xl">
+                    <h1 className="mb-2 grow text-3xl leading-tight">
                       {preventWidows(poll.title)}
                     </h1>
                     {poll.role === "admin" ? (
-                      <div className="flex space-x-2 mb-4 md:mb-2">
+                      <div className="mb-4 flex space-x-2 md:mb-2">
                         <NotificationsToggle />
                         <ManagePoll
                           placement={
@@ -262,18 +262,18 @@ const PollPage: NextPage = () => {
                 </div>
               </div>
               {poll.description ? (
-                <div className="text-lg leading-relaxed max-w-2xl mb-4 whitespace-pre-line w-fit shadow-sm bg-white text-slate-600 rounded-xl px-4 py-3">
+                <div className="mb-4 w-fit max-w-2xl whitespace-pre-line rounded-xl bg-white px-4 py-3 text-lg leading-relaxed text-slate-600 shadow-sm">
                   <TruncatedLinkify>
                     {preventWidows(poll.description)}
                   </TruncatedLinkify>
                 </div>
               ) : null}
               {poll.location ? (
-                <div className="flex items-center mb-4">
+                <div className="mb-4 flex items-center">
                   <div>
                     <LocationMarker
                       width={20}
-                      className="text-slate-400 mr-2"
+                      className="mr-2 text-slate-400"
                     />
                   </div>
                   <TruncatedLinkify>{poll.location}</TruncatedLinkify>
@@ -281,7 +281,7 @@ const PollPage: NextPage = () => {
               ) : null}
             </div>
             {poll.closed ? (
-              <div className="bg-sky-100 text-sky-700 py-3 px-4 md:rounded-lg shadow-sm mb-4 flex items-center">
+              <div className="mb-4 flex items-center bg-sky-100 py-3 px-4 text-sky-700 shadow-sm md:rounded-lg">
                 <div className="mr-3 rounded-md">
                   <LockClosed className="w-5" />
                 </div>
diff --git a/pages/privacy-policy.tsx b/pages/privacy-policy.tsx
index 9c7c6e0ee..2f3777db7 100644
--- a/pages/privacy-policy.tsx
+++ b/pages/privacy-policy.tsx
@@ -6,7 +6,7 @@ import PageLayout from "@/components/page-layout";
 const PrivacyPolicy = () => {
   return (
     <PageLayout>
-      <div className="p-8 my-16 mx-auto max-w-3xl bg-white shadow-md rounded-lg prose prose-">
+      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Privacy Policy</h1>
         <p>Last updated: April 04, 2022</p>
         <p>
diff --git a/style.css b/style.css
index 13a15ff01..a9134bc64 100644
--- a/style.css
+++ b/style.css
@@ -19,7 +19,7 @@
   h3,
   h4,
   h5 {
-    @apply font-sans font-semibold mb-4 text-slate-700;
+    @apply mb-4 font-sans font-semibold text-slate-700;
   }
   h1 {
     @apply text-2xl;
@@ -31,17 +31,17 @@
     @apply outline-none;
   }
   a {
-    @apply text-indigo-500 font-medium hover:underline hover:text-indigo-400;
+    @apply font-medium text-indigo-500 hover:text-indigo-400 hover:underline;
   }
   label {
-    @apply block text-slate-800 text-sm mb-1;
+    @apply mb-1 block text-sm text-slate-800;
   }
   button {
     @apply focus:outline-none focus:ring-indigo-600;
   }
 
   #portal {
-    @apply absolute w-full z-50;
+    @apply absolute z-50 w-full;
   }
 }
 
@@ -50,7 +50,7 @@
     @apply mb-4;
   }
   .input {
-    @apply appearance-none placeholder:text-slate-400 px-2 py-1 border border-gray-200 rounded-md text-slate-700 shadow-sm focus:ring-indigo-500 focus:ring-1 focus:border-indigo-500;
+    @apply appearance-none rounded-md border border-gray-200 px-2 py-1 text-slate-700 shadow-sm placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500;
   }
   input.input {
     @apply h-9;
@@ -59,26 +59,26 @@
     @apply input px-3 py-3;
   }
   .input-error {
-    @apply focus:ring-rose-500 focus:border-rose-400 bg-rose-50 border-rose-500 placeholder:text-rose-500;
+    @apply border-rose-500 bg-rose-50 placeholder:text-rose-500 focus:border-rose-400 focus:ring-rose-500;
   }
   .checkbox {
-    @apply focus:ring-indigo-500 h-4 w-4 text-indigo-500 border-slate-300 rounded cursor-pointer;
+    @apply h-4 w-4 cursor-pointer rounded border-slate-300 text-indigo-500 focus:ring-indigo-500;
   }
   .btn {
-    @apply inline-flex justify-center items-center h-9 px-3 border shadow-sm rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all whitespace-nowrap;
+    @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md border px-3 font-medium shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-1;
   }
   a.btn {
     @apply hover:no-underline;
   }
 
   .btn-default {
-    @apply btn bg-white active:bg-gray-100 focus:ring-offset-0 border-gray-300 focus:border-transparent text-gray-700 focus:ring-indigo-500 hover:text-indigo-500;
+    @apply btn border-gray-300 bg-white text-gray-700 hover:text-indigo-500 focus:border-transparent focus:ring-indigo-500 focus:ring-offset-0 active:bg-gray-100;
   }
   .btn-danger {
-    @apply btn border-rose-600 text-white bg-rose-500 hover:bg-rose-600 focus:ring-rose-500;
+    @apply btn border-rose-600 bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500;
   }
   .btn-link {
-    @apply text-indigo-500 inline-flex items-center underline;
+    @apply inline-flex items-center text-indigo-500 underline;
   }
   .btn-default.btn-disabled {
     @apply bg-gray-50;
@@ -87,18 +87,18 @@
     @apply pointer-events-none;
   }
   .btn-primary {
-    @apply btn text-white border-indigo-600 bg-indigo-500 hover:bg-opacity-90 focus:ring-indigo-500;
+    @apply btn border-indigo-600 bg-indigo-500 text-white hover:bg-opacity-90 focus:ring-indigo-500;
   }
   a.btn-primary {
     @apply text-white;
   }
 
   .segment-button {
-    @apply flex text-center h-9 shadow-sm;
+    @apply flex h-9 text-center shadow-sm;
   }
 
   .segment-button button {
-    @apply grow justify-center bg-white inline-flex items-center first:border-l first:rounded-l focus:z-10 last:rounded-r border-t border-b focus:ring-2 px-4 border-r font-medium hover:bg-slate-50 active:bg-slate-100 transition-colors;
+    @apply inline-flex grow items-center justify-center border-t border-b border-r bg-white px-4 font-medium transition-colors first:rounded-l first:border-l last:rounded-r hover:bg-slate-50 focus:z-10 focus:ring-2 active:bg-slate-100;
   }
 
   .segment-button .segment-button-active {
@@ -110,11 +110,11 @@
   }
 
   .menu-items {
-    @apply absolute z-30 bg-white rounded mt-1 shadow-md border focus:outline-none overflow-hidden;
+    @apply absolute z-30 mt-1 overflow-hidden rounded border bg-white shadow-md focus:outline-none;
   }
 
   .menu-item {
-    @apply px-4 py-2 block w-full text-left cursor-default truncate select-none;
+    @apply block w-full cursor-default select-none truncate px-4 py-2 text-left;
   }
 
   button[disabled] {
@@ -132,13 +132,13 @@
 
 @layer components {
   .heading {
-    @apply text-indigo-500 text-xl;
+    @apply text-xl text-indigo-500;
   }
   .subheading {
-    @apply text-4xl font-bold text-slate-800 mb-16;
+    @apply mb-16 text-4xl font-bold text-slate-800;
   }
   .heading-sm {
-    @apply font-bold text-xl text-slate-700;
+    @apply text-xl font-bold text-slate-700;
   }
   .text {
     @apply text-lg leading-relaxed text-slate-500;
@@ -197,14 +197,14 @@
 }
 
 .rbc-header a {
-  @apply block h-full w-full no-underline p-1 hover:text-gray-700;
+  @apply block h-full w-full p-1 no-underline hover:text-gray-700;
 }
 
 .rbc-day-slot .rbc-events-container {
   @apply mr-2;
 }
 .rbc-slot-selection {
-  @apply bg-green-50 rounded-sm text-green-500;
+  @apply rounded-sm bg-green-50 text-green-500;
 }
 
 .rbc-header.rbc-today {
diff --git a/yarn.lock b/yarn.lock
index 5cdcc2a9b..8f6e4cb01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4764,6 +4764,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.8.tgz#ba0f606ed91959ede670303d905b99106e9e6293"
+  integrity sha512-hwarSBCswAXa+kqYtaAkFr3Vop9o04WOyZs0qo3NyvW8L7f1rif61wRyq0+ArmVThOuRBcJF5hjGXYk86cwemg==
+
 prettier@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz"