From 822ae9eec711a92b61c8ea5bd7b157aee7d601f7 Mon Sep 17 00:00:00 2001
From: Ryan Cohen <ryan@sct.dev>
Date: Tue, 25 Jan 2022 21:09:41 +0900
Subject: [PATCH] style: add new tailwind prettier plugin (#2465)

---
 .vscode/extensions.json                       |  5 +-
 package.json                                  |  3 +-
 src/components/Common/Alert/index.tsx         | 10 +--
 .../Common/ButtonWithDropdown/index.tsx       | 10 +--
 src/components/Common/ConfirmButton/index.tsx |  4 +-
 src/components/Common/Header/index.tsx        |  6 +-
 src/components/Common/ImageFader/index.tsx    |  4 +-
 src/components/Common/List/index.tsx          |  4 +-
 src/components/Common/ListView/index.tsx      |  2 +-
 .../Common/LoadingSpinner/index.tsx           |  8 +-
 src/components/Common/Modal/index.tsx         | 12 +--
 src/components/Common/SettingsTabs/index.tsx  |  4 +-
 src/components/Common/SlideOver/index.tsx     | 10 +--
 src/components/Common/Table/index.tsx         |  2 +-
 src/components/CompanyCard/index.tsx          | 10 +--
 .../Discover/DiscoverNetwork/index.tsx        |  2 +-
 .../Discover/DiscoverStudio/index.tsx         |  2 +-
 src/components/DownloadBlock/index.tsx        |  8 +-
 src/components/ExternalLinkBlock/index.tsx    | 14 +--
 src/components/GenreCard/index.tsx            | 16 ++--
 src/components/IssueBlock/index.tsx           | 14 +--
 .../IssueDetails/IssueComment/index.tsx       | 24 ++---
 .../IssueDetails/IssueDescription/index.tsx   | 14 +--
 src/components/IssueDetails/index.tsx         | 14 +--
 src/components/IssueList/IssueItem/index.tsx  | 34 +++----
 src/components/IssueList/index.tsx            | 26 +++---
 .../IssueModal/CreateIssueModal/index.tsx     | 22 ++---
 .../Layout/LanguagePicker/index.tsx           |  8 +-
 src/components/Layout/Notifications/index.tsx |  4 +-
 src/components/Layout/SearchInput/index.tsx   | 12 +--
 src/components/Layout/Sidebar/index.tsx       | 40 ++++-----
 src/components/Layout/UserDropdown/index.tsx  | 14 +--
 src/components/Layout/VersionStatus/index.tsx | 14 +--
 src/components/Layout/index.tsx               | 22 ++---
 src/components/LoadingBar/index.tsx           |  4 +-
 src/components/Login/LocalLogin.tsx           |  8 +-
 src/components/Login/index.tsx                | 20 ++---
 src/components/ManageSlideOver/index.tsx      | 26 +++---
 .../MediaSlider/ShowMoreCard/index.tsx        | 12 +--
 src/components/MovieDetails/index.tsx         | 34 +++----
 .../NotificationType/index.tsx                |  6 +-
 src/components/PermissionOption/index.tsx     |  6 +-
 src/components/PersonCard/index.tsx           | 16 ++--
 src/components/PersonDetails/index.tsx        | 12 +--
 src/components/QuotaSelector/index.tsx        |  4 +-
 src/components/RegionSelector/index.tsx       | 30 +++----
 src/components/RequestBlock/index.tsx         | 22 ++---
 src/components/RequestCard/index.tsx          | 40 ++++-----
 .../RequestList/RequestItem/index.tsx         | 48 +++++-----
 src/components/RequestList/index.tsx          | 26 +++---
 .../RequestModal/AdvancedRequester/index.tsx  | 52 +++++------
 .../RequestModal/CollectionRequestModal.tsx   | 26 +++---
 .../RequestModal/QuotaDisplay/index.tsx       | 10 +--
 .../RequestModal/SearchByNameModal/index.tsx  | 12 +--
 .../RequestModal/TvRequestModal.tsx           | 30 +++----
 .../ResetPassword/RequestResetLink.tsx        | 22 ++---
 src/components/ResetPassword/index.tsx        | 28 +++---
 src/components/Settings/LibraryItem.tsx       | 26 +++---
 .../Notifications/NotificationsDiscord.tsx    |  4 +-
 .../Notifications/NotificationsEmail.tsx      |  4 +-
 .../NotificationsGotify/index.tsx             |  4 +-
 .../NotificationsLunaSea/index.tsx            |  4 +-
 .../NotificationsPushbullet/index.tsx         |  4 +-
 .../NotificationsPushover/index.tsx           |  4 +-
 .../NotificationsSlack/index.tsx              |  4 +-
 .../Notifications/NotificationsTelegram.tsx   |  4 +-
 .../NotificationsWebPush/index.tsx            |  4 +-
 .../NotificationsWebhook/index.tsx            |  4 +-
 .../Settings/SettingsAbout/Releases/index.tsx | 10 +--
 .../Settings/SettingsAbout/index.tsx          | 12 +--
 .../Settings/SettingsJobsCache/index.tsx      |  6 +-
 .../Settings/SettingsLogs/index.tsx           | 34 +++----
 src/components/Settings/SettingsMain.tsx      |  2 +-
 .../Settings/SettingsNotifications.tsx        | 20 ++---
 src/components/Settings/SettingsPlex.tsx      | 22 ++---
 src/components/Settings/SettingsServices.tsx  | 42 ++++-----
 .../Settings/SettingsUsers/index.tsx          |  2 +-
 src/components/Setup/LoginWithPlex.tsx        |  4 +-
 src/components/Setup/SetupSteps.tsx           | 16 ++--
 src/components/Setup/index.tsx                | 14 +--
 src/components/Slider/index.tsx               |  8 +-
 src/components/StatusBadge/index.tsx          |  6 +-
 src/components/TitleCard/index.tsx            | 40 ++++-----
 src/components/Toast/index.tsx                | 20 ++---
 src/components/ToastContainer/index.tsx       |  2 +-
 src/components/TvDetails/index.tsx            | 20 ++---
 src/components/UserList/PlexImportModal.tsx   | 24 ++---
 src/components/UserList/index.tsx             | 26 +++---
 .../UserProfile/ProfileHeader/index.tsx       | 12 +--
 .../UserGeneralSettings/index.tsx             | 10 +--
 .../UserNotificationsDiscord.tsx              |  2 +-
 .../UserNotificationsEmail.tsx                |  2 +-
 .../UserNotificationsPushbullet.tsx           |  2 +-
 .../UserNotificationsPushover.tsx             |  2 +-
 .../UserNotificationsTelegram.tsx             |  2 +-
 .../UserNotificationsWebPush.tsx              |  2 +-
 .../UserNotificationSettings/index.tsx        | 12 +--
 .../UserSettings/UserPasswordChange/index.tsx |  4 +-
 .../UserSettings/UserPermissions/index.tsx    |  2 +-
 src/components/UserProfile/index.tsx          | 28 +++---
 src/pages/404.tsx                             |  4 +-
 src/pages/_error.tsx                          |  4 +-
 src/styles/globals.css                        | 90 +++++++++----------
 yarn.lock                                     |  5 ++
 104 files changed, 737 insertions(+), 734 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index fb896f97e..80a16c644 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -19,9 +19,6 @@
 
     "stylelint.vscode-stylelint",
 
-    "bradlc.vscode-tailwindcss",
-
-    // https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
-    "heybourn.headwind"
+    "bradlc.vscode-tailwindcss"
   ]
 }
diff --git a/package.json b/package.json
index 2c03bfd65..6549a770a 100644
--- a/package.json
+++ b/package.json
@@ -131,6 +131,7 @@
     "nodemon": "^2.0.15",
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.3",
     "semantic-release": "^19.0.2",
     "semantic-release-docker-buildx": "^1.0.1",
     "tailwindcss": "^3.0.15",
@@ -150,7 +151,7 @@
       "prettier --write",
       "eslint"
     ],
-    "**/*.{json,md}": [
+    "**/*.{json,md,css}": [
       "prettier --write"
     ]
   },
diff --git a/src/components/Common/Alert/index.tsx b/src/components/Common/Alert/index.tsx
index cddcf992d..e9789c706 100644
--- a/src/components/Common/Alert/index.tsx
+++ b/src/components/Common/Alert/index.tsx
@@ -15,7 +15,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
     bgColor: 'bg-yellow-600',
     titleColor: 'text-yellow-100',
     textColor: 'text-yellow-300',
-    svg: <ExclamationIcon className="w-5 h-5" />,
+    svg: <ExclamationIcon className="h-5 w-5" />,
   };
 
   switch (type) {
@@ -24,7 +24,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
         bgColor: 'bg-indigo-600',
         titleColor: 'text-indigo-100',
         textColor: 'text-indigo-300',
-        svg: <InformationCircleIcon className="w-5 h-5" />,
+        svg: <InformationCircleIcon className="h-5 w-5" />,
       };
       break;
     case 'error':
@@ -32,13 +32,13 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
         bgColor: 'bg-red-600',
         titleColor: 'text-red-100',
         textColor: 'text-red-300',
-        svg: <XCircleIcon className="w-5 h-5" />,
+        svg: <XCircleIcon className="h-5 w-5" />,
       };
       break;
   }
 
   return (
-    <div className={`rounded-md p-4 mb-4 ${design.bgColor}`}>
+    <div className={`mb-4 rounded-md p-4 ${design.bgColor}`}>
       <div className="flex">
         <div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
         <div className="ml-3">
@@ -48,7 +48,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
             </div>
           )}
           {children && (
-            <div className={`mt-2 first:mt-0 text-sm ${design.textColor}`}>
+            <div className={`mt-2 text-sm first:mt-0 ${design.textColor}`}>
               {children}
             </div>
           )}
diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
index 944c9d8bb..6edb4a11f 100644
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -32,7 +32,7 @@ const DropdownItem: React.FC<DropdownItemProps> = ({
   }
   return (
     <a
-      className={`flex items-center px-4 py-2 text-sm leading-5 cursor-pointer focus:outline-none ${styleClass}`}
+      className={`flex cursor-pointer items-center px-4 py-2 text-sm leading-5 focus:outline-none ${styleClass}`}
       {...props}
     >
       {children}
@@ -84,7 +84,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
     <span className="relative inline-flex h-full rounded-md shadow-sm">
       <button
         type="button"
-        className={`relative inline-flex h-full items-center px-4 py-2 text-sm leading-5 font-medium z-10 hover:z-20 focus:z-20 focus:outline-none transition ease-in-out duration-150 ${
+        className={`relative z-10 inline-flex h-full items-center px-4 py-2 text-sm font-medium leading-5 transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none ${
           styleClasses.mainButtonClasses
         } ${children ? 'rounded-l-md' : 'rounded-md'} ${className}`}
         ref={buttonRef}
@@ -93,10 +93,10 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
         {text}
       </button>
       {children && (
-        <span className="relative block -ml-px">
+        <span className="relative -ml-px block">
           <button
             type="button"
-            className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md z-10 hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
+            className={`relative z-10 inline-flex h-full items-center rounded-r-md px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
             aria-label="Expand"
             onClick={() => setIsOpen((state) => !state)}
           >
@@ -111,7 +111,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <div className="absolute right-0 z-40 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg">
+            <div className="absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md shadow-lg">
               <div
                 className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`}
               >
diff --git a/src/components/Common/ConfirmButton/index.tsx b/src/components/Common/ConfirmButton/index.tsx
index 1c48ead94..df3c6572a 100644
--- a/src/components/Common/ConfirmButton/index.tsx
+++ b/src/components/Common/ConfirmButton/index.tsx
@@ -34,7 +34,7 @@ const ConfirmButton: React.FC<ConfirmButtonProps> = ({
       &nbsp;
       <div
         ref={ref}
-        className={`absolute flex items-center justify-center inset-0 w-full h-full duration-300 transition transform-gpu ${
+        className={`absolute inset-0 flex h-full w-full transform-gpu items-center justify-center transition duration-300 ${
           isClicked
             ? '-translate-y-full opacity-0'
             : 'translate-y-0 opacity-100'
@@ -44,7 +44,7 @@ const ConfirmButton: React.FC<ConfirmButtonProps> = ({
       </div>
       <div
         ref={ref}
-        className={`absolute flex items-center justify-center inset-0 w-full h-full duration-300 transition transform-gpu ${
+        className={`absolute inset-0 flex h-full w-full transform-gpu items-center justify-center transition duration-300 ${
           isClicked ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
         }`}
       >
diff --git a/src/components/Common/Header/index.tsx b/src/components/Common/Header/index.tsx
index 77dbd1590..b7c88ddd9 100644
--- a/src/components/Common/Header/index.tsx
+++ b/src/components/Common/Header/index.tsx
@@ -12,9 +12,9 @@ const Header: React.FC<HeaderProps> = ({
 }) => {
   return (
     <div className="mt-8 md:flex md:items-center md:justify-between">
-      <div className={`flex-1 min-w-0 mx-${extraMargin}`}>
-        <h2 className="mb-4 text-2xl font-bold leading-7 text-gray-100 truncate sm:text-4xl sm:leading-9 sm:overflow-visible md:mb-0">
-          <span className="text-transparent bg-clip-text bg-gradient-to-br from-indigo-400 to-purple-400">
+      <div className={`min-w-0 flex-1 mx-${extraMargin}`}>
+        <h2 className="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0">
+          <span className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-transparent">
             {children}
           </span>
         </h2>
diff --git a/src/components/Common/ImageFader/index.tsx b/src/components/Common/ImageFader/index.tsx
index be656d89d..5f68376c0 100644
--- a/src/components/Common/ImageFader/index.tsx
+++ b/src/components/Common/ImageFader/index.tsx
@@ -59,13 +59,13 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
       {backgroundImages.map((imageUrl, i) => (
         <div
           key={`banner-image-${i}`}
-          className={`absolute absolute-top-shift inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
+          className={`absolute-top-shift absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
             i === activeIndex ? 'opacity-100' : 'opacity-0'
           }`}
           {...props}
         >
           <CachedImage
-            className="absolute inset-0 w-full h-full"
+            className="absolute inset-0 h-full w-full"
             alt=""
             src={imageUrl}
             layout="fill"
diff --git a/src/components/Common/List/index.tsx b/src/components/Common/List/index.tsx
index 6d447fcb8..a4b917235 100644
--- a/src/components/Common/List/index.tsx
+++ b/src/components/Common/List/index.tsx
@@ -11,7 +11,7 @@ const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
     <div>
       <div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
         <dt className="block text-sm font-bold text-gray-400">{title}</dt>
-        <dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
+        <dd className="flex text-sm text-white sm:col-span-2 sm:mt-0">
           <span className={`flex-grow ${className}`}>{children}</span>
         </dd>
       </div>
@@ -31,7 +31,7 @@ const List: React.FC<ListProps> = ({ title, subTitle, children }) => {
         <h3 className="heading">{title}</h3>
         {subTitle && <p className="description">{subTitle}</p>}
       </div>
-      <div className="border-t border-gray-800 section">
+      <div className="section border-t border-gray-800">
         <dl className="divide-y divide-gray-800">{children}</dl>
       </div>
     </>
diff --git a/src/components/Common/ListView/index.tsx b/src/components/Common/ListView/index.tsx
index 78c08bf76..0c2a0e4ed 100644
--- a/src/components/Common/ListView/index.tsx
+++ b/src/components/Common/ListView/index.tsx
@@ -30,7 +30,7 @@ const ListView: React.FC<ListViewProps> = ({
   return (
     <>
       {isEmpty && (
-        <div className="w-full mt-64 text-2xl text-center text-gray-400">
+        <div className="mt-64 w-full text-center text-2xl text-gray-400">
           {intl.formatMessage(globalMessages.noresults)}
         </div>
       )}
diff --git a/src/components/Common/LoadingSpinner/index.tsx b/src/components/Common/LoadingSpinner/index.tsx
index 022b35466..be65f0094 100644
--- a/src/components/Common/LoadingSpinner/index.tsx
+++ b/src/components/Common/LoadingSpinner/index.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 export const SmallLoadingSpinner: React.FC = () => {
   return (
-    <div className="inset-0 flex items-center justify-center w-full h-full text-gray-200">
+    <div className="inset-0 flex h-full w-full items-center justify-center text-gray-200">
       <svg
-        className="w-10 h-10"
+        className="h-10 w-10"
         viewBox="0 0 38 38"
         xmlns="http://www.w3.org/2000/svg"
         stroke="currentColor"
@@ -31,9 +31,9 @@ export const SmallLoadingSpinner: React.FC = () => {
 
 const LoadingSpinner: React.FC = () => {
   return (
-    <div className="inset-0 flex items-center justify-center h-64 text-gray-200">
+    <div className="inset-0 flex h-64 items-center justify-center text-gray-200">
       <svg
-        className="w-16 h-16"
+        className="h-16 w-16"
         viewBox="0 0 38 38"
         xmlns="http://www.w3.org/2000/svg"
         stroke="currentColor"
diff --git a/src/components/Common/Modal/index.tsx b/src/components/Common/Modal/index.tsx
index 8c39533a8..ac8d9fea9 100644
--- a/src/components/Common/Modal/index.tsx
+++ b/src/components/Common/Modal/index.tsx
@@ -69,7 +69,7 @@ const Modal: React.FC<ModalProps> = ({
   return ReactDOM.createPortal(
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
-      className="fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center w-full h-full bg-gray-800 bg-opacity-70"
+      className="fixed top-0 bottom-0 left-0 right-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
       onKeyDown={(e) => {
         if (e.key === 'Escape') {
           typeof onCancel === 'function' && backgroundClickable
@@ -101,7 +101,7 @@ const Modal: React.FC<ModalProps> = ({
         show={!loading}
       >
         <div
-          className="relative inline-block w-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl ring-1 ring-gray-500 sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
+          className="relative inline-block w-full transform overflow-auto bg-gray-700 px-4 pt-5 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-500 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -111,7 +111,7 @@ const Modal: React.FC<ModalProps> = ({
           }}
         >
           {backdrop && (
-            <div className="absolute top-0 left-0 right-0 z-0 w-full h-64 max-h-full">
+            <div className="absolute top-0 left-0 right-0 z-0 h-64 max-h-full w-full">
               <CachedImage
                 alt=""
                 src={backdrop}
@@ -131,13 +131,13 @@ const Modal: React.FC<ModalProps> = ({
           <div className="relative overflow-x-hidden sm:flex sm:items-center">
             {iconSvg && <div className="modal-icon">{iconSvg}</div>}
             <div
-              className={`mt-3 text-center sm:mt-0 sm:text-left truncate text-white ${
+              className={`mt-3 truncate text-center text-white sm:mt-0 sm:text-left ${
                 iconSvg ? 'sm:ml-4' : 'sm:mb-4'
               }`}
             >
               {title && (
                 <span
-                  className="text-lg font-bold leading-6 truncate"
+                  className="truncate text-lg font-bold leading-6"
                   id="modal-headline"
                 >
                   {title}
@@ -151,7 +151,7 @@ const Modal: React.FC<ModalProps> = ({
             </div>
           )}
           {(onCancel || onOk || onSecondary || onTertiary) && (
-            <div className="relative flex flex-row-reverse justify-center mt-5 sm:mt-4 sm:justify-start">
+            <div className="relative mt-5 flex flex-row-reverse justify-center sm:mt-4 sm:justify-start">
               {typeof onOk === 'function' && (
                 <Button
                   buttonType={okButtonType}
diff --git a/src/components/Common/SettingsTabs/index.tsx b/src/components/Common/SettingsTabs/index.tsx
index 5f450cf7a..751587050 100644
--- a/src/components/Common/SettingsTabs/index.tsx
+++ b/src/components/Common/SettingsTabs/index.tsx
@@ -120,7 +120,7 @@ const SettingsTabs: React.FC<{
       </div>
       {tabType === 'button' ? (
         <div className="hidden sm:block">
-          <nav className="flex flex-wrap -mx-2 -my-1" aria-label="Tabs">
+          <nav className="-mx-2 -my-1 flex flex-wrap" aria-label="Tabs">
             {settingsRoutes.map((route, index) => (
               <SettingsLink
                 tabType={tabType}
@@ -136,7 +136,7 @@ const SettingsTabs: React.FC<{
           </nav>
         </div>
       ) : (
-        <div className="hidden overflow-x-scroll border-b border-gray-600 sm:block hide-scrollbar">
+        <div className="hide-scrollbar hidden overflow-x-scroll border-b border-gray-600 sm:block">
           <nav className="flex">
             {settingsRoutes
               .filter(
diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx
index 2d49e6a96..6fadb7064 100644
--- a/src/components/Common/SlideOver/index.tsx
+++ b/src/components/Common/SlideOver/index.tsx
@@ -44,7 +44,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
     >
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
-        className={`z-50 fixed inset-0 overflow-hidden bg-opacity-70 bg-gray-800`}
+        className={`fixed inset-0 z-50 overflow-hidden bg-gray-800 bg-opacity-70`}
         onClick={() => onClose()}
         onKeyDown={(e) => {
           if (e.key === 'Escape') {
@@ -70,19 +70,19 @@ const SlideOver: React.FC<SlideOverProps> = ({
                 ref={slideoverRef}
                 onClick={(e) => e.stopPropagation()}
               >
-                <div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
-                  <header className="px-4 space-y-1 bg-indigo-600 slideover">
+                <div className="flex h-full flex-col overflow-y-scroll bg-gray-700 shadow-xl">
+                  <header className="slideover space-y-1 bg-indigo-600 px-4">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="text-lg font-bold leading-7 text-white">
                         {title}
                       </h2>
-                      <div className="flex items-center h-7">
+                      <div className="flex h-7 items-center">
                         <button
                           aria-label="Close panel"
                           className="text-indigo-200 transition duration-150 ease-in-out hover:text-white"
                           onClick={() => onClose()}
                         >
-                          <XIcon className="w-6 h-6" />
+                          <XIcon className="h-6 w-6" />
                         </button>
                       </div>
                     </div>
diff --git a/src/components/Common/Table/index.tsx b/src/components/Common/Table/index.tsx
index 65b1549f7..9e0cb0ca5 100644
--- a/src/components/Common/Table/index.tsx
+++ b/src/components/Common/Table/index.tsx
@@ -3,7 +3,7 @@ import { withProperties } from '../../../utils/typeHelpers';
 
 const TBody: React.FC = ({ children }) => {
   return (
-    <tbody className="bg-gray-800 divide-y divide-gray-700">{children}</tbody>
+    <tbody className="divide-y divide-gray-700 bg-gray-800">{children}</tbody>
   );
 };
 
diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx
index 396f6e85e..b6383a77a 100644
--- a/src/components/CompanyCard/index.tsx
+++ b/src/components/CompanyCard/index.tsx
@@ -13,10 +13,10 @@ const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
   return (
     <Link href={url}>
       <a
-        className={`relative flex items-center justify-center h-32 w-56 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
+        className={`relative flex h-32 w-56 transform-gpu cursor-pointer items-center justify-center p-8 shadow ring-1 transition duration-300 ease-in-out sm:h-36 sm:w-72 ${
           isHovered
-            ? 'bg-gray-700 scale-105 ring-gray-500'
-            : 'bg-gray-800 scale-100 ring-gray-700'
+            ? 'scale-105 bg-gray-700 ring-gray-500'
+            : 'scale-100 bg-gray-800 ring-gray-700'
         } rounded-xl`}
         onMouseEnter={() => {
           setHovered(true);
@@ -33,10 +33,10 @@ const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
         <img
           src={image}
           alt={name}
-          className="relative z-40 max-w-full max-h-full"
+          className="relative z-40 max-h-full max-w-full"
         />
         <div
-          className={`absolute bottom-0 left-0 right-0 h-12 rounded-b-xl bg-gradient-to-t z-0 ${
+          className={`absolute bottom-0 left-0 right-0 z-0 h-12 rounded-b-xl bg-gradient-to-t ${
             isHovered ? 'from-gray-800' : 'from-gray-900'
           }`}
         />
diff --git a/src/components/Discover/DiscoverNetwork/index.tsx b/src/components/Discover/DiscoverNetwork/index.tsx
index c2e96421b..247c5ece7 100644
--- a/src/components/Discover/DiscoverNetwork/index.tsx
+++ b/src/components/Discover/DiscoverNetwork/index.tsx
@@ -47,7 +47,7 @@ const DiscoverTvNetwork: React.FC = () => {
       <div className="mt-1 mb-5">
         <Header>
           {firstResultData?.network.logoPath ? (
-            <div className="flex justify-center mb-6">
+            <div className="mb-6 flex justify-center">
               <img
                 src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
                 alt={firstResultData.network.name}
diff --git a/src/components/Discover/DiscoverStudio/index.tsx b/src/components/Discover/DiscoverStudio/index.tsx
index bc7e270d3..b1f3b0662 100644
--- a/src/components/Discover/DiscoverStudio/index.tsx
+++ b/src/components/Discover/DiscoverStudio/index.tsx
@@ -47,7 +47,7 @@ const DiscoverMovieStudio: React.FC = () => {
       <div className="mt-1 mb-5">
         <Header>
           {firstResultData?.studio.logoPath ? (
-            <div className="flex justify-center mb-6">
+            <div className="mb-6 flex justify-center">
               <img
                 src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
                 alt={firstResultData.studio.name}
diff --git a/src/components/DownloadBlock/index.tsx b/src/components/DownloadBlock/index.tsx
index 65468f32e..d7c3922c9 100644
--- a/src/components/DownloadBlock/index.tsx
+++ b/src/components/DownloadBlock/index.tsx
@@ -20,12 +20,12 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({
 
   return (
     <div className="p-4">
-      <div className="w-56 mb-2 text-sm truncate sm:w-80 md:w-full">
+      <div className="mb-2 w-56 truncate text-sm sm:w-80 md:w-full">
         {downloadItem.title}
       </div>
-      <div className="relative h-6 min-w-0 mb-2 overflow-hidden bg-gray-700 rounded-full">
+      <div className="relative mb-2 h-6 min-w-0 overflow-hidden rounded-full bg-gray-700">
         <div
-          className="h-8 transition-all duration-200 ease-in-out bg-indigo-600"
+          className="h-8 bg-indigo-600 transition-all duration-200 ease-in-out"
           style={{
             width: `${
               downloadItem.size
@@ -38,7 +38,7 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({
             }%`,
           }}
         />
-        <div className="absolute inset-0 flex items-center justify-center w-full h-6 text-xs">
+        <div className="absolute inset-0 flex h-6 w-full items-center justify-center text-xs">
           <span>
             {downloadItem.size
               ? Math.round(
diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx
index 1b1f06ed2..05f8c3bc0 100644
--- a/src/components/ExternalLinkBlock/index.tsx
+++ b/src/components/ExternalLinkBlock/index.tsx
@@ -28,11 +28,11 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
   const { locale } = useLocale();
 
   return (
-    <div className="flex items-center justify-center w-full space-x-5">
+    <div className="flex w-full items-center justify-center space-x-5">
       {plexUrl && (
         <a
           href={plexUrl}
-          className="w-12 transition duration-300 opacity-50 hover:opacity-100"
+          className="w-12 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -42,7 +42,7 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
       {tmdbId && (
         <a
           href={`https://www.themoviedb.org/${mediaType}/${tmdbId}?language=${locale}`}
-          className="w-8 transition duration-300 opacity-50 hover:opacity-100"
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -52,7 +52,7 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
       {tvdbId && mediaType === MediaType.TV && (
         <a
           href={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
-          className="transition duration-300 opacity-50 w-9 hover:opacity-100"
+          className="w-9 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -62,7 +62,7 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
       {imdbId && (
         <a
           href={`https://www.imdb.com/title/${imdbId}`}
-          className="w-8 transition duration-300 opacity-50 hover:opacity-100"
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -72,7 +72,7 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
       {rtUrl && (
         <a
           href={`${rtUrl}`}
-          className="transition duration-300 opacity-50 w-14 hover:opacity-100"
+          className="w-14 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
@@ -84,7 +84,7 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
           href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
             mediaType === 'movie' ? 'movie' : 'show'
           }`}
-          className="w-8 transition duration-300 opacity-50 hover:opacity-100"
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
         >
diff --git a/src/components/GenreCard/index.tsx b/src/components/GenreCard/index.tsx
index fad201a5c..85d888a33 100644
--- a/src/components/GenreCard/index.tsx
+++ b/src/components/GenreCard/index.tsx
@@ -21,13 +21,13 @@ const GenreCard: React.FC<GenreCardProps> = ({
   return (
     <Link href={url}>
       <a
-        className={`relative flex items-center justify-center h-32 sm:h-36 ${
+        className={`relative flex h-32 items-center justify-center sm:h-36 ${
           canExpand ? 'w-full' : 'w-56 sm:w-72'
-        } p-8 shadow transition ease-in-out duration-300 cursor-pointer transform-gpu ring-1 ${
+        } transform-gpu cursor-pointer p-8 shadow ring-1 transition duration-300 ease-in-out ${
           isHovered
-            ? 'bg-gray-700 scale-105 ring-gray-500 bg-opacity-100'
-            : 'bg-gray-800 scale-100 ring-gray-700 bg-opacity-80'
-        } rounded-xl bg-cover bg-center overflow-hidden`}
+            ? 'scale-105 bg-gray-700 bg-opacity-100 ring-gray-500'
+            : 'scale-100 bg-gray-800 bg-opacity-80 ring-gray-700'
+        } overflow-hidden rounded-xl bg-cover bg-center`}
         onMouseEnter={() => {
           setHovered(true);
         }}
@@ -42,11 +42,11 @@ const GenreCard: React.FC<GenreCardProps> = ({
       >
         <CachedImage src={image} alt="" layout="fill" objectFit="cover" />
         <div
-          className={`absolute z-10 inset-0 w-full h-full transition duration-300 bg-gray-800 ${
+          className={`absolute inset-0 z-10 h-full w-full bg-gray-800 transition duration-300 ${
             isHovered ? 'bg-opacity-10' : 'bg-opacity-30'
           }`}
         />
-        <div className="relative z-20 w-full text-2xl font-bold text-center text-white truncate whitespace-normal sm:text-3xl">
+        <div className="relative z-20 w-full truncate whitespace-normal text-center text-2xl font-bold text-white sm:text-3xl">
           {name}
         </div>
       </a>
@@ -57,7 +57,7 @@ const GenreCard: React.FC<GenreCardProps> = ({
 const GenreCardPlaceholder: React.FC = () => {
   return (
     <div
-      className={`relative h-32 w-56 sm:h-40 sm:w-72 animate-pulse rounded-xl bg-gray-700`}
+      className={`relative h-32 w-56 animate-pulse rounded-xl bg-gray-700 sm:h-40 sm:w-72`}
     ></div>
   );
 };
diff --git a/src/components/IssueBlock/index.tsx b/src/components/IssueBlock/index.tsx
index 318827814..3367a2c27 100644
--- a/src/components/IssueBlock/index.tsx
+++ b/src/components/IssueBlock/index.tsx
@@ -30,15 +30,15 @@ const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
   return (
     <div className="px-4 py-3 text-gray-300">
       <div className="flex items-center justify-between">
-        <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5">
+        <div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
           <div className="flex flex-nowrap">
-            <ExclamationIcon className="flex-shrink-0 mr-1.5 h-5 w-5" />
+            <ExclamationIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
             <span className="w-40 truncate md:w-auto">
               {intl.formatMessage(issueOption.name)}
             </span>
           </div>
-          <div className="flex mb-1 flex-nowrap white">
-            <UserIcon className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5" />
+          <div className="white mb-1 flex flex-nowrap">
+            <UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
             <span className="w-40 truncate md:w-auto">
               <Link
                 href={
@@ -53,8 +53,8 @@ const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
               </Link>
             </span>
           </div>
-          <div className="flex mb-1 flex-nowrap white">
-            <CalendarIcon className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5" />
+          <div className="white mb-1 flex flex-nowrap">
+            <CalendarIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
             <span className="w-40 truncate md:w-auto">
               {intl.formatDate(issue.createdAt, {
                 year: 'numeric',
@@ -64,7 +64,7 @@ const IssueBlock: React.FC<IssueBlockProps> = ({ issue }) => {
             </span>
           </div>
         </div>
-        <div className="flex flex-wrap flex-shrink-0 ml-2">
+        <div className="ml-2 flex flex-shrink-0 flex-wrap">
           <Link href={`/issues/${issue.id}`} passHref>
             <Button buttonType="primary" as="a">
               <EyeIcon />
diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx
index 28e94ee38..99b26a44a 100644
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -90,7 +90,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
           <img
             src={comment.user.avatar}
             alt=""
-            className="w-10 h-10 transition duration-300 scale-100 rounded-full ring-1 ring-gray-500 transform-gpu hover:scale-105"
+            className="h-10 w-10 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
           />
         </a>
       </Link>
@@ -99,15 +99,15 @@ const IssueComment: React.FC<IssueCommentProps> = ({
           {(isActiveUser || hasPermission(Permission.MANAGE_ISSUES)) && (
             <Menu
               as="div"
-              className="absolute z-40 inline-block text-left top-2 right-1"
+              className="absolute top-2 right-1 z-40 inline-block text-left"
             >
               {({ open }) => (
                 <>
                   <div>
-                    <Menu.Button className="flex items-center text-gray-400 rounded-full hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
+                    <Menu.Button className="flex items-center rounded-full text-gray-400 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
                       <span className="sr-only">Open options</span>
                       <DotsVerticalIcon
-                        className="w-5 h-5"
+                        className="h-5 w-5"
                         aria-hidden="true"
                       />
                     </Menu.Button>
@@ -124,7 +124,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
                   >
                     <Menu.Items
                       static
-                      className="absolute right-0 w-56 mt-2 origin-top-right bg-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                      className="absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-gray-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                     >
                       <div className="py-1">
                         {isActiveUser && (
@@ -132,7 +132,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
                             {({ active }) => (
                               <button
                                 onClick={() => setIsEditing(true)}
-                                className={`block w-full text-left px-4 py-2 text-sm ${
+                                className={`block w-full px-4 py-2 text-left text-sm ${
                                   active
                                     ? 'bg-gray-600 text-white'
                                     : 'text-gray-100'
@@ -147,7 +147,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
                           {({ active }) => (
                             <button
                               onClick={() => setShowDeleteModal(true)}
-                              className={`block w-full text-left px-4 py-2 text-sm ${
+                              className={`block w-full px-4 py-2 text-left text-sm ${
                                 active
                                   ? 'bg-gray-600 text-white'
                                   : 'text-gray-100'
@@ -165,11 +165,11 @@ const IssueComment: React.FC<IssueCommentProps> = ({
             </Menu>
           )}
           <div
-            className={`absolute w-3 h-3 transform rotate-45 bg-gray-800 shadow top-3 z-10 ring-1 ring-gray-500 ${
+            className={`absolute top-3 z-10 h-3 w-3 rotate-45 transform bg-gray-800 shadow ring-1 ring-gray-500 ${
               isReversed ? '-left-1' : '-right-1'
             }`}
           />
-          <div className="relative z-20 w-full py-4 pl-4 pr-8 bg-gray-800 rounded-md">
+          <div className="relative z-20 w-full rounded-md bg-gray-800 py-4 pl-4 pr-8">
             {isEditing ? (
               <Formik
                 initialValues={{ newMessage: comment.message }}
@@ -198,7 +198,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
                       {errors.newMessage && touched.newMessage && (
                         <div className="error">{errors.newMessage}</div>
                       )}
-                      <div className="flex items-center justify-end mt-4 space-x-2">
+                      <div className="mt-4 flex items-center justify-end space-x-2">
                         <Button
                           type="button"
                           onClick={() => setIsEditing(false)}
@@ -217,7 +217,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
                 }}
               </Formik>
             ) : (
-              <div className="w-full max-w-full prose">
+              <div className="prose w-full max-w-full">
                 <ReactMarkdown skipHtml allowedElements={['p', 'em', 'strong']}>
                   {comment.message}
                 </ReactMarkdown>
@@ -226,7 +226,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
           </div>
         </div>
         <div
-          className={`flex justify-between items-center text-xs pt-2 ${
+          className={`flex items-center justify-between pt-2 text-xs ${
             isReversed ? 'flex-row-reverse' : 'flex-row'
           }`}
         >
diff --git a/src/components/IssueDetails/IssueDescription/index.tsx b/src/components/IssueDetails/IssueDescription/index.tsx
index f41386366..103626d47 100644
--- a/src/components/IssueDetails/IssueDescription/index.tsx
+++ b/src/components/IssueDetails/IssueDescription/index.tsx
@@ -44,9 +44,9 @@ const IssueDescription: React.FC<IssueDescriptionProps> = ({
             {({ open }) => (
               <>
                 <div>
-                  <Menu.Button className="flex items-center text-gray-400 rounded-full hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
+                  <Menu.Button className="flex items-center rounded-full text-gray-400 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
                     <span className="sr-only">Open options</span>
-                    <DotsVerticalIcon className="w-5 h-5" aria-hidden="true" />
+                    <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" />
                   </Menu.Button>
                 </div>
 
@@ -62,7 +62,7 @@ const IssueDescription: React.FC<IssueDescriptionProps> = ({
                 >
                   <Menu.Items
                     static
-                    className="absolute right-0 w-56 mt-2 origin-top-right bg-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                    className="absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-gray-700 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                   >
                     <div className="py-1">
                       {belongsToUser && (
@@ -70,7 +70,7 @@ const IssueDescription: React.FC<IssueDescriptionProps> = ({
                           {({ active }) => (
                             <button
                               onClick={() => setIsEditing(true)}
-                              className={`block w-full text-left px-4 py-2 text-sm ${
+                              className={`block w-full px-4 py-2 text-left text-sm ${
                                 active
                                   ? 'bg-gray-600 text-white'
                                   : 'text-gray-100'
@@ -87,7 +87,7 @@ const IssueDescription: React.FC<IssueDescriptionProps> = ({
                           {({ active }) => (
                             <button
                               onClick={() => onDelete()}
-                              className={`block w-full text-left px-4 py-2 text-sm ${
+                              className={`block w-full px-4 py-2 text-left text-sm ${
                                 active
                                   ? 'bg-gray-600 text-white'
                                   : 'text-gray-100'
@@ -123,7 +123,7 @@ const IssueDescription: React.FC<IssueDescriptionProps> = ({
                   as="textarea"
                   className="h-40"
                 />
-                <div className="flex justify-end mt-2">
+                <div className="mt-2 flex justify-end">
                   <Button
                     buttonType="default"
                     className="mr-2"
@@ -141,7 +141,7 @@ const IssueDescription: React.FC<IssueDescriptionProps> = ({
           }}
         </Formik>
       ) : (
-        <div className="mt-4 prose">
+        <div className="prose mt-4">
           <ReactMarkdown
             allowedElements={['p', 'img', 'strong', 'em']}
             skipHtml
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index 443a8a5fa..8939f61d2 100644
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -262,9 +262,9 @@ const IssueDetails: React.FC = () => {
                       : `/users/${issueData.createdBy.id}`
                   }
                 >
-                  <a className="inline-flex items-center h-full ml-1 xl:ml-1.5 group">
+                  <a className="group ml-1 inline-flex h-full items-center xl:ml-1.5">
                     <img
-                      className="w-5 h-5 mr-0.5 transition duration-300 scale-100 rounded-full xl:w-6 xl:h-6 xl:mr-1 transform-gpu group-hover:scale-105"
+                      className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                       src={issueData.createdBy.avatar}
                       alt=""
                     />
@@ -288,7 +288,7 @@ const IssueDetails: React.FC = () => {
           </span>
         </div>
       </div>
-      <div className="relative z-10 flex mt-6 text-gray-300">
+      <div className="relative z-10 mt-6 flex text-gray-300">
         <div className="flex-1 lg:pr-4">
           <IssueDescription
             description={firstComment.message}
@@ -351,7 +351,7 @@ const IssueDetails: React.FC = () => {
                 </span>
               </div>
             </div>
-            <div className="flex flex-col mt-4 mb-6 space-y-2">
+            <div className="mt-4 mb-6 flex flex-col space-y-2">
               {issueData?.media.plexUrl && (
                 <Button
                   as="a"
@@ -466,7 +466,7 @@ const IssueDetails: React.FC = () => {
                           )}
                           className="h-20"
                         />
-                        <div className="flex items-center justify-end mt-4 space-x-2">
+                        <div className="mt-4 flex items-center justify-end space-x-2">
                           {hasPermission(Permission.MANAGE_ISSUES) && (
                             <>
                               {issueData.status === IssueStatus.OPEN ? (
@@ -535,7 +535,7 @@ const IssueDetails: React.FC = () => {
             )}
           </div>
         </div>
-        <div className="hidden lg:block lg:pl-4 lg:w-80">
+        <div className="hidden lg:block lg:w-80 lg:pl-4">
           <div className="media-facts">
             <div className="media-fact">
               <span>{intl.formatMessage(messages.issuetype)}</span>
@@ -587,7 +587,7 @@ const IssueDetails: React.FC = () => {
               </span>
             </div>
           </div>
-          <div className="flex flex-col mt-4 mb-6 space-y-2">
+          <div className="mt-4 mb-6 flex flex-col space-y-2">
             {issueData?.media.plexUrl && (
               <Button
                 as="a"
diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx
index 52edd29b3..1695215a3 100644
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -53,7 +53,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
   if (!title && !error) {
     return (
       <div
-        className="w-full h-64 bg-gray-800 rounded-xl xl:h-28 animate-pulse"
+        className="h-64 w-full animate-pulse rounded-xl bg-gray-800 xl:h-28"
         ref={ref}
       />
     );
@@ -108,9 +108,9 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
   }
 
   return (
-    <div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-28 xl:flex-row">
+    <div className="relative flex w-full flex-col justify-between overflow-hidden rounded-xl bg-gray-800 py-4 text-gray-400 shadow-md ring-1 ring-gray-700 xl:h-28 xl:flex-row">
       {title.backdropPath && (
-        <div className="absolute inset-0 z-0 w-full bg-center bg-cover xl:w-2/3">
+        <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
           <CachedImage
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
             alt=""
@@ -126,8 +126,8 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
           />
         </div>
       )}
-      <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
-        <div className="relative z-10 flex items-center w-full pl-4 pr-4 overflow-hidden xl:w-7/12 2xl:w-2/3 sm:pr-0">
+      <div className="relative flex w-full flex-col justify-between overflow-hidden sm:flex-row">
+        <div className="relative z-10 flex w-full items-center overflow-hidden pl-4 pr-4 sm:pr-0 xl:w-7/12 2xl:w-2/3">
           <Link
             href={
               issue.media.mediaType === MediaType.MOVIE
@@ -135,7 +135,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
                 : `/tv/${issue.media.tmdbId}`
             }
           >
-            <a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
+            <a className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105">
               <CachedImage
                 src={
                   title.posterPath
@@ -150,8 +150,8 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
               />
             </a>
           </Link>
-          <div className="flex flex-col justify-center pl-2 overflow-hidden xl:pl-4">
-            <div className="pt-0.5 sm:pt-1 text-xs text-white">
+          <div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+            <div className="pt-0.5 text-xs text-white sm:pt-1">
               {(isMovie(title) ? title.releaseDate : title.firstAirDate)?.slice(
                 0,
                 4
@@ -164,7 +164,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
                   : `/tv/${issue.media.tmdbId}`
               }
             >
-              <a className="min-w-0 mr-2 text-lg font-bold text-white truncate xl:text-xl hover:underline">
+              <a className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
                 {isMovie(title) ? title.title : title.name}
               </a>
             </Link>
@@ -177,7 +177,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
             )}
           </div>
         </div>
-        <div className="z-10 flex flex-col justify-center w-full pr-4 mt-4 ml-4 overflow-hidden text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+        <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
           <div className="card-field">
             <span className="card-field-name">
               {intl.formatMessage(messages.issuestatus)}
@@ -196,7 +196,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
             <span className="card-field-name">
               {intl.formatMessage(messages.issuetype)}
             </span>
-            <span className="flex text-sm text-gray-300 truncate">
+            <span className="flex truncate text-sm text-gray-300">
               {intl.formatMessage(
                 issueOption?.name ?? messages.unknownissuetype
               )}
@@ -210,7 +210,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
                 <span className="card-field-name">
                   {intl.formatMessage(messages.opened)}
                 </span>
-                <span className="flex text-sm text-gray-300 truncate">
+                <span className="flex truncate text-sm text-gray-300">
                   {intl.formatMessage(messages.openeduserdate, {
                     date: (
                       <FormattedRelativeTime
@@ -224,13 +224,13 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
                     ),
                     user: (
                       <Link href={`/users/${issue.createdBy.id}`}>
-                        <a className="flex items-center truncate group">
+                        <a className="group flex items-center truncate">
                           <img
                             src={issue.createdBy.avatar}
                             alt=""
-                            className="ml-1.5 avatar-sm"
+                            className="avatar-sm ml-1.5"
                           />
-                          <span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
+                          <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {issue.createdBy.displayName}
                           </span>
                         </a>
@@ -244,7 +244,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
                 <span className="card-field-name">
                   {intl.formatMessage(messages.opened)}
                 </span>
-                <span className="flex text-sm text-gray-300 truncate">
+                <span className="flex truncate text-sm text-gray-300">
                   <FormattedRelativeTime
                     value={Math.floor(
                       (new Date(issue.createdAt).getTime() - Date.now()) / 1000
@@ -258,7 +258,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
           </div>
         </div>
       </div>
-      <div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 xl:mt-0 xl:items-end xl:w-96 xl:pl-0">
+      <div className="z-10 mt-4 flex w-full flex-col justify-center pl-4 pr-4 xl:mt-0 xl:w-96 xl:items-end xl:pl-0">
         <span className="w-full">
           <Link href={`/issues/${issue.id}`} passHref>
             <Button as="a" className="w-full" buttonType="primary">
diff --git a/src/components/IssueList/index.tsx b/src/components/IssueList/index.tsx
index a78a762ca..91e9a8eb4 100644
--- a/src/components/IssueList/index.tsx
+++ b/src/components/IssueList/index.tsx
@@ -93,12 +93,12 @@ const IssueList: React.FC = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.issues)} />
-      <div className="flex flex-col justify-between mb-4 lg:items-end lg:flex-row">
+      <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
         <Header>{intl.formatMessage(messages.issues)}</Header>
-        <div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
-          <div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
-            <span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
-              <FilterIcon className="w-6 h-6" />
+        <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <FilterIcon className="h-6 w-6" />
             </span>
             <select
               id="filter"
@@ -126,9 +126,9 @@ const IssueList: React.FC = () => {
               </option>
             </select>
           </div>
-          <div className="flex flex-grow mb-2 sm:mb-0 lg:flex-grow-0">
-            <span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default sm:text-sm rounded-l-md">
-              <SortDescendingIcon className="w-6 h-6" />
+          <div className="mb-2 flex flex-grow sm:mb-0 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
+              <SortDescendingIcon className="h-6 w-6" />
             </span>
             <select
               id="sort"
@@ -163,7 +163,7 @@ const IssueList: React.FC = () => {
         );
       })}
       {data.results.length === 0 && (
-        <div className="flex flex-col items-center justify-center w-full py-24 text-white">
+        <div className="flex w-full flex-col items-center justify-center py-24 text-white">
           <span className="text-2xl text-gray-400">
             {intl.formatMessage(globalMessages.noresults)}
           </span>
@@ -181,7 +181,7 @@ const IssueList: React.FC = () => {
       )}
       <div className="actions">
         <nav
-          className="flex flex-col items-center mb-3 space-y-3 sm:space-y-0 sm:flex-row"
+          className="mb-3 flex flex-col items-center space-y-3 sm:flex-row sm:space-y-0"
           aria-label="Pagination"
         >
           <div className="hidden lg:flex lg:flex-1">
@@ -201,7 +201,7 @@ const IssueList: React.FC = () => {
             </p>
           </div>
           <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-            <span className="items-center -mt-3 text-sm truncate sm:mt-0">
+            <span className="-mt-3 items-center truncate text-sm sm:mt-0">
               {intl.formatMessage(globalMessages.resultsperpage, {
                 pageSize: (
                   <select
@@ -219,7 +219,7 @@ const IssueList: React.FC = () => {
                         .then(() => window.scrollTo(0, 0));
                     }}
                     value={currentPageSize}
-                    className="inline short"
+                    className="short inline"
                   >
                     <option value="5">5</option>
                     <option value="10">10</option>
@@ -231,7 +231,7 @@ const IssueList: React.FC = () => {
               })}
             </span>
           </div>
-          <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+          <div className="flex flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
             <Button
               disabled={!hasPrevPage}
               onClick={() => updateQueryParams('page', (page - 1).toString())}
diff --git a/src/components/IssueModal/CreateIssueModal/index.tsx b/src/components/IssueModal/CreateIssueModal/index.tsx
index c2d75e243..7e30ac5f5 100644
--- a/src/components/IssueModal/CreateIssueModal/index.tsx
+++ b/src/components/IssueModal/CreateIssueModal/index.tsx
@@ -207,7 +207,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
                   </div>
                 </div>
                 {values.problemSeason > 0 && (
-                  <div className="mb-2 form-row">
+                  <div className="form-row mb-2">
                     <label htmlFor="problemEpisode" className="text-label">
                       {intl.formatMessage(messages.problemepisode)}
                       <span className="label-required">*</span>
@@ -255,7 +255,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
               <RadioGroup.Label className="sr-only">
                 Select an Issue
               </RadioGroup.Label>
-              <div className="-space-y-px overflow-hidden bg-gray-800 rounded-md bg-opacity-30">
+              <div className="-space-y-px overflow-hidden rounded-md bg-gray-800 bg-opacity-30">
                 {issueOptions.map((setting, index) => (
                   <RadioGroup.Option
                     key={`issue-type-${setting.issueType}`}
@@ -267,9 +267,9 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
                           ? 'rounded-bl-md rounded-br-md'
                           : '',
                         checked
-                          ? 'bg-indigo-600 border-indigo-500 z-10'
+                          ? 'z-10 border-indigo-500 bg-indigo-600'
                           : 'border-gray-500',
-                        'relative border p-4 flex cursor-pointer focus:outline-none'
+                        'relative flex cursor-pointer border p-4 focus:outline-none'
                       )
                     }
                   >
@@ -278,16 +278,16 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
                         <span
                           className={`${
                             checked
-                              ? 'bg-indigo-800 border-transparent'
-                              : 'bg-white border-gray-300'
+                              ? 'border-transparent bg-indigo-800'
+                              : 'border-gray-300 bg-white'
                           } ${
-                            active ? 'ring-2 ring-offset-2 ring-indigo-300' : ''
-                          } h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center`}
+                            active ? 'ring-2 ring-indigo-300 ring-offset-2' : ''
+                          } mt-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full border`}
                           aria-hidden="true"
                         >
-                          <span className="rounded-full bg-white w-1.5 h-1.5" />
+                          <span className="h-1.5 w-1.5 rounded-full bg-white" />
                         </span>
-                        <div className="flex flex-col ml-3">
+                        <div className="ml-3 flex flex-col">
                           <RadioGroup.Label
                             as="span"
                             className={`block text-sm font-medium ${
@@ -303,7 +303,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
                 ))}
               </div>
             </RadioGroup>
-            <div className="flex-col mt-4 space-y-2">
+            <div className="mt-4 flex-col space-y-2">
               <label htmlFor="message">
                 {intl.formatMessage(messages.whatswrong)}
                 <span className="label-required">*</span>
diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index 16b3599ea..1d610604f 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -24,13 +24,13 @@ const LanguagePicker: React.FC = () => {
     <div className="relative">
       <div>
         <button
-          className={`p-1 rounded-full sm:p-2 hover:bg-gray-600 hover:text-white focus:outline-none focus:bg-gray-600 focus:ring-1 focus:ring-gray-500 focus:text-white ${
+          className={`rounded-full p-1 hover:bg-gray-600 hover:text-white focus:bg-gray-600 focus:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 sm:p-2 ${
             isDropdownOpen ? 'bg-gray-600 text-white' : 'text-gray-400'
           }`}
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >
-          <TranslateIcon className="w-6 h-6" />
+          <TranslateIcon className="h-6 w-6" />
         </button>
       </div>
       <Transition
@@ -43,10 +43,10 @@ const LanguagePicker: React.FC = () => {
         leaveTo="transform opacity-0 scale-95"
       >
         <div
-          className="absolute right-0 w-56 mt-2 origin-top-right rounded-md shadow-lg"
+          className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg"
           ref={dropdownRef}
         >
-          <div className="px-3 py-2 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5">
+          <div className="rounded-md bg-gray-700 px-3 py-2 ring-1 ring-black ring-opacity-5">
             <div>
               <label
                 htmlFor="language"
diff --git a/src/components/Layout/Notifications/index.tsx b/src/components/Layout/Notifications/index.tsx
index 5a151c357..9376b4247 100644
--- a/src/components/Layout/Notifications/index.tsx
+++ b/src/components/Layout/Notifications/index.tsx
@@ -4,10 +4,10 @@ import React from 'react';
 const Notifications: React.FC = () => {
   return (
     <button
-      className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
+      className="rounded-full p-1 text-gray-400 hover:bg-gray-500 hover:text-white focus:text-white focus:outline-none focus:ring"
       aria-label="Notifications"
     >
-      <BellIcon className="w-6 h-6" />
+      <BellIcon className="h-6 w-6" />
     </button>
   );
 };
diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx
index 619c3375d..b842a0337 100644
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@@ -17,14 +17,14 @@ const SearchInput: React.FC = () => {
         <label htmlFor="search_field" className="sr-only">
           Search
         </label>
-        <div className="relative flex items-center w-full text-white focus-within:text-gray-200">
-          <div className="absolute inset-y-0 flex items-center pointer-events-none left-4">
-            <SearchIcon className="w-5 h-5" />
+        <div className="relative flex w-full items-center text-white focus-within:text-gray-200">
+          <div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
+            <SearchIcon className="h-5 w-5" />
           </div>
           <input
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
-            className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full bg-opacity-80 focus:bg-opacity-100 focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            className="block w-full rounded-full border border-gray-600 bg-gray-900 bg-opacity-80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-opacity-100 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
@@ -44,10 +44,10 @@ const SearchInput: React.FC = () => {
           />
           {searchValue.length > 0 && (
             <button
-              className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white"
+              className="absolute inset-y-0 right-2 m-auto h-7 w-7 border-none p-1 text-gray-400 outline-none transition hover:text-white focus:border-none focus:outline-none"
               onClick={() => clear()}
             >
-              <XCircleIcon className="w-5 h-5" />
+              <XCircleIcon className="h-5 w-5" />
             </button>
           )}
         </div>
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 92495db6b..45716eeb5 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -42,20 +42,20 @@ const SidebarLinks: SidebarLinkProps[] = [
   {
     href: '/',
     messagesKey: 'dashboard',
-    svgIcon: <SparklesIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <SparklesIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
   },
   {
     href: '/requests',
     messagesKey: 'requests',
-    svgIcon: <ClockIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <ClockIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/requests/,
   },
   {
     href: '/issues',
     messagesKey: 'issues',
     svgIcon: (
-      <ExclamationIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
+      <ExclamationIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
     ),
     activeRegExp: /^\/issues/,
     requiredPermission: [
@@ -68,14 +68,14 @@ const SidebarLinks: SidebarLinkProps[] = [
   {
     href: '/users',
     messagesKey: 'users',
-    svgIcon: <UsersIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <UsersIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/users/,
     requiredPermission: Permission.MANAGE_USERS,
   },
   {
     href: '/settings',
     messagesKey: 'settings',
-    svgIcon: <CogIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <CogIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/settings/,
     requiredPermission: Permission.MANAGE_SETTINGS,
   },
@@ -114,28 +114,28 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
               leaveTo="-translate-x-full"
             >
               <>
-                <div className="relative flex flex-col flex-1 w-full max-w-xs bg-gray-800 sidebar">
-                  <div className="absolute top-0 right-0 p-1 sidebar-close-button -mr-14">
+                <div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
+                  <div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
                     <button
-                      className="flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:bg-gray-600"
+                      className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none"
                       aria-label="Close sidebar"
                       onClick={() => setClosed()}
                     >
-                      <XIcon className="w-6 h-6 text-white" />
+                      <XIcon className="h-6 w-6 text-white" />
                     </button>
                   </div>
                   <div
                     ref={navRef}
-                    className="flex flex-col flex-1 h-0 pt-8 pb-8 overflow-y-auto sm:pb-4"
+                    className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
                   >
-                    <div className="flex items-center flex-shrink-0 px-2">
+                    <div className="flex flex-shrink-0 items-center px-2">
                       <span className="px-4 text-xl text-gray-50">
                         <a href="/">
                           <img src="/logo_full.svg" alt="Logo" />
                         </a>
                       </span>
                     </div>
-                    <nav className="flex-1 px-4 mt-16 space-y-4">
+                    <nav className="mt-16 flex-1 space-y-4 px-4">
                       {SidebarLinks.filter((link) =>
                         link.requiredPermission
                           ? hasPermission(link.requiredPermission, {
@@ -158,7 +158,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                               }}
                               role="button"
                               tabIndex={0}
-                              className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
+                              className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
@@ -184,7 +184,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                     )}
                   </div>
                 </div>
-                <div className="flex-shrink-0 w-14">
+                <div className="w-14 flex-shrink-0">
                   {/* <!-- Force sidebar to shrink to fit close icon --> */}
                 </div>
               </>
@@ -194,17 +194,17 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
       </div>
 
       <div className="fixed top-0 bottom-0 left-0 z-30 hidden lg:flex lg:flex-shrink-0">
-        <div className="flex flex-col w-64 sidebar">
-          <div className="flex flex-col flex-1 h-0">
-            <div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
-              <div className="flex items-center flex-shrink-0">
+        <div className="sidebar flex w-64 flex-col">
+          <div className="flex h-0 flex-1 flex-col">
+            <div className="flex flex-1 flex-col overflow-y-auto pt-8 pb-4">
+              <div className="flex flex-shrink-0 items-center">
                 <span className="px-4 text-2xl text-gray-50">
                   <a href="/">
                     <img src="/logo_full.svg" alt="Logo" />
                   </a>
                 </span>
               </div>
-              <nav className="flex-1 px-4 mt-16 space-y-4">
+              <nav className="mt-16 flex-1 space-y-4 px-4">
                 {SidebarLinks.filter((link) =>
                   link.requiredPermission
                     ? hasPermission(link.requiredPermission, {
@@ -219,7 +219,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       as={sidebarLink.as}
                     >
                       <a
-                        className={`flex group items-center px-2 py-2 text-lg leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
+                        className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index 7eda39ea0..a99231177 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -33,14 +33,14 @@ const UserDropdown: React.FC = () => {
     <div className="relative ml-3">
       <div>
         <button
-          className="flex items-center max-w-xs text-sm rounded-full ring-1 ring-gray-700 focus:outline-none focus:ring-gray-500 hover:ring-gray-500"
+          className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
           id="user-menu"
           aria-label="User menu"
           aria-haspopup="true"
           onClick={() => setDropdownOpen(true)}
         >
           <img
-            className="w-8 h-8 rounded-full sm:w-10 sm:h-10"
+            className="h-8 w-8 rounded-full sm:h-10 sm:w-10"
             src={user?.avatar}
             alt=""
           />
@@ -56,11 +56,11 @@ const UserDropdown: React.FC = () => {
         leaveTo="transform opacity-0 scale-95"
       >
         <div
-          className="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"
+          className="absolute right-0 mt-2 w-48 origin-top-right rounded-md shadow-lg"
           ref={dropdownRef}
         >
           <div
-            className="py-1 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5"
+            className="rounded-md bg-gray-700 py-1 ring-1 ring-black ring-opacity-5"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby="user-menu"
@@ -77,7 +77,7 @@ const UserDropdown: React.FC = () => {
                 }}
                 onClick={() => setDropdownOpen(false)}
               >
-                <UserIcon className="inline w-5 h-5 mr-2" />
+                <UserIcon className="mr-2 inline h-5 w-5" />
                 <span>{intl.formatMessage(messages.myprofile)}</span>
               </a>
             </Link>
@@ -93,7 +93,7 @@ const UserDropdown: React.FC = () => {
                 }}
                 onClick={() => setDropdownOpen(false)}
               >
-                <CogIcon className="inline w-5 h-5 mr-2" />
+                <CogIcon className="mr-2 inline h-5 w-5" />
                 <span>{intl.formatMessage(messages.settings)}</span>
               </a>
             </Link>
@@ -103,7 +103,7 @@ const UserDropdown: React.FC = () => {
               role="menuitem"
               onClick={() => logout()}
             >
-              <LogoutIcon className="inline w-5 h-5 mr-2" />
+              <LogoutIcon className="mr-2 inline h-5 w-5" />
               <span>{intl.formatMessage(messages.signout)}</span>
             </a>
           </div>
diff --git a/src/components/Layout/VersionStatus/index.tsx b/src/components/Layout/VersionStatus/index.tsx
index 39ca6807f..d682df4ca 100644
--- a/src/components/Layout/VersionStatus/index.tsx
+++ b/src/components/Layout/VersionStatus/index.tsx
@@ -50,20 +50,20 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
         }}
         role="button"
         tabIndex={0}
-        className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
+        className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${
           data.updateAvailable
             ? 'bg-yellow-500 text-white hover:bg-yellow-400'
             : 'bg-gray-900 text-gray-300 hover:bg-gray-800'
         }`}
       >
         {data.commitTag === 'local' ? (
-          <CodeIcon className="w-6 h-6" />
+          <CodeIcon className="h-6 w-6" />
         ) : data.version.startsWith('develop-') ? (
-          <BeakerIcon className="w-6 h-6" />
+          <BeakerIcon className="h-6 w-6" />
         ) : (
-          <ServerIcon className="w-6 h-6" />
+          <ServerIcon className="h-6 w-6" />
         )}
-        <div className="flex flex-col flex-1 min-w-0 px-2 truncate last:pr-0">
+        <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
           <span className="font-bold">{versionStream}</span>
           <span className="truncate">
             {data.commitTag === 'local' ? (
@@ -75,13 +75,13 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
             ) : data.commitsBehind === -1 ? (
               intl.formatMessage(messages.outofdate)
             ) : (
-              <code className="p-0 bg-transparent">
+              <code className="bg-transparent p-0">
                 {data.version.replace('develop-', '')}
               </code>
             )}
           </span>
         </div>
-        {data.updateAvailable && <ArrowCircleUpIcon className="w-6 h-6" />}
+        {data.updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
       </a>
     </Link>
   );
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index c4cd77b3d..bde592778 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -45,14 +45,14 @@ const Layout: React.FC = ({ children }) => {
   }, []);
 
   return (
-    <div className="flex h-full min-w-0 min-h-full bg-gray-900">
-      <div className="fixed inset-0 z-20 w-full h-1 border-gray-700 md:border-t pwa-only" />
-      <div className="absolute top-0 w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl">
-        <div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
+    <div className="flex h-full min-h-full min-w-0 bg-gray-900">
+      <div className="pwa-only fixed inset-0 z-20 h-1 w-full border-gray-700 md:border-t" />
+      <div className="absolute top-0 h-64 w-full bg-gradient-to-bl from-gray-800 to-gray-900">
+        <div className="relative inset-0 h-full w-full bg-gradient-to-t from-gray-900 to-transparent" />
       </div>
       <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
 
-      <div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 lg:ml-64">
+      <div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">
         <div
           className={`searchbar fixed left-0 right-0 top-0 z-10 flex flex-shrink-0 bg-opacity-80 transition duration-300 ${
             isScrolled ? 'bg-gray-700' : 'bg-transparent'
@@ -65,17 +65,17 @@ const Layout: React.FC = ({ children }) => {
           <button
             className={`px-4 text-white ${
               isScrolled ? 'opacity-90' : 'opacity-70'
-            } focus:outline-none lg:hidden transition duration-300`}
+            } transition duration-300 focus:outline-none lg:hidden`}
             aria-label="Open sidebar"
             onClick={() => setSidebarOpen(true)}
           >
-            <MenuAlt2Icon className="w-6 h-6" />
+            <MenuAlt2Icon className="h-6 w-6" />
           </button>
-          <div className="flex items-center justify-between flex-1 pr-4 md:pr-4 md:pl-4">
+          <div className="flex flex-1 items-center justify-between pr-4 md:pr-4 md:pl-4">
             <button
               className={`mr-2 text-white ${
                 isScrolled ? 'opacity-90' : 'opacity-70'
-              } transition duration-300 hover:text-white pwa-only focus:outline-none focus:text-white`}
+              } pwa-only transition duration-300 hover:text-white focus:text-white focus:outline-none`}
               onClick={() => router.back()}
             >
               <ArrowLeftIcon className="w-7" />
@@ -87,9 +87,9 @@ const Layout: React.FC = ({ children }) => {
           </div>
         </div>
 
-        <main className="relative z-0 top-16 focus:outline-none" tabIndex={0}>
+        <main className="relative top-16 z-0 focus:outline-none" tabIndex={0}>
           <div className="mb-6">
-            <div className="px-4 mx-auto max-w-8xl">{children}</div>
+            <div className="max-w-8xl mx-auto px-4">{children}</div>
           </div>
         </main>
       </div>
diff --git a/src/components/LoadingBar/index.tsx b/src/components/LoadingBar/index.tsx
index 918fe134a..712ba4db0 100644
--- a/src/components/LoadingBar/index.tsx
+++ b/src/components/LoadingBar/index.tsx
@@ -11,12 +11,12 @@ interface BarProps {
 const Bar = ({ progress, isFinished }: BarProps) => {
   return (
     <div
-      className={`fixed top-0 left-0 z-50 w-full transition-opacity ease-out duration-400 ${
+      className={`duration-400 fixed top-0 left-0 z-50 w-full transition-opacity ease-out ${
         isFinished ? 'opacity-0' : 'opacity-100'
       }`}
     >
       <div
-        className="duration-300 bg-indigo-400 transition-width"
+        className="bg-indigo-400 transition-width duration-300"
         style={{
           height: '3px',
           width: `${progress * 100}%`,
diff --git a/src/components/Login/LocalLogin.tsx b/src/components/Login/LocalLogin.tsx
index ece109fe4..2480a8d5c 100644
--- a/src/components/Login/LocalLogin.tsx
+++ b/src/components/Login/LocalLogin.tsx
@@ -70,7 +70,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                 <label htmlFor="email" className="text-label">
                   {intl.formatMessage(messages.email)}
                 </label>
-                <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                   <div className="form-input-field">
                     <Field
                       id="email"
@@ -86,7 +86,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                 <label htmlFor="password" className="text-label">
                   {intl.formatMessage(messages.password)}
                 </label>
-                <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                   <div className="form-input-field">
                     <SensitiveInput
                       as="field"
@@ -101,12 +101,12 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                   )}
                 </div>
                 {loginError && (
-                  <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                  <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                     <div className="error">{loginError}</div>
                   </div>
                 )}
               </div>
-              <div className="pt-5 mt-8 border-t border-gray-700">
+              <div className="mt-8 border-t border-gray-700 pt-5">
                 <div className="flex flex-row-reverse justify-between">
                   <span className="inline-flex rounded-md shadow-sm">
                     <Button
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 7ddf87991..d50e84e07 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -68,7 +68,7 @@ const Login: React.FC = () => {
   });
 
   return (
-    <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
+    <div className="relative flex min-h-screen flex-col bg-gray-900 py-14">
       <PageTitle title={intl.formatMessage(messages.signin)} />
       <ImageFader
         backgroundImages={
@@ -77,12 +77,12 @@ const Login: React.FC = () => {
           ) ?? []
         }
       />
-      <div className="absolute z-50 top-4 right-4">
+      <div className="absolute top-4 right-4 z-50">
         <LanguagePicker />
       </div>
-      <div className="relative z-40 flex flex-col items-center px-4 mt-10 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" />
-        <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
+      <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
+        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.signinheader)}
         </h2>
       </div>
@@ -101,10 +101,10 @@ const Login: React.FC = () => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="p-4 mb-4 bg-red-600 rounded-md">
+              <div className="mb-4 rounded-md bg-red-600 p-4">
                 <div className="flex">
                   <div className="flex-shrink-0">
-                    <XCircleIcon className="w-5 h-5 text-red-300" />
+                    <XCircleIcon className="h-5 w-5 text-red-300" />
                   </div>
                   <div className="ml-3">
                     <h3 className="text-sm font-medium text-red-300">
@@ -118,11 +118,11 @@ const Login: React.FC = () => {
               {({ openIndexes, handleClick, AccordionContent }) => (
                 <>
                   <button
-                    className={`font-bold w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg ${
+                    className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 focus:outline-none sm:rounded-t-lg ${
                       openIndexes.includes(0) && 'text-indigo-500'
                     } ${
                       settings.currentSettings.localLogin &&
-                      'hover:bg-gray-700 hover:cursor-pointer'
+                      'hover:cursor-pointer hover:bg-gray-700'
                     }`}
                     onClick={() => handleClick(0)}
                     disabled={!settings.currentSettings.localLogin}
@@ -140,7 +140,7 @@ const Login: React.FC = () => {
                   {settings.currentSettings.localLogin && (
                     <div>
                       <button
-                        className={`font-bold w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 hover:bg-gray-700 hover:cursor-pointer ${
+                        className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700 focus:outline-none ${
                           openIndexes.includes(1)
                             ? 'text-indigo-500'
                             : 'sm:rounded-b-lg'
diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index 43064302b..8c6f27919 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -141,7 +141,7 @@ const ManageSlideOver: React.FC<
             <h3 className="mb-2 text-xl font-bold">
               {intl.formatMessage(messages.downloadstatus)}
             </h3>
-            <div className="overflow-hidden bg-gray-600 rounded-md shadow">
+            <div className="overflow-hidden rounded-md bg-gray-600 shadow">
               <ul>
                 {data.mediaInfo?.downloadStatus?.map((status, index) => (
                   <li
@@ -171,7 +171,7 @@ const ManageSlideOver: React.FC<
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalIssues)}
               </h3>
-              <div className="overflow-hidden bg-gray-600 rounded-md shadow">
+              <div className="overflow-hidden rounded-md bg-gray-600 shadow">
                 <ul>
                   {openIssues.map((issue) => (
                     <li
@@ -190,7 +190,7 @@ const ManageSlideOver: React.FC<
             <h3 className="mb-2 text-xl font-bold">
               {intl.formatMessage(messages.manageModalRequests)}
             </h3>
-            <div className="overflow-hidden bg-gray-600 rounded-md shadow">
+            <div className="overflow-hidden rounded-md bg-gray-600 shadow">
               <ul>
                 {requests.map((request) => (
                   <li
@@ -219,7 +219,7 @@ const ManageSlideOver: React.FC<
                 {!!watchData?.data && (
                   <div>
                     <div
-                      className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden text-sm text-gray-300 bg-gray-600 shadow ${
+                      className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${
                         data.mediaInfo?.tautulliUrl
                           ? 'rounded-t-md'
                           : 'rounded-md'
@@ -254,8 +254,8 @@ const ManageSlideOver: React.FC<
                         </div>
                       </div>
                       {!!watchData.data.users.length && (
-                        <div className="flex flex-row px-4 pt-3 pb-2 space-x-2">
-                          <span className="font-bold leading-8 shrink-0">
+                        <div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
+                          <span className="shrink-0 font-bold leading-8">
                             {intl.formatMessage(messages.playedby)}
                           </span>
                           <span className="flex flex-row flex-wrap">
@@ -268,11 +268,11 @@ const ManageSlideOver: React.FC<
                                 }
                                 key={`watch-user-${user.id}`}
                               >
-                                <a className="z-0 mb-1 -mr-2 hover:z-50 shrink-0">
+                                <a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
                                   <img
                                     src={user.avatar}
                                     alt={user.displayName}
-                                    className="w-8 h-8 transition duration-300 scale-100 rounded-full ring-1 ring-gray-500 transform-gpu hover:scale-105"
+                                    className="h-8 w-8 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
                                   />
                                 </a>
                               </Link>
@@ -334,7 +334,7 @@ const ManageSlideOver: React.FC<
                 {!!watchData?.data4k && (
                   <div>
                     <div
-                      className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden text-sm text-gray-300 bg-gray-600 shadow ${
+                      className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${
                         data.mediaInfo?.tautulliUrl4k
                           ? 'rounded-t-md'
                           : 'rounded-md'
@@ -369,8 +369,8 @@ const ManageSlideOver: React.FC<
                         </div>
                       </div>
                       {!!watchData.data4k.users.length && (
-                        <div className="flex flex-row px-4 pt-3 pb-2 space-x-2">
-                          <span className="font-bold leading-8 shrink-0">
+                        <div className="flex flex-row space-x-2 px-4 pt-3 pb-2">
+                          <span className="shrink-0 font-bold leading-8">
                             {intl.formatMessage(messages.playedby)}
                           </span>
                           <span className="flex flex-row flex-wrap">
@@ -383,11 +383,11 @@ const ManageSlideOver: React.FC<
                                 }
                                 key={`watch-user-${user.id}`}
                               >
-                                <a className="z-0 mb-1 -mr-2 hover:z-50 shrink-0">
+                                <a className="z-0 mb-1 -mr-2 shrink-0 hover:z-50">
                                   <img
                                     src={user.avatar}
                                     alt={user.displayName}
-                                    className="w-8 h-8 transition duration-300 scale-100 rounded-full ring-1 ring-gray-500 transform-gpu hover:scale-105"
+                                    className="h-8 w-8 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
                                   />
                                 </a>
                               </Link>
diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx
index c42909669..f6bc2ccb4 100644
--- a/src/components/MediaSlider/ShowMoreCard/index.tsx
+++ b/src/components/MediaSlider/ShowMoreCard/index.tsx
@@ -32,16 +32,16 @@ const ShowMoreCard: React.FC<ShowMoreCardProps> = ({ url, posters }) => {
         tabIndex={0}
       >
         <div
-          className={`relative w-36 sm:w-36 md:w-44
-         rounded-xl text-white shadow-lg overflow-hidden transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
+          className={`relative w-36 transform-gpu cursor-pointer
+         overflow-hidden rounded-xl text-white shadow-lg ring-1 transition duration-150 ease-in-out sm:w-36 md:w-44 ${
            isHovered
-             ? 'bg-gray-600 ring-gray-500 scale-105'
-             : 'bg-gray-800 ring-gray-700 scale-100'
+             ? 'scale-105 bg-gray-600 ring-gray-500'
+             : 'scale-100 bg-gray-800 ring-gray-700'
          }`}
         >
           <div style={{ paddingBottom: '150%' }}>
-            <div className="absolute inset-0 flex flex-col items-center w-full h-full p-2">
-              <div className="relative z-10 flex flex-wrap items-center justify-center h-full opacity-30">
+            <div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
+              <div className="relative z-10 flex h-full flex-wrap items-center justify-center opacity-30">
                 {posters[0] && (
                   <div className="w-1/2 p-1">
                     <img
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index b72fdc586..3e92f46fe 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -186,7 +186,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   const certification = releases?.find((r) => r.certification)?.certification;
   if (certification) {
     movieAttributes.push(
-      <span className="p-0.5 py-0 border rounded-md">{certification}</span>
+      <span className="rounded-md border p-0.5 py-0">{certification}</span>
     );
   }
 
@@ -372,8 +372,8 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   ) ?? []
                 ).length > 0 && (
                   <>
-                    <div className="absolute w-3 h-3 bg-red-600 rounded-full -right-1 -top-1" />
-                    <div className="absolute w-3 h-3 bg-red-600 rounded-full -right-1 -top-1 animate-ping" />
+                    <div className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-red-600" />
+                    <div className="absolute -right-1 -top-1 h-3 w-3 animate-ping rounded-full bg-red-600" />
                   </>
                 )}
             </Button>
@@ -401,11 +401,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   </li>
                 ))}
               </ul>
-              <div className="flex justify-end mt-4">
+              <div className="mt-4 flex justify-end">
                 <Link href={`/movie/${data.id}/crew`}>
                   <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
                     <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowCircleRightIcon className="inline-block w-5 h-5 ml-1.5" />
+                    <ArrowCircleRightIcon className="ml-1.5 inline-block h-5 w-5" />
                   </a>
                 </Link>
               </div>
@@ -417,7 +417,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             <div className="mb-6">
               <Link href={`/collection/${data.collection.id}`}>
                 <a>
-                  <div className="relative z-0 overflow-hidden transition duration-300 scale-100 bg-gray-800 bg-center bg-cover rounded-lg shadow-md cursor-pointer transform-gpu group hover:scale-105 ring-1 ring-gray-700 hover:ring-gray-500">
+                  <div className="group relative z-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-lg bg-gray-800 bg-cover bg-center shadow-md ring-1 ring-gray-700 transition duration-300 hover:scale-105 hover:ring-gray-500">
                     <div className="absolute inset-0 z-0">
                       <CachedImage
                         src={`https://image.tmdb.org/t/p/w1440_and_h320_multi_faces/${data.collection.backdropPath}`}
@@ -433,7 +433,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                         }}
                       />
                     </div>
-                    <div className="relative z-10 flex items-center justify-between p-4 text-gray-200 transition duration-300 h-14 group-hover:text-white">
+                    <div className="relative z-10 flex h-14 items-center justify-between p-4 text-gray-200 transition duration-300 group-hover:text-white">
                       <div>{data.collection.name}</div>
                       <Button buttonSize="sm">
                         {intl.formatMessage(globalMessages.view)}
@@ -453,9 +453,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   <>
                     <span className="media-rating">
                       {ratingData.criticsRating === 'Rotten' ? (
-                        <RTRotten className="w-6 mr-1" />
+                        <RTRotten className="mr-1 w-6" />
                       ) : (
-                        <RTFresh className="w-6 mr-1" />
+                        <RTFresh className="mr-1 w-6" />
                       )}
                       {ratingData.criticsScore}%
                     </span>
@@ -465,9 +465,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   <>
                     <span className="media-rating">
                       {ratingData.audienceRating === 'Spilled' ? (
-                        <RTAudRotten className="w-6 mr-1" />
+                        <RTAudRotten className="mr-1 w-6" />
                       ) : (
-                        <RTAudFresh className="w-6 mr-1" />
+                        <RTAudFresh className="mr-1 w-6" />
                       )}
                       {ratingData.audienceScore}%
                     </span>
@@ -476,7 +476,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 {!!data.voteCount && (
                   <>
                     <span className="media-rating">
-                      <TmdbLogo className="w-6 mr-2" />
+                      <TmdbLogo className="mr-2 w-6" />
                       {data.voteAverage}/10
                     </span>
                   </>
@@ -509,14 +509,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                     >
                       {r.type === 3 ? (
                         // Theatrical
-                        <TicketIcon className="w-4 h-4" />
+                        <TicketIcon className="h-4 w-4" />
                       ) : r.type === 4 ? (
                         // Digital
-                        <CloudIcon className="w-4 h-4" />
+                        <CloudIcon className="h-4 w-4" />
                       ) : (
                         // Physical
                         <svg
-                          className="w-4 h-4"
+                          className="h-4 w-4"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
                         >
@@ -667,9 +667,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                             : messages.showless
                         )}
                         {!showMoreStudios ? (
-                          <ChevronDoubleDownIcon className="w-4 h-4 ml-1" />
+                          <ChevronDoubleDownIcon className="ml-1 h-4 w-4" />
                         ) : (
-                          <ChevronDoubleUpIcon className="w-4 h-4 ml-1" />
+                          <ChevronDoubleUpIcon className="ml-1 h-4 w-4" />
                         )}
                       </span>
                     </button>
diff --git a/src/components/NotificationTypeSelector/NotificationType/index.tsx b/src/components/NotificationTypeSelector/NotificationType/index.tsx
index 1e4811445..9662ebd36 100644
--- a/src/components/NotificationTypeSelector/NotificationType/index.tsx
+++ b/src/components/NotificationTypeSelector/NotificationType/index.tsx
@@ -17,13 +17,13 @@ const NotificationType: React.FC<NotificationTypeProps> = ({
   return (
     <>
       <div
-        className={`relative flex items-start first:mt-0 mt-4 ${
+        className={`relative mt-4 flex items-start first:mt-0 ${
           !!parent?.value && hasNotificationType(parent.value, currentTypes)
             ? 'opacity-50'
             : ''
         }`}
       >
-        <div className="flex items-center h-6">
+        <div className="flex h-6 items-center">
           <input
             id={option.id}
             name="permissions"
@@ -57,7 +57,7 @@ const NotificationType: React.FC<NotificationTypeProps> = ({
         </div>
       </div>
       {(option.children ?? []).map((child) => (
-        <div key={`notification-type-child-${child.id}`} className="pl-6 mt-4">
+        <div key={`notification-type-child-${child.id}`} className="mt-4 pl-6">
           <NotificationType
             option={child}
             currentTypes={currentTypes}
diff --git a/src/components/PermissionOption/index.tsx b/src/components/PermissionOption/index.tsx
index 99d17381f..739234759 100644
--- a/src/components/PermissionOption/index.tsx
+++ b/src/components/PermissionOption/index.tsx
@@ -107,11 +107,11 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
   return (
     <>
       <div
-        className={`relative flex items-start first:mt-0 mt-4 ${
+        className={`relative mt-4 flex items-start first:mt-0 ${
           disabled ? 'opacity-50' : ''
         }`}
       >
-        <div className="flex items-center h-6">
+        <div className="flex h-6 items-center">
           <input
             id={option.id}
             name="permissions"
@@ -139,7 +139,7 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
         </div>
       </div>
       {(option.children ?? []).map((child) => (
-        <div key={`permission-child-${child.id}`} className="pl-10 mt-4">
+        <div key={`permission-child-${child.id}`} className="mt-4 pl-10">
           <PermissionOption
             option={child}
             currentPermission={currentPermission}
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
index 92344f089..47fe56efc 100644
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -39,17 +39,17 @@ const PersonCard: React.FC<PersonCardProps> = ({
         <div
           className={`relative ${
             canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
-          } rounded-xl text-white shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
+          } transform-gpu cursor-pointer rounded-xl text-white shadow ring-1 transition duration-150 ease-in-out ${
             isHovered
-              ? 'bg-gray-700 scale-105 ring-gray-500'
-              : 'bg-gray-800 scale-100 ring-gray-700'
+              ? 'scale-105 bg-gray-700 ring-gray-500'
+              : 'scale-100 bg-gray-800 ring-gray-700'
           }`}
         >
           <div style={{ paddingBottom: '150%' }}>
-            <div className="absolute inset-0 flex flex-col items-center w-full h-full p-2">
-              <div className="relative flex justify-center w-full mt-2 mb-4 h-1/2">
+            <div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
+              <div className="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
                 {profilePath ? (
-                  <div className="relative w-3/4 h-full overflow-hidden rounded-full ring-1 ring-gray-700">
+                  <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
                     <CachedImage
                       src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
                       alt=""
@@ -61,12 +61,12 @@ const PersonCard: React.FC<PersonCardProps> = ({
                   <UserCircleIcon className="h-full" />
                 )}
               </div>
-              <div className="w-full font-bold text-center truncate">
+              <div className="w-full truncate text-center font-bold">
                 {name}
               </div>
               {subName && (
                 <div
-                  className="overflow-hidden text-sm text-center text-gray-300 whitespace-normal"
+                  className="overflow-hidden whitespace-normal text-center text-sm text-gray-300"
                   style={{
                     WebkitLineClamp: 2,
                     display: '-webkit-box',
diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx
index 28aa0550d..173fc5dab 100644
--- a/src/components/PersonDetails/index.tsx
+++ b/src/components/PersonDetails/index.tsx
@@ -145,7 +145,7 @@ const PersonDetails: React.FC = () => {
                 canExpand
               />
               {media.character && (
-                <div className="w-full mt-2 text-xs text-center text-gray-300 truncate">
+                <div className="mt-2 w-full truncate text-center text-xs text-gray-300">
                   {intl.formatMessage(messages.ascharacter, {
                     character: media.character,
                   })}
@@ -185,7 +185,7 @@ const PersonDetails: React.FC = () => {
                 canExpand
               />
               {media.job && (
-                <div className="w-full mt-2 text-xs text-center text-gray-300 truncate">
+                <div className="mt-2 w-full truncate text-center text-xs text-gray-300">
                   {media.job}
                 </div>
               )}
@@ -214,12 +214,12 @@ const PersonDetails: React.FC = () => {
         </div>
       )}
       <div
-        className={`relative z-10 flex flex-col items-center mt-4 mb-8 lg:flex-row ${
+        className={`relative z-10 mt-4 mb-8 flex flex-col items-center lg:flex-row ${
           data.biography ? 'lg:items-start' : ''
         }`}
       >
         {data.profilePath && (
-          <div className="relative flex-shrink-0 mb-6 mr-0 overflow-hidden rounded-full w-36 h-36 lg:w-44 lg:h-44 lg:mb-0 lg:mr-6 ring-1 ring-gray-700">
+          <div className="relative mb-6 mr-0 h-36 w-36 flex-shrink-0 overflow-hidden rounded-full ring-1 ring-gray-700 lg:mb-0 lg:mr-6 lg:h-44 lg:w-44">
             <CachedImage
               src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.profilePath}`}
               alt=""
@@ -249,7 +249,7 @@ const PersonDetails: React.FC = () => {
             <div className="relative text-left">
               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
               <div
-                className="outline-none group ring-0"
+                className="group outline-none ring-0"
                 onClick={() => setShowBio((show) => !show)}
                 role="button"
                 tabIndex={-1}
@@ -257,7 +257,7 @@ const PersonDetails: React.FC = () => {
                 <TruncateMarkup
                   lines={showBio ? 200 : 6}
                   ellipsis={
-                    <Ellipsis className="relative inline-block ml-2 -top-0.5 opacity-70 group-hover:opacity-100 transition duration-300" />
+                    <Ellipsis className="relative -top-0.5 ml-2 inline-block opacity-70 transition duration-300 group-hover:opacity-100" />
                   }
                 >
                   <p className="pt-2 text-sm lg:text-base">{data.biography}</p>
diff --git a/src/components/QuotaSelector/index.tsx b/src/components/QuotaSelector/index.tsx
index 831c8fad2..9ad39e221 100644
--- a/src/components/QuotaSelector/index.tsx
+++ b/src/components/QuotaSelector/index.tsx
@@ -56,7 +56,7 @@ const QuotaSelector: React.FC<QuotaSelectorProps> = ({
         {
           quotaLimit: (
             <select
-              className="inline short"
+              className="short inline"
               value={limitOverride ?? quotaLimit}
               onChange={(e) => setQuotaLimit(Number(e.target.value))}
               disabled={isDisabled}
@@ -73,7 +73,7 @@ const QuotaSelector: React.FC<QuotaSelectorProps> = ({
           ),
           quotaDays: (
             <select
-              className="inline short"
+              className="short inline"
               value={dayOverride ?? quotaDays}
               onChange={(e) => setQuotaDays(Number(e.target.value))}
               disabled={isDisabled}
diff --git a/src/components/RegionSelector/index.tsx b/src/components/RegionSelector/index.tsx
index ac44079ce..0c4bb2c6c 100644
--- a/src/components/RegionSelector/index.tsx
+++ b/src/components/RegionSelector/index.tsx
@@ -81,13 +81,13 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
         {({ open }) => (
           <div className="relative">
             <span className="inline-block w-full rounded-md shadow-sm">
-              <Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+              <Listbox.Button className="focus:shadow-outline-blue relative flex w-full cursor-default items-center rounded-md border border-gray-500 bg-gray-700 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                 {((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
                   (isUserSetting &&
                     !selectedRegion &&
                     currentSettings.region &&
                     hasFlag(currentSettings.region))) && (
-                  <span className="h-4 mr-2 overflow-hidden text-base leading-4">
+                  <span className="mr-2 h-4 overflow-hidden text-base leading-4">
                     <span
                       className={`flag:${
                         selectedRegion
@@ -108,8 +108,8 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                       })
                     : intl.formatMessage(messages.regionDefault)}
                 </span>
-                <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
-                  <ChevronDownIcon className="w-5 h-5" />
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">
+                  <ChevronDownIcon className="h-5 w-5" />
                 </span>
               </Listbox.Button>
             </span>
@@ -119,19 +119,19 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
               leave="transition ease-in duration-100"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
-              className="absolute w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+              className="absolute mt-1 w-full rounded-md bg-gray-800 shadow-lg"
             >
               <Listbox.Options
                 static
-                className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
+                className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
               >
                 {isUserSetting && (
                   <Listbox.Option value={null}>
                     {({ selected, active }) => (
                       <div
                         className={`${
-                          active ? 'text-white bg-indigo-600' : 'text-gray-300'
-                        } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
+                          active ? 'bg-indigo-600 text-white' : 'text-gray-300'
+                        } relative flex cursor-default select-none items-center py-2 pl-8 pr-4`}
                       >
                         <span className="mr-2 text-base">
                           <span
@@ -159,7 +159,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                               active ? 'text-white' : 'text-indigo-600'
                             } absolute inset-y-0 left-0 flex items-center pl-1.5`}
                           >
-                            <CheckIcon className="w-5 h-5" />
+                            <CheckIcon className="h-5 w-5" />
                           </span>
                         )}
                       </div>
@@ -170,8 +170,8 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                   {({ selected, active }) => (
                     <div
                       className={`${
-                        active ? 'text-white bg-indigo-600' : 'text-gray-300'
-                      } cursor-default select-none relative py-2 pl-8 pr-4`}
+                        active ? 'bg-indigo-600 text-white' : 'text-gray-300'
+                      } relative cursor-default select-none py-2 pl-8 pr-4`}
                     >
                       <span
                         className={`${
@@ -186,7 +186,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                             active ? 'text-white' : 'text-indigo-600'
                           } absolute inset-y-0 left-0 flex items-center pl-1.5`}
                         >
-                          <CheckIcon className="w-5 h-5" />
+                          <CheckIcon className="h-5 w-5" />
                         </span>
                       )}
                     </div>
@@ -197,8 +197,8 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                     {({ selected, active }) => (
                       <div
                         className={`${
-                          active ? 'text-white bg-indigo-600' : 'text-gray-300'
-                        } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
+                          active ? 'bg-indigo-600 text-white' : 'text-gray-300'
+                        } relative flex cursor-default select-none items-center py-2 pl-8 pr-4`}
                       >
                         <span className="mr-2 text-base">
                           <span
@@ -222,7 +222,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                               active ? 'text-white' : 'text-indigo-600'
                             } absolute inset-y-0 left-0 flex items-center pl-1.5`}
                           >
-                            <CheckIcon className="w-5 h-5" />
+                            <CheckIcon className="h-5 w-5" />
                           </span>
                         )}
                       </div>
diff --git a/src/components/RequestBlock/index.tsx b/src/components/RequestBlock/index.tsx
index e218d88da..073ffaebb 100644
--- a/src/components/RequestBlock/index.tsx
+++ b/src/components/RequestBlock/index.tsx
@@ -79,9 +79,9 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
       />
       <div className="px-4 py-3 text-gray-300">
         <div className="flex items-center justify-between">
-          <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5">
-            <div className="flex mb-1 flex-nowrap white">
-              <UserIcon className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5" />
+          <div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
+            <div className="white mb-1 flex flex-nowrap">
+              <UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
               <span className="w-40 truncate md:w-auto">
                 <Link
                   href={
@@ -98,7 +98,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             </div>
             {request.modifiedBy && (
               <div className="flex flex-nowrap">
-                <EyeIcon className="flex-shrink-0 mr-1.5 h-5 w-5" />
+                <EyeIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
                 <span className="w-40 truncate md:w-auto">
                   <Link
                     href={
@@ -115,7 +115,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
               </div>
             )}
           </div>
-          <div className="flex flex-wrap flex-shrink-0 ml-2">
+          <div className="ml-2 flex flex-shrink-0 flex-wrap">
             {request.status === MediaRequestStatus.PENDING && (
               <>
                 <Button
@@ -156,7 +156,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
         </div>
         <div className="mt-2 sm:flex sm:justify-between">
           <div className="sm:flex">
-            <div className="flex items-center mr-6 text-sm leading-5">
+            <div className="mr-6 flex items-center text-sm leading-5">
               {request.is4k && (
                 <span className="mr-1">
                   <Badge badgeType="warning">4K</Badge>
@@ -179,8 +179,8 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
               )}
             </div>
           </div>
-          <div className="flex items-center mt-2 text-sm leading-5 sm:mt-0">
-            <CalendarIcon className="flex-shrink-0 mr-1.5 h-5 w-5" />
+          <div className="mt-2 flex items-center text-sm leading-5 sm:mt-0">
+            <CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
             <span>
               {intl.formatDate(request.createdAt, {
                 year: 'numeric',
@@ -191,7 +191,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
           </div>
         </div>
         {(request.seasons ?? []).length > 0 && (
-          <div className="flex flex-col mt-2 text-sm">
+          <div className="mt-2 flex flex-col text-sm">
             <div className="mb-1 font-medium">
               {intl.formatMessage(messages.seasons, {
                 seasonCount: request.seasons.length,
@@ -201,7 +201,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
               {request.seasons.map((season) => (
                 <span
                   key={`season-${season.id}`}
-                  className="inline-block mb-1 mr-2"
+                  className="mb-1 mr-2 inline-block"
                 >
                   <Badge>{season.seasonNumber}</Badge>
                 </span>
@@ -214,7 +214,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             <div className="mt-4 mb-1 text-sm">
               {intl.formatMessage(messages.requestoverrides)}
             </div>
-            <ul className="px-2 text-xs bg-gray-800 divide-y divide-gray-700 rounded-md">
+            <ul className="divide-y divide-gray-700 rounded-md bg-gray-800 px-2 text-xs">
               {server && (
                 <li className="flex justify-between px-1 py-2">
                   <span className="font-bold">
diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
index 20fbac0ba..38cf541fc 100644
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -41,7 +41,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
 
 const RequestCardPlaceholder: React.FC = () => {
   return (
-    <div className="relative p-4 bg-gray-700 rounded-xl w-72 sm:w-96 animate-pulse">
+    <div className="relative w-72 animate-pulse rounded-xl bg-gray-700 p-4 sm:w-96">
       <div className="w-20 sm:w-28">
         <div className="w-full" style={{ paddingBottom: '150%' }} />
       </div>
@@ -63,11 +63,11 @@ const RequestCardError: React.FC<RequestCardErrorProps> = ({ mediaId }) => {
   };
 
   return (
-    <div className="relative p-4 bg-gray-800 ring-1 ring-red-500 rounded-xl w-72 sm:w-96">
+    <div className="relative w-72 rounded-xl bg-gray-800 p-4 ring-1 ring-red-500 sm:w-96">
       <div className="w-20 sm:w-28">
         <div className="w-full" style={{ paddingBottom: '150%' }}>
-          <div className="absolute inset-0 flex flex-col items-center justify-center w-full h-full px-10">
-            <div className="w-full text-xs text-center text-gray-300 whitespace-normal sm:text-sm">
+          <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center px-10">
+            <div className="w-full whitespace-normal text-center text-xs text-gray-300 sm:text-sm">
               {intl.formatMessage(messages.mediaerror)}
             </div>
             {hasPermission(Permission.MANAGE_REQUESTS) && mediaId && (
@@ -185,7 +185,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
           setShowEditModal(false);
         }}
       />
-      <div className="relative flex p-4 overflow-hidden text-gray-400 bg-gray-800 bg-center bg-cover shadow rounded-xl w-72 sm:w-96 ring-1 ring-gray-700">
+      <div className="relative flex w-72 overflow-hidden rounded-xl bg-gray-800 bg-cover bg-center p-4 text-gray-400 shadow ring-1 ring-gray-700 sm:w-96">
         {title.backdropPath && (
           <div className="absolute inset-0 z-0">
             <CachedImage
@@ -203,7 +203,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             />
           </div>
         )}
-        <div className="relative z-10 flex flex-col flex-1 min-w-0 pr-4">
+        <div className="relative z-10 flex min-w-0 flex-1 flex-col pr-4">
           <div className="hidden text-xs font-medium text-white sm:flex">
             {(isMovie(title) ? title.releaseDate : title.firstAirDate)?.slice(
               0,
@@ -217,7 +217,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                 : `/tv/${requestData.media.tmdbId}`
             }
           >
-            <a className="overflow-hidden text-base font-bold text-white sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
+            <a className="overflow-hidden overflow-ellipsis whitespace-nowrap text-base font-bold text-white hover:underline sm:text-lg">
               {isMovie(title) ? title.title : title.name}
             </a>
           </Link>
@@ -227,13 +227,13 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
           ) && (
             <div className="card-field">
               <Link href={`/users/${requestData.requestedBy.id}`}>
-                <a className="flex items-center group">
+                <a className="group flex items-center">
                   <img
                     src={requestData.requestedBy.avatar}
                     alt=""
                     className="avatar-sm"
                   />
-                  <span className="font-semibold truncate group-hover:underline group-hover:text-white">
+                  <span className="truncate font-semibold group-hover:text-white group-hover:underline">
                     {requestData.requestedBy.displayName}
                   </span>
                 </a>
@@ -241,7 +241,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             </div>
           )}
           {!isMovie(title) && request.seasons.length > 0 && (
-            <div className="items-center my-0.5 sm:my-1 text-sm hidden sm:flex">
+            <div className="my-0.5 hidden items-center text-sm sm:my-1 sm:flex">
               <span className="mr-2 font-bold ">
                 {intl.formatMessage(messages.seasons, {
                   seasonCount:
@@ -257,7 +257,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                   <Badge>{intl.formatMessage(globalMessages.all)}</Badge>
                 </span>
               ) : (
-                <div className="overflow-x-scroll hide-scrollbar">
+                <div className="hide-scrollbar overflow-x-scroll">
                   {request.seasons.map((season) => (
                     <span key={`season-${season.id}`} className="mr-2">
                       <Badge>{season.seasonNumber}</Badge>
@@ -267,8 +267,8 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
               )}
             </div>
           )}
-          <div className="flex items-center mt-2 text-sm sm:mt-1">
-            <span className="hidden mr-2 font-bold sm:block">
+          <div className="mt-2 flex items-center text-sm sm:mt-1">
+            <span className="mr-2 hidden font-bold sm:block">
               {intl.formatMessage(globalMessages.status)}
             </span>
             {requestData.status === MediaRequestStatus.DECLINED ? (
@@ -304,7 +304,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
               />
             )}
           </div>
-          <div className="flex items-end flex-1 space-x-2">
+          <div className="flex flex-1 items-end space-x-2">
             {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
               MediaStatus.UNKNOWN &&
               requestData.status !== MediaRequestStatus.DECLINED &&
@@ -319,7 +319,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                     className={isRetrying ? 'animate-spin' : ''}
                     style={{ marginRight: '0', animationDirection: 'reverse' }}
                   />
-                  <span className="hidden ml-1.5 sm:block">
+                  <span className="ml-1.5 hidden sm:block">
                     {intl.formatMessage(globalMessages.retry)}
                   </span>
                 </Button>
@@ -333,7 +333,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                     onClick={() => modifyRequest('approve')}
                   >
                     <CheckIcon style={{ marginRight: '0' }} />
-                    <span className="hidden ml-1.5 sm:block">
+                    <span className="ml-1.5 hidden sm:block">
                       {intl.formatMessage(globalMessages.approve)}
                     </span>
                   </Button>
@@ -343,7 +343,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                     onClick={() => modifyRequest('decline')}
                   >
                     <XIcon style={{ marginRight: '0' }} />
-                    <span className="hidden ml-1.5 sm:block">
+                    <span className="ml-1.5 hidden sm:block">
                       {intl.formatMessage(globalMessages.decline)}
                     </span>
                   </Button>
@@ -363,7 +363,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                   }`}
                 >
                   <PencilIcon style={{ marginRight: '0' }} />
-                  <span className="hidden ml-1.5 sm:block">
+                  <span className="ml-1.5 hidden sm:block">
                     {intl.formatMessage(globalMessages.edit)}
                   </span>
                 </Button>
@@ -377,7 +377,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                   onClick={() => deleteRequest()}
                 >
                   <XIcon style={{ marginRight: '0' }} />
-                  <span className="hidden ml-1.5 sm:block">
+                  <span className="ml-1.5 hidden sm:block">
                     {intl.formatMessage(globalMessages.cancel)}
                   </span>
                 </Button>
@@ -391,7 +391,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
               : `/tv/${requestData.media.tmdbId}`
           }
         >
-          <a className="flex-shrink-0 w-20 overflow-hidden transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer sm:w-28 transform-gpu hover:scale-105 hover:shadow-md">
+          <a className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28">
             <CachedImage
               src={
                 title.posterPath
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 7a0619f21..54a5a59ce 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -63,8 +63,8 @@ const RequestItemError: React.FC<RequestItemErroProps> = ({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center w-full h-64 px-10 bg-gray-800 lg:flex-row ring-1 ring-red-500 rounded-xl xl:h-28">
-      <span className="text-sm text-center text-gray-300 lg:text-left">
+    <div className="flex h-64 w-full flex-col items-center justify-center rounded-xl bg-gray-800 px-10 ring-1 ring-red-500 lg:flex-row xl:h-28">
+      <span className="text-center text-sm text-gray-300 lg:text-left">
         {intl.formatMessage(messages.mediaerror)}
       </span>
       {hasPermission(Permission.MANAGE_REQUESTS) && mediaId && (
@@ -148,7 +148,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
   if (!title && !error) {
     return (
       <div
-        className="w-full h-64 bg-gray-800 rounded-xl xl:h-28 animate-pulse"
+        className="h-64 w-full animate-pulse rounded-xl bg-gray-800 xl:h-28"
         ref={ref}
       />
     );
@@ -177,9 +177,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
           setShowEditModal(false);
         }}
       />
-      <div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-28 xl:flex-row">
+      <div className="relative flex w-full flex-col justify-between overflow-hidden rounded-xl bg-gray-800 py-4 text-gray-400 shadow-md ring-1 ring-gray-700 xl:h-28 xl:flex-row">
         {title.backdropPath && (
-          <div className="absolute inset-0 z-0 w-full bg-center bg-cover xl:w-2/3">
+          <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
             <CachedImage
               src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
               alt=""
@@ -195,8 +195,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
             />
           </div>
         )}
-        <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
-          <div className="relative z-10 flex items-center w-full pl-4 pr-4 overflow-hidden xl:w-7/12 2xl:w-2/3 sm:pr-0">
+        <div className="relative flex w-full flex-col justify-between overflow-hidden sm:flex-row">
+          <div className="relative z-10 flex w-full items-center overflow-hidden pl-4 pr-4 sm:pr-0 xl:w-7/12 2xl:w-2/3">
             <Link
               href={
                 requestData.type === 'movie'
@@ -204,7 +204,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   : `/tv/${requestData.media.tmdbId}`
               }
             >
-              <a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
+              <a className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105">
                 <CachedImage
                   src={
                     title.posterPath
@@ -219,8 +219,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 />
               </a>
             </Link>
-            <div className="flex flex-col justify-center pl-2 overflow-hidden xl:pl-4">
-              <div className="font-medium pt-0.5 sm:pt-1 text-xs text-white">
+            <div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+              <div className="pt-0.5 text-xs font-medium text-white sm:pt-1">
                 {(isMovie(title)
                   ? title.releaseDate
                   : title.firstAirDate
@@ -233,7 +233,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     : `/tv/${requestData.media.tmdbId}`
                 }
               >
-                <a className="min-w-0 mr-2 text-lg font-bold text-white truncate xl:text-xl hover:underline">
+                <a className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
                   {isMovie(title) ? title.title : title.name}
                 </a>
               </Link>
@@ -255,7 +255,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                       <Badge>{intl.formatMessage(globalMessages.all)}</Badge>
                     </span>
                   ) : (
-                    <div className="flex overflow-x-scroll hide-scrollbar flex-nowrap">
+                    <div className="hide-scrollbar flex flex-nowrap overflow-x-scroll">
                       {request.seasons.map((season) => (
                         <span key={`season-${season.id}`} className="mr-2">
                           <Badge>{season.seasonNumber}</Badge>
@@ -267,7 +267,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
               )}
             </div>
           </div>
-          <div className="z-10 flex flex-col justify-center w-full pr-4 mt-4 ml-4 overflow-hidden text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+          <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
             <div className="card-field">
               <span className="card-field-name">
                 {intl.formatMessage(globalMessages.status)}
@@ -317,7 +317,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   <span className="card-field-name">
                     {intl.formatMessage(messages.requested)}
                   </span>
-                  <span className="flex text-sm text-gray-300 truncate">
+                  <span className="flex truncate text-sm text-gray-300">
                     {intl.formatMessage(messages.modifieduserdate, {
                       date: (
                         <FormattedRelativeTime
@@ -332,13 +332,13 @@ const RequestItem: React.FC<RequestItemProps> = ({
                       ),
                       user: (
                         <Link href={`/users/${requestData.requestedBy.id}`}>
-                          <a className="flex items-center truncate group">
+                          <a className="group flex items-center truncate">
                             <img
                               src={requestData.requestedBy.avatar}
                               alt=""
-                              className="ml-1.5 avatar-sm"
+                              className="avatar-sm ml-1.5"
                             />
-                            <span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
+                            <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                               {requestData.requestedBy.displayName}
                             </span>
                           </a>
@@ -352,7 +352,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   <span className="card-field-name">
                     {intl.formatMessage(messages.requesteddate)}
                   </span>
-                  <span className="flex text-sm text-gray-300 truncate">
+                  <span className="flex truncate text-sm text-gray-300">
                     <FormattedRelativeTime
                       value={Math.floor(
                         (new Date(requestData.createdAt).getTime() -
@@ -371,7 +371,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 <span className="card-field-name">
                   {intl.formatMessage(messages.modified)}
                 </span>
-                <span className="flex text-sm text-gray-300 truncate">
+                <span className="flex truncate text-sm text-gray-300">
                   {intl.formatMessage(messages.modifieduserdate, {
                     date: (
                       <FormattedRelativeTime
@@ -386,13 +386,13 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     ),
                     user: (
                       <Link href={`/users/${requestData.modifiedBy.id}`}>
-                        <a className="flex items-center truncate group">
+                        <a className="group flex items-center truncate">
                           <img
                             src={requestData.modifiedBy.avatar}
                             alt=""
-                            className="ml-1.5 avatar-sm"
+                            className="avatar-sm ml-1.5"
                           />
-                          <span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
+                          <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {requestData.modifiedBy.displayName}
                           </span>
                         </a>
@@ -404,7 +404,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
             )}
           </div>
         </div>
-        <div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 space-y-2 xl:mt-0 xl:items-end xl:w-96 xl:pl-0">
+        <div className="z-10 mt-4 flex w-full flex-col justify-center space-y-2 pl-4 pr-4 xl:mt-0 xl:w-96 xl:items-end xl:pl-0">
           {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
             MediaStatus.UNKNOWN &&
             requestData.status !== MediaRequestStatus.DECLINED &&
@@ -439,7 +439,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
             )}
           {requestData.status === MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
-              <div className="flex flex-row w-full space-x-2">
+              <div className="flex w-full flex-row space-x-2">
                 <span className="w-full">
                   <Button
                     className="w-full"
diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx
index e192cb340..a21cbfdfc 100644
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -112,7 +112,7 @@ const RequestList: React.FC = () => {
           router.query.userId ? user?.displayName : '',
         ]}
       />
-      <div className="flex flex-col justify-between mb-4 lg:items-end lg:flex-row">
+      <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
         <Header
           subtext={
             router.query.userId ? (
@@ -126,10 +126,10 @@ const RequestList: React.FC = () => {
         >
           {intl.formatMessage(messages.requests)}
         </Header>
-        <div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
-          <div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
-            <span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
-              <FilterIcon className="w-6 h-6" />
+        <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
+          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <FilterIcon className="h-6 w-6" />
             </span>
             <select
               id="filter"
@@ -166,9 +166,9 @@ const RequestList: React.FC = () => {
               </option>
             </select>
           </div>
-          <div className="flex flex-grow mb-2 sm:mb-0 lg:flex-grow-0">
-            <span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default sm:text-sm rounded-l-md">
-              <SortDescendingIcon className="w-6 h-6" />
+          <div className="mb-2 flex flex-grow sm:mb-0 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
+              <SortDescendingIcon className="h-6 w-6" />
             </span>
             <select
               id="sort"
@@ -207,7 +207,7 @@ const RequestList: React.FC = () => {
       })}
 
       {data.results.length === 0 && (
-        <div className="flex flex-col items-center justify-center w-full py-24 text-white">
+        <div className="flex w-full flex-col items-center justify-center py-24 text-white">
           <span className="text-2xl text-gray-400">
             {intl.formatMessage(globalMessages.noresults)}
           </span>
@@ -225,7 +225,7 @@ const RequestList: React.FC = () => {
       )}
       <div className="actions">
         <nav
-          className="flex flex-col items-center mb-3 space-y-3 sm:space-y-0 sm:flex-row"
+          className="mb-3 flex flex-col items-center space-y-3 sm:flex-row sm:space-y-0"
           aria-label="Pagination"
         >
           <div className="hidden lg:flex lg:flex-1">
@@ -245,7 +245,7 @@ const RequestList: React.FC = () => {
             </p>
           </div>
           <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-            <span className="items-center -mt-3 text-sm truncate sm:mt-0">
+            <span className="-mt-3 items-center truncate text-sm sm:mt-0">
               {intl.formatMessage(globalMessages.resultsperpage, {
                 pageSize: (
                   <select
@@ -263,7 +263,7 @@ const RequestList: React.FC = () => {
                         .then(() => window.scrollTo(0, 0));
                     }}
                     value={currentPageSize}
-                    className="inline short"
+                    className="short inline"
                   >
                     <option value="5">5</option>
                     <option value="10">10</option>
@@ -275,7 +275,7 @@ const RequestList: React.FC = () => {
               })}
             </span>
           </div>
-          <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+          <div className="flex flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
             <Button
               disabled={!hasPrevPage}
               onClick={() => updateQueryParams('page', (page - 1).toString())}
diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index 9da6b5131..d4cead4ac 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -258,7 +258,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
 
   if (!data && !error) {
     return (
-      <div className="w-full mb-2">
+      <div className="mb-2 w-full">
         <SmallLoadingSpinner />
       </div>
     );
@@ -280,15 +280,15 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
 
   return (
     <>
-      <div className="flex items-center mt-4 mb-2 font-bold tracking-wider">
-        <AdjustmentsIcon className="w-5 h-5 mr-1.5" />
+      <div className="mt-4 mb-2 flex items-center font-bold tracking-wider">
+        <AdjustmentsIcon className="mr-1.5 h-5 w-5" />
         {intl.formatMessage(messages.advancedoptions)}
       </div>
-      <div className="p-4 bg-gray-600 rounded-md shadow">
+      <div className="rounded-md bg-gray-600 p-4 shadow">
         {!!data && selectedServer !== null && (
           <div className="flex flex-col md:flex-row">
             {data.filter((server) => server.is4k === is4k).length > 1 && (
-              <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
+              <div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
                 <label htmlFor="server">
                   {intl.formatMessage(messages.destinationserver)}
                 </label>
@@ -298,7 +298,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   value={selectedServer}
                   onChange={(e) => setSelectedServer(Number(e.target.value))}
                   onBlur={(e) => setSelectedServer(Number(e.target.value))}
-                  className="bg-gray-800 border-gray-700"
+                  className="border-gray-700 bg-gray-800"
                 >
                   {data
                     .filter((server) => server.is4k === is4k)
@@ -320,7 +320,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
             {(isValidating ||
               !serverData ||
               serverData.profiles.length > 1) && (
-              <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
+              <div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
                 <label htmlFor="profile">
                   {intl.formatMessage(messages.qualityprofile)}
                 </label>
@@ -330,7 +330,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   value={selectedProfile}
                   onChange={(e) => setSelectedProfile(Number(e.target.value))}
                   onBlur={(e) => setSelectedProfile(Number(e.target.value))}
-                  className="bg-gray-800 border-gray-700"
+                  className="border-gray-700 bg-gray-800"
                   disabled={isValidating || !serverData}
                 >
                   {(isValidating || !serverData) && (
@@ -364,7 +364,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
             {(isValidating ||
               !serverData ||
               serverData.rootFolders.length > 1) && (
-              <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
+              <div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
                 <label htmlFor="folder">
                   {intl.formatMessage(messages.rootfolder)}
                 </label>
@@ -374,7 +374,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   value={selectedFolder}
                   onChange={(e) => setSelectedFolder(e.target.value)}
                   onBlur={(e) => setSelectedFolder(e.target.value)}
-                  className="bg-gray-800 border-gray-700"
+                  className="border-gray-700 bg-gray-800"
                   disabled={isValidating || !serverData}
                 >
                   {(isValidating || !serverData) && (
@@ -418,7 +418,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
               (isValidating ||
                 !serverData ||
                 (serverData.languageProfiles ?? []).length > 1) && (
-                <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
+                <div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
                   <label htmlFor="language">
                     {intl.formatMessage(messages.languageprofile)}
                   </label>
@@ -432,7 +432,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                     onBlur={(e) =>
                       setSelectedLanguage(parseInt(e.target.value))
                     }
-                    className="bg-gray-800 border-gray-700"
+                    className="border-gray-700 bg-gray-800"
                     disabled={isValidating || !serverData}
                   >
                     {(isValidating || !serverData) && (
@@ -529,25 +529,25 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   </Listbox.Label>
                   <div className="relative">
                     <span className="inline-block w-full rounded-md shadow-sm">
-                      <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-800 border border-gray-700 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+                      <Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                         <span className="flex items-center">
                           <img
                             src={selectedUser.avatar}
                             alt=""
-                            className="flex-shrink-0 w-6 h-6 rounded-full"
+                            className="h-6 w-6 flex-shrink-0 rounded-full"
                           />
-                          <span className="block ml-3">
+                          <span className="ml-3 block">
                             {selectedUser.displayName}
                           </span>
                           {selectedUser.displayName.toLowerCase() !==
                             selectedUser.email && (
-                            <span className="ml-1 text-gray-400 truncate">
+                            <span className="ml-1 truncate text-gray-400">
                               ({selectedUser.email})
                             </span>
                           )}
                         </span>
-                        <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
-                          <ChevronDownIcon className="w-5 h-5" />
+                        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">
+                          <ChevronDownIcon className="h-5 w-5" />
                         </span>
                       </Listbox.Button>
                     </span>
@@ -560,11 +560,11 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                       leave="transition ease-in duration-100"
                       leaveFrom="opacity-100"
                       leaveTo="opacity-0"
-                      className="w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+                      className="mt-1 w-full rounded-md bg-gray-800 shadow-lg"
                     >
                       <Listbox.Options
                         static
-                        className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
+                        className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
                       >
                         {userData?.results.map((user) => (
                           <Listbox.Option key={user.id} value={user}>
@@ -572,9 +572,9 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                               <div
                                 className={`${
                                   active
-                                    ? 'text-white bg-indigo-600'
+                                    ? 'bg-indigo-600 text-white'
                                     : 'text-gray-300'
-                                } cursor-default select-none relative py-2 pl-8 pr-4`}
+                                } relative cursor-default select-none py-2 pl-8 pr-4`}
                               >
                                 <span
                                   className={`${
@@ -584,14 +584,14 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                                   <img
                                     src={user.avatar}
                                     alt=""
-                                    className="flex-shrink-0 w-6 h-6 rounded-full"
+                                    className="h-6 w-6 flex-shrink-0 rounded-full"
                                   />
-                                  <span className="flex-shrink-0 block ml-3">
+                                  <span className="ml-3 block flex-shrink-0">
                                     {user.displayName}
                                   </span>
                                   {user.displayName.toLowerCase() !==
                                     user.email && (
-                                    <span className="ml-1 text-gray-400 truncate">
+                                    <span className="ml-1 truncate text-gray-400">
                                       ({user.email})
                                     </span>
                                   )}
@@ -602,7 +602,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                                       active ? 'text-white' : 'text-indigo-600'
                                     } absolute inset-y-0 left-0 flex items-center pl-1.5`}
                                   >
-                                    <CheckIcon className="w-5 h-5" />
+                                    <CheckIcon className="h-5 w-5" />
                                   </span>
                                 )}
                               </div>
diff --git a/src/components/RequestModal/CollectionRequestModal.tsx b/src/components/RequestModal/CollectionRequestModal.tsx
index 512189f7c..5695760f3 100644
--- a/src/components/RequestModal/CollectionRequestModal.tsx
+++ b/src/components/RequestModal/CollectionRequestModal.tsx
@@ -300,7 +300,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
               <table className="min-w-full">
                 <thead>
                   <tr>
-                    <th className="w-16 px-4 py-3 bg-gray-500">
+                    <th className="w-16 bg-gray-500 px-4 py-3">
                       <span
                         role="checkbox"
                         tabIndex={0}
@@ -311,7 +311,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
                             toggleAllParts();
                           }
                         }}
-                        className={`relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none ${
+                        className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
                           quota?.movie.limit &&
                           (quota.movie.remaining ?? 0) < unrequestedParts.length
                             ? 'opacity-50'
@@ -322,25 +322,25 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
                           aria-hidden="true"
                           className={`${
                             isAllParts() ? 'bg-indigo-500' : 'bg-gray-800'
-                          } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                          } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
                         ></span>
                         <span
                           aria-hidden="true"
                           className={`${
                             isAllParts() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                          } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                         ></span>
                       </span>
                     </th>
-                    <th className="px-1 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
+                    <th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(globalMessages.movie)}
                     </th>
-                    <th className="px-2 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
+                    <th className="bg-gray-500 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(globalMessages.status)}
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-gray-600 divide-y divide-gray-700">
+                <tbody className="divide-y divide-gray-700 bg-gray-600">
                   {data?.parts.map((part) => {
                     const partRequest = getPartRequest(part.id);
                     const partMedia =
@@ -352,7 +352,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
 
                     return (
                       <tr key={`part-${part.id}`}>
-                        <td className="px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
+                        <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
                           <span
                             role="checkbox"
                             tabIndex={0}
@@ -365,7 +365,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
                                 togglePart(part.id);
                               }
                             }}
-                            className={`pt-2 relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
+                            className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
                               !!partMedia ||
                               partRequest ||
                               (quota?.movie.limit &&
@@ -383,7 +383,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
                                 isSelectedPart(part.id)
                                   ? 'bg-indigo-500'
                                   : 'bg-gray-800'
-                              } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                              } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
                             ></span>
                             <span
                               aria-hidden="true"
@@ -393,12 +393,12 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
                                 isSelectedPart(part.id)
                                   ? 'translate-x-5'
                                   : 'translate-x-0'
-                              } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                              } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                             ></span>
                           </span>
                         </td>
                         <td className="flex items-center px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
-                          <div className="relative flex-shrink-0 w-10 h-auto overflow-hidden rounded-md">
+                          <div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
                             <CachedImage
                               src={
                                 part.posterPath
@@ -421,7 +421,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
                             </div>
                           </div>
                         </td>
-                        <td className="py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6 whitespace-nowrap">
+                        <td className="whitespace-nowrap py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6">
                           {!partMedia && !partRequest && (
                             <Badge>
                               {intl.formatMessage(globalMessages.notrequested)}
diff --git a/src/components/RequestModal/QuotaDisplay/index.tsx b/src/components/RequestModal/QuotaDisplay/index.tsx
index 0b73c1b85..d5a268ba5 100644
--- a/src/components/RequestModal/QuotaDisplay/index.tsx
+++ b/src/components/RequestModal/QuotaDisplay/index.tsx
@@ -46,7 +46,7 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
   const [showDetails, setShowDetails] = useState(false);
   return (
     <div
-      className="flex flex-col p-4 my-4 bg-gray-800 rounded-md"
+      className="my-4 flex flex-col rounded-md bg-gray-800 p-4"
       onClick={() => setShowDetails((s) => !s)}
       onKeyDown={(e) => {
         if (e.key === 'Enter') {
@@ -58,7 +58,7 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
     >
       <div className="flex items-center">
         <ProgressCircle
-          className="w-8 h-8"
+          className="h-8 w-8"
           progress={Math.round(
             ((remaining ?? quota?.remaining ?? 0) / (quota?.limit ?? 1)) * 100
           )}
@@ -85,11 +85,11 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
                 })}
           </div>
         </div>
-        <div className="flex justify-end flex-1">
+        <div className="flex flex-1 justify-end">
           {showDetails ? (
-            <ChevronUpIcon className="w-6 h-6" />
+            <ChevronUpIcon className="h-6 w-6" />
           ) : (
-            <ChevronDownIcon className="w-6 h-6" />
+            <ChevronDownIcon className="h-6 w-6" />
           )}
         </div>
       </div>
diff --git a/src/components/RequestModal/SearchByNameModal/index.tsx b/src/components/RequestModal/SearchByNameModal/index.tsx
index fad62198e..e2dc3c457 100644
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -63,26 +63,26 @@ const SearchByNameModal: React.FC<SearchByNameModalProps> = ({
         {data?.slice(0, 6).map((item) => (
           <button
             key={item.tvdbId}
-            className="container flex flex-col items-center justify-center h-40 mx-auto space-y-4 transition scale-100 outline-none cursor-pointer focus:ring focus:ring-indigo-500 focus:ring-opacity-70 focus:outline-none rounded-xl transform-gpu hover:scale-105"
+            className="container mx-auto flex h-40 scale-100 transform-gpu cursor-pointer flex-col items-center justify-center space-y-4 rounded-xl outline-none transition hover:scale-105 focus:outline-none focus:ring focus:ring-indigo-500 focus:ring-opacity-70"
             onClick={() => handleClick(item.tvdbId)}
           >
             <div
-              className={`bg-gray-600 h-40 overflow-hidden w-full flex items-center p-2 rounded-xl shadow transition ${
+              className={`flex h-40 w-full items-center overflow-hidden rounded-xl bg-gray-600 p-2 shadow transition ${
                 tvdbId === item.tvdbId ? 'ring ring-indigo-500' : ''
               } `}
             >
-              <div className="flex items-center flex-none w-24 space-x-4">
+              <div className="flex w-24 flex-none items-center space-x-4">
                 <img
                   src={
                     item.remotePoster ??
                     '/images/overseerr_poster_not_found.png'
                   }
                   alt={item.title}
-                  className="w-auto rounded-md h-100"
+                  className="h-100 w-auto rounded-md"
                 />
               </div>
-              <div className="self-start flex-grow p-3 text-left">
-                <div className="text-sm font-medium text-grey-200">
+              <div className="flex-grow self-start p-3 text-left">
+                <div className="text-grey-200 text-sm font-medium">
                   {item.title}
                 </div>
                 <div className="h-24 overflow-hidden text-sm text-gray-400">
diff --git a/src/components/RequestModal/TvRequestModal.tsx b/src/components/RequestModal/TvRequestModal.tsx
index 9a879b486..0a6da80f0 100644
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/src/components/RequestModal/TvRequestModal.tsx
@@ -513,7 +513,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                 <thead>
                   <tr>
                     <th
-                      className={`w-16 px-4 py-3 bg-gray-500 ${
+                      className={`w-16 bg-gray-500 px-4 py-3 ${
                         !settings.currentSettings.partialRequestsEnabled &&
                         'hidden'
                       }`}
@@ -528,7 +528,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                             toggleAllSeasons();
                           }
                         }}
-                        className={`relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none ${
+                        className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
                           quota?.tv.remaining &&
                           quota.tv.limit &&
                           quota.tv.remaining < unrequestedSeasons.length
@@ -540,28 +540,28 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                           aria-hidden="true"
                           className={`${
                             isAllSeasons() ? 'bg-indigo-500' : 'bg-gray-800'
-                          } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                          } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
                         ></span>
                         <span
                           aria-hidden="true"
                           className={`${
                             isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                          } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                         ></span>
                       </span>
                     </th>
-                    <th className="px-1 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
+                    <th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(messages.season)}
                     </th>
-                    <th className="px-5 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
+                    <th className="bg-gray-500 px-5 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(messages.numberofepisodes)}
                     </th>
-                    <th className="px-2 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
+                    <th className="bg-gray-500 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(globalMessages.status)}
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-gray-600 divide-y divide-gray-700">
+                <tbody className="divide-y divide-gray-700 bg-gray-600">
                   {data?.seasons
                     .filter((season) => season.seasonNumber !== 0)
                     .map((season) => {
@@ -577,7 +577,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                       return (
                         <tr key={`season-${season.id}`}>
                           <td
-                            className={`px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap ${
+                            className={`whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100 ${
                               !settings.currentSettings
                                 .partialRequestsEnabled && 'hidden'
                             }`}
@@ -599,7 +599,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                   toggleSeason(season.seasonNumber);
                                 }
                               }}
-                              className={`pt-2 relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
+                              className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
                                 mediaSeason ||
                                 (quota?.tv.limit &&
                                   currentlyRemaining <= 0 &&
@@ -621,7 +621,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'bg-indigo-500'
                                     : 'bg-gray-800'
-                                } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                                } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
                               ></span>
                               <span
                                 aria-hidden="true"
@@ -634,21 +634,21 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                               ></span>
                             </span>
                           </td>
-                          <td className="px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6 whitespace-nowrap">
+                          <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                             {season.seasonNumber === 0
                               ? intl.formatMessage(messages.extras)
                               : intl.formatMessage(messages.seasonnumber, {
                                   number: season.seasonNumber,
                                 })}
                           </td>
-                          <td className="px-5 py-4 text-sm leading-5 text-gray-200 md:px-6 whitespace-nowrap">
+                          <td className="whitespace-nowrap px-5 py-4 text-sm leading-5 text-gray-200 md:px-6">
                             {season.episodeCount}
                           </td>
-                          <td className="py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6 whitespace-nowrap">
+                          <td className="whitespace-nowrap py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6">
                             {!seasonRequest && !mediaSeason && (
                               <Badge>
                                 {intl.formatMessage(
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index 1286c8dca..22fe34c66 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -32,7 +32,7 @@ const ResetPassword: React.FC = () => {
   });
 
   return (
-    <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
+    <div className="relative flex min-h-screen flex-col bg-gray-900 py-14">
       <PageTitle title={intl.formatMessage(messages.passwordreset)} />
       <ImageFader
         forceOptimize
@@ -45,12 +45,12 @@ const ResetPassword: React.FC = () => {
           '/images/rotate6.jpg',
         ]}
       />
-      <div className="absolute z-50 top-4 right-4">
+      <div className="absolute top-4 right-4 z-50">
         <LanguagePicker />
       </div>
-      <div className="relative z-40 flex flex-col items-center px-4 mt-10 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" />
-        <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
+      <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
+        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>
       </div>
@@ -62,10 +62,10 @@ const ResetPassword: React.FC = () => {
           <div className="px-10 py-8">
             {hasSubmitted ? (
               <>
-                <p className="text-gray-300 text-md">
+                <p className="text-md text-gray-300">
                   {intl.formatMessage(messages.requestresetlinksuccessmessage)}
                 </p>
-                <span className="flex justify-center mt-4 rounded-md shadow-sm">
+                <span className="mt-4 flex justify-center rounded-md shadow-sm">
                   <Link href="/login" passHref>
                     <Button as="a" buttonType="ghost">
                       <ArrowLeftIcon />
@@ -99,18 +99,18 @@ const ResetPassword: React.FC = () => {
                       <div>
                         <label
                           htmlFor="email"
-                          className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                          className="my-1 block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                         >
                           {intl.formatMessage(messages.email)}
                         </label>
-                        <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                        <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                           <div className="form-input-field">
                             <Field
                               id="email"
                               name="email"
                               type="text"
                               inputMode="email"
-                              className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                              className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                           </div>
                           {errors.email && touched.email && (
@@ -118,7 +118,7 @@ const ResetPassword: React.FC = () => {
                           )}
                         </div>
                       </div>
-                      <div className="pt-5 mt-4 border-t border-gray-700">
+                      <div className="mt-4 border-t border-gray-700 pt-5">
                         <div className="flex justify-end">
                           <span className="inline-flex rounded-md shadow-sm">
                             <Button
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 285459f25..2478e7311 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -48,7 +48,7 @@ const ResetPassword: React.FC = () => {
   });
 
   return (
-    <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
+    <div className="relative flex min-h-screen flex-col bg-gray-900 py-14">
       <ImageFader
         forceOptimize
         backgroundImages={[
@@ -60,12 +60,12 @@ const ResetPassword: React.FC = () => {
           '/images/rotate6.jpg',
         ]}
       />
-      <div className="absolute z-50 top-4 right-4">
+      <div className="absolute top-4 right-4 z-50">
         <LanguagePicker />
       </div>
-      <div className="relative z-40 flex flex-col items-center px-4 mt-10 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="max-w-full mb-10" alt="Logo" />
-        <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
+      <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
+        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>
       </div>
@@ -77,10 +77,10 @@ const ResetPassword: React.FC = () => {
           <div className="px-10 py-8">
             {hasSubmitted ? (
               <>
-                <p className="text-gray-300 text-md">
+                <p className="text-md text-gray-300">
                   {intl.formatMessage(messages.resetpasswordsuccessmessage)}
                 </p>
-                <span className="flex justify-center mt-4 rounded-md shadow-sm">
+                <span className="mt-4 flex justify-center rounded-md shadow-sm">
                   <Link href="/login" passHref>
                     <Button as="a" buttonType="ghost">
                       {intl.formatMessage(messages.gobacklogin)}
@@ -114,11 +114,11 @@ const ResetPassword: React.FC = () => {
                       <div>
                         <label
                           htmlFor="password"
-                          className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                          className="my-1 block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                         >
                           {intl.formatMessage(messages.password)}
                         </label>
-                        <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                        <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                           <div className="form-input-field">
                             <SensitiveInput
                               as="field"
@@ -126,7 +126,7 @@ const ResetPassword: React.FC = () => {
                               name="password"
                               type="password"
                               autoComplete="new-password"
-                              className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                              className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                           </div>
                           {errors.password && touched.password && (
@@ -135,11 +135,11 @@ const ResetPassword: React.FC = () => {
                         </div>
                         <label
                           htmlFor="confirmPassword"
-                          className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                          className="my-1 block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
                         >
                           {intl.formatMessage(messages.confirmpassword)}
                         </label>
-                        <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                        <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                           <div className="form-input-field">
                             <SensitiveInput
                               as="field"
@@ -147,7 +147,7 @@ const ResetPassword: React.FC = () => {
                               name="confirmPassword"
                               type="password"
                               autoComplete="new-password"
-                              className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                              className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                           </div>
                           {errors.confirmPassword &&
@@ -158,7 +158,7 @@ const ResetPassword: React.FC = () => {
                             )}
                         </div>
                       </div>
-                      <div className="pt-5 mt-4 border-t border-gray-700">
+                      <div className="mt-4 border-t border-gray-700 pt-5">
                         <div className="flex justify-end">
                           <span className="inline-flex rounded-md shadow-sm">
                             <Button
diff --git a/src/components/Settings/LibraryItem.tsx b/src/components/Settings/LibraryItem.tsx
index a1accde47..8d5b7ec73 100644
--- a/src/components/Settings/LibraryItem.tsx
+++ b/src/components/Settings/LibraryItem.tsx
@@ -13,9 +13,9 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
   onToggle,
 }) => {
   return (
-    <li className="flex col-span-1 rounded-md shadow-sm">
-      <div className="flex items-center justify-between flex-1 truncate bg-gray-600 border-t border-b border-r border-gray-700 rounded-md">
-        <div className="flex-1 px-4 py-6 text-sm leading-5 truncate cursor-default">
+    <li className="col-span-1 flex rounded-md shadow-sm">
+      <div className="flex flex-1 items-center justify-between truncate rounded-md border-t border-b border-r border-gray-700 bg-gray-600">
+        <div className="flex-1 cursor-default truncate px-4 py-6 text-sm leading-5">
           {name}
         </div>
         <div className="flex-shrink-0 pr-2">
@@ -31,31 +31,31 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
             }}
             className={`${
               isEnabled ? 'bg-indigo-600' : 'bg-gray-700'
-            } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring`}
+            } relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring`}
           >
             <span
               aria-hidden="true"
               className={`${
                 isEnabled ? 'translate-x-5' : 'translate-x-0'
-              } relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
+              } relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out`}
             >
               <span
                 className={`${
                   isEnabled
-                    ? 'opacity-0 ease-out duration-100'
-                    : 'opacity-100 ease-in duration-200'
-                } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
+                    ? 'opacity-0 duration-100 ease-out'
+                    : 'opacity-100 duration-200 ease-in'
+                } absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
               >
-                <XIcon className="w-3 h-3 text-gray-400" />
+                <XIcon className="h-3 w-3 text-gray-400" />
               </span>
               <span
                 className={`${
                   isEnabled
-                    ? 'opacity-100 ease-in duration-200'
-                    : 'opacity-0 ease-out duration-100'
-                } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
+                    ? 'opacity-100 duration-200 ease-in'
+                    : 'opacity-0 duration-100 ease-out'
+                } absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
               >
-                <CheckIcon className="w-3 h-3 text-indigo-600" />
+                <CheckIcon className="h-3 w-3 text-indigo-600" />
               </span>
             </span>
           </span>
diff --git a/src/components/Settings/Notifications/NotificationsDiscord.tsx b/src/components/Settings/Notifications/NotificationsDiscord.tsx
index 1c4bbbc4d..7373d10e0 100644
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -263,7 +263,7 @@ const NotificationsDiscord: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -280,7 +280,7 @@ const NotificationsDiscord: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsEmail.tsx b/src/components/Settings/Notifications/NotificationsEmail.tsx
index 93f22565c..1b81f2d25 100644
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -431,7 +431,7 @@ const NotificationsEmail: React.FC = () => {
             </div>
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -448,7 +448,7 @@ const NotificationsEmail: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsGotify/index.tsx b/src/components/Settings/Notifications/NotificationsGotify/index.tsx
index 5e4c895c7..f8f7d2867 100644
--- a/src/components/Settings/Notifications/NotificationsGotify/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsGotify/index.tsx
@@ -210,7 +210,7 @@ const NotificationsGotify: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -227,7 +227,7 @@ const NotificationsGotify: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
index 28e67b073..0aa1851dd 100644
--- a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
@@ -219,7 +219,7 @@ const NotificationsLunaSea: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -236,7 +236,7 @@ const NotificationsLunaSea: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
index a44893753..084a00edd 100644
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
@@ -213,7 +213,7 @@ const NotificationsPushbullet: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -230,7 +230,7 @@ const NotificationsPushbullet: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsPushover/index.tsx b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
index 87eef22ba..2ceba3810 100644
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -245,7 +245,7 @@ const NotificationsPushover: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -262,7 +262,7 @@ const NotificationsPushover: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsSlack/index.tsx b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
index 13a8b3017..c117c6e8b 100644
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -197,7 +197,7 @@ const NotificationsSlack: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -214,7 +214,7 @@ const NotificationsSlack: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsTelegram.tsx b/src/components/Settings/Notifications/NotificationsTelegram.tsx
index f43e74f16..8f2ca9c4e 100644
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -300,7 +300,7 @@ const NotificationsTelegram: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -317,7 +317,7 @@ const NotificationsTelegram: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
index 38587be7c..92d789804 100644
--- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
@@ -126,7 +126,7 @@ const NotificationsWebPush: React.FC = () => {
               </div>
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="warning"
                       disabled={isSubmitting || isTesting}
@@ -143,7 +143,7 @@ const NotificationsWebPush: React.FC = () => {
                       </span>
                     </Button>
                   </span>
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"
diff --git a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
index f86895996..3731923d7 100644
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
@@ -325,7 +325,7 @@ const NotificationsWebhook: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid || isTesting}
@@ -342,7 +342,7 @@ const NotificationsWebhook: React.FC = () => {
                     </span>
                   </Button>
                 </span>
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/Settings/SettingsAbout/Releases/index.tsx b/src/components/Settings/SettingsAbout/Releases/index.tsx
index cf8767946..81db42e54 100644
--- a/src/components/Settings/SettingsAbout/Releases/index.tsx
+++ b/src/components/Settings/SettingsAbout/Releases/index.tsx
@@ -57,7 +57,7 @@ const Release: React.FC<ReleaseProps> = ({
   const [isModalOpen, setModalOpen] = useState(false);
 
   return (
-    <div className="flex flex-col w-full px-4 py-2 space-y-3 bg-gray-800 rounded-md shadow-md sm:space-y-0 sm:space-x-3 sm:flex-row ring-1 ring-gray-700">
+    <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
       <Transition
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
@@ -84,9 +84,9 @@ const Release: React.FC<ReleaseProps> = ({
           </div>
         </Modal>
       </Transition>
-      <div className="flex items-center justify-center flex-grow w-full space-x-2 truncate sm:justify-start">
-        <span className="text-lg font-bold truncate">
-          <span className="mr-2 text-xs font-normal whitespace-nowrap">
+      <div className="flex w-full flex-grow items-center justify-center space-x-2 truncate sm:justify-start">
+        <span className="truncate text-lg font-bold">
+          <span className="mr-2 whitespace-nowrap text-xs font-normal">
             <FormattedRelativeTime
               value={Math.floor(
                 (new Date(release.created_at).getTime() - Date.now()) / 1000
@@ -139,7 +139,7 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
   return (
     <div>
       <h3 className="heading">{intl.formatMessage(messages.releases)}</h3>
-      <div className="space-y-3 section">
+      <div className="section space-y-3">
         {data.map((release, index) => {
           return (
             <div key={`release-${release.id}`}>
diff --git a/src/components/Settings/SettingsAbout/index.tsx b/src/components/Settings/SettingsAbout/index.tsx
index f1a24dddc..a9d41c1e5 100644
--- a/src/components/Settings/SettingsAbout/index.tsx
+++ b/src/components/Settings/SettingsAbout/index.tsx
@@ -60,19 +60,19 @@ const SettingsAbout: React.FC = () => {
           intl.formatMessage(globalMessages.settings),
         ]}
       />
-      <div className="p-4 mt-6 bg-indigo-700 rounded-md">
+      <div className="mt-6 rounded-md bg-indigo-700 p-4">
         <div className="flex">
           <div className="flex-shrink-0">
-            <InformationCircleIcon className="w-5 h-5 text-white" />
+            <InformationCircleIcon className="h-5 w-5 text-white" />
           </div>
-          <div className="flex-1 ml-3 md:flex md:justify-between">
+          <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm leading-5 text-white">
               {intl.formatMessage(messages.betawarning)}
             </p>
             <p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
               <a
                 href="http://github.com/sct/overseerr"
-                className="font-medium text-indigo-100 transition duration-150 ease-in-out whitespace-nowrap hover:text-white"
+                className="whitespace-nowrap font-medium text-indigo-100 transition duration-150 ease-in-out hover:text-white"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -113,7 +113,7 @@ const SettingsAbout: React.FC = () => {
                 >
                   <Badge
                     badgeType="warning"
-                    className="ml-2 transition !cursor-pointer hover:bg-yellow-400"
+                    className="ml-2 !cursor-pointer transition hover:bg-yellow-400"
                   >
                     {intl.formatMessage(messages.outofdate)}
                   </Badge>
@@ -130,7 +130,7 @@ const SettingsAbout: React.FC = () => {
                 >
                   <Badge
                     badgeType="success"
-                    className="ml-2 transition !cursor-pointer hover:bg-green-400"
+                    className="ml-2 !cursor-pointer transition hover:bg-green-400"
                   >
                     {intl.formatMessage(messages.uptodate)}
                   </Badge>
diff --git a/src/components/Settings/SettingsJobsCache/index.tsx b/src/components/Settings/SettingsJobsCache/index.tsx
index e9d234958..90731b5b8 100644
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -212,7 +212,7 @@ const SettingsJobs: React.FC = () => {
         >
           <div className="section">
             <form>
-              <div className="pb-6 form-row">
+              <div className="form-row pb-6">
                 <label htmlFor="jobSchedule" className="text-label">
                   {intl.formatMessage(messages.editJobSchedulePrompt)}
                 </label>
@@ -291,7 +291,7 @@ const SettingsJobs: React.FC = () => {
                         messages[job.id] ?? messages.unknownJob
                       )}
                     </span>
-                    {job.running && <Spinner className="w-5 h-5 ml-2" />}
+                    {job.running && <Spinner className="ml-2 h-5 w-5" />}
                   </div>
                 </Table.TD>
                 <Table.TD>
@@ -337,7 +337,7 @@ const SettingsJobs: React.FC = () => {
                     </Button>
                   ) : (
                     <Button buttonType="primary" onClick={() => runJob(job)}>
-                      <PlayIcon className="w-5 h-5 mr-1" />
+                      <PlayIcon className="mr-1 h-5 w-5" />
                       <span>{intl.formatMessage(messages.runnow)}</span>
                     </Button>
                   )}
diff --git a/src/components/Settings/SettingsLogs/index.tsx b/src/components/Settings/SettingsLogs/index.tsx
index a9e8c0cf6..b604e8ab9 100644
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -158,7 +158,7 @@ const SettingsLogs: React.FC = () => {
                   {intl.formatMessage(messages.time)}
                 </div>
                 <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                  <div className="flex items-center max-w-lg">
+                  <div className="flex max-w-lg items-center">
                     {intl.formatDate(activeLog.timestamp, {
                       year: 'numeric',
                       month: 'short',
@@ -175,7 +175,7 @@ const SettingsLogs: React.FC = () => {
                   {intl.formatMessage(messages.level)}
                 </div>
                 <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                  <div className="flex items-center max-w-lg">
+                  <div className="flex max-w-lg items-center">
                     <Badge
                       badgeType={
                         activeLog.level === 'error'
@@ -197,7 +197,7 @@ const SettingsLogs: React.FC = () => {
                   {intl.formatMessage(messages.label)}
                 </div>
                 <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                  <div className="flex items-center max-w-lg">
+                  <div className="flex max-w-lg items-center">
                     {activeLog.label}
                   </div>
                 </div>
@@ -207,7 +207,7 @@ const SettingsLogs: React.FC = () => {
                   {intl.formatMessage(messages.message)}
                 </div>
                 <div className="col-span-2 mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                  <div className="flex items-center max-w-lg">
+                  <div className="flex max-w-lg items-center">
                     {activeLog.message}
                   </div>
                 </div>
@@ -218,7 +218,7 @@ const SettingsLogs: React.FC = () => {
                     {intl.formatMessage(messages.extraData)}
                   </div>
                   <div className="col-span-2 mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                    <code className="block w-full px-6 py-4 overflow-auto whitespace-pre bg-gray-800 ring-1 ring-gray-700 max-h-64">
+                    <code className="block max-h-64 w-full overflow-auto whitespace-pre bg-gray-800 px-6 py-4 ring-1 ring-gray-700">
                       {JSON.stringify(activeLog.data, null, ' ')}
                     </code>
                   </div>
@@ -238,10 +238,10 @@ const SettingsLogs: React.FC = () => {
             configDir: appData ? appData.appDataPath : '/app/config',
           })}
         </p>
-        <div className="flex flex-row flex-grow mt-2 sm:flex-grow-0 sm:justify-end">
-          <div className="flex flex-row justify-between flex-1 mb-2 sm:mb-0 sm:flex-none">
+        <div className="mt-2 flex flex-grow flex-row sm:flex-grow-0 sm:justify-end">
+          <div className="mb-2 flex flex-1 flex-row justify-between sm:mb-0 sm:flex-none">
             <Button
-              className="flex-grow w-full mr-2"
+              className="mr-2 w-full flex-grow"
               buttonType={refreshInterval ? 'default' : 'primary'}
               onClick={() => toggleLogs()}
             >
@@ -253,9 +253,9 @@ const SettingsLogs: React.FC = () => {
               </span>
             </Button>
           </div>
-          <div className="flex flex-1 mb-2 sm:mb-0 sm:flex-none">
-            <span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
-              <FilterIcon className="w-6 h-6" />
+          <div className="mb-2 flex flex-1 sm:mb-0 sm:flex-none">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <FilterIcon className="h-6 w-6" />
             </span>
             <select
               id="filter"
@@ -325,7 +325,7 @@ const SettingsLogs: React.FC = () => {
                     {row.label ?? ''}
                   </Table.TD>
                   <Table.TD className="text-gray-300">{row.message}</Table.TD>
-                  <Table.TD className="flex flex-wrap items-center justify-end -m-1">
+                  <Table.TD className="-m-1 flex flex-wrap items-center justify-end">
                     {row.data && (
                       <Button
                         buttonType="primary"
@@ -352,7 +352,7 @@ const SettingsLogs: React.FC = () => {
             {data.results.length === 0 && (
               <tr className="relative h-24 p-2 text-white">
                 <Table.TD colSpan={5} noPadding>
-                  <div className="flex flex-col items-center justify-center w-screen p-6 md:w-full">
+                  <div className="flex w-screen flex-col items-center justify-center p-6 md:w-full">
                     <span className="text-base">
                       {intl.formatMessage(globalMessages.noresults)}
                     </span>
@@ -374,7 +374,7 @@ const SettingsLogs: React.FC = () => {
             <tr className="bg-gray-700">
               <Table.TD colSpan={5} noPadding>
                 <nav
-                  className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row md:w-full"
+                  className="flex w-screen flex-col items-center space-x-4 space-y-3 px-6 py-3 sm:flex-row sm:space-y-0 md:w-full"
                   aria-label="Pagination"
                 >
                   <div className="hidden lg:flex lg:flex-1">
@@ -395,7 +395,7 @@ const SettingsLogs: React.FC = () => {
                     </p>
                   </div>
                   <div className="flex justify-center sm:flex-1 sm:justify-start md:justify-center">
-                    <span className="items-center -mt-3 text-sm sm:-ml-4 md:ml-0 sm:mt-0">
+                    <span className="-mt-3 items-center text-sm sm:-ml-4 sm:mt-0 md:ml-0">
                       {intl.formatMessage(globalMessages.resultsperpage, {
                         pageSize: (
                           <select
@@ -408,7 +408,7 @@ const SettingsLogs: React.FC = () => {
                                 .then(() => window.scrollTo(0, 0));
                             }}
                             value={currentPageSize}
-                            className="inline short"
+                            className="short inline"
                           >
                             <option value="10">10</option>
                             <option value="25">25</option>
@@ -419,7 +419,7 @@ const SettingsLogs: React.FC = () => {
                       })}
                     </span>
                   </div>
-                  <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+                  <div className="flex flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
                     <Button
                       disabled={!hasPrevPage}
                       onClick={() =>
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 7f683206d..9879b56fb 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -398,7 +398,7 @@ const SettingsMain: React.FC = () => {
                 </div>
                 <div className="actions">
                   <div className="flex justify-end">
-                    <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <span className="ml-3 inline-flex rounded-md shadow-sm">
                       <Button
                         buttonType="primary"
                         type="submit"
diff --git a/src/components/Settings/SettingsNotifications.tsx b/src/components/Settings/SettingsNotifications.tsx
index fda48aeae..c086512ef 100644
--- a/src/components/Settings/SettingsNotifications.tsx
+++ b/src/components/Settings/SettingsNotifications.tsx
@@ -30,7 +30,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <MailIcon className="h-4 mr-2" />
+          <MailIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.email)}
         </span>
       ),
@@ -41,7 +41,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.webpush),
       content: (
         <span className="flex items-center">
-          <CloudIcon className="h-4 mr-2" />
+          <CloudIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.webpush)}
         </span>
       ),
@@ -52,7 +52,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'Discord',
       content: (
         <span className="flex items-center">
-          <DiscordLogo className="h-4 mr-2" />
+          <DiscordLogo className="mr-2 h-4" />
           Discord
         </span>
       ),
@@ -63,7 +63,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'Gotify',
       content: (
         <span className="flex items-center">
-          <GotifyLogo className="h-4 mr-2" />
+          <GotifyLogo className="mr-2 h-4" />
           Gotify
         </span>
       ),
@@ -74,7 +74,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'LunaSea',
       content: (
         <span className="flex items-center">
-          <LunaSeaLogo className="h-4 mr-2" />
+          <LunaSeaLogo className="mr-2 h-4" />
           LunaSea
         </span>
       ),
@@ -85,7 +85,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'Pushbullet',
       content: (
         <span className="flex items-center">
-          <PushbulletLogo className="h-4 mr-2" />
+          <PushbulletLogo className="mr-2 h-4" />
           Pushbullet
         </span>
       ),
@@ -96,7 +96,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'Pushover',
       content: (
         <span className="flex items-center">
-          <PushoverLogo className="h-4 mr-2" />
+          <PushoverLogo className="mr-2 h-4" />
           Pushover
         </span>
       ),
@@ -107,7 +107,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'Slack',
       content: (
         <span className="flex items-center">
-          <SlackLogo className="h-4 mr-2" />
+          <SlackLogo className="mr-2 h-4" />
           Slack
         </span>
       ),
@@ -118,7 +118,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: 'Telegram',
       content: (
         <span className="flex items-center">
-          <TelegramLogo className="h-4 mr-2" />
+          <TelegramLogo className="mr-2 h-4" />
           Telegram
         </span>
       ),
@@ -129,7 +129,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.webhook),
       content: (
         <span className="flex items-center">
-          <LightningBoltIcon className="h-4 mr-2" />
+          <LightningBoltIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.webhook)}
         </span>
       ),
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index 60d72df1d..5760a9593 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -506,7 +506,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
-                    <span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
+                    <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
                       {values.useSsl ? 'https://' : 'http://'}
                     </span>
                     <Field
@@ -594,7 +594,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               </div>
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"
@@ -637,7 +637,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               : intl.formatMessage(messages.scan)}
           </span>
         </Button>
-        <ul className="grid grid-cols-1 gap-5 mt-6 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <ul className="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
           {data?.libraries.map((library) => (
             <LibraryItem
               name={library.name}
@@ -655,11 +655,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
         </p>
       </div>
       <div className="section">
-        <div className="p-4 bg-gray-800 rounded-md">
-          <div className="relative w-full h-8 mb-6 overflow-hidden bg-gray-600 rounded-full">
+        <div className="rounded-md bg-gray-800 p-4">
+          <div className="relative mb-6 h-8 w-full overflow-hidden rounded-full bg-gray-600">
             {dataSync?.running && (
               <div
-                className="h-8 transition-all duration-200 ease-in-out bg-indigo-600"
+                className="h-8 bg-indigo-600 transition-all duration-200 ease-in-out"
                 style={{
                   width: `${Math.round(
                     (dataSync.progress / dataSync.total) * 100
@@ -667,7 +667,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                 }}
               />
             )}
-            <div className="absolute inset-0 flex items-center justify-center w-full h-8 text-sm">
+            <div className="absolute inset-0 flex h-8 w-full items-center justify-center text-sm">
               <span>
                 {dataSync?.running
                   ? `${dataSync.progress} of ${dataSync.total}`
@@ -675,11 +675,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               </span>
             </div>
           </div>
-          <div className="flex flex-col w-full sm:flex-row">
+          <div className="flex w-full flex-col sm:flex-row">
             {dataSync?.running && (
               <>
                 {dataSync.currentLibrary && (
-                  <div className="flex items-center mb-2 mr-0 sm:mb-0 sm:mr-2">
+                  <div className="mb-2 mr-0 flex items-center sm:mb-0 sm:mr-2">
                     <Badge>
                       {intl.formatMessage(messages.currentlibrary, {
                         name: dataSync.currentLibrary.name,
@@ -792,7 +792,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     </label>
                     <div className="form-input">
                       <div className="form-input-field">
-                        <span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
+                        <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
                           {values.tautulliUseSsl ? 'https://' : 'http://'}
                         </span>
                         <Field
@@ -904,7 +904,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   </div>
                   <div className="actions">
                     <div className="flex justify-end">
-                      <span className="inline-flex ml-3 rounded-md shadow-sm">
+                      <span className="ml-3 inline-flex rounded-md shadow-sm">
                         <Button
                           buttonType="primary"
                           type="submit"
diff --git a/src/components/Settings/SettingsServices.tsx b/src/components/Settings/SettingsServices.tsx
index f98f88f34..a54a44946 100644
--- a/src/components/Settings/SettingsServices.tsx
+++ b/src/components/Settings/SettingsServices.tsx
@@ -79,14 +79,14 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
   const serviceUrl = externalUrl ?? internalUrl;
 
   return (
-    <li className="col-span-1 bg-gray-800 rounded-lg shadow ring-1 ring-gray-500">
-      <div className="flex items-center justify-between w-full p-6 space-x-6">
+    <li className="col-span-1 rounded-lg bg-gray-800 shadow ring-1 ring-gray-500">
+      <div className="flex w-full items-center justify-between space-x-6 p-6">
         <div className="flex-1 truncate">
-          <div className="flex items-center mb-2 space-x-2">
-            <h3 className="font-medium leading-5 text-white truncate">
+          <div className="mb-2 flex items-center space-x-2">
+            <h3 className="truncate font-medium leading-5 text-white">
               <a
                 href={serviceUrl}
-                className="transition duration-300 hover:underline hover:text-white"
+                className="transition duration-300 hover:text-white hover:underline"
               >
                 {name}
               </a>
@@ -108,18 +108,18 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
               </Badge>
             )}
           </div>
-          <p className="mt-1 text-sm leading-5 text-gray-300 truncate">
+          <p className="mt-1 truncate text-sm leading-5 text-gray-300">
             <span className="mr-2 font-bold">
               {intl.formatMessage(messages.address)}
             </span>
             <a
               href={internalUrl}
-              className="transition duration-300 hover:underline hover:text-white"
+              className="transition duration-300 hover:text-white hover:underline"
             >
               {internalUrl}
             </a>
           </p>
-          <p className="mt-1 text-sm leading-5 text-gray-300 truncate">
+          <p className="mt-1 truncate text-sm leading-5 text-gray-300">
             <span className="mr-2 font-bold">
               {intl.formatMessage(messages.activeProfile)}
             </span>
@@ -128,29 +128,29 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
         </div>
         <a href={serviceUrl} className="opacity-50 hover:opacity-100">
           {isSonarr ? (
-            <SonarrLogo className="flex-shrink-0 w-10 h-10" />
+            <SonarrLogo className="h-10 w-10 flex-shrink-0" />
           ) : (
-            <RadarrLogo className="flex-shrink-0 w-10 h-10" />
+            <RadarrLogo className="h-10 w-10 flex-shrink-0" />
           )}
         </a>
       </div>
       <div className="border-t border-gray-500">
-        <div className="flex -mt-px">
-          <div className="flex flex-1 w-0 border-r border-gray-500">
+        <div className="-mt-px flex">
+          <div className="flex w-0 flex-1 border-r border-gray-500">
             <button
               onClick={() => onEdit()}
-              className="relative inline-flex items-center justify-center flex-1 w-0 py-4 -mr-px text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10"
+              className="focus:ring-blue relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
             >
-              <PencilIcon className="w-5 h-5 mr-2" />
+              <PencilIcon className="mr-2 h-5 w-5" />
               <span>{intl.formatMessage(globalMessages.edit)}</span>
             </button>
           </div>
-          <div className="flex flex-1 w-0 -ml-px">
+          <div className="-ml-px flex w-0 flex-1">
             <button
               onClick={() => onDelete()}
-              className="relative inline-flex items-center justify-center flex-1 w-0 py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10"
+              className="focus:ring-blue relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
             >
-              <TrashIcon className="w-5 h-5 mr-2" />
+              <TrashIcon className="mr-2 h-5 w-5" />
               <span>{intl.formatMessage(globalMessages.delete)}</span>
             </button>
           </div>
@@ -334,8 +334,8 @@ const SettingsServices: React.FC = () => {
                   }
                 />
               ))}
-              <li className="h-32 col-span-1 border-2 border-gray-400 border-dashed rounded-lg shadow sm:h-44">
-                <div className="flex items-center justify-center w-full h-full">
+              <li className="col-span-1 h-32 rounded-lg border-2 border-dashed border-gray-400 shadow sm:h-44">
+                <div className="flex h-full w-full items-center justify-center">
                   <Button
                     buttonType="ghost"
                     className="mt-3 mb-3"
@@ -425,8 +425,8 @@ const SettingsServices: React.FC = () => {
                   }
                 />
               ))}
-              <li className="h-32 col-span-1 border-2 border-gray-400 border-dashed rounded-lg shadow sm:h-44">
-                <div className="flex items-center justify-center w-full h-full">
+              <li className="col-span-1 h-32 rounded-lg border-2 border-dashed border-gray-400 shadow sm:h-44">
+                <div className="flex h-full w-full items-center justify-center">
                   <Button
                     buttonType="ghost"
                     onClick={() =>
diff --git a/src/components/Settings/SettingsUsers/index.tsx b/src/components/Settings/SettingsUsers/index.tsx
index 4204ebe67..02a7c40dc 100644
--- a/src/components/Settings/SettingsUsers/index.tsx
+++ b/src/components/Settings/SettingsUsers/index.tsx
@@ -197,7 +197,7 @@ const SettingsUsers: React.FC = () => {
                 </div>
                 <div className="actions">
                   <div className="flex justify-end">
-                    <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <span className="ml-3 inline-flex rounded-md shadow-sm">
                       <Button
                         buttonType="primary"
                         type="submit"
diff --git a/src/components/Setup/LoginWithPlex.tsx b/src/components/Setup/LoginWithPlex.tsx
index d79e66c22..90d4425b4 100644
--- a/src/components/Setup/LoginWithPlex.tsx
+++ b/src/components/Setup/LoginWithPlex.tsx
@@ -45,10 +45,10 @@ const LoginWithPlex: React.FC<LoginWithPlexProps> = ({ onComplete }) => {
 
   return (
     <form>
-      <div className="flex justify-center mb-2 text-xl font-bold">
+      <div className="mb-2 flex justify-center text-xl font-bold">
         {intl.formatMessage(messages.welcome)}
       </div>
-      <div className="flex justify-center pb-6 mb-2 text-sm">
+      <div className="mb-2 flex justify-center pb-6 text-sm">
         {intl.formatMessage(messages.signinMessage)}
       </div>
       <div className="flex items-center justify-center">
diff --git a/src/components/Setup/SetupSteps.tsx b/src/components/Setup/SetupSteps.tsx
index df65f56b4..cee5263df 100644
--- a/src/components/Setup/SetupSteps.tsx
+++ b/src/components/Setup/SetupSteps.tsx
@@ -17,14 +17,14 @@ const SetupSteps: React.FC<CurrentStep> = ({
   isLastStep = false,
 }) => {
   return (
-    <li className="relative md:flex-1 md:flex">
-      <div className="flex items-center px-6 py-4 space-x-4 text-sm font-medium leading-5">
+    <li className="relative md:flex md:flex-1">
+      <div className="flex items-center space-x-4 px-6 py-4 text-sm font-medium leading-5">
         <div
-          className={`flex-shrink-0 w-10 h-10 flex items-center justify-center border-2
+          className={`flex h-10 w-10 flex-shrink-0 items-center justify-center border-2
           ${active ? 'border-indigo-600 ' : 'border-white '}
-          ${completed ? 'bg-indigo-600 border-indigo-600 ' : ''} rounded-full`}
+          ${completed ? 'border-indigo-600 bg-indigo-600 ' : ''} rounded-full`}
         >
-          {completed && <CheckIcon className="w-6 h-6 text-white" />}
+          {completed && <CheckIcon className="h-6 w-6 text-white" />}
           {!completed && (
             <p className={active ? 'text-white' : 'text-indigo-200'}>
               {stepNumber}
@@ -32,7 +32,7 @@ const SetupSteps: React.FC<CurrentStep> = ({
           )}
         </div>
         <p
-          className={`text-sm leading-5 font-medium ${
+          className={`text-sm font-medium leading-5 ${
             active ? 'text-white' : 'text-indigo-200'
           }`}
         >
@@ -41,9 +41,9 @@ const SetupSteps: React.FC<CurrentStep> = ({
       </div>
 
       {!isLastStep && (
-        <div className="absolute top-0 right-0 hidden w-5 h-full md:block">
+        <div className="absolute top-0 right-0 hidden h-full w-5 md:block">
           <svg
-            className="w-full h-full text-gray-600"
+            className="h-full w-full text-gray-600"
             viewBox="0 0 22 80"
             fill="none"
             preserveAspectRatio="none"
diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index c4a754dc4..a1916290a 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -58,7 +58,7 @@ const Setup: React.FC = () => {
   });
 
   return (
-    <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
+    <div className="relative flex min-h-screen flex-col justify-center bg-gray-900 py-12">
       <PageTitle title={intl.formatMessage(messages.setup)} />
       <ImageFader
         backgroundImages={
@@ -67,19 +67,19 @@ const Setup: React.FC = () => {
           ) ?? []
         }
       />
-      <div className="absolute z-50 top-4 right-4">
+      <div className="absolute top-4 right-4 z-50">
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
         <img
           src="/logo_stacked.svg"
-          className="max-w-full mb-10 sm:max-w-md sm:mx-auto"
+          className="mb-10 max-w-full sm:mx-auto sm:max-w-md"
           alt="Logo"
         />
         <AppDataWarning />
         <nav className="relative z-50">
           <ul
-            className="bg-gray-800 bg-opacity-50 border border-gray-600 divide-y divide-gray-600 rounded-md md:flex md:divide-y-0"
+            className="divide-y divide-gray-600 rounded-md border border-gray-600 bg-gray-800 bg-opacity-50 md:flex md:divide-y-0"
             style={{ backdropFilter: 'blur(5px)' }}
           >
             <SetupSteps
@@ -102,7 +102,7 @@ const Setup: React.FC = () => {
             />
           </ul>
         </nav>
-        <div className="w-full p-4 mt-10 text-white bg-gray-800 bg-opacity-50 border border-gray-600 rounded-md">
+        <div className="mt-10 w-full rounded-md border border-gray-600 bg-gray-800 bg-opacity-50 p-4 text-white">
           {currentStep === 1 && (
             <LoginWithPlex onComplete={() => setCurrentStep(2)} />
           )}
@@ -117,7 +117,7 @@ const Setup: React.FC = () => {
               </div>
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       disabled={!plexSettingsComplete}
@@ -135,7 +135,7 @@ const Setup: React.FC = () => {
               <SettingsServices />
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       onClick={() => finishSetup()}
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 8dd5f8b51..89b3173d6 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -155,7 +155,7 @@ const Slider: React.FC<SliderProps> = ({
 
   return (
     <div className="relative">
-      <div className="absolute right-0 flex -mt-10 text-gray-400">
+      <div className="absolute right-0 -mt-10 flex text-gray-400">
         <button
           className={`${
             scrollPos.isStart ? 'text-gray-800' : 'hover:text-white'
@@ -163,7 +163,7 @@ const Slider: React.FC<SliderProps> = ({
           onClick={() => slide(Direction.LEFT)}
           disabled={scrollPos.isStart}
         >
-          <ChevronLeftIcon className="w-6 h-6" />
+          <ChevronLeftIcon className="h-6 w-6" />
         </button>
         <button
           className={`${
@@ -172,11 +172,11 @@ const Slider: React.FC<SliderProps> = ({
           onClick={() => slide(Direction.RIGHT)}
           disabled={scrollPos.isEnd}
         >
-          <ChevronRightIcon className="w-6 h-6" />
+          <ChevronRightIcon className="h-6 w-6" />
         </button>
       </div>
       <div
-        className="relative px-2 py-2 -my-2 -ml-4 -mr-4 overflow-x-scroll overflow-y-auto whitespace-nowrap hide-scrollbar overscroll-x-contain"
+        className="hide-scrollbar relative -my-2 -ml-4 -mr-4 overflow-y-auto overflow-x-scroll overscroll-x-contain whitespace-nowrap px-2 py-2"
         ref={containerRef}
         onScroll={onScroll}
       >
diff --git a/src/components/StatusBadge/index.tsx b/src/components/StatusBadge/index.tsx
index cf02db003..b6e64b61b 100644
--- a/src/components/StatusBadge/index.tsx
+++ b/src/components/StatusBadge/index.tsx
@@ -48,7 +48,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
                 status: intl.formatMessage(globalMessages.available),
               })}
             </span>
-            {inProgress && <Spinner className="w-3 h-3 ml-1" />}
+            {inProgress && <Spinner className="ml-1 h-3 w-3" />}
           </div>
         </Badge>
       );
@@ -62,7 +62,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
                 status: intl.formatMessage(globalMessages.partiallyavailable),
               })}
             </span>
-            {inProgress && <Spinner className="w-3 h-3 ml-1" />}
+            {inProgress && <Spinner className="ml-1 h-3 w-3" />}
           </div>
         </Badge>
       );
@@ -78,7 +78,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
                   : intl.formatMessage(globalMessages.requested),
               })}
             </span>
-            {inProgress && <Spinner className="w-3 h-3 ml-1" />}
+            {inProgress && <Spinner className="ml-1 h-3 w-3" />}
           </div>
         </Badge>
       );
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index e017d9a89..df95cc317 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -88,7 +88,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
         onCancel={closeModal}
       />
       <div
-        className={`transition duration-300 transform-gpu outline-none cursor-default relative bg-gray-800 bg-cover rounded-xl ring-1 overflow-hidden ${
+        className={`relative transform-gpu cursor-default overflow-hidden rounded-xl bg-gray-800 bg-cover outline-none ring-1 transition duration-300 ${
           showDetail
             ? 'scale-105 shadow-lg ring-gray-500'
             : 'scale-100 shadow ring-gray-700'
@@ -111,9 +111,9 @@ const TitleCard: React.FC<TitleCardProps> = ({
         role="link"
         tabIndex={0}
       >
-        <div className="absolute inset-0 w-full h-full overflow-hidden">
+        <div className="absolute inset-0 h-full w-full overflow-hidden">
           <CachedImage
-            className="absolute inset-0 w-full h-full"
+            className="absolute inset-0 h-full w-full"
             alt=""
             src={
               image
@@ -125,34 +125,34 @@ const TitleCard: React.FC<TitleCardProps> = ({
           />
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div
-              className={`rounded-full z-40 pointer-events-none shadow ${
+              className={`pointer-events-none z-40 rounded-full shadow ${
                 mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
               }`}
             >
-              <div className="flex items-center h-4 px-2 py-2 text-xs font-medium tracking-wider text-center text-white uppercase sm:h-5">
+              <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
                 {mediaType === 'movie'
                   ? intl.formatMessage(globalMessages.movie)
                   : intl.formatMessage(globalMessages.tvshow)}
               </div>
             </div>
-            <div className="z-40 pointer-events-none">
+            <div className="pointer-events-none z-40">
               {(currentStatus === MediaStatus.AVAILABLE ||
                 currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
-                <div className="flex items-center justify-center w-4 h-4 text-white bg-green-400 rounded-full shadow sm:w-5 sm:h-5">
-                  <CheckIcon className="w-3 h-3 sm:w-4 sm:h-4" />
+                <div className="flex h-4 w-4 items-center justify-center rounded-full bg-green-400 text-white shadow sm:h-5 sm:w-5">
+                  <CheckIcon className="h-3 w-3 sm:h-4 sm:w-4" />
                 </div>
               )}
               {currentStatus === MediaStatus.PENDING && (
-                <div className="flex items-center justify-center w-4 h-4 text-white bg-yellow-500 rounded-full shadow sm:w-5 sm:h-5">
-                  <BellIcon className="w-3 h-3 sm:w-4 sm:h-4" />
+                <div className="flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-white shadow sm:h-5 sm:w-5">
+                  <BellIcon className="h-3 w-3 sm:h-4 sm:w-4" />
                 </div>
               )}
               {currentStatus === MediaStatus.PROCESSING && (
-                <div className="flex items-center justify-center w-4 h-4 text-white bg-indigo-500 rounded-full shadow sm:w-5 sm:h-5">
+                <div className="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-500 text-white shadow sm:h-5 sm:w-5">
                   {inProgress ? (
-                    <Spinner className="w-3 h-3" />
+                    <Spinner className="h-3 w-3" />
                   ) : (
-                    <ClockIcon className="w-3 h-3 sm:w-4 sm:h-4" />
+                    <ClockIcon className="h-3 w-3 sm:h-4 sm:w-4" />
                   )}
                 </div>
               )}
@@ -167,8 +167,8 @@ const TitleCard: React.FC<TitleCardProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="absolute inset-0 z-40 flex items-center justify-center text-white bg-gray-800 bg-opacity-75 rounded-xl">
-              <Spinner className="w-10 h-10" />
+            <div className="absolute inset-0 z-40 flex items-center justify-center rounded-xl bg-gray-800 bg-opacity-75 text-white">
+              <Spinner className="h-10 w-10" />
             </div>
           </Transition>
 
@@ -184,13 +184,13 @@ const TitleCard: React.FC<TitleCardProps> = ({
             <div className="absolute inset-0 overflow-hidden rounded-xl">
               <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
                 <a
-                  className="absolute inset-0 w-full h-full overflow-hidden text-left cursor-pointer"
+                  className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left"
                   style={{
                     background:
                       'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
                   }}
                 >
-                  <div className="flex items-end w-full h-full">
+                  <div className="flex h-full w-full items-end">
                     <div
                       className={`px-2 text-white ${
                         !showRequestButton ||
@@ -204,7 +204,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                       )}
 
                       <h1
-                        className="text-xl font-bold leading-tight whitespace-normal"
+                        className="whitespace-normal text-xl font-bold leading-tight"
                         style={{
                           WebkitLineClamp: 3,
                           display: '-webkit-box',
@@ -216,7 +216,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                         {title}
                       </h1>
                       <div
-                        className="text-xs whitespace-normal"
+                        className="whitespace-normal text-xs"
                         style={{
                           WebkitLineClamp:
                             !showRequestButton ||
@@ -247,7 +247,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                         e.preventDefault();
                         setShowRequestModal(true);
                       }}
-                      className="w-full h-7"
+                      className="h-7 w-full"
                     >
                       <DownloadIcon />
                       <span>{intl.formatMessage(globalMessages.request)}</span>
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index a93c699fe..39d8e68b7 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -16,7 +16,7 @@ const Toast: React.FC<ToastProps> = ({
   transitionState,
 }) => {
   return (
-    <div className="flex items-end justify-center max-w-full px-2 py-2 pointer-events-none toast sm:items-start sm:justify-end">
+    <div className="toast pointer-events-none flex max-w-full items-end justify-center px-2 py-2 sm:items-start sm:justify-end">
       <Transition
         show={transitionState === 'entered'}
         enter="transition duration-300 transform-gpu"
@@ -26,31 +26,31 @@ const Toast: React.FC<ToastProps> = ({
         leaveFrom="opacity-100 scale-100"
         leaveTo="opacity-0 scale-90"
       >
-        <div className="w-full max-w-sm bg-gray-800 rounded-lg shadow-lg pointer-events-auto ring-1 ring-gray-500">
+        <div className="pointer-events-auto w-full max-w-sm rounded-lg bg-gray-800 shadow-lg ring-1 ring-gray-500">
           <div className="overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5">
             <div className="p-4">
               <div className="flex items-start">
                 <div className="flex-shrink-0">
                   {appearance === 'success' && (
-                    <CheckCircleIcon className="w-6 h-6 text-green-400" />
+                    <CheckCircleIcon className="h-6 w-6 text-green-400" />
                   )}
                   {appearance === 'error' && (
-                    <ExclamationCircleIcon className="w-6 h-6 text-red-500" />
+                    <ExclamationCircleIcon className="h-6 w-6 text-red-500" />
                   )}
                   {appearance === 'info' && (
-                    <InformationCircleIcon className="w-6 h-6 text-indigo-500" />
+                    <InformationCircleIcon className="h-6 w-6 text-indigo-500" />
                   )}
                   {appearance === 'warning' && (
-                    <ExclamationIcon className="w-6 h-6 text-orange-400" />
+                    <ExclamationIcon className="h-6 w-6 text-orange-400" />
                   )}
                 </div>
-                <div className="flex-1 w-0 ml-3 text-white">{children}</div>
-                <div className="flex flex-shrink-0 ml-4">
+                <div className="ml-3 w-0 flex-1 text-white">{children}</div>
+                <div className="ml-4 flex flex-shrink-0">
                   <button
                     onClick={() => onDismiss()}
-                    className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:outline-none focus:text-gray-500"
+                    className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:text-gray-500 focus:outline-none"
                   >
-                    <XIcon className="w-5 h-5" />
+                    <XIcon className="h-5 w-5" />
                   </button>
                 </div>
               </div>
diff --git a/src/components/ToastContainer/index.tsx b/src/components/ToastContainer/index.tsx
index 5f77e703a..e9e048c41 100644
--- a/src/components/ToastContainer/index.tsx
+++ b/src/components/ToastContainer/index.tsx
@@ -8,7 +8,7 @@ const ToastContainer: React.FC<ToastContainerProps> = ({
   return (
     <div
       id="toast-container"
-      className="box-border fixed right-0 max-w-full max-h-full px-4 overflow-hidden top-4"
+      className="fixed right-0 top-4 box-border max-h-full max-w-full overflow-hidden px-4"
       style={{
         pointerEvents: hasToasts ? 'all' : 'none',
         zIndex: 10000,
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index ee1b7a52e..0df7dab6b 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -158,7 +158,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
   )?.rating;
   if (contentRating) {
     seriesAttributes.push(
-      <span className="p-0.5 py-0 border rounded-md">{contentRating}</span>
+      <span className="rounded-md border p-0.5 py-0">{contentRating}</span>
     );
   }
 
@@ -373,8 +373,8 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                   ) ?? []
                 ).length > 0 && (
                   <>
-                    <div className="absolute w-3 h-3 bg-red-600 rounded-full -right-1 -top-1" />
-                    <div className="absolute w-3 h-3 bg-red-600 rounded-full -right-1 -top-1 animate-ping" />
+                    <div className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-red-600" />
+                    <div className="absolute -right-1 -top-1 h-3 w-3 animate-ping rounded-full bg-red-600" />
                   </>
                 )}
             </Button>
@@ -416,11 +416,11 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                     </li>
                   ))}
               </ul>
-              <div className="flex justify-end mt-4">
+              <div className="mt-4 flex justify-end">
                 <Link href={`/tv/${data.id}/crew`}>
                   <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
                     <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowCircleRightIcon className="inline-block w-5 h-5 ml-1.5" />
+                    <ArrowCircleRightIcon className="ml-1.5 inline-block h-5 w-5" />
                   </a>
                 </Link>
               </div>
@@ -436,9 +436,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 {ratingData?.criticsRating && !!ratingData?.criticsScore && (
                   <span className="media-rating">
                     {ratingData.criticsRating === 'Rotten' ? (
-                      <RTRotten className="w-6 mr-1" />
+                      <RTRotten className="mr-1 w-6" />
                     ) : (
-                      <RTFresh className="w-6 mr-1" />
+                      <RTFresh className="mr-1 w-6" />
                     )}
                     {ratingData.criticsScore}%
                   </span>
@@ -446,16 +446,16 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 {ratingData?.audienceRating && !!ratingData?.audienceScore && (
                   <span className="media-rating">
                     {ratingData.audienceRating === 'Spilled' ? (
-                      <RTAudRotten className="w-6 mr-1" />
+                      <RTAudRotten className="mr-1 w-6" />
                     ) : (
-                      <RTAudFresh className="w-6 mr-1" />
+                      <RTAudFresh className="mr-1 w-6" />
                     )}
                     {ratingData.audienceScore}%
                   </span>
                 )}
                 {!!data.voteCount && (
                   <span className="media-rating">
-                    <TmdbLogo className="w-6 mr-2" />
+                    <TmdbLogo className="mr-2 w-6" />
                     {data.voteAverage}/10
                   </span>
                 )}
diff --git a/src/components/UserList/PlexImportModal.tsx b/src/components/UserList/PlexImportModal.tsx
index 7e9377931..9b5df2e04 100644
--- a/src/components/UserList/PlexImportModal.tsx
+++ b/src/components/UserList/PlexImportModal.tsx
@@ -141,7 +141,7 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
                   <table className="min-w-full">
                     <thead>
                       <tr>
-                        <th className="w-16 px-4 py-3 bg-gray-500">
+                        <th className="w-16 bg-gray-500 px-4 py-3">
                           <span
                             role="checkbox"
                             tabIndex={0}
@@ -152,31 +152,31 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
                                 toggleAllUsers();
                               }
                             }}
-                            className="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none"
+                            className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
                           >
                             <span
                               aria-hidden="true"
                               className={`${
                                 isAllUsers() ? 'bg-indigo-500' : 'bg-gray-800'
-                              } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                              } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
                             ></span>
                             <span
                               aria-hidden="true"
                               className={`${
                                 isAllUsers() ? 'translate-x-5' : 'translate-x-0'
-                              } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                              } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                             ></span>
                           </span>
                         </th>
-                        <th className="px-1 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
+                        <th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                           {intl.formatMessage(messages.user)}
                         </th>
                       </tr>
                     </thead>
-                    <tbody className="bg-gray-600 divide-y divide-gray-700">
+                    <tbody className="divide-y divide-gray-700 bg-gray-600">
                       {data?.map((user) => (
                         <tr key={`user-${user.id}`}>
-                          <td className="px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
+                          <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
                             <span
                               role="checkbox"
                               tabIndex={0}
@@ -187,7 +187,7 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
                                   toggleUser(user.id);
                                 }
                               }}
-                              className="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none"
+                              className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
                             >
                               <span
                                 aria-hidden="true"
@@ -195,7 +195,7 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
                                   isSelectedUser(user.id)
                                     ? 'bg-indigo-500'
                                     : 'bg-gray-800'
-                                } absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
+                                } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
                               ></span>
                               <span
                                 aria-hidden="true"
@@ -203,14 +203,14 @@ const PlexImportModal: React.FC<PlexImportProps> = ({
                                   isSelectedUser(user.id)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                               ></span>
                             </span>
                           </td>
-                          <td className="px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6 whitespace-nowrap">
+                          <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                             <div className="flex items-center">
                               <img
-                                className="flex-shrink-0 w-10 h-10 rounded-full"
+                                className="h-10 w-10 flex-shrink-0 rounded-full"
                                 src={user.thumb}
                                 alt=""
                               />
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 1a0e06c46..1682a7f3d 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -471,12 +471,12 @@ const UserList: React.FC = () => {
         />
       </Transition>
 
-      <div className="flex flex-col justify-between lg:items-end lg:flex-row">
+      <div className="flex flex-col justify-between lg:flex-row lg:items-end">
         <Header>{intl.formatMessage(messages.userlist)}</Header>
-        <div className="flex flex-col flex-grow mt-2 lg:flex-row lg:flex-grow-0">
-          <div className="flex flex-col justify-between flex-grow mb-2 sm:flex-row lg:mb-0 lg:flex-grow-0">
+        <div className="mt-2 flex flex-grow flex-col lg:flex-grow-0 lg:flex-row">
+          <div className="mb-2 flex flex-grow flex-col justify-between sm:flex-row lg:mb-0 lg:flex-grow-0">
             <Button
-              className="flex-grow mb-2 sm:mb-0 sm:mr-2"
+              className="mb-2 flex-grow sm:mb-0 sm:mr-2"
               buttonType="primary"
               onClick={() => setCreateModal({ isOpen: true })}
             >
@@ -492,9 +492,9 @@ const UserList: React.FC = () => {
               <span>{intl.formatMessage(messages.importfromplex)}</span>
             </Button>
           </div>
-          <div className="flex flex-grow mb-2 lg:mb-0 lg:flex-grow-0">
-            <span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
-              <SortDescendingIcon className="w-6 h-6" />
+          <div className="mb-2 flex flex-grow lg:mb-0 lg:flex-grow-0">
+            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+              <SortDescendingIcon className="h-6 w-6" />
             </span>
             <select
               id="sort"
@@ -573,9 +573,9 @@ const UserList: React.FC = () => {
               <Table.TD>
                 <div className="flex items-center">
                   <Link href={`/users/${user.id}`}>
-                    <a className="flex-shrink-0 w-10 h-10">
+                    <a className="h-10 w-10 flex-shrink-0">
                       <img
-                        className="w-10 h-10 rounded-full"
+                        className="h-10 w-10 rounded-full"
                         src={user.avatar}
                         alt=""
                       />
@@ -666,7 +666,7 @@ const UserList: React.FC = () => {
           <tr className="bg-gray-700">
             <Table.TD colSpan={8} noPadding>
               <nav
-                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
+                className="flex w-screen flex-col items-center space-x-4 space-y-3 px-6 py-3 sm:flex-row sm:space-y-0 lg:w-full"
                 aria-label="Pagination"
               >
                 <div className="hidden lg:flex lg:flex-1">
@@ -686,7 +686,7 @@ const UserList: React.FC = () => {
                   </p>
                 </div>
                 <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
+                  <span className="-mt-3 items-center text-sm sm:-ml-4 sm:mt-0 lg:ml-0">
                     {intl.formatMessage(globalMessages.resultsperpage, {
                       pageSize: (
                         <select
@@ -699,7 +699,7 @@ const UserList: React.FC = () => {
                               .then(() => window.scrollTo(0, 0));
                           }}
                           value={currentPageSize}
-                          className="inline short"
+                          className="short inline"
                         >
                           <option value="5">5</option>
                           <option value="10">10</option>
@@ -711,7 +711,7 @@ const UserList: React.FC = () => {
                     })}
                   </span>
                 </div>
-                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+                <div className="flex flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
                   <Button
                     disabled={!hasPrevPage}
                     onClick={() =>
diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index a1f971fc6..f677a0088 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -40,11 +40,11 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 
   return (
     <div className="relative z-40 mt-6 mb-12 lg:flex lg:items-end lg:justify-between lg:space-x-5">
-      <div className="flex items-end space-x-5 justify-items-end">
+      <div className="flex items-end justify-items-end space-x-5">
         <div className="flex-shrink-0">
           <div className="relative">
             <img
-              className="w-24 h-24 bg-gray-600 rounded-full ring-1 ring-gray-700"
+              className="h-24 w-24 rounded-full bg-gray-600 ring-1 ring-gray-700"
               src={user.avatar}
               alt=""
             />
@@ -55,18 +55,18 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           </div>
         </div>
         <div className="pt-1.5">
-          <h1 className="flex flex-col mb-1 sm:items-center sm:flex-row">
+          <h1 className="mb-1 flex flex-col sm:flex-row sm:items-center">
             <Link
               href={
                 user.id === loggedInUser?.id ? '/profile' : `/users/${user.id}`
               }
             >
-              <a className="text-lg font-bold text-transparent sm:text-2xl bg-clip-text bg-gradient-to-br from-indigo-400 to-purple-400 hover:to-purple-200">
+              <a className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-lg font-bold text-transparent hover:to-purple-200 sm:text-2xl">
                 {user.displayName}
               </a>
             </Link>
             {user.email && user.displayName.toLowerCase() !== user.email && (
-              <span className="text-sm text-gray-400 sm:text-lg sm:ml-2">
+              <span className="text-sm text-gray-400 sm:ml-2 sm:text-lg">
                 ({user.email})
               </span>
             )}
@@ -80,7 +80,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           </p>
         </div>
       </div>
-      <div className="flex flex-col-reverse mt-6 space-y-4 space-y-reverse justify-stretch lg:flex-row lg:justify-end lg:space-x-reverse lg:space-y-0 lg:space-x-3">
+      <div className="justify-stretch mt-6 flex flex-col-reverse space-y-4 space-y-reverse lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-3 lg:space-x-reverse">
         {(loggedInUser?.id === user.id ||
           (user.id !== 1 && hasPermission(Permission.MANAGE_USERS))) &&
         !isSettingsPage ? (
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index eb30b0b4c..fafb76d53 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -160,7 +160,7 @@ const UserGeneralSettings: React.FC = () => {
                   {intl.formatMessage(messages.accounttype)}
                 </label>
                 <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                  <div className="flex items-center max-w-lg">
+                  <div className="flex max-w-lg items-center">
                     {user?.userType === UserType.PLEX ? (
                       <Badge badgeType="warning">
                         {intl.formatMessage(messages.plexuser)}
@@ -178,7 +178,7 @@ const UserGeneralSettings: React.FC = () => {
                   {intl.formatMessage(messages.role)}
                 </label>
                 <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
-                  <div className="flex items-center max-w-lg">
+                  <div className="flex max-w-lg items-center">
                     {user?.id === 1
                       ? intl.formatMessage(messages.owner)
                       : hasPermission(Permission.ADMIN)
@@ -284,7 +284,7 @@ const UserGeneralSettings: React.FC = () => {
                       </label>
                       <div className="form-input">
                         <div className="flex flex-col">
-                          <div className="flex items-center mb-4">
+                          <div className="mb-4 flex items-center">
                             <input
                               type="checkbox"
                               checked={movieQuotaEnabled}
@@ -324,7 +324,7 @@ const UserGeneralSettings: React.FC = () => {
                       </label>
                       <div className="form-input">
                         <div className="flex flex-col">
-                          <div className="flex items-center mb-4">
+                          <div className="mb-4 flex items-center">
                             <input
                               type="checkbox"
                               checked={tvQuotaEnabled}
@@ -360,7 +360,7 @@ const UserGeneralSettings: React.FC = () => {
                 )}
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
index 121f7a69e..4f31cbc8f 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
@@ -148,7 +148,7 @@ const UserNotificationsDiscord: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
index 9f7eb8102..544698453 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
@@ -146,7 +146,7 @@ const UserEmailSettings: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
index 754d2ae63..19dca65c6 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
@@ -153,7 +153,7 @@ const UserPushbulletSettings: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
index 25bada64e..cc3fbabe1 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
@@ -210,7 +210,7 @@ const UserPushoverSettings: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
index 489b971e5..c6433f484 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
@@ -184,7 +184,7 @@ const UserTelegramSettings: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
index 99ffef005..4a932cb99 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
@@ -98,7 +98,7 @@ const UserWebPushSettings: React.FC = () => {
             />
             <div className="actions">
               <div className="flex justify-end">
-                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
index 6f2cc64f1..0c50ac7c7 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -35,7 +35,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <MailIcon className="h-4 mr-2" />
+          <MailIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.email)}
         </span>
       ),
@@ -47,7 +47,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.webpush),
       content: (
         <span className="flex items-center">
-          <CloudIcon className="h-4 mr-2" />
+          <CloudIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.webpush)}
         </span>
       ),
@@ -59,7 +59,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: 'Discord',
       content: (
         <span className="flex items-center">
-          <DiscordLogo className="h-4 mr-2" />
+          <DiscordLogo className="mr-2 h-4" />
           Discord
         </span>
       ),
@@ -70,7 +70,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: 'Pushbullet',
       content: (
         <span className="flex items-center">
-          <PushbulletLogo className="h-4 mr-2" />
+          <PushbulletLogo className="mr-2 h-4" />
           Pushbullet
         </span>
       ),
@@ -81,7 +81,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: 'Pushover',
       content: (
         <span className="flex items-center">
-          <PushoverLogo className="h-4 mr-2" />
+          <PushoverLogo className="mr-2 h-4" />
           Pushover
         </span>
       ),
@@ -92,7 +92,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: 'Telegram',
       content: (
         <span className="flex items-center">
-          <TelegramLogo className="h-4 mr-2" />
+          <TelegramLogo className="mr-2 h-4" />
           Telegram
         </span>
       ),
diff --git a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
index 6a3fd42aa..c78023588 100644
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -162,7 +162,7 @@ const UserPasswordChange: React.FC = () => {
                 />
               )}
               {data.hasPassword && user?.id === currentUser?.id && (
-                <div className="pb-6 form-row">
+                <div className="form-row pb-6">
                   <label htmlFor="currentPassword" className="text-label">
                     {intl.formatMessage(messages.currentpassword)}
                   </label>
@@ -222,7 +222,7 @@ const UserPasswordChange: React.FC = () => {
               </div>
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"
diff --git a/src/components/UserProfile/UserSettings/UserPermissions/index.tsx b/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
index 814e590c9..1d9fe22d5 100644
--- a/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
@@ -115,7 +115,7 @@ const UserPermissions: React.FC = () => {
               </div>
               <div className="actions">
                 <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"
diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
index fd9680d76..c6c016db4 100644
--- a/src/components/UserProfile/index.tsx
+++ b/src/components/UserProfile/index.tsx
@@ -101,7 +101,7 @@ const UserProfile: React.FC = () => {
     <>
       <PageTitle title={user.displayName} />
       {Object.keys(availableTitles).length > 0 && (
-        <div className="absolute left-0 right-0 z-0 -top-16 h-96">
+        <div className="absolute left-0 right-0 -top-16 z-0 h-96">
           <ImageFader
             key={user.id}
             isDarker
@@ -123,9 +123,9 @@ const UserProfile: React.FC = () => {
             { type: 'and' }
           )) && (
           <div className="relative z-40">
-            <dl className="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-3">
-              <div className="px-4 py-5 overflow-hidden bg-gray-800 bg-opacity-50 rounded-lg shadow ring-1 ring-gray-700 sm:p-6">
-                <dt className="text-sm font-bold text-gray-300 truncate">
+            <dl className="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
+              <div className="overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6">
+                <dt className="truncate text-sm font-bold text-gray-300">
                   {intl.formatMessage(messages.totalrequests)}
                 </dt>
                 <dd className="mt-1 text-3xl font-semibold text-white">
@@ -133,14 +133,14 @@ const UserProfile: React.FC = () => {
                 </dd>
               </div>
               <div
-                className={`px-4 py-5 overflow-hidden bg-gray-800 bg-opacity-50 rounded-lg shadow ring-1 ${
+                className={`overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ${
                   quota.movie.restricted
-                    ? 'ring-red-500 from-red-900 to-transparent bg-gradient-to-t'
+                    ? 'bg-gradient-to-t from-red-900 to-transparent ring-red-500'
                     : 'ring-gray-700'
                 } sm:p-6`}
               >
                 <dt
-                  className={`text-sm font-bold truncate ${
+                  className={`truncate text-sm font-bold ${
                     quota.movie.restricted ? 'text-red-500' : 'text-gray-300'
                   }`}
                 >
@@ -152,7 +152,7 @@ const UserProfile: React.FC = () => {
                     : intl.formatMessage(messages.movierequests)}
                 </dt>
                 <dd
-                  className={`flex mt-1 text-sm items-center ${
+                  className={`mt-1 flex items-center text-sm ${
                     quota.movie.restricted ? 'text-red-500' : 'text-white'
                   }`}
                 >
@@ -165,7 +165,7 @@ const UserProfile: React.FC = () => {
                             100
                         )}
                         useHeatLevel
-                        className="w-8 h-8 mr-2"
+                        className="mr-2 h-8 w-8"
                       />
                       <div>
                         {intl.formatMessage(messages.requestsperdays, {
@@ -188,14 +188,14 @@ const UserProfile: React.FC = () => {
                 </dd>
               </div>
               <div
-                className={`px-4 py-5 overflow-hidden bg-gray-800 bg-opacity-50 rounded-lg shadow ring-1 ${
+                className={`overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ${
                   quota.tv.restricted
-                    ? 'ring-red-500 from-red-900 to-transparent bg-gradient-to-t'
+                    ? 'bg-gradient-to-t from-red-900 to-transparent ring-red-500'
                     : 'ring-gray-700'
                 } sm:p-6`}
               >
                 <dt
-                  className={`text-sm font-bold truncate ${
+                  className={`truncate text-sm font-bold ${
                     quota.tv.restricted ? 'text-red-500' : 'text-gray-300'
                   }`}
                 >
@@ -207,7 +207,7 @@ const UserProfile: React.FC = () => {
                     : intl.formatMessage(messages.seriesrequest)}
                 </dt>
                 <dd
-                  className={`flex items-center mt-1 text-sm ${
+                  className={`mt-1 flex items-center text-sm ${
                     quota.tv.restricted ? 'text-red-500' : 'text-white'
                   }`}
                 >
@@ -220,7 +220,7 @@ const UserProfile: React.FC = () => {
                             100
                         )}
                         useHeatLevel
-                        className="w-8 h-8 mr-2"
+                        className="mr-2 h-8 w-8"
                       />
                       <div>
                         {intl.formatMessage(messages.requestsperdays, {
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index da7507505..f4589467b 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -23,9 +23,9 @@ const Custom404: React.FC = () => {
         })}
       </div>
       <Link href="/">
-        <a className="flex mt-2">
+        <a className="mt-2 flex">
           {intl.formatMessage(messages.returnHome)}
-          <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+          <ArrowCircleRightIcon className="ml-2 h-6 w-6" />
         </a>
       </Link>
     </div>
diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
index d14568eb3..0241bf7f0 100644
--- a/src/pages/_error.tsx
+++ b/src/pages/_error.tsx
@@ -46,9 +46,9 @@ const Error: NextPage<ErrorProps> = ({ statusCode }) => {
           : getErrorMessage(statusCode)}
       </div>
       <Link href="/">
-        <a className="flex mt-2">
+        <a className="mt-2 flex">
           {intl.formatMessage(messages.returnHome)}
-          <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+          <ArrowCircleRightIcon className="ml-2 h-6 w-6" />
         </a>
       </Link>
     </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 36fa5482a..2d207872e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -14,7 +14,7 @@
   }
 
   code {
-    @apply px-2 py-1 bg-gray-800 rounded-md;
+    @apply rounded-md bg-gray-800 px-2 py-1;
   }
 
   input[type='search']::-webkit-search-cancel-button {
@@ -45,7 +45,7 @@
   }
 
   .plex-button {
-    @apply flex justify-center w-full px-4 py-2 text-sm font-medium text-center text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md disabled:opacity-50;
+    @apply flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-center text-sm font-medium text-white transition duration-150 ease-in-out disabled:opacity-50;
     background-color: #cc7b19;
   }
 
@@ -67,11 +67,11 @@
   }
 
   .slider-header {
-    @apply relative flex mt-6 mb-4;
+    @apply relative mt-6 mb-4 flex;
   }
 
   .slider-title {
-    @apply inline-flex items-center text-xl font-bold leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
+    @apply inline-flex items-center text-xl font-bold leading-7 text-gray-300 sm:truncate sm:text-2xl sm:leading-9;
   }
 
   a.slider-title {
@@ -79,17 +79,17 @@
   }
 
   a.slider-title svg {
-    @apply w-6 h-6 ml-2;
+    @apply ml-2 h-6 w-6;
   }
 
   .media-page {
-    @apply relative px-4 -mx-4 bg-center bg-cover;
+    @apply relative -mx-4 bg-cover bg-center px-4;
     margin-top: calc(-4rem - env(safe-area-inset-top));
     padding-top: calc(4rem + env(safe-area-inset-top));
   }
 
   .media-page-bg-image {
-    @apply absolute inset-0 w-full h-full;
+    @apply absolute inset-0 h-full w-full;
     z-index: -10;
   }
 
@@ -98,7 +98,7 @@
   }
 
   .media-poster {
-    @apply w-32 overflow-hidden rounded shadow md:rounded-lg md:shadow-2xl md:w-44 xl:w-52 xl:mr-4;
+    @apply w-32 overflow-hidden rounded shadow md:w-44 md:rounded-lg md:shadow-2xl xl:mr-4 xl:w-52;
   }
 
   .media-status {
@@ -106,7 +106,7 @@
   }
 
   .media-title {
-    @apply flex flex-col flex-1 mt-4 text-center text-white xl:mr-4 xl:mt-0 xl:text-left;
+    @apply mt-4 flex flex-1 flex-col text-center text-white xl:mr-4 xl:mt-0 xl:text-left;
   }
 
   .media-title > h1 {
@@ -118,7 +118,7 @@
   }
 
   .media-attributes {
-    @apply flex flex-wrap items-center justify-center mt-1 space-x-1 text-xs text-gray-300 sm:text-sm xl:text-base xl:mt-0 xl:justify-start;
+    @apply mt-1 flex flex-wrap items-center justify-center space-x-1 text-xs text-gray-300 sm:text-sm xl:mt-0 xl:justify-start xl:text-base;
   }
 
   .media-attributes a {
@@ -126,7 +126,7 @@
   }
 
   .media-actions {
-    @apply relative flex flex-wrap items-center justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap xl:mt-0;
+    @apply relative mt-4 flex flex-shrink-0 flex-wrap items-center justify-center sm:flex-nowrap sm:justify-end xl:mt-0;
   }
 
   .media-actions > * {
@@ -154,45 +154,45 @@
   }
 
   ul.media-crew {
-    @apply grid grid-cols-2 gap-6 mt-6 sm:grid-cols-3;
+    @apply mt-6 grid grid-cols-2 gap-6 sm:grid-cols-3;
   }
 
   ul.media-crew > li {
-    @apply flex flex-col col-span-1 font-bold text-gray-300;
+    @apply col-span-1 flex flex-col font-bold text-gray-300;
   }
 
   a.crew-name,
   .media-fact-value a,
   .media-fact-value button {
-    @apply font-normal text-gray-400 transition duration-300 hover:underline hover:text-gray-100;
+    @apply font-normal text-gray-400 transition duration-300 hover:text-gray-100 hover:underline;
   }
 
   .media-overview-right {
-    @apply w-full mt-8 lg:w-80 lg:mt-0;
+    @apply mt-8 w-full lg:mt-0 lg:w-80;
   }
 
   .media-facts {
-    @apply text-sm font-bold text-gray-300 bg-gray-900 border border-gray-700 rounded-lg shadow;
+    @apply rounded-lg border border-gray-700 bg-gray-900 text-sm font-bold text-gray-300 shadow;
   }
 
   .media-fact {
-    @apply flex justify-between px-4 py-2 border-b border-gray-700 last:border-b-0;
+    @apply flex justify-between border-b border-gray-700 px-4 py-2 last:border-b-0;
   }
 
   .media-fact-value {
-    @apply ml-2 text-sm font-normal text-right text-gray-400;
+    @apply ml-2 text-right text-sm font-normal text-gray-400;
   }
 
   .media-ratings {
-    @apply flex items-center justify-center px-4 py-2 font-medium border-b border-gray-700 last:border-b-0;
+    @apply flex items-center justify-center border-b border-gray-700 px-4 py-2 font-medium last:border-b-0;
   }
 
   .media-rating {
-    @apply flex items-center mr-4 last:mr-0;
+    @apply mr-4 flex items-center last:mr-0;
   }
 
   .error-message {
-    @apply relative top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center h-screen text-center text-gray-300;
+    @apply relative top-0 bottom-0 left-0 right-0 flex h-screen flex-col items-center justify-center text-center text-gray-300;
   }
 
   .heading {
@@ -200,15 +200,15 @@
   }
 
   .description {
-    @apply max-w-4xl mt-1 text-sm leading-5 text-gray-400;
+    @apply mt-1 max-w-4xl text-sm leading-5 text-gray-400;
   }
 
   img.avatar-sm {
-    @apply w-5 h-5 mr-1 transition duration-300 scale-100 rounded-full transform-gpu group-hover:scale-105;
+    @apply mr-1 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105;
   }
 
   .card-field {
-    @apply flex items-center py-0.5 sm:py-1 text-sm truncate;
+    @apply flex items-center truncate py-0.5 text-sm sm:py-1;
   }
 
   .card-field-name {
@@ -224,7 +224,7 @@
   }
 
   .form-row {
-    @apply max-w-6xl mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start;
+    @apply mt-6 max-w-6xl sm:mt-5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4;
   }
 
   .form-input {
@@ -236,12 +236,12 @@
   }
 
   .actions {
-    @apply pt-5 mt-8 text-white border-t border-gray-700;
+    @apply mt-8 border-t border-gray-700 pt-5 text-white;
   }
 
   label,
   .group-label {
-    @apply block mb-1 text-sm font-bold leading-5 text-gray-400;
+    @apply mb-1 block text-sm font-bold leading-5 text-gray-400;
   }
 
   label.checkbox-label {
@@ -272,14 +272,14 @@
   }
 
   input[type='checkbox'] {
-    @apply w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md;
+    @apply h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out;
   }
 
   input[type='text'],
   input[type='password'],
   select,
   textarea {
-    @apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md sm:text-sm sm:leading-5;
+    @apply block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5;
   }
 
   input.rounded-l-only,
@@ -307,37 +307,37 @@
   }
 
   button.input-action {
-    @apply relative inline-flex items-center px-3 sm:px-3.5 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
+    @apply relative -ml-px inline-flex items-center border border-gray-500 bg-indigo-600 px-3 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out last:rounded-r-md hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 sm:px-3.5;
   }
 
   .button-md svg,
   button.input-action svg,
   .plex-button svg {
-    @apply w-5 h-5 ml-2 mr-2 first:ml-0 last:mr-0;
+    @apply ml-2 mr-2 h-5 w-5 first:ml-0 last:mr-0;
   }
 
   .button-sm svg {
-    @apply w-4 h-4 ml-1.5 mr-1.5 first:ml-0 last:mr-0;
+    @apply ml-1.5 mr-1.5 h-4 w-4 first:ml-0 last:mr-0;
   }
 
   .modal-icon {
-    @apply flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto text-white bg-gray-800 rounded-full ring-1 ring-gray-500 sm:mx-0 sm:h-10 sm:w-10;
+    @apply mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gray-800 text-white ring-1 ring-gray-500 sm:mx-0 sm:h-10 sm:w-10;
   }
 
   .modal-icon svg {
-    @apply w-6 h-6;
+    @apply h-6 w-6;
   }
 
   svg.icon-md {
-    @apply w-5 h-5;
+    @apply h-5 w-5;
   }
 
   svg.icon-sm {
-    @apply w-4 h-4;
+    @apply h-4 w-4;
   }
 
   .protocol {
-    @apply inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm;
+    @apply inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-600 px-3 text-gray-100 sm:text-sm;
   }
 
   .error {
@@ -357,23 +357,23 @@
   }
 
   .react-select-container .react-select__control {
-    @apply text-white bg-gray-700 border border-gray-500 rounded-md hover:border-gray-500;
+    @apply rounded-md border border-gray-500 bg-gray-700 text-white hover:border-gray-500;
   }
 
   .react-select-container-dark .react-select__control {
-    @apply bg-gray-800 border border-gray-700;
+    @apply border border-gray-700 bg-gray-800;
   }
 
   .react-select-container .react-select__control--is-focused {
-    @apply text-white bg-gray-700 border border-gray-500 rounded-md shadow;
+    @apply rounded-md border border-gray-500 bg-gray-700 text-white shadow;
   }
 
   .react-select-container-dark .react-select__control--is-focused {
-    @apply bg-gray-800 border-gray-600;
+    @apply border-gray-600 bg-gray-800;
   }
 
   .react-select-container .react-select__menu {
-    @apply text-gray-300 bg-gray-700;
+    @apply bg-gray-700 text-gray-300;
   }
 
   .react-select-container-dark .react-select__menu {
@@ -381,7 +381,7 @@
   }
 
   .react-select-container .react-select__option--is-focused {
-    @apply text-white bg-gray-600;
+    @apply bg-gray-600 text-white;
   }
 
   .react-select-container-dark .react-select__option--is-focused {
@@ -401,7 +401,7 @@
   }
 
   .react-select-container .react-select__multi-value {
-    @apply bg-gray-800 border border-gray-500 rounded-md;
+    @apply rounded-md border border-gray-500 bg-gray-800;
   }
 
   .react-select-container .react-select__multi-value__label {
@@ -413,7 +413,7 @@
   }
 
   .react-select-container .react-select__input {
-    @apply text-base border-none shadow-sm ring-0;
+    @apply border-none text-base shadow-sm ring-0;
   }
 
   .react-select-container .react-select__input input:focus {
diff --git a/yarn.lock b/yarn.lock
index c6eeebe34..44fe44814 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8985,6 +8985,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.3.tgz#904d31084fef0a6070e185707b599aa3c153a53c"
+  integrity sha512-k+X4HfaLHXwGlu3JdW6XahQIk3lvzBtx2F2jSMFmOU6Mqll9dhZdGz1MJFAHxzvLxEWvMWZQA4MmCIhsDid5Kg==
+
 prettier@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"