diff --git a/.github/ISSUE_TEMPLATE/---bug-report.md b/.github/ISSUE_TEMPLATE/---bug-report.md
index 255aa018ca7..17d8c68701c 100644
--- a/.github/ISSUE_TEMPLATE/---bug-report.md
+++ b/.github/ISSUE_TEMPLATE/---bug-report.md
@@ -1,10 +1,9 @@
 ---
 name: "\U0001F41E Bug report"
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/---feature-request.md b/.github/ISSUE_TEMPLATE/---feature-request.md
index 9d89858cc61..8150e01b8ed 100644
--- a/.github/ISSUE_TEMPLATE/---feature-request.md
+++ b/.github/ISSUE_TEMPLATE/---feature-request.md
@@ -1,10 +1,9 @@
 ---
 name: "\U0001F914 Feature request"
 about: Please use discussions instead of issues for feature requests
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **DO NOT OPEN AN ISSUE FOR FEATURE REQUESTS**
diff --git a/.prettierrc b/.prettierrc
index d3432c13578..43603229a59 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "semi": true,
   "tabWidth": 2,
   "useTabs": false,
diff --git a/apps/docs/contribute/documentation.mdx b/apps/docs/contribute/documentation.mdx
index 7c56892cd54..f681cd9d254 100644
--- a/apps/docs/contribute/documentation.mdx
+++ b/apps/docs/contribute/documentation.mdx
@@ -7,7 +7,10 @@ description: Help us maintain and improve our documentation
 If you have a [Github](https://github.com) account, you can make changes or report issues using the links that appear at the top of each page.
 
 <Frame caption="Links to edit a page or open an issue on Github">
-  <img src="/images/contribute/edit-documentation.png" alt="Edit Documentation Links"/>
+  <img
+    src="/images/contribute/edit-documentation.png"
+    alt="Edit Documentation Links"
+  />
 </Frame>
 
 ## Submitting a Pull Request
diff --git a/apps/docs/contribute/translations.mdx b/apps/docs/contribute/translations.mdx
index c751800125d..ff92c2c6fee 100644
--- a/apps/docs/contribute/translations.mdx
+++ b/apps/docs/contribute/translations.mdx
@@ -20,7 +20,7 @@ Once you've joined the project:
 3. Start translating!
 
 <Frame>
-  <img src="/images/contribute/crowdin-project.png" alt="Crowdin Project"/>
+  <img src="/images/contribute/crowdin-project.png" alt="Crowdin Project" />
 </Frame>
 
 ## Tips for Translators
@@ -98,7 +98,10 @@ If your language requires more than one plural form, you can add additional rule
 ```
 
 <Frame caption="Crowdin let's you preview your message to make sure it works">
-  <img src="/images/contribute/icu-message-format.png" alt="Using ICU Message Format on Corwdin"/>
+  <img
+    src="/images/contribute/icu-message-format.png"
+    alt="Using ICU Message Format on Corwdin"
+  />
 </Frame>
 
 ### Register
diff --git a/apps/docs/introduction.mdx b/apps/docs/introduction.mdx
index e473efe1ef7..0effb3b0453 100644
--- a/apps/docs/introduction.mdx
+++ b/apps/docs/introduction.mdx
@@ -5,7 +5,7 @@ description: "Welcome to the official documentation for Rallly."
 ---
 
 <Frame>
-  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image"/>
+  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image" />
 </Frame>
 
 ## What is Rallly?
diff --git a/apps/docs/self-hosting/introduction.mdx b/apps/docs/self-hosting/introduction.mdx
index dfe388ab9af..87b6369550e 100644
--- a/apps/docs/self-hosting/introduction.mdx
+++ b/apps/docs/self-hosting/introduction.mdx
@@ -8,7 +8,7 @@ Rallly is 100% open-source and available under the [GNU Affero General Public Li
 which allows you to run your own instance of Rallly for free for both personal and commercial use.
 
 <Frame>
-  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image"/>
+  <img src="/images/self-hosting/splash.png" alt="Rallly Splash Image" />
 </Frame>
 
 ## Official Docker Image
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 4ad2dd44281..beac8603e15 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/next.json",
   "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/apps/docs/workflow/finalize.mdx b/apps/docs/workflow/finalize.mdx
index 0c7a923c2ab..2ff00e4c7fc 100644
--- a/apps/docs/workflow/finalize.mdx
+++ b/apps/docs/workflow/finalize.mdx
@@ -27,5 +27,6 @@ description: "Pick a final date for your event"
     <Frame>
       <img src="/images/workflow/finalized.png" alt="Finalized Poll"/>
     </Frame>
+
   </Step>
 </Steps>
diff --git a/apps/landing/src/components/blog/markdown-styles.module.css b/apps/landing/src/components/blog/markdown-styles.module.css
index 73d2a930ca2..f9e9b2f6073 100644
--- a/apps/landing/src/components/blog/markdown-styles.module.css
+++ b/apps/landing/src/components/blog/markdown-styles.module.css
@@ -10,11 +10,11 @@
 }
 
 .markdown h2 {
-  @apply mt-12 mb-4 text-2xl font-semibold leading-snug;
+  @apply mb-4 mt-12 text-2xl font-semibold leading-snug;
 }
 
 .markdown h3 {
-  @apply mt-8 mb-4 text-xl font-semibold leading-snug;
+  @apply mb-4 mt-8 text-xl font-semibold leading-snug;
 }
 
 .markdown a {
diff --git a/apps/landing/src/pages/cookie-policy.tsx b/apps/landing/src/pages/cookie-policy.tsx
index 5510fcaf96d..389ecbdcaaf 100644
--- a/apps/landing/src/pages/cookie-policy.tsx
+++ b/apps/landing/src/pages/cookie-policy.tsx
@@ -8,7 +8,7 @@ const PrivacyPolicy = () => {
   return (
     <PageLayout>
       <NextSeo title="Cookie Policy" />
-      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
+      <div className="prose mx-auto my-16 max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Cookie Policy</h1>
         <p>Last updated: 19 April 2023</p>
         <p>
diff --git a/apps/landing/src/pages/privacy-policy.tsx b/apps/landing/src/pages/privacy-policy.tsx
index b175d54f1e6..0c5128fb568 100644
--- a/apps/landing/src/pages/privacy-policy.tsx
+++ b/apps/landing/src/pages/privacy-policy.tsx
@@ -7,7 +7,7 @@ const PrivacyPolicy = () => {
   return (
     <PageLayout>
       <NextSeo title="Privacy Policy" />
-      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
+      <div className="prose mx-auto my-16 max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Privacy Policy</h1>
         <p>Last updated: 1 August 2023</p>
         <p>
diff --git a/apps/landing/src/pages/terms-of-use.tsx b/apps/landing/src/pages/terms-of-use.tsx
index 2de4d7b0ee0..970870e7fc7 100644
--- a/apps/landing/src/pages/terms-of-use.tsx
+++ b/apps/landing/src/pages/terms-of-use.tsx
@@ -7,7 +7,7 @@ const PrivacyPolicy = () => {
   return (
     <PageLayout>
       <NextSeo title="Terms of Use" />
-      <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
+      <div className="prose mx-auto my-16 max-w-3xl rounded-lg bg-white p-8 shadow-md">
         <h1>Terms of Use</h1>
         <p>Last updated: 4 July 2023</p>
         <p>
diff --git a/apps/landing/src/style.css b/apps/landing/src/style.css
index 7f5036d7928..7dc5cf884b8 100644
--- a/apps/landing/src/style.css
+++ b/apps/landing/src/style.css
@@ -8,7 +8,9 @@
   }
   body {
     @apply text-foreground overflow-y-auto bg-gray-200/50;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
   html {
     @apply h-full font-sans text-base;
diff --git a/apps/landing/tsconfig.json b/apps/landing/tsconfig.json
index e259cb9d55f..00fe2e1a734 100644
--- a/apps/landing/tsconfig.json
+++ b/apps/landing/tsconfig.json
@@ -4,10 +4,10 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "~/*": ["public/*"]
+      "~/*": ["public/*"],
     },
-    "checkJs": false
+    "checkJs": false,
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/apps/web/src/app/[locale]/(admin)/layout.tsx b/apps/web/src/app/[locale]/(admin)/layout.tsx
index ba5f94bd1a7..ecf190aa7de 100644
--- a/apps/web/src/app/[locale]/(admin)/layout.tsx
+++ b/apps/web/src/app/[locale]/(admin)/layout.tsx
@@ -29,18 +29,18 @@ const Auth = ({ children }: { children: React.ReactNode }) => {
 
 function MobileNavigation() {
   return (
-    <div className="lg:hidden shadow-sm bg-gray-100 border-b flex items-center justify-between px-4 py-3">
+    <div className="flex items-center justify-between border-b bg-gray-100 px-4 py-3 shadow-sm lg:hidden">
       <LogoLink />
-      <div className="flex gap-x-2.5 justify-end">
+      <div className="flex justify-end gap-x-2.5">
         <Link
           href="/settings/profile"
-          className="inline-flex items-center w-7 h-9"
+          className="inline-flex h-9 w-7 items-center"
         >
           <CurrentUserAvatar size="sm" />
         </Link>
         <Button asChild variant="ghost">
           <Link href="/menu">
-            <MenuIcon className="h-4 w-4 text-muted-foreground" />
+            <MenuIcon className="text-muted-foreground h-4 w-4" />
           </Link>
         </Button>
       </div>
@@ -59,7 +59,7 @@ export default async function Layout({
         <MobileNavigation />
         <div
           className={cn(
-            "hidden lg:flex z-50 inset-y-0 lg:fixed lg:w-72 bg-gray-100 shrink-0 flex-col gap-y-5 overflow-y-auto border-r lg:px-6 lg:py-4 px-5 py-4",
+            "inset-y-0 z-50 hidden shrink-0 flex-col gap-y-5 overflow-y-auto border-r bg-gray-100 px-5 py-4 lg:fixed lg:flex lg:w-72 lg:px-6 lg:py-4",
           )}
         >
           <div>
@@ -67,7 +67,7 @@ export default async function Layout({
           </div>
           <Sidebar />
         </div>
-        <div className={cn("grow min-h-screen lg:pl-72 bg-gray-50")}>
+        <div className={cn("min-h-screen grow bg-gray-50 lg:pl-72")}>
           {children}
         </div>
       </div>
diff --git a/apps/web/src/app/[locale]/(admin)/menu-item.tsx b/apps/web/src/app/[locale]/(admin)/menu-item.tsx
index 9235b17ad90..6fc4ac9c12c 100644
--- a/apps/web/src/app/[locale]/(admin)/menu-item.tsx
+++ b/apps/web/src/app/[locale]/(admin)/menu-item.tsx
@@ -23,8 +23,8 @@ export function MenuItem({
       className={cn(
         isCurrent
           ? "bg-gray-200 text-indigo-600"
-          : "text-gray-700 hover:text-primary",
-        "group flex  items-center gap-x-3 rounded-md py-2 px-3 text-sm leading-6 font-semibold",
+          : "hover:text-primary text-gray-700",
+        "group flex  items-center gap-x-3 rounded-md px-3 py-2 text-sm font-semibold leading-6",
       )}
     >
       <Icon
diff --git a/apps/web/src/app/[locale]/(admin)/new/page.tsx b/apps/web/src/app/[locale]/(admin)/new/page.tsx
index dbc65689cdf..a920f9bbf5c 100644
--- a/apps/web/src/app/[locale]/(admin)/new/page.tsx
+++ b/apps/web/src/app/[locale]/(admin)/new/page.tsx
@@ -16,7 +16,7 @@ export default async function Page({ params }: { params: { locale: string } }) {
   return (
     <PageContainer>
       <PageHeader>
-        <div className="flex justify-between items-center gap-x-4">
+        <div className="flex items-center justify-between gap-x-4">
           <PageTitle>
             <Trans t={t} i18nKey="polls" />
           </PageTitle>
diff --git a/apps/web/src/app/[locale]/(admin)/polls/layout.tsx b/apps/web/src/app/[locale]/(admin)/polls/layout.tsx
index 234a9dfa465..680e08485d1 100644
--- a/apps/web/src/app/[locale]/(admin)/polls/layout.tsx
+++ b/apps/web/src/app/[locale]/(admin)/polls/layout.tsx
@@ -22,13 +22,13 @@ export default async function Layout({
   return (
     <PageContainer>
       <PageHeader>
-        <div className="flex justify-between items-center gap-x-4">
+        <div className="flex items-center justify-between gap-x-4">
           <PageTitle>
             <Trans t={t} i18nKey="polls" />
           </PageTitle>
           <Button asChild>
             <Link href="/new">
-              <PenBoxIcon className="w-4 text-muted-foreground h-4" />
+              <PenBoxIcon className="text-muted-foreground h-4 w-4" />
               <span className="hidden sm:inline">
                 <Trans t={t} i18nKey="newPoll" />
               </span>
diff --git a/apps/web/src/app/[locale]/(admin)/polls/loading.tsx b/apps/web/src/app/[locale]/(admin)/polls/loading.tsx
index 84244ac05f9..0f0d31d890d 100644
--- a/apps/web/src/app/[locale]/(admin)/polls/loading.tsx
+++ b/apps/web/src/app/[locale]/(admin)/polls/loading.tsx
@@ -2,19 +2,19 @@ import { Skeleton } from "@/components/skeleton";
 
 function Row() {
   return (
-    <div className="flex first:pt-0 py-4 items-center gap-x-4">
+    <div className="flex items-center gap-x-4 py-4 first:pt-0">
       <div className="grow">
-        <Skeleton className="w-48 h-5 mb-2" />
-        <Skeleton className="w-24 h-4" />
+        <Skeleton className="mb-2 h-5 w-48" />
+        <Skeleton className="h-4 w-24" />
       </div>
       <div className="pr-8">
-        <Skeleton className="w-24 h-4" />
+        <Skeleton className="h-4 w-24" />
       </div>
       <div className="pr-8">
-        <Skeleton className="w-24 h-4" />
+        <Skeleton className="h-4 w-24" />
       </div>
       <div className="pr-8">
-        <Skeleton className="w-12 h-4" />
+        <Skeleton className="h-4 w-12" />
       </div>
     </div>
   );
diff --git a/apps/web/src/app/[locale]/(admin)/polls/polls-folders.tsx b/apps/web/src/app/[locale]/(admin)/polls/polls-folders.tsx
index c616de3e156..ed5053c89f0 100644
--- a/apps/web/src/app/[locale]/(admin)/polls/polls-folders.tsx
+++ b/apps/web/src/app/[locale]/(admin)/polls/polls-folders.tsx
@@ -27,7 +27,7 @@ function PollFolder({
       className={cn(
         isActive
           ? "bg-gray-100"
-          : "shadow-sm text-muted-foreground hover:bg-gray-100 active:bg-gray-200",
+          : "text-muted-foreground shadow-sm hover:bg-gray-100 active:bg-gray-200",
       )}
     >
       <Link href={href}>{children}</Link>
diff --git a/apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx b/apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx
index b8c0daa8f02..c2d99f44a70 100644
--- a/apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx
+++ b/apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx
@@ -20,7 +20,7 @@ import Loader from "./loading";
 const EmptyState = () => {
   return (
     <div className="py-24">
-      <div className="mx-auto max-w-md rounded-md border-2 w-full border-dashed border-gray-300 p-8 text-center">
+      <div className="mx-auto w-full max-w-md rounded-md border-2 border-dashed border-gray-300 p-8 text-center">
         <div className="mb-4">
           <InboxIcon className="inline-block h-10 w-10 text-gray-400" />
         </div>
@@ -84,14 +84,14 @@ export function PollsList() {
         cell: ({ row }) => {
           return (
             <Link className="group block" href={`/poll/${row.original.id}`}>
-              <div className="flex items-center gap-x-2 mb-1 min-w-0">
-                <h3 className="font-semibold truncate text-gray-600 group-hover:text-gray-900">
+              <div className="mb-1 flex min-w-0 items-center gap-x-2">
+                <h3 className="truncate font-semibold text-gray-600 group-hover:text-gray-900">
                   {row.original.title}
                 </h3>
-                <ArrowRightIcon className="h-4 w-4 opacity-0 transition-all group-focus:translate-x-2 group-hover:opacity-100" />
+                <ArrowRightIcon className="h-4 w-4 opacity-0 transition-all group-hover:opacity-100 group-focus:translate-x-2" />
               </div>
               {row.original.event ? (
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   {row.original.event.duration === 0
                     ? adjustTimeZone(
                         row.original.event.start,
@@ -134,7 +134,7 @@ export function PollsList() {
         cell: ({ row }) => {
           const { createdAt } = row.original;
           return (
-            <p className="text-sm whitespace-nowrap text-muted-foreground">
+            <p className="text-muted-foreground whitespace-nowrap text-sm">
               <time dateTime={createdAt.toDateString()}>
                 <Trans
                   i18nKey="createdTime"
@@ -150,7 +150,7 @@ export function PollsList() {
         cell: ({ row }) => {
           return (
             <Tooltip delayDuration={100}>
-              <TooltipTrigger className="flex items-center text-muted-foreground gap-x-2">
+              <TooltipTrigger className="text-muted-foreground flex items-center gap-x-2">
                 <UsersIcon className="h-4 w-4" />
                 <span className="text-sm">
                   {row.original.participants.length}
diff --git a/apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx b/apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx
index 2ac696e7b9b..a2e3c08d16c 100644
--- a/apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx
+++ b/apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx
@@ -20,7 +20,7 @@ export function MenuItem(props: { href: string; children: React.ReactNode }) {
   return (
     <Link
       className={clsx(
-        "flex min-w-0 items-center rounded-none gap-x-2 px-3 py-2 text-sm font-medium",
+        "flex min-w-0 items-center gap-x-2 rounded-none px-3 py-2 text-sm font-medium",
         pathname === props.href
           ? "bg-white"
           : "text-gray-500 hover:bg-gray-100 focus:bg-gray-200",
@@ -66,7 +66,7 @@ export function SettingsMenu() {
 
   return (
     <>
-      <div className="hidden overflow-hidden shadow-sm divide-x lg:inline-flex mb-4 border rounded-md bg-gray-50">
+      <div className="mb-4 hidden divide-x overflow-hidden rounded-md border bg-gray-50 shadow-sm lg:inline-flex">
         {menuItems.map((item, i) => (
           <MenuItem key={i} href={item.href}>
             <item.icon className="h-4 w-4" />
@@ -90,7 +90,7 @@ export function SettingsMenu() {
           {menuItems.map((item, i) => (
             <SelectItem key={i} value={item.title}>
               <div className="flex items-center gap-x-2.5">
-                <item.icon className="h-4 w-4 text-muted-foreground" />
+                <item.icon className="text-muted-foreground h-4 w-4" />
                 <span className="font-medium">{item.title}</span>
               </div>
             </SelectItem>
diff --git a/apps/web/src/app/[locale]/(admin)/sidebar.tsx b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
index f1c82c4b4a0..2794eb6436e 100644
--- a/apps/web/src/app/[locale]/(admin)/sidebar.tsx
+++ b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
@@ -41,7 +41,7 @@ function NavItem({
         current
           ? "bg-gray-200 text-gray-800"
           : "text-gray-700 hover:bg-gray-200 active:bg-gray-300",
-        "group flex  items-center gap-x-3 rounded-md py-2 px-3 text-sm leading-6 font-semibold",
+        "group flex  items-center gap-x-3 rounded-md px-3 py-2 text-sm font-semibold leading-6",
       )}
     >
       <Icon
@@ -80,7 +80,7 @@ export function Sidebar() {
             <Trans i18nKey="comingSoon" defaults="Coming Soon" />
           </div>
           <ul role="list" className="-mx-2 mt-2 space-y-1">
-            <li className="grid gap-1 pointer-events-none opacity-50">
+            <li className="pointer-events-none grid gap-1 opacity-50">
               <NavItem href="/events" icon={CalendarIcon}>
                 <Trans i18nKey="events" defaults="Events" />
               </NavItem>
@@ -102,16 +102,16 @@ export function Sidebar() {
               <li>
                 <Link
                   href="/settings/billing"
-                  className="border rounded-md mb-4 px-4 py-3 bg-gray-50 hover:bg-gray-200 active:bg-gray-300 border-gray-200 hover:border-gray-300 grid"
+                  className="mb-4 grid rounded-md border border-gray-200 bg-gray-50 px-4 py-3 hover:border-gray-300 hover:bg-gray-200 active:bg-gray-300"
                 >
-                  <span className="flex mb-2 items-center gap-x-2">
-                    <SparklesIcon className="h-5 text-gray-400 w-5" />
-                    <span className="font-bold text-sm">
+                  <span className="mb-2 flex items-center gap-x-2">
+                    <SparklesIcon className="h-5 w-5 text-gray-400" />
+                    <span className="text-sm font-bold">
                       <Trans i18nKey="upgrade" />
                     </span>
                     <ProBadge />
                   </span>
-                  <span className="text-gray-500 leading-relaxed text-sm">
+                  <span className="text-sm leading-relaxed text-gray-500">
                     <Trans
                       i18nKey="unlockFeatures"
                       defaults="Unlock all Pro features."
@@ -139,17 +139,17 @@ export function Sidebar() {
               <Button
                 asChild
                 variant="ghost"
-                className="group h-auto py-3 w-full justify-start"
+                className="group h-auto w-full justify-start py-3"
               >
                 <Link href="/settings/profile">
                   <CurrentUserAvatar />
-                  <span className="grid ml-1 grow">
+                  <span className="ml-1 grid grow">
                     <span className="font-semibold">{user.name}</span>
                     <span className="text-muted-foreground text-sm">
                       {user.email}
                     </span>
                   </span>
-                  <ChevronRightIcon className="h-4 w-4 opacity-0 group-hover:opacity-100 text-muted-foreground" />
+                  <ChevronRightIcon className="text-muted-foreground h-4 w-4 opacity-0 group-hover:opacity-100" />
                 </Link>
               </Button>
             </li>
diff --git a/apps/web/src/app/[locale]/(auth)/login/loading.tsx b/apps/web/src/app/[locale]/(auth)/login/loading.tsx
index f96791430cb..c83e66c9cab 100644
--- a/apps/web/src/app/[locale]/(auth)/login/loading.tsx
+++ b/apps/web/src/app/[locale]/(auth)/login/loading.tsx
@@ -2,7 +2,7 @@ import { Spinner } from "@/components/spinner";
 
 export default function Loading() {
   return (
-    <div className="flex justify-center items-center h-72">
+    <div className="flex h-72 items-center justify-center">
       <Spinner className="text-muted-foreground" />
     </div>
   );
diff --git a/apps/web/src/app/[locale]/(auth)/login/login-form.tsx b/apps/web/src/app/[locale]/(auth)/login/login-form.tsx
index b239031e684..b17de8ba976 100644
--- a/apps/web/src/app/[locale]/(auth)/login/login-form.tsx
+++ b/apps/web/src/app/[locale]/(auth)/login/login-form.tsx
@@ -129,12 +129,12 @@ export function LoginForm({ oidcConfig }: { oidcConfig?: { name: string } }) {
         </Button>
         {hasAlternativeLoginMethods ? (
           <>
-            <hr className="border-t border-grey-500 my-4" />
+            <hr className="border-grey-500 my-4 border-t" />
             <div className="grid gap-4">
               <IfCloudHosted>
                 <Button size="lg" asChild>
                   <Link href={callbackUrl}>
-                    <UserIcon className="w-4 h-4" />
+                    <UserIcon className="h-4 w-4" />
                     <Trans i18nKey="continueAsGuest" />
                   </Link>
                 </Button>
diff --git a/apps/web/src/app/[locale]/(auth)/login/page.tsx b/apps/web/src/app/[locale]/(auth)/login/page.tsx
index 84874ee1af2..128abbbbdde 100644
--- a/apps/web/src/app/[locale]/(auth)/login/page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/login/page.tsx
@@ -20,7 +20,7 @@ export default async function LoginPage({ params }: { params: Params }) {
           oidcConfig={isOIDCEnabled ? { name: oidcName } : undefined}
         />
       </AuthCard>
-      <div className="mt-4 text-center pt-4 text-gray-500 sm:text-base">
+      <div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
         <Trans
           t={t}
           i18nKey="notRegistered"
diff --git a/apps/web/src/app/[locale]/(auth)/register/page.tsx b/apps/web/src/app/[locale]/(auth)/register/page.tsx
index 1468797cefa..ac549776b92 100644
--- a/apps/web/src/app/[locale]/(auth)/register/page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/register/page.tsx
@@ -13,7 +13,7 @@ export default async function Page({ params }: { params: Params }) {
       <AuthCard>
         <RegisterForm />
       </AuthCard>
-      <div className="mt-4 text-center pt-4 text-gray-500 sm:text-base">
+      <div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
         <Trans
           t={t}
           i18nKey="alreadyRegistered"
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx b/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
index 6ba9074e3df..256136e928c 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
@@ -73,7 +73,7 @@ const GoToApp = () => {
             className={poll.userId !== user.id ? "hidden" : ""}
           >
             <Link href={`/poll/${poll.id}`}>
-              <ArrowUpLeftIcon className="h-4 w-4 text-muted-foreground" />
+              <ArrowUpLeftIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="manage" />
             </Link>
           </Button>
@@ -92,8 +92,8 @@ export function InvitePage() {
       <LegacyPollContextProvider>
         <VisibilityProvider>
           <GoToApp />
-          <div className="lg:px-6 lg:py-5 p-3">
-            <div className="max-w-4xl mx-auto">
+          <div className="p-3 lg:px-6 lg:py-5">
+            <div className="mx-auto max-w-4xl">
               <div className="-mx-1">
                 <Poll />
               </div>
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx b/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx
index bd4ea3dd0e2..9b0ec733f56 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/loading.tsx
@@ -4,8 +4,8 @@ import { Skeleton } from "@/components/skeleton";
 export default function Loading() {
   return (
     <PageContainer>
-      <PageHeader className="justify-end flex" variant="ghost">
-        <Skeleton className="w-32 h-9" />
+      <PageHeader className="flex justify-end" variant="ghost">
+        <Skeleton className="h-9 w-32" />
       </PageHeader>
     </PageContainer>
   );
diff --git a/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx b/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
index fa19af8cd22..7f4c8e7c1fc 100644
--- a/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
@@ -23,7 +23,7 @@ export const Nav = () => {
             className={poll.userId !== user.id ? "hidden" : ""}
           >
             <Link href={`/poll/${poll.id}`}>
-              <ArrowUpLeftIcon className="h-4 w-4 text-muted-foreground" />
+              <ArrowUpLeftIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="manage" />
             </Link>
           </Button>
diff --git a/apps/web/src/app/[locale]/menu/back-button.tsx b/apps/web/src/app/[locale]/menu/back-button.tsx
index b6f91669a99..046fbdf4b40 100644
--- a/apps/web/src/app/[locale]/menu/back-button.tsx
+++ b/apps/web/src/app/[locale]/menu/back-button.tsx
@@ -13,7 +13,7 @@ export function BackButton() {
         router.back();
       }}
     >
-      <XIcon className="h-4 w-4 text-muted-foreground" />
+      <XIcon className="text-muted-foreground h-4 w-4" />
     </Button>
   );
 }
diff --git a/apps/web/src/app/[locale]/menu/page.tsx b/apps/web/src/app/[locale]/menu/page.tsx
index a537bf5fa9c..570f9261c79 100644
--- a/apps/web/src/app/[locale]/menu/page.tsx
+++ b/apps/web/src/app/[locale]/menu/page.tsx
@@ -9,7 +9,7 @@ export default function Page() {
     <div className="bg-gray-100">
       <div className="flex items-center justify-between px-4 py-3">
         <Link
-          className="active:translate-y-1 transition-transform inline-block"
+          className="inline-block transition-transform active:translate-y-1"
           href="/"
         >
           <Image
diff --git a/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx b/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
index 533f99b900d..0d6999663ee 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
@@ -33,10 +33,10 @@ export const GuestPollAlert = () => {
           defaults="<0>Create an account</0> or <1>login</1> to claim this poll."
           components={[
             <RegisterLink
-              className="hover:text-gray-800 underline"
+              className="underline hover:text-gray-800"
               key="register"
             />,
-            <LoginLink className="hover:text-gray-800 underline" key="login" />,
+            <LoginLink className="underline hover:text-gray-800" key="login" />,
           ]}
         />
       </AlertDescription>
diff --git a/apps/web/src/app/[locale]/poll/[urlId]/page.tsx b/apps/web/src/app/[locale]/poll/[urlId]/page.tsx
index 3e95058dc9e..a6404bebda1 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/page.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/page.tsx
@@ -6,7 +6,7 @@ import { GuestPollAlert } from "./guest-poll-alert";
 
 export default async function Page() {
   return (
-    <div className={cn("max-w-4xl space-y-4 mx-auto")}>
+    <div className={cn("mx-auto max-w-4xl space-y-4")}>
       <div className="-mx-1 space-y-3 sm:space-y-6">
         <GuestPollAlert />
         <Poll />
diff --git a/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx b/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
index bd31d4518ee..d2ad545cdfb 100644
--- a/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
@@ -5,8 +5,8 @@ export default function Loading() {
   return (
     <PageContainer>
       <PageHeader className="flex items-center gap-x-4">
-        <Skeleton className="w-9 h-9" />
-        <Skeleton className="w-48 h-5" />
+        <Skeleton className="h-9 w-9" />
+        <Skeleton className="h-5 w-48" />
       </PageHeader>
     </PageContainer>
   );
diff --git a/apps/web/src/app/components/logo-link.tsx b/apps/web/src/app/components/logo-link.tsx
index bbf374a5efa..cfe3bfaf8f7 100644
--- a/apps/web/src/app/components/logo-link.tsx
+++ b/apps/web/src/app/components/logo-link.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 export function LogoLink() {
   return (
     <Link
-      className="active:translate-y-1 transition-transform inline-block"
+      className="inline-block transition-transform active:translate-y-1"
       href="/"
     >
       <Image
diff --git a/apps/web/src/app/components/page-layout.tsx b/apps/web/src/app/components/page-layout.tsx
index faa35074498..821075456b5 100644
--- a/apps/web/src/app/components/page-layout.tsx
+++ b/apps/web/src/app/components/page-layout.tsx
@@ -16,7 +16,7 @@ export function PageTitle({
   className?: string;
 }) {
   return (
-    <h2 className={cn("font-semibold leading-9 truncate", className)}>
+    <h2 className={cn("truncate font-semibold leading-9", className)}>
       {children}
     </h2>
   );
@@ -34,9 +34,9 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        "lg:px-6 lg:py-3 px-4 py-3",
+        "px-4 py-3 lg:px-6 lg:py-3",
         {
-          "border-b bg-gray-50 sticky z-20 top-0": variant === "default",
+          "sticky top-0 z-20 border-b bg-gray-50": variant === "default",
         },
         className,
       )}
@@ -53,5 +53,5 @@ export function PageContent({
   children?: React.ReactNode;
   className?: string;
 }) {
-  return <div className={cn("lg:px-6 lg:py-5 p-4", className)}>{children}</div>;
+  return <div className={cn("p-4 lg:px-6 lg:py-5", className)}>{children}</div>;
 }
diff --git a/apps/web/src/components/auth/auth-forms.tsx b/apps/web/src/components/auth/auth-forms.tsx
index 2a3f2983569..16b396db348 100644
--- a/apps/web/src/components/auth/auth-forms.tsx
+++ b/apps/web/src/components/auth/auth-forms.tsx
@@ -44,7 +44,7 @@ export const VerifyCode: React.FunctionComponent<{
         })}
       >
         <fieldset>
-          <h1 className="mb-1 font-bold text-2xl">{t("verifyYourEmail")}</h1>
+          <h1 className="mb-1 text-2xl font-bold">{t("verifyYourEmail")}</h1>
           <div className="mb-4 text-gray-500">
             {t("stepSummary", {
               current: 2,
diff --git a/apps/web/src/components/auth/auth-layout.tsx b/apps/web/src/components/auth/auth-layout.tsx
index 17c9d44e8b6..6922ab45edd 100644
--- a/apps/web/src/components/auth/auth-layout.tsx
+++ b/apps/web/src/components/auth/auth-layout.tsx
@@ -15,7 +15,7 @@ export const AuthCard = ({ children }: { children?: React.ReactNode }) => {
 
 export const AuthFooter = ({ children }: { children?: React.ReactNode }) => {
   return (
-    <div className="flex flex-col gap-2 text-gray-500 text-sm mt-4">
+    <div className="mt-4 flex flex-col gap-2 text-sm text-gray-500">
       {children}
     </div>
   );
diff --git a/apps/web/src/components/card.tsx b/apps/web/src/components/card.tsx
index f4c95d5e3cb..54fa930572b 100644
--- a/apps/web/src/components/card.tsx
+++ b/apps/web/src/components/card.tsx
@@ -11,7 +11,7 @@ export const Card = (
       className={cn(
         "max-w-full overflow-hidden bg-white shadow-sm",
         props.fullWidthOnMobile
-          ? "sm:rounded-md sm:border-y sm:border-x"
+          ? "sm:rounded-md sm:border-x sm:border-y"
           : "rounded-md border shadow-sm",
         props.className,
       )}
diff --git a/apps/web/src/components/event-card.tsx b/apps/web/src/components/event-card.tsx
index 7bc8a38700d..724adcd046a 100644
--- a/apps/web/src/components/event-card.tsx
+++ b/apps/web/src/components/event-card.tsx
@@ -41,10 +41,10 @@ export const EventCard = () => {
   return (
     <Card className="overflow-visible" fullWidthOnMobile={false}>
       <div
-        className="h-2 -mx-px rounded-t-md -mt-px"
+        className="-mx-px -mt-px h-2 rounded-t-md"
         style={{ background: generateGradient(poll.id) }}
       />
-      <div className="bg-pattern p-4 sm:flex grid gap-4 sm:justify-between sm:px-6">
+      <div className="bg-pattern grid gap-4 p-4 sm:flex sm:justify-between sm:px-6">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-4 sm:gap-6">
             {poll.event ? (
@@ -56,7 +56,7 @@ export const EventCard = () => {
             ) : null}
             <div>
               <h1
-                className="text-xl font-bold tracking-tight mb-1"
+                className="mb-1 text-xl font-bold tracking-tight"
                 data-testid="poll-title"
               >
                 {preventWidows(poll.title)}
@@ -105,7 +105,7 @@ export const EventCard = () => {
       <div className="space-y-4 p-4 sm:px-6">
         {poll.description ? (
           <div className="flex gap-4">
-            <TextIcon className="h-4 w-4 text-muted-foreground shrink-0 translate-y-1" />
+            <TextIcon className="text-muted-foreground h-4 w-4 shrink-0 translate-y-1" />
             <div className="whitespace-pre-line">
               <TruncatedLinkify>{poll.description}</TruncatedLinkify>
             </div>
@@ -113,12 +113,12 @@ export const EventCard = () => {
         ) : null}
         {poll.location ? (
           <div className="flex gap-4">
-            <MapPinIcon className="h-4 w-4 translate-y-1 text-muted-foreground" />
+            <MapPinIcon className="text-muted-foreground h-4 w-4 translate-y-1" />
             <TruncatedLinkify>{poll.location}</TruncatedLinkify>
           </div>
         ) : null}
         <div className="flex gap-4">
-          <MousePointerClickIcon className="h-4 w-4 shrink-0 text-muted-foreground translate-y-0.5" />
+          <MousePointerClickIcon className="text-muted-foreground h-4 w-4 shrink-0 translate-y-0.5" />
           <div>
             <div className="flex gap-2.5">
               <span className="inline-flex items-center space-x-1">
diff --git a/apps/web/src/components/invite-dialog.tsx b/apps/web/src/components/invite-dialog.tsx
index 712160ecb2d..2ffb703d331 100644
--- a/apps/web/src/components/invite-dialog.tsx
+++ b/apps/web/src/components/invite-dialog.tsx
@@ -29,7 +29,7 @@ export function CopyInviteLinkButton() {
 
   return (
     <Button
-      className="grow min-w-0"
+      className="min-w-0 grow"
       onClick={() => {
         copyToClipboard(poll.inviteLink);
         setDidCopy(true);
@@ -41,7 +41,7 @@ export function CopyInviteLinkButton() {
       {didCopy ? (
         <Trans i18nKey="copied" />
       ) : (
-        <span className="truncate min-w-0">{`${window.location.hostname}/invite/${poll.id}`}</span>
+        <span className="min-w-0 truncate">{`${window.location.hostname}/invite/${poll.id}`}</span>
       )}
     </Button>
   );
diff --git a/apps/web/src/components/layouts/poll-layout.tsx b/apps/web/src/components/layouts/poll-layout.tsx
index 850dde21ae3..6f1336eb0ba 100644
--- a/apps/web/src/components/layouts/poll-layout.tsx
+++ b/apps/web/src/components/layouts/poll-layout.tsx
@@ -167,9 +167,9 @@ const Layout = ({ children }: React.PropsWithChildren) => {
 
   return (
     <PageContainer>
-      <PageHeader className="flex md:flex-row flex-col md:items-center gap-x-4 gap-y-2.5">
-        <div className="flex min-w-0 md:basis-2/3 items-center gap-x-4">
-          <div className="md:basis-1/2 flex gap-x-4">
+      <PageHeader className="flex flex-col gap-x-4 gap-y-2.5 md:flex-row md:items-center">
+        <div className="flex min-w-0 items-center gap-x-4 md:basis-2/3">
+          <div className="flex gap-x-4 md:basis-1/2">
             {pathname === pollLink ? (
               <Button asChild>
                 <Link href="/polls">
diff --git a/apps/web/src/components/page-dialog.tsx b/apps/web/src/components/page-dialog.tsx
index 91bd8370c03..ae9af799bda 100644
--- a/apps/web/src/components/page-dialog.tsx
+++ b/apps/web/src/components/page-dialog.tsx
@@ -37,7 +37,7 @@ export const PageDialogTitle = (props: React.PropsWithChildren) => {
 
 export const PageDialogDescription = (props: React.PropsWithChildren) => {
   return (
-    <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
+    <p className="text-muted-foreground max-w-xl text-sm leading-relaxed">
       {props.children}
     </p>
   );
diff --git a/apps/web/src/components/pay-wall.tsx b/apps/web/src/components/pay-wall.tsx
index 444d4dc94ba..a97e54ff857 100644
--- a/apps/web/src/components/pay-wall.tsx
+++ b/apps/web/src/components/pay-wall.tsx
@@ -45,7 +45,7 @@ const Teaser = () => {
 
       <div className="space-y-6">
         <div className="space-y-2 text-center">
-          <h2 className="text-center font-bold text-xl">
+          <h2 className="text-center text-xl font-bold">
             <Trans defaults="Pro Feature" i18nKey="proFeature" />
           </h2>
           <p className="text-muted-foreground mx-auto max-w-xs text-center text-sm leading-relaxed">
diff --git a/apps/web/src/components/poll-status.tsx b/apps/web/src/components/poll-status.tsx
index 8ea1dd74408..a11779163e6 100644
--- a/apps/web/src/components/poll-status.tsx
+++ b/apps/web/src/components/poll-status.tsx
@@ -16,7 +16,7 @@ const LabelWithIcon = ({
 }) => {
   return (
     <span className={cn("inline-flex items-center gap-1.5", className)}>
-      <Icon className="h-4 w-4 -ml-0.5" />
+      <Icon className="-ml-0.5 h-4 w-4" />
       <span className="font-medium">{children}</span>
     </span>
   );
@@ -55,11 +55,11 @@ export const PollStatusBadge = ({ status }: { status: PollStatus }) => {
   return (
     <PollStatusLabel
       className={cn(
-        "rounded-md font-medium whitespace-nowrap border py-1 px-2 text-xs",
+        "whitespace-nowrap rounded-md border px-2 py-1 text-xs font-medium",
         {
           "border-pink-200 bg-pink-50 text-pink-600": status === "live",
-          "bg-gray-100 border-gray-200 text-gray-500": status === "paused",
-          "text-indigo-600 bg-indigo-50 border-indigo-200":
+          "border-gray-200 bg-gray-100 text-gray-500": status === "paused",
+          "border-indigo-200 bg-indigo-50 text-indigo-600":
             status === "finalized",
         },
       )}
diff --git a/apps/web/src/components/poll/poll-subheader.tsx b/apps/web/src/components/poll/poll-subheader.tsx
index c51557cc018..f499eec703d 100644
--- a/apps/web/src/components/poll/poll-subheader.tsx
+++ b/apps/web/src/components/poll/poll-subheader.tsx
@@ -8,7 +8,7 @@ const PollSubheader: React.FunctionComponent = () => {
   const { poll } = usePoll();
   const { t } = useTranslation();
   return (
-    <div className="text-gray-500 text-sm">
+    <div className="text-sm text-gray-500">
       <div className="flex gap-1.5">
         <div>
           <Trans
diff --git a/apps/web/src/components/settings/settings.tsx b/apps/web/src/components/settings/settings.tsx
index da8b4d66db0..ba160c53e38 100644
--- a/apps/web/src/components/settings/settings.tsx
+++ b/apps/web/src/components/settings/settings.tsx
@@ -8,7 +8,7 @@ export const Settings = ({ children }: React.PropsWithChildren) => {
 
 export const SettingsHeader = ({ children }: React.PropsWithChildren) => {
   return (
-    <div className="mb-4 font-semibold text-lg md:mb-8">
+    <div className="mb-4 text-lg font-semibold md:mb-8">
       <h2>{children}</h2>
     </div>
   );
@@ -24,7 +24,7 @@ export const SettingsSection = (props: {
   children: React.ReactNode;
 }) => {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-10 gap-3 md:gap-8">
+    <div className="grid grid-cols-1 gap-3 md:gap-8 lg:grid-cols-10">
       <div className="col-span-3">
         <h2 className="mb-1 text-base font-semibold">{props.title}</h2>
         <p className="text-muted-foreground text-sm">{props.description}</p>
diff --git a/apps/web/src/components/table.tsx b/apps/web/src/components/table.tsx
index 5051cd29cc3..c86ab3fcf5b 100644
--- a/apps/web/src/components/table.tsx
+++ b/apps/web/src/components/table.tsx
@@ -49,7 +49,7 @@ export const Table = <
       <div
         className={clsx(
           props.className,
-          "max-w-full  overflow-x-auto scrollbar-thin",
+          "scrollbar-thin  max-w-full overflow-x-auto",
         )}
       >
         <table
@@ -100,7 +100,7 @@ export const Table = <
                     }}
                     key={cell.id}
                     className={clsx(
-                      "overflow-hidden align-middle border-gray-100 pr-8 py-4",
+                      "overflow-hidden border-gray-100 py-4 pr-8 align-middle",
                       {
                         "border-b": table.getRowModel().rows.length !== i + 1,
                         "pt-0": !props.enableTableHeader && i === 0,
@@ -146,7 +146,7 @@ export const Table = <
             })}
           />
         </Button>
-        <span className="text-sm text-muted-foreground">
+        <span className="text-muted-foreground text-sm">
           <Trans
             i18nKey="pageXOfY"
             defaults="Page {currentPage} of {pageCount}"
diff --git a/apps/web/src/components/text-input.tsx b/apps/web/src/components/text-input.tsx
index 5680a5980b8..c1f6bbf2701 100644
--- a/apps/web/src/components/text-input.tsx
+++ b/apps/web/src/components/text-input.tsx
@@ -20,7 +20,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         ref={ref}
         type="text"
         className={clsx(
-          "appearance-none text-sm rounded border text-gray-800 placeholder:text-gray-500",
+          "appearance-none rounded border text-sm text-gray-800 placeholder:text-gray-500",
           className,
           {
             "px-2.5 py-2": size === "md",
diff --git a/apps/web/src/components/user-dropdown.tsx b/apps/web/src/components/user-dropdown.tsx
index d5b33d5d9dc..f7b3a6d3e5d 100644
--- a/apps/web/src/components/user-dropdown.tsx
+++ b/apps/web/src/components/user-dropdown.tsx
@@ -46,10 +46,10 @@ export const UserDropdown = ({ className }: { className?: string }) => {
       >
         <Button variant="ghost" className="flex justify-between">
           <span className="flex items-center gap-x-2.5">
-            <CurrentUserAvatar size="sm" className="shrink-0 -ml-1 " />
+            <CurrentUserAvatar size="sm" className="-ml-1 shrink-0 " />
             <span className="truncate">{user.name}</span>
           </span>
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          <ChevronDown className="text-muted-foreground h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -67,7 +67,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild={true}>
           <Link href="/polls" className="flex items-center gap-x-2 sm:hidden">
-            <ListIcon className="h-4 w-4 text-muted-foreground" />
+            <ListIcon className="text-muted-foreground h-4 w-4" />
             <Trans i18nKey="polls" defaults="Polls" />
           </Link>
         </DropdownMenuItem>
@@ -77,7 +77,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="/settings/profile"
               className="flex items-center gap-x-2"
             >
-              <UserIcon className="h-4 w-4 text-muted-foreground" />
+              <UserIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="profile" defaults="Profile" />
             </Link>
           </DropdownMenuItem>
@@ -87,7 +87,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
             href="/settings/preferences"
             className="flex items-center gap-x-2"
           >
-            <Settings2Icon className="h-4 w-4 text-muted-foreground" />
+            <Settings2Icon className="text-muted-foreground h-4 w-4" />
             <Trans i18nKey="preferences" defaults="Preferences" />
           </Link>
         </DropdownMenuItem>
@@ -97,7 +97,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="/settings/billing"
               className="flex items-center gap-x-2"
             >
-              <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
+              <CreditCardIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="Billing" defaults="Billing" />
             </Link>
           </DropdownMenuItem>
@@ -109,7 +109,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
             href="https://support.rallly.co"
             className="flex items-center gap-x-2"
           >
-            <LifeBuoyIcon className="h-4 w-4 text-muted-foreground" />
+            <LifeBuoyIcon className="text-muted-foreground h-4 w-4" />
             <Trans i18nKey="support" defaults="Support" />
           </Link>
         </DropdownMenuItem>
@@ -120,7 +120,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="https://support.rallly.co/self-hosting/pricing"
               className="flex items-center gap-x-2"
             >
-              <GemIcon className="h-4 w-4 text-muted-foreground" />
+              <GemIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="pricing" defaults="Pricing" />
             </Link>
           </DropdownMenuItem>
@@ -132,7 +132,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
               href="https://feedback.rallly.co"
               className="flex items-center gap-x-2"
             >
-              <MegaphoneIcon className="h-4 w-4 text-muted-foreground" />
+              <MegaphoneIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="feedback" defaults="Feedback" />
             </Link>
           </DropdownMenuItem>
@@ -141,24 +141,24 @@ export const UserDropdown = ({ className }: { className?: string }) => {
         <IfGuest>
           <DropdownMenuItem asChild={true}>
             <LoginLink className="flex items-center gap-x-2">
-              <LogInIcon className="h-4 w-4 text-muted-foreground" />
+              <LogInIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="login" defaults="login" />
             </LoginLink>
           </DropdownMenuItem>
           <DropdownMenuItem asChild={true}>
             <RegisterLink className="flex items-center gap-x-2">
-              <UserPlusIcon className="h-4 w-4 text-muted-foreground" />
+              <UserPlusIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="createAnAccount" defaults="Register" />
             </RegisterLink>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem
             asChild
-            className="flex text-destructive items-center gap-x-2"
+            className="text-destructive flex items-center gap-x-2"
           >
             {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
             <a href="/logout">
-              <RefreshCcwIcon className="h-4 w-4 text-muted-foreground" />
+              <RefreshCcwIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="forgetMe" />
             </a>
           </DropdownMenuItem>
@@ -167,7 +167,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
           <DropdownMenuItem asChild className="flex items-center gap-x-2">
             {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
             <a href="/logout">
-              <LogOutIcon className="h-4 w-4 text-muted-foreground" />
+              <LogOutIcon className="text-muted-foreground h-4 w-4" />
               <Trans i18nKey="logout" />
             </a>
           </DropdownMenuItem>
diff --git a/apps/web/src/components/user.tsx b/apps/web/src/components/user.tsx
index 1fbd4c770fa..ea0a6140c3e 100644
--- a/apps/web/src/components/user.tsx
+++ b/apps/web/src/components/user.tsx
@@ -44,8 +44,8 @@ export const UserAvatar = ({
         !name
           ? "bg-gray-200"
           : colors?.requiresDarkText
-          ? "text-gray-800"
-          : "text-white",
+            ? "text-gray-800"
+            : "text-white",
         className,
       )}
       style={{
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 02ac3cb9760..4f541fdeefa 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -8,7 +8,9 @@
   }
   body {
     @apply text-foreground bg-gray-100;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
   html {
     @apply h-full font-sans text-base text-gray-700;
@@ -26,7 +28,7 @@
   input,
   select,
   textarea {
-    @apply rounded outline-none focus-visible:ring-1 focus:ring-gray-300;
+    @apply rounded outline-none focus:ring-gray-300 focus-visible:ring-1;
   }
 
   #floating-ui-root {
@@ -36,7 +38,7 @@
 
 @layer components {
   .text-link {
-    @apply hover:text-gray-800 rounded-md outline-none underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
+    @apply rounded-md underline outline-none hover:text-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
   }
   .formField {
     @apply mb-4;
diff --git a/apps/web/src/utils/auth.ts b/apps/web/src/utils/auth.ts
index 54ba095d29a..bbe75383882 100644
--- a/apps/web/src/utils/auth.ts
+++ b/apps/web/src/utils/auth.ts
@@ -222,7 +222,7 @@ const getAuthOptions = (...args: GetServerSessionParams) =>
         return session;
       },
     },
-  } satisfies NextAuthOptions);
+  }) satisfies NextAuthOptions;
 
 type GetServerSessionParams =
   | [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]]
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index e6e8bccd14d..29aee703b16 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -4,16 +4,16 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "~/*": ["public/*"]
+      "~/*": ["public/*"],
     },
-    "strictNullChecks": true
+    "strictNullChecks": true,
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
     "**/*.js",
     ".next/types/**/*.ts",
-    "src/app/[locale]/p/[participantUrlId]/page.tsx"
+    "src/app/[locale]/p/[participantUrlId]/page.tsx",
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/package.json b/package.json
index 56bf5f7c8ed..f472c904748 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "lint": "turbo lint",
     "i18n:scan": "turbo i18n:scan",
     "lint:tsc": "turbo lint:tsc",
+    "prettier": "prettier --write .",
     "release": "./scripts/create-release.sh"
   },
   "prisma": {
@@ -44,7 +45,8 @@
   "devDependencies": {
     "dotenv-cli": "^7.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "turbo": "^1.10.7"
   },
   "engines": {
diff --git a/packages/backend/tsconfig.json b/packages/backend/tsconfig.json
index 15de53b31e8..5264aff19b5 100644
--- a/packages/backend/tsconfig.json
+++ b/packages/backend/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/react.json",
   "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/packages/database/tsconfig.json b/packages/database/tsconfig.json
index 42e5369c0ef..18a4f135121 100644
--- a/packages/database/tsconfig.json
+++ b/packages/database/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/next.json",
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/packages/emails/tsconfig.json b/packages/emails/tsconfig.json
index d2fbc2731b5..7f8833f6b33 100644
--- a/packages/emails/tsconfig.json
+++ b/packages/emails/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/react.json",
   "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
-  "exclude": ["node_modules", ".react-email"]
+  "exclude": ["node_modules", ".react-email"],
 }
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index 42e5369c0ef..18a4f135121 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/next.json",
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/packages/languages/tsconfig.json b/packages/languages/tsconfig.json
index 6eede5d1091..551af516638 100644
--- a/packages/languages/tsconfig.json
+++ b/packages/languages/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "@rallly/tsconfig/base.json",
   "include": ["**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/packages/ui/alert.tsx b/packages/ui/alert.tsx
index 981b0578ef8..77bffd5d65e 100644
--- a/packages/ui/alert.tsx
+++ b/packages/ui/alert.tsx
@@ -33,7 +33,7 @@ const Alert = React.forwardRef<
     {...props}
   >
     {Icon ? (
-      <Icon className="mb-2 -mt-1 h-6 w-6 text-muted-foreground" />
+      <Icon className="text-muted-foreground -mt-1 mb-2 h-6 w-6" />
     ) : null}
     <div>{children}</div>
   </div>
@@ -63,7 +63,7 @@ const AlertDescription = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-sm text-muted-foreground [&_p]:leading-relaxed",
+      "text-muted-foreground text-sm [&_p]:leading-relaxed",
       className,
     )}
     {...props}
diff --git a/packages/ui/table.tsx b/packages/ui/table.tsx
index 92d96422962..6ac0761c1fc 100644
--- a/packages/ui/table.tsx
+++ b/packages/ui/table.tsx
@@ -9,7 +9,7 @@ const Table = React.forwardRef<
   <div className="w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("caption-bottom w-full text-sm", className)}
+      className={cn("w-full caption-bottom text-sm", className)}
       {...props}
     />
   </div>
diff --git a/packages/ui/toast.tsx b/packages/ui/toast.tsx
index 9993959e85c..0624a988913 100644
--- a/packages/ui/toast.tsx
+++ b/packages/ui/toast.tsx
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""
@@ -104,7 +104,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 28ad7958cb2..f6eec80a088 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -3,9 +3,9 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": ["./*"],
+    },
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
index e3a00416e98..3584963a30b 100644
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "@rallly/tsconfig/react.json",
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx"],
 }
diff --git a/yarn.lock b/yarn.lock
index 5959f475dd6..7bb52318a90 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9321,10 +9321,15 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.8.4:
-  version "2.8.4"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz"
-  integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
+prettier-plugin-tailwindcss@^0.5.11:
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz#1aa9308c3285b3cb7942aaeaec8d0e0775ac54d0"
+  integrity sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==
+
+prettier@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.4.tgz#4723cadeac2ce7c9227de758e5ff9b14e075f283"
+  integrity sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==
 
 pretty-bytes@^5.6.0:
   version "5.6.0"