diff --git a/.prettierrc b/.prettierrc
index 3d1f5e5cb..5712ab994 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
   "semi": false,
   "singleQuote": true,
   "trailingComma": "es5",
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package-lock.json b/package-lock.json
index 527614cb6..cd6f5b71e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,9 @@
         "workbox-routing": "7.0.0",
         "workbox-strategies": "7.0.0",
         "workbox-streams": "7.0.0"
+      },
+      "devDependencies": {
+        "prettier-plugin-tailwindcss": "^0.5.11"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -12337,6 +12340,75 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index aa2f04a50..d8095f8a5 100644
--- a/package.json
+++ b/package.json
@@ -83,5 +83,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }
diff --git a/src/App.scss b/src/App.scss
index 96fa7ed52..35218574e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -28,30 +28,30 @@
   }
 
   h1 {
-    @apply text-xl leading-6 font-black text-gray-900 dark:text-gray-100 tracking-wide;
+    @apply text-xl font-black leading-6 tracking-wide text-gray-900 dark:text-gray-100;
   }
 
   h2 {
-    @apply text-lg leading-6 font-bold text-gray-900 dark:text-gray-100;
+    @apply text-lg font-bold leading-6 text-gray-900 dark:text-gray-100;
   }
 
   h3 {
-    @apply text-lg leading-6 font-medium text-gray-900 dark:text-gray-100;
+    @apply text-lg font-medium leading-6 text-gray-900 dark:text-gray-100;
   }
 
   .header {
-    @apply fixed top-[1.625rem] left-0 right-0 m-auto text-center md:relative md:top-0 z-10 flex justify-center items-center md:h-12;
+    @apply fixed left-0 right-0 top-[1.625rem] z-10 m-auto flex items-center justify-center text-center md:relative md:top-0 md:h-12;
     @media (max-width: 767px) {
       width: calc(100% - 9rem);
     }
 
     h1 {
-      @apply whitespace-nowrap overflow-hidden text-ellipsis max-w-full;
+      @apply max-w-full overflow-hidden text-ellipsis whitespace-nowrap;
       max-width: calc(100% - 1.5rem);
     }
 
     .header--action {
-      @apply fixed md:absolute right-6 md:right-0 text-red-800 dark:text-red-600 flex gap-x-2;
+      @apply fixed right-6 flex gap-x-2 text-red-800 dark:text-red-600 md:absolute md:right-0;
 
       .header--action__secondary {
         @apply text-gray-600 dark:text-gray-400;
@@ -88,31 +88,31 @@
   }
 
   .box {
-    @apply shadow-sm rounded-md bg-gray-100 dark:bg-slate-700;
+    @apply rounded-md bg-gray-100 shadow-sm dark:bg-slate-700;
   }
 
   .card {
-    @apply bg-white dark:bg-slate-800 shadow-lg overflow-hidden rounded-lg p-4 md:p-8;
+    @apply overflow-hidden rounded-lg bg-white p-4 shadow-lg dark:bg-slate-800 md:p-8;
   }
 
   .error {
-    @apply bg-red-100 p-2 rounded-md text-red-800 dark:text-red-600;
+    @apply rounded-md bg-red-100 p-2 text-red-800 dark:text-red-600;
   }
 
   .button-group {
-    @apply gap-4 flex flex-col md:flex-row-reverse md:justify-start;
+    @apply flex flex-col gap-4 md:flex-row-reverse md:justify-start;
   }
 
   .btn-primary {
-    @apply w-full min-w-32 md:w-auto shadow-sm rounded-md full-centered bg-blue-800 hover:bg-blue-900 dark:hover:bg-blue-700 text-white py-3 px-4 text-sm font-bold;
+    @apply full-centered w-full min-w-32 rounded-md bg-blue-800 px-4 py-3 text-sm font-bold text-white shadow-sm hover:bg-blue-900 dark:hover:bg-blue-700 md:w-auto;
   }
 
   .btn-secondary {
-    @apply w-full min-w-32 md:w-auto shadow-sm rounded-md full-centered text-blue-800 hover:text-blue-900 dark:text-gray-300 dark:hover:text-gray-200 py-2 px-4 text-sm font-medium hover:bg-gray-50 dark:hover:bg-slate-700 border border-blue-800 dark:border-gray-300;
+    @apply full-centered w-full min-w-32 rounded-md border border-blue-800 px-4 py-2 text-sm font-medium text-blue-800 shadow-sm hover:bg-gray-50 hover:text-blue-900 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-slate-700 dark:hover:text-gray-200 md:w-auto;
   }
 
   .btn-secondary-red {
-    @apply btn-secondary text-red-800 hover:text-red-900 border-red-800 dark:text-red-600 dark:hover:text-red-600 dark:border-red-600;
+    @apply btn-secondary border-red-800 text-red-800 hover:text-red-900 dark:border-red-600 dark:text-red-600 dark:hover:text-red-600;
   }
 
   .link-blue {
@@ -131,11 +131,11 @@
   }
 
   .input--outer {
-    @apply mt-2 relative;
+    @apply relative mt-2;
   }
 
   .input {
-    @apply flex-1 block w-full min-w-0 sm:text-sm border-gray-300 rounded-md  dark:text-gray-100 dark:border-slate-700 dark:bg-slate-700 dark:focus:bg-slate-700 focus:outline-transparent focus:border-transparent focus:ring-2 focus:ring-inset focus:ring-blue-800 dark:focus:ring-blue-700;
+    @apply block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-transparent  focus:outline-transparent focus:ring-2 focus:ring-inset focus:ring-blue-800 dark:border-slate-700 dark:bg-slate-700 dark:text-gray-100 dark:focus:bg-slate-700 dark:focus:ring-blue-700 sm:text-sm;
   }
 
   .dashboard {
@@ -143,7 +143,7 @@
       @apply grid grid-cols-12;
 
       a {
-        @apply text-gray-500 dark:text-gray-400 text-sm font-medium col-span-3 text-center flex justify-center items-center border-gray-300 dark:border-gray-500;
+        @apply col-span-3 flex items-center justify-center border-gray-300 text-center text-sm font-medium text-gray-500 dark:border-gray-500 dark:text-gray-400;
       }
 
       > div {
@@ -152,7 +152,7 @@
 
       > div,
       a {
-        @apply pb-1 border-b-2;
+        @apply border-b-2 pb-1;
       }
     }
   }
@@ -168,7 +168,7 @@
   .trans {
     font-size: 0;
     & > span {
-      @apply text-xl /* h1 */;
+      @apply /* h1 */ text-xl;
     }
   }
 
diff --git a/src/components/AccountForm.tsx b/src/components/AccountForm.tsx
index 4b0beee68..534d5bd80 100644
--- a/src/components/AccountForm.tsx
+++ b/src/components/AccountForm.tsx
@@ -113,14 +113,14 @@ const AccountForm = ({ budget, type }: Props) => {
             <Link
               onClick={confirmDiscardingUnsavedChanges}
               to={`/transactions?account=${accountId}`}
-              className="flex items-center justify-end link-blue py-4"
+              className="link-blue flex items-center justify-end py-4"
             >
               {t('transactions.latest')}
               <ChevronRightIcon className="inline h-6" />
             </Link>
           )}
           <div className="card">
-            <FormFields className="md:grid grid-cols-2 md:gap-x-4 md:gap-y-6">
+            <FormFields className="grid-cols-2 md:grid md:gap-x-4 md:gap-y-6">
               <FormField
                 className="col-span-full"
                 type="text"
@@ -133,9 +133,9 @@ const AccountForm = ({ budget, type }: Props) => {
 
               {type === 'internal' ? (
                 <>
-                  <div className="relative flex items-start col-span-full">
+                  <div className="relative col-span-full flex items-start">
                     <div
-                      className="mt-px pt-2 pr-2 col-span-2 flex sm:block justify-end"
+                      className="col-span-2 mt-px flex justify-end pr-2 pt-2 sm:block"
                       onClick={e => {
                         e.preventDefault()
                         updateValue('onBudget', !account.onBudget)
@@ -146,7 +146,7 @@ const AccountForm = ({ budget, type }: Props) => {
                           account.onBudget
                             ? 'bg-lime-600 dark:bg-lime-500'
                             : 'bg-gray-200 dark:bg-slate-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-within:outline-none focus-within:ring-2 focus-within:ring-offset-2`}
+                        } 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-within:outline-none focus-within:ring-2 focus-within:ring-offset-2`}
                       >
                         <span
                           aria-hidden="true"
@@ -154,13 +154,13 @@ const AccountForm = ({ budget, type }: Props) => {
                             account?.onBudget
                               ? 'translate-x-5'
                               : 'translate-x-0'
-                          } inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 pointer-events-none`}
+                          } pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`}
                         ></span>
                         <input
                           type="checkbox"
                           id="onBudget"
                           name="onBudget"
-                          className="absolute inset-0 sr-only"
+                          className="sr-only absolute inset-0"
                           defaultChecked={account?.onBudget}
                           onChange={e =>
                             updateValue('onBudget', e.target.checked)
@@ -217,7 +217,7 @@ const AccountForm = ({ budget, type }: Props) => {
                 <label htmlFor="note" className="form-field--label">
                   {t('accounts.note')}
                 </label>
-                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="mt-1 sm:col-span-2 sm:mt-0">
                   <textarea
                     id="note"
                     name="note"
@@ -230,7 +230,7 @@ const AccountForm = ({ budget, type }: Props) => {
               </div>
             </FormFields>
 
-            <div className="mt-8 button-group">
+            <div className="button-group mt-8">
               <button type="submit" className="btn-primary">
                 {t('save')}
               </button>
@@ -264,7 +264,7 @@ const AccountForm = ({ budget, type }: Props) => {
                     }}
                     className="btn-secondary-red"
                   >
-                    <TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
+                    <TrashIcon className="icon-red icon-sm relative bottom-0.5 mr-1 inline" />
                     {t('accounts.delete')}
                   </button>
                   {/* TODO: reconcile */}
diff --git a/src/components/AccountListSwitch.tsx b/src/components/AccountListSwitch.tsx
index 27a9262f5..7976bf3f0 100644
--- a/src/components/AccountListSwitch.tsx
+++ b/src/components/AccountListSwitch.tsx
@@ -13,7 +13,7 @@ const AccountListSwitch = ({ selected }: Props) => {
   const { t }: Translation = useTranslation()
 
   return (
-    <div className="card shadow-sm p-1 mb-6 flex dark:text-gray-100">
+    <div className="card mb-6 flex p-1 shadow-sm dark:text-gray-100">
       <Link to="/own-accounts" className={tabClasses(selected === 'internal')}>
         {t('accounts.internalAccounts')}
       </Link>
diff --git a/src/components/AllocationInputs.tsx b/src/components/AllocationInputs.tsx
index 80e33d931..3f4c05e71 100644
--- a/src/components/AllocationInputs.tsx
+++ b/src/components/AllocationInputs.tsx
@@ -43,7 +43,7 @@ const AllocationInputs = ({
       >
         <InputCurrency currency={budget.currency} />
       </FormField>
-      <p className="text-sm text-gray-500 dark:text-gray-400 uppercase">
+      <p className="text-sm uppercase text-gray-500 dark:text-gray-400">
         {' '}
         – {t('or')} –{' '}
       </p>
diff --git a/src/components/ArchiveButton.tsx b/src/components/ArchiveButton.tsx
index 3b1c0f339..68efdf048 100644
--- a/src/components/ArchiveButton.tsx
+++ b/src/components/ArchiveButton.tsx
@@ -30,7 +30,7 @@ const ArchiveButton = ({
       }}
       className="btn-secondary"
     >
-      <ArchiveBoxIcon className="icon-sm inline mr-1 relative bottom-0.5" />
+      <ArchiveBoxIcon className="icon-sm relative bottom-0.5 mr-1 inline" />
       {t(resource.archived ? 'unarchiveObject' : 'archiveObject', {
         object: resourceTypeTranslation,
       })}
diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
index d706f85c1..7f1b867ab 100644
--- a/src/components/Autocomplete.tsx
+++ b/src/components/Autocomplete.tsx
@@ -104,7 +104,7 @@ const Autocomplete = <T extends ArchivableResource>({
           />
         </Combobox.Button>
 
-        <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+        <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 sm:text-sm">
           {emptyOption && query.length === 0 ? (
             <Combobox.Option
               value={null}
@@ -126,7 +126,7 @@ const Autocomplete = <T extends ArchivableResource>({
           {filteredGroups.map((group, i) => (
             <div key={i}>
               {filteredGroups.length > 1 ? (
-                <div className="relative py-2 pl-3 pr-9 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-slate-700">
+                <div className="relative bg-gray-200 py-2 pl-3 pr-9 text-gray-800 dark:bg-slate-700 dark:text-gray-200">
                   {group.title}
                 </div>
               ) : null}
@@ -155,7 +155,7 @@ const Autocomplete = <T extends ArchivableResource>({
                         >
                           {isArchived(item) ? (
                             <ArchiveBoxIcon
-                              className="icon-sm inline link-blue mr-2 stroke-2"
+                              className="icon-sm link-blue mr-2 inline stroke-2"
                               title={t('archived')}
                             />
                           ) : null}
@@ -188,7 +188,7 @@ const Autocomplete = <T extends ArchivableResource>({
               value={{ name: query }}
               className={({ active }) =>
                 classNames(
-                  'relative cursor-default select-none py-2 pl-3 pr-9 border-t dark:border-gray-900',
+                  'relative cursor-default select-none border-t py-2 pl-3 pr-9 dark:border-gray-900',
                   active
                     ? 'bg-sky-600 text-white'
                     : 'text-gray-900 dark:text-gray-300'
diff --git a/src/components/BudgetForm.tsx b/src/components/BudgetForm.tsx
index 2c2b58aa3..999c2494e 100644
--- a/src/components/BudgetForm.tsx
+++ b/src/components/BudgetForm.tsx
@@ -101,7 +101,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
           <h2>{t('budgets.createNew')}</h2>
           <Link
             to="/budget-import"
-            className="text-sm link-blue flex align-center"
+            className="link-blue align-center flex text-sm"
           >
             <DocumentArrowUpIcon className="icon-sm mr-1" />
             {t('budgets.import.importInstead')}
@@ -132,7 +132,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
             <label htmlFor="note" className="form-field--label">
               {t('budgets.note')}
             </label>
-            <div className="mt-1 sm:mt-0 sm:col-span-2">
+            <div className="mt-1 sm:col-span-2 sm:mt-0">
               <textarea
                 id="note"
                 name="note"
@@ -145,7 +145,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
           </div>
         </FormFields>
 
-        <div className="mt-8 button-group">
+        <div className="button-group mt-8">
           <button type="submit" className="btn-primary">
             {t('save')}
           </button>
diff --git a/src/components/BudgetSwitch.tsx b/src/components/BudgetSwitch.tsx
index a300a3cb9..30298a96a 100644
--- a/src/components/BudgetSwitch.tsx
+++ b/src/components/BudgetSwitch.tsx
@@ -72,11 +72,11 @@ const BudgetSwitch = (props: BudgetSwitchProps) => {
         <div className="mt-3">
           {budgets.length ? (
             <>
-              <ul className="grid grid-cols-1 gap-10 lg:gap-6 lg:grid-cols-2">
+              <ul className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-6">
                 {budgets.map(budget => (
                   <li
                     key={budget.id}
-                    className={`card p-0 col-span-1 divide-y divide-gray-200 dark:divide-gray-600 flex flex-col justify-between ${
+                    className={`card col-span-1 flex flex-col justify-between divide-y divide-gray-200 p-0 dark:divide-gray-600 ${
                       budget.id === props.currentBudget?.id
                         ? 'border-2 border-red-800 dark:border-red-600'
                         : ''
diff --git a/src/components/CategoryEnvelopes.tsx b/src/components/CategoryEnvelopes.tsx
index 85d296e8d..8f1516a85 100644
--- a/src/components/CategoryEnvelopes.tsx
+++ b/src/components/CategoryEnvelopes.tsx
@@ -25,7 +25,7 @@ const CategoryEnvelopes = ({
   return (
     <>
       <div
-        className={`flex bg-gray-50 dark:bg-gray-700 p-4 text-gray-500 dark:text-gray-100 cursor-pointer ${
+        className={`flex cursor-pointer bg-gray-50 p-4 text-gray-500 dark:bg-gray-700 dark:text-gray-100 ${
           showEnvelopes ? 'border-y first:border-t-0' : ''
         } border-gray-200 dark:border-gray-900`}
         onClick={() => {
@@ -40,14 +40,14 @@ const CategoryEnvelopes = ({
 
         <div
           className={`grow ${
-            showEnvelopes || ' whitespace-nowrap overflow-hidden text-ellipsis'
+            showEnvelopes || ' overflow-hidden text-ellipsis whitespace-nowrap'
           }`}
         >
           <span className={!category.name ? 'italic' : ''}>
             {safeName(category, 'category', t('categories.category'))}
             {category.archived ? (
               <ArchiveBoxIcon
-                className="icon-sm inline link-blue ml-2 stroke-2"
+                className="icon-sm link-blue ml-2 inline stroke-2"
                 title={t('archived')}
               />
             ) : null}
@@ -79,18 +79,18 @@ const CategoryEnvelopes = ({
               <Link
                 to={envelope.id}
                 key={envelope.id}
-                className="relative px-6 py-5 flex justify-between items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700"
+                className="relative flex items-center justify-between space-x-3 px-6 py-5 hover:bg-gray-50 dark:hover:bg-gray-700"
               >
                 <span className={!envelope.name ? 'italic' : ''}>
                   {safeName(envelope, 'envelope')}
                   {envelope.archived ? (
                     <ArchiveBoxIcon
-                      className="icon-sm inline link-blue ml-2 stroke-2"
+                      className="icon-sm link-blue ml-2 inline stroke-2"
                       title={t('archived')}
                     />
                   ) : null}
                 </span>
-                <ChevronRightIcon className="h-6 mr-3 flex-shrink-0" />
+                <ChevronRightIcon className="mr-3 h-6 flex-shrink-0" />
               </Link>
             ))}
         </div>
diff --git a/src/components/CategoryForm.tsx b/src/components/CategoryForm.tsx
index 730236751..2cac19b80 100644
--- a/src/components/CategoryForm.tsx
+++ b/src/components/CategoryForm.tsx
@@ -102,7 +102,7 @@ const CategoryForm = ({ budget }: { budget: Budget }) => {
                 <label htmlFor="note" className="form-field--label">
                   {t('categories.note')}
                 </label>
-                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="mt-1 sm:col-span-2 sm:mt-0">
                   <textarea
                     id="note"
                     name="note"
@@ -147,7 +147,7 @@ const CategoryForm = ({ budget }: { budget: Budget }) => {
                 }}
                 className="btn-secondary-red"
               >
-                <TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
+                <TrashIcon className="icon-red icon-sm relative bottom-0.5 mr-1 inline" />
                 {t('categories.delete')}
               </button>
             </div>
@@ -167,7 +167,7 @@ const CategoryForm = ({ budget }: { budget: Budget }) => {
                         <div className="px-2 py-4">
                           <div className="flex items-center justify-between">
                             <p
-                              className={`text-sm font-medium truncate dark:text-gray-300 ${
+                              className={`truncate text-sm font-medium dark:text-gray-300 ${
                                 envelope.name ? '' : 'italic'
                               }`}
                             >
diff --git a/src/components/CategoryMonth.tsx b/src/components/CategoryMonth.tsx
index 061f82e65..5e61ba8bd 100644
--- a/src/components/CategoryMonth.tsx
+++ b/src/components/CategoryMonth.tsx
@@ -42,7 +42,7 @@ const CategoryMonth = ({
       <tr
         className={`${
           showEnvelopes ? 'border-y' : 'border-t'
-        } border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-slate-700 cursor-pointer`}
+        } cursor-pointer border-gray-200 bg-gray-50 dark:border-gray-900 dark:bg-slate-700`}
         onClick={() => {
           if (
             category.envelopes.some(envelope => envelope.id === editingEnvelope)
@@ -56,7 +56,7 @@ const CategoryMonth = ({
         <th
           colSpan={4}
           scope="colgroup"
-          className="px-4 py-2 text-left text-sm font-bold text-gray-900 dark:text-gray-300 sm:px-6 text-ellipsis"
+          className="text-ellipsis px-4 py-2 text-left text-sm font-bold text-gray-900 dark:text-gray-300 sm:px-6"
         >
           <span
             className={`flex items-center ${!category.name ? 'italic' : ''}`}
@@ -87,14 +87,14 @@ const CategoryMonth = ({
           ></EnvelopeMonth>
         ))
       ) : (
-        <tr className="bg-gray-50 dark:bg-slate-700 cursor-pointer">
-          <td className="whitespace-nowrap pb-2 pl-10 pr-1 text-sm font-medium text-gray-500 dark:text-gray-400 sm:pl-12 overflow-hidden text-ellipsis italic">
+        <tr className="cursor-pointer bg-gray-50 dark:bg-slate-700">
+          <td className="overflow-hidden text-ellipsis whitespace-nowrap pb-2 pl-10 pr-1 text-sm font-medium italic text-gray-500 dark:text-gray-400 sm:pl-12">
             {t('envelopes.envelopesWithCount', {
               count: envelopes.length,
             })}
           </td>
           <td
-            className={`whitespace-nowrap px-1 pb-2 text-sm text-right ${
+            className={`whitespace-nowrap px-1 pb-2 text-right text-sm ${
               Number(allocation) < 0
                 ? 'negative'
                 : 'text-gray-500 dark:text-gray-400'
@@ -105,7 +105,7 @@ const CategoryMonth = ({
             })}
           </td>
           <td
-            className={`hidden md:table-cell whitespace-nowrap px-1 pb-2 text-sm text-right ${
+            className={`hidden whitespace-nowrap px-1 pb-2 text-right text-sm md:table-cell ${
               Number(spent) > 0
                 ? 'positive'
                 : 'text-gray-500 dark:text-gray-400'
@@ -114,7 +114,7 @@ const CategoryMonth = ({
             {formatMoney(spent, budget.currency)}
           </td>
           <td
-            className={`whitespace-nowrap pl-1 pr-4 sm:pr-6 pb-2 text-sm text-right ${
+            className={`whitespace-nowrap pb-2 pl-1 pr-4 text-right text-sm sm:pr-6 ${
               Number(balance) < 0
                 ? 'negative'
                 : 'text-gray-500 dark:text-gray-400'
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 67959d652..e2e8e5253 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -108,7 +108,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                 type="month"
                 id="month"
                 value={activeMonth}
-                className="border-none cursor-pointer text-center bg-transparent"
+                className="cursor-pointer border-none bg-transparent text-center"
                 onChange={e => {
                   e.preventDefault()
                   navigate(linkToMonth(e.target.value))
@@ -116,7 +116,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
               />
             </div>
           ) : (
-            <div className="flex justify-center items-center">
+            <div className="flex items-center justify-center">
               <span className="mr-2 text-center">
                 {translatedMonthFormat.format(dateFromMonthYear(activeMonth))}
               </span>
@@ -155,9 +155,9 @@ const Dashboard = ({ budget }: DashboardProps) => {
       ) : (
         <>
           <Error error={error} />
-          <div className="card p-0 w-full my-4 md:mb-8 text-center text-gray-500">
+          <div className="card my-4 w-full p-0 text-center text-gray-500 md:mb-8">
             <div className="py-4 md:py-8">
-              <div className="text-gray-500 dark:text-gray-400 font-medium uppercase">
+              <div className="font-medium uppercase text-gray-500 dark:text-gray-400">
                 {t('dashboard.available')}
               </div>
               <div
@@ -170,7 +170,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                 })}
               </div>
             </div>
-            <div className="rounded-b-md bg-gray-100 dark:bg-slate-700 py-2 text-sm font-medium dark:text-gray-300">
+            <div className="rounded-b-md bg-gray-100 py-2 text-sm font-medium dark:bg-slate-700 dark:text-gray-300">
               <QuickAllocationForm
                 link={replaceMonthInLinks(budget.links.month, activeMonth)}
                 reloadBudgetMonth={reloadBudgetMonth}
@@ -180,30 +180,30 @@ const Dashboard = ({ budget }: DashboardProps) => {
 
           <div className="px-4 sm:px-6 lg:px-8">
             <div className="mt-4 flex flex-col py-2">
-              <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8 card px-0 py-2">
+              <div className="card -mx-4 -my-2 overflow-x-auto px-0 py-2 sm:-mx-6 lg:-mx-8">
                 <div className="inline-block w-full align-middle">
                   <table className="w-full table-fixed">
-                    <thead className="bg-white dark:bg-slate-800 uppercase">
+                    <thead className="bg-white uppercase dark:bg-slate-800">
                       <tr>
                         <th
                           scope="col"
-                          className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-300 sm:pl-6 w-2/3 md:w-1/2"
+                          className="w-2/3 py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-300 sm:pl-6 md:w-1/2"
                         ></th>
                         <th
                           scope="col"
-                          className="hidden md:table-cell px-3 pt-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-300 w-1/6"
+                          className="hidden w-1/6 px-3 pt-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-300 md:table-cell"
                         >
                           {t('dashboard.allocation')}
                         </th>
                         <th
                           scope="col"
-                          className="hidden md:table-cell px-3 pt-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-300 w-1/6"
+                          className="hidden w-1/6 px-3 pt-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-300 md:table-cell"
                         >
                           {t('dashboard.spent')}
                         </th>
                         <th
                           scope="col"
-                          className="pl-3 pr-4 sm:pr-6 pt-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-300 w-1/3 md:w-1/6"
+                          className="w-1/3 pl-3 pr-4 pt-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-300 sm:pr-6 md:w-1/6"
                         >
                           {t('dashboard.balance')}
                         </th>
@@ -213,7 +213,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                       <tr>
                         <td></td>
                         <td
-                          className={`hidden md:table-cell whitespace-nowrap px-3 pb-3 text-sm font-semibold text-right ${
+                          className={`hidden whitespace-nowrap px-3 pb-3 text-right text-sm font-semibold md:table-cell ${
                             Number(budgetMonth.allocation) < 0
                               ? 'negative'
                               : 'text-gray-500 dark:text-gray-400'
@@ -228,7 +228,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                           )}
                         </td>
                         <td
-                          className={`hidden md:table-cell whitespace-nowrap px-3 pb-3 text-sm font-semibold text-right ${
+                          className={`hidden whitespace-nowrap px-3 pb-3 text-right text-sm font-semibold md:table-cell ${
                             Number(budgetMonth.spent) > 0
                               ? 'positive'
                               : 'text-gray-500 dark:text-gray-400'
@@ -237,7 +237,7 @@ const Dashboard = ({ budget }: DashboardProps) => {
                           {formatMoney(budgetMonth.spent, budget.currency)}
                         </td>
                         <td
-                          className={`whitespace-nowrap pl-3 pr-4 sm:pr-6 pb-3 text-sm font-semibold text-right ${
+                          className={`whitespace-nowrap pb-3 pl-3 pr-4 text-right text-sm font-semibold sm:pr-6 ${
                             Number(budgetMonth.balance) < 0
                               ? 'negative'
                               : 'text-gray-500 dark:text-gray-400'
diff --git a/src/components/EnvelopeForm.tsx b/src/components/EnvelopeForm.tsx
index 376353b7b..8c840d84f 100644
--- a/src/components/EnvelopeForm.tsx
+++ b/src/components/EnvelopeForm.tsx
@@ -122,14 +122,14 @@ const EnvelopeForm = ({ budget }: Props) => {
             <Link
               onClick={confirmDiscardingUnsavedChanges}
               to={`/transactions?envelope=${envelopeId}`}
-              className="flex items-center justify-end link-blue py-4"
+              className="link-blue flex items-center justify-end py-4"
             >
               {t('transactions.latest')}
               <ChevronRightIcon className="inline h-6" />
             </Link>
           )}
           <div className="card">
-            <FormFields className="md:grid grid-cols-2 gap-x-4 space-y-6 md:space-y-0 md:gap-y-6">
+            <FormFields className="grid-cols-2 gap-x-4 space-y-6 md:grid md:gap-y-6 md:space-y-0">
               <FormField
                 type="text"
                 name="name"
@@ -170,7 +170,7 @@ const EnvelopeForm = ({ budget }: Props) => {
                 <label htmlFor="note" className="form-field--label">
                   {t('accounts.note')}
                 </label>
-                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="mt-1 sm:col-span-2 sm:mt-0">
                   <textarea
                     id="note"
                     name="note"
@@ -219,7 +219,7 @@ const EnvelopeForm = ({ budget }: Props) => {
                     }}
                     className="btn-secondary-red"
                   >
-                    <TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
+                    <TrashIcon className="icon-red icon-sm relative bottom-0.5 mr-1 inline" />
                     {t('envelopes.delete')}
                   </button>
                 </>
diff --git a/src/components/EnvelopeMonth.tsx b/src/components/EnvelopeMonth.tsx
index 38783d36d..9270261a2 100644
--- a/src/components/EnvelopeMonth.tsx
+++ b/src/components/EnvelopeMonth.tsx
@@ -73,7 +73,7 @@ const EnvelopeMonth = ({
       <td>
         <Link
           to={`/envelopes/${envelope.id}`}
-          className={`h-full block whitespace-nowrap py-4 pl-4 pr-1 text-sm font-medium text-gray-900 dark:text-gray-300 sm:pl-6 overflow-hidden text-ellipsis ${
+          className={`block h-full overflow-hidden text-ellipsis whitespace-nowrap py-4 pl-4 pr-1 text-sm font-medium text-gray-900 dark:text-gray-300 sm:pl-6 ${
             !envelope.name ? 'italic' : ''
           }`}
         >
@@ -129,7 +129,7 @@ const EnvelopeMonth = ({
       </td>
 
       <td
-        className={`hidden md:table-cell whitespace-nowrap px-1 py-4 text-sm text-right ${
+        className={`hidden whitespace-nowrap px-1 py-4 text-right text-sm md:table-cell ${
           Number(allocatedAmount) < 0
             ? 'negative'
             : 'text-gray-500 dark:text-gray-400'
@@ -149,12 +149,12 @@ const EnvelopeMonth = ({
               }),
             })}
           >
-            <PencilIcon className="inline icon-xs text-gray-400" />
+            <PencilIcon className="icon-xs inline text-gray-400" />
           </button>
         </div>
       </td>
       <td
-        className={`hidden md:table-cell whitespace-nowrap px-1 py-4 text-sm text-right ${
+        className={`hidden whitespace-nowrap px-1 py-4 text-right text-sm md:table-cell ${
           Number(envelope.spent) > 0
             ? 'positive'
             : 'text-gray-500 dark:text-gray-400'
@@ -169,7 +169,7 @@ const EnvelopeMonth = ({
         </Link>
       </td>
       <td
-        className={`whitespace-nowrap pl-1 pr-4 sm:pr-6 py-4 text-sm text-right ${
+        className={`whitespace-nowrap py-4 pl-1 pr-4 text-right text-sm sm:pr-6 ${
           Number(envelope.balance) < 0
             ? 'negative'
             : 'text-gray-500 dark:text-gray-400'
@@ -199,9 +199,9 @@ const EnvelopeMonth = ({
             }),
           })}
           onClick={() => editEnvelope(envelope.id)}
-          className="md:hidden pl-2"
+          className="pl-2 md:hidden"
         >
-          <PlusCircleIcon className="inline icon text-gray-400" />
+          <PlusCircleIcon className="icon inline text-gray-400" />
         </button>
       </td>
     </tr>
diff --git a/src/components/EnvelopesList.tsx b/src/components/EnvelopesList.tsx
index 68a23c808..8f47ee5b2 100644
--- a/src/components/EnvelopesList.tsx
+++ b/src/components/EnvelopesList.tsx
@@ -51,17 +51,17 @@ const EnvelopesList = ({ budget }: Props) => {
       <Error error={error} />
 
       {archived ? (
-        <div className="flex align-center justify-start link-blue pb-2">
+        <div className="align-center link-blue flex justify-start pb-2">
           <Link to="/envelopes?archived=false">
-            <ChevronLeftIcon className="icon inline relative bottom-0.5" />
+            <ChevronLeftIcon className="icon relative bottom-0.5 inline" />
             {t('back')}
           </Link>
         </div>
       ) : (
-        <div className="flex align-center justify-end link-blue pb-2">
+        <div className="align-center link-blue flex justify-end pb-2">
           <Link to="/envelopes?archived=true">
             {t('showArchived')}
-            <ChevronRightIcon className="icon inline relative bottom-0.5" />
+            <ChevronRightIcon className="icon relative bottom-0.5 inline" />
           </Link>
         </div>
       )}
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
index 544e809d1..f4067d663 100644
--- a/src/components/Error.tsx
+++ b/src/components/Error.tsx
@@ -9,7 +9,7 @@ const Error = ({ error }: Props) => {
 
   return (
     <div className="error mb-3">
-      <ExclamationTriangleIcon className="icon-red inline mr-1" />
+      <ExclamationTriangleIcon className="icon-red mr-1 inline" />
       {error.toString()}
     </div>
   )
diff --git a/src/components/ExternalAccountsList.tsx b/src/components/ExternalAccountsList.tsx
index 248e2f95b..11d46b4ae 100644
--- a/src/components/ExternalAccountsList.tsx
+++ b/src/components/ExternalAccountsList.tsx
@@ -79,50 +79,50 @@ const ExternalAccountsList = ({ budget }: { budget: Budget }) => {
       ) : (
         <>
           {archived ? (
-            <div className="flex align-center justify-start link-blue pb-2">
+            <div className="align-center link-blue flex justify-start pb-2">
               <Link to="/external-accounts?archived=false">
-                <ChevronLeftIcon className="icon inline relative bottom-0.5" />
+                <ChevronLeftIcon className="icon relative bottom-0.5 inline" />
                 {t('back')}
               </Link>
             </div>
           ) : (
-            <div className="flex align-center justify-end link-blue pb-2">
+            <div className="align-center link-blue flex justify-end pb-2">
               <Link to="/external-accounts?archived=true">
                 {t('showArchived')}
-                <ChevronRightIcon className="icon inline relative bottom-0.5" />
+                <ChevronRightIcon className="icon relative bottom-0.5 inline" />
               </Link>
             </div>
           )}
           {Object.keys(accounts).length ? (
             <nav
-              className="h-full overflow-y-auto card p-0"
+              className="card h-full overflow-y-auto p-0"
               aria-label="Directory"
             >
               {Object.keys(accounts)
                 .sort()
                 .map(letter => (
                   <div key={letter} className="relative">
-                    <div className="border-y border-gray-200 dark:border-gray-900 bg-gray-50  dark:bg-gray-700 px-6 py-1 text-sm font-medium text-gray-500">
+                    <div className="border-y border-gray-200 bg-gray-50 px-6  py-1 text-sm font-medium text-gray-500 dark:border-gray-900 dark:bg-gray-700">
                       <h3>{letter || t('untitled')}</h3>
                     </div>
                     <ul className="relative z-0">
                       {accounts[letter].map(account => (
                         <li
                           key={account.id}
-                          className="relative px-6 py-5 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700"
+                          className="relative flex items-center space-x-3 px-6 py-5 hover:bg-gray-50 dark:hover:bg-gray-700"
                         >
-                          <div className="flex-1 min-w-0">
+                          <div className="min-w-0 flex-1">
                             <Link to={`${account.id}`}>
                               <div>
                                 <div
                                   className={`${
                                     !account.name ? 'italic' : ''
-                                  } text-sm font-medium text-gray-900 dark:text-gray-100 flex justify-between`}
+                                  } flex justify-between text-sm font-medium text-gray-900 dark:text-gray-100`}
                                 >
                                   <span className="full-centered">
                                     {account.archived ? (
                                       <ArchiveBoxIcon
-                                        className="icon-sm inline link-blue mr-2 stroke-2"
+                                        className="icon-sm link-blue mr-2 inline stroke-2"
                                         title={t('archived')}
                                       />
                                     ) : null}
@@ -130,7 +130,7 @@ const ExternalAccountsList = ({ budget }: { budget: Budget }) => {
                                   </span>
                                   <PencilIcon className="icon-red" />
                                 </div>
-                                <p className="text-sm text-gray-500 truncate">
+                                <p className="truncate text-sm text-gray-500">
                                   {account.note}
                                 </p>
                               </div>
@@ -143,7 +143,7 @@ const ExternalAccountsList = ({ budget }: { budget: Budget }) => {
                 ))}
             </nav>
           ) : (
-            <div className="text-gray-700 dark:text-gray-300 text-center">
+            <div className="text-center text-gray-700 dark:text-gray-300">
               {archived ? t('accounts.emptyArchive') : t('accounts.emptyList')}
               {!archived && (
                 <Link to="/external-accounts/new" title={t('accounts.create')}>
diff --git a/src/components/FlyoutMenu.tsx b/src/components/FlyoutMenu.tsx
index dbd9f6416..edb197f10 100644
--- a/src/components/FlyoutMenu.tsx
+++ b/src/components/FlyoutMenu.tsx
@@ -41,7 +41,7 @@ const FlyoutMenu = ({ items }: Props) => {
           >
             <Popover.Panel className="absolute -right-10 z-10 mt-3 w-screen max-w-xs transform">
               <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                <div className="relative grid gap-6 bg-white dark:bg-slate-800 px-5 py-6 sm:gap-8 text-left">
+                <div className="relative grid gap-6 bg-white px-5 py-6 text-left dark:bg-slate-800 sm:gap-8">
                   {items.map(item => (
                     <Link
                       key={item.name}
diff --git a/src/components/FormField.tsx b/src/components/FormField.tsx
index 1dd1832b2..9c6c4194d 100644
--- a/src/components/FormField.tsx
+++ b/src/components/FormField.tsx
@@ -41,11 +41,11 @@ const FormField = ({
             <Tooltip
               content={tooltip}
               trigger="click"
-              className="whitespace-pre-line max-w-lg mx-2 shadow-2xl dark:border dark:border-slate-800"
+              className="mx-2 max-w-lg whitespace-pre-line shadow-2xl dark:border dark:border-slate-800"
             >
               <button
                 type="button"
-                className="ml-1 my-auto text-gray-500 full-centered"
+                className="full-centered my-auto ml-1 text-gray-500"
               >
                 <QuestionMarkCircleIcon className="icon-xs" />
                 <span className="sr-only">?</span>
diff --git a/src/components/GroupedTransactions.tsx b/src/components/GroupedTransactions.tsx
index ace2d4ba8..84ba7da58 100644
--- a/src/components/GroupedTransactions.tsx
+++ b/src/components/GroupedTransactions.tsx
@@ -32,7 +32,7 @@ const GroupedTransactions = ({
     <ul>
       {Object.keys(transactions).map(date => (
         <div key={date} className="group">
-          <h3 className="border-y group-first:border-t-0 border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-slate-700 px-3 py-1 text-sm font-medium text-gray-500">
+          <h3 className="border-y border-gray-200 bg-gray-50 px-3 py-1 text-sm font-medium text-gray-500 group-first:border-t-0 dark:border-gray-900 dark:bg-slate-700">
             {formatDate(date)}
           </h3>
           <div>
@@ -52,7 +52,7 @@ const GroupedTransactions = ({
                     <div className="px-2 py-4 sm:px-6">
                       <div className="flex items-center justify-between">
                         <p
-                          className={`text-sm dark:text-gray-300 font-medium truncate ${
+                          className={`truncate text-sm font-medium dark:text-gray-300 ${
                             transaction.note ? '' : 'italic'
                           }`}
                         >
@@ -60,10 +60,10 @@ const GroupedTransactions = ({
                             ? `${transaction.note} (${counterparties})`
                             : counterparties}
                         </p>
-                        <div className="flex items-center flex-shrink-0">
-                          <div className="pl-2 flex items-center">
+                        <div className="flex flex-shrink-0 items-center">
+                          <div className="flex items-center pl-2">
                             <p
-                              className={`px-2 inline-flex text-xs leading-5 font-bold rounded-full ${color}`}
+                              className={`inline-flex rounded-full px-2 text-xs font-bold leading-5 ${color}`}
                             >
                               {sign}
                               {formatMoney(
diff --git a/src/components/ImportBanner.tsx b/src/components/ImportBanner.tsx
index 4dc4449a9..a747ee084 100644
--- a/src/components/ImportBanner.tsx
+++ b/src/components/ImportBanner.tsx
@@ -8,8 +8,8 @@ type Props = { hideBanner: () => void }
 const ImportBanner = ({ hideBanner }: Props) => {
   const { t }: Translation = useTranslation()
   return (
-    <div className="bg-gray-200 dark:bg-slate-700 mb-8 md:mb-4">
-      <div className="flex items-center mx-auto gap-x-6 max-w-7xl px-6 md:px-8 py-2.5 sm:px-3.5 sm:before:flex-1">
+    <div className="mb-8 bg-gray-200 dark:bg-slate-700 md:mb-4">
+      <div className="mx-auto flex max-w-7xl items-center gap-x-6 px-6 py-2.5 sm:px-3.5 sm:before:flex-1 md:px-8">
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
           <p className="text-sm leading-6 text-gray-900 dark:text-gray-100">
             {t('transactions.import.unfinishedImportInProgress')}
diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx
index 9cb6225cd..87e83bbb9 100644
--- a/src/components/InfoBox.tsx
+++ b/src/components/InfoBox.tsx
@@ -4,8 +4,8 @@ type Props = { text: string }
 
 const InfoBox = ({ text }: Props) => {
   return (
-    <div className="flex bg-blue-100/[.75] text-blue-900 p-2 rounded-r-md border-l-4 border-blue-900 dark:border-none dark:rounded-md">
-      <InformationCircleIcon className="icon inline mr-1" />
+    <div className="flex rounded-r-md border-l-4 border-blue-900 bg-blue-100/[.75] p-2 text-blue-900 dark:rounded-md dark:border-none">
+      <InformationCircleIcon className="icon mr-1 inline" />
       {text}
     </div>
   )
diff --git a/src/components/InputCurrency.tsx b/src/components/InputCurrency.tsx
index 39daf012b..309c1c59f 100644
--- a/src/components/InputCurrency.tsx
+++ b/src/components/InputCurrency.tsx
@@ -1,6 +1,6 @@
 const InputCurrency = (props: { currency?: string }) => {
   return (
-    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
       <span className="text-gray-500 dark:text-gray-400 sm:text-sm">
         {props.currency || ''}
       </span>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 3aa7c15f6..390a87538 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -90,7 +90,7 @@ const Layout = ({
           <Transition.Root show={sidebarOpen} as={Fragment}>
             <Dialog
               as="div"
-              className="fixed inset-0 flex z-40 lg:hidden"
+              className="fixed inset-0 z-40 flex lg:hidden"
               open={sidebarOpen}
               onClose={() => setSidebarOpen(false)}
             >
@@ -114,7 +114,7 @@ const Layout = ({
                 leaveFrom="translate-x-0"
                 leaveTo="-translate-x-full"
               >
-                <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white dark:bg-slate-800">
+                <div className="relative flex w-full max-w-xs flex-1 flex-col bg-white dark:bg-slate-800">
                   <Transition.Child
                     as={Fragment}
                     enter="ease-in-out duration-300"
@@ -127,7 +127,7 @@ const Layout = ({
                     <div className="-mr-12 pt-2">
                       <button
                         type="button"
-                        className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none"
+                        className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none"
                         onClick={() => setSidebarOpen(false)}
                       >
                         <span className="sr-only">
@@ -137,9 +137,9 @@ const Layout = ({
                       </button>
                     </div>
                   </Transition.Child>
-                  <div className="flex-1 flex flex-col justify-between h-0 pt-5 pb-4 overflow-y-auto">
+                  <div className="flex h-0 flex-1 flex-col justify-between overflow-y-auto pb-4 pt-5">
                     <div>
-                      <div className="flex-shrink-0 flex items-center px-4">
+                      <div className="flex flex-shrink-0 items-center px-4">
                         <div>
                           <div className="text-lg font-bold text-gray-900 dark:text-gray-100">
                             {safeName(budget, 'budget')}
@@ -156,9 +156,9 @@ const Layout = ({
                       <Link
                         to="/transactions/new"
                         onClick={() => setSidebarOpen(false)}
-                        className="my-4 border-y dark:border-gray-900 text-sky-600 dark:text-sky-400 group flex items-center p-4 text-base font-medium shadow-inner"
+                        className="group my-4 flex items-center border-y p-4 text-base font-medium text-sky-600 shadow-inner dark:border-gray-900 dark:text-sky-400"
                       >
-                        <BoltIcon className="inline mr-4 flex-shrink-0 h-6 w-6" />
+                        <BoltIcon className="mr-4 inline h-6 w-6 flex-shrink-0" />
                         {t('transactions.add')}
                       </Link>
                       <nav className="space-y-1">
@@ -170,21 +170,21 @@ const Layout = ({
                             className={({ isActive }) =>
                               classNames(
                                 isActive
-                                  ? 'bg-red-800/[.1] dark:bg-red-600/[.15] text-gray-900 dark:text-gray-100'
+                                  ? 'bg-red-800/[.1] text-gray-900 dark:bg-red-600/[.15] dark:text-gray-100'
                                   : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-slate-700 dark:hover:text-gray-200',
                                 'group flex items-center px-4 py-4 text-base font-medium'
                               )
                             }
                           >
                             {({ isActive }) => (
-                              <div className="flex justify-between w-full">
+                              <div className="flex w-full justify-between">
                                 <div className="flex">
                                   <item.icon
                                     className={classNames(
                                       isActive
                                         ? 'text-red-800 dark:text-red-600'
                                         : 'text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200',
-                                      'mr-4 flex-shrink-0 h-6 w-6'
+                                      'mr-4 h-6 w-6 flex-shrink-0'
                                     )}
                                     aria-hidden="true"
                                   />
@@ -193,7 +193,7 @@ const Layout = ({
                                 {isActive ? (
                                   <ChevronLeftIcon className="icon-red" />
                                 ) : (
-                                  <ChevronRightIcon className="text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200 icon" />
+                                  <ChevronRightIcon className="icon text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200" />
                                 )}
                               </div>
                             )}
@@ -203,33 +203,33 @@ const Layout = ({
                     </div>
                     <div>
                       <a
-                        className="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700 flex items-center px-4 py-4 text-base font-medium"
+                        className="group flex items-center px-4 py-4 text-base font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-slate-700 dark:hover:text-gray-100"
                         href="https://github.com/envelope-zero/frontend/issues/new?labels=bug&template=bug_report.md"
                         target="_blank"
                         rel="noreferrer"
                       >
-                        <ExclamationTriangleIcon className="text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-100 mr-4 flex-shrink-0 h-6 w-6" />{' '}
+                        <ExclamationTriangleIcon className="mr-4 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-100" />{' '}
                         {t('navigation.bugReport')}
                       </a>
-                      <div className="text-gray-400 flex items-center px-4 text-sm font-medium justify-end">
+                      <div className="flex items-center justify-end px-4 text-sm font-medium text-gray-400">
                         {t('version')} {import.meta.env.VITE_VERSION || '0.0.0'}
                       </div>
                     </div>
                   </div>
                 </div>
               </Transition.Child>
-              <div className="flex-shrink-0 w-14">
+              <div className="w-14 flex-shrink-0">
                 {/* Force sidebar to shrink to fit close icon */}
               </div>
             </Dialog>
           </Transition.Root>
 
           {/* Static sidebar for desktop */}
-          <div className="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
-            <div className="flex-1 flex flex-col min-h-0 border-r border-gray-200 dark:border-gray-900 bg-white dark:bg-slate-800">
-              <div className="flex-1 flex flex-col justify-between pt-5 pb-4 overflow-y-auto">
+          <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
+            <div className="flex min-h-0 flex-1 flex-col border-r border-gray-200 bg-white dark:border-gray-900 dark:bg-slate-800">
+              <div className="flex flex-1 flex-col justify-between overflow-y-auto pb-4 pt-5">
                 <div>
-                  <div className="flex-shrink-0 flex items-center px-4">
+                  <div className="flex flex-shrink-0 items-center px-4">
                     <div>
                       <div className="text-base font-bold text-gray-900 dark:text-gray-100">
                         {safeName(budget, 'budget')}
@@ -245,13 +245,13 @@ const Layout = ({
                   </div>
                   <Link
                     to="/transactions/new"
-                    className="my-4 border-y dark:border-gray-900 link-blue hover:bg-gray-50 dark:hover:bg-slate-700 group flex items-center p-4 text-sm font-medium shadow-inner"
+                    className="link-blue group my-4 flex items-center border-y p-4 text-sm font-medium shadow-inner hover:bg-gray-50 dark:border-gray-900 dark:hover:bg-slate-700"
                     onClick={() => setSidebarOpen(false)}
                   >
-                    <BoltIcon className="mr-3 flex-shrink-0 h-6 w-6" />
+                    <BoltIcon className="mr-3 h-6 w-6 flex-shrink-0" />
                     {t('transactions.add')}
                   </Link>
-                  <nav className="mt-5 flex-1 bg-white dark:bg-slate-800 space-y-1">
+                  <nav className="mt-5 flex-1 space-y-1 bg-white dark:bg-slate-800">
                     {navigation.map(item => (
                       <NavLink
                         key={item.name}
@@ -259,7 +259,7 @@ const Layout = ({
                         className={({ isActive }) =>
                           classNames(
                             isActive
-                              ? 'bg-red-800/[.1] dark:bg-red-600/[.15] text-gray-900 dark:text-gray-100 border-r-4 border-red-800'
+                              ? 'border-r-4 border-red-800 bg-red-800/[.1] text-gray-900 dark:bg-red-600/[.15] dark:text-gray-100'
                               : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-slate-700 dark:hover:text-gray-200',
                             'group flex items-center px-4 py-2 text-sm font-medium'
                           )
@@ -272,7 +272,7 @@ const Layout = ({
                                 isActive
                                   ? 'text-red-800 dark:text-red-600'
                                   : 'text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200',
-                                'mr-3 flex-shrink-0 h-6 w-6'
+                                'mr-3 h-6 w-6 flex-shrink-0'
                               )}
                               aria-hidden="true"
                             />
@@ -285,15 +285,15 @@ const Layout = ({
                 </div>
                 <div>
                   <a
-                    className="text-gray-600 hover:text-gray-900 hover:bg-gray-50 group dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700 flex items-center px-4 py-2 text-sm font-medium"
+                    className="group flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-slate-700 dark:hover:text-gray-100"
                     href="https://github.com/envelope-zero/frontend/issues/new?labels=bug&template=bug_report.md"
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <ExclamationTriangleIcon className="text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-100 mr-3 flex-shrink-0 h-6 w-6" />{' '}
+                    <ExclamationTriangleIcon className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-100" />{' '}
                     {t('navigation.bugReport')}
                   </a>
-                  <div className="text-gray-400 flex items-center px-4 text-sm font-medium">
+                  <div className="flex items-center px-4 text-sm font-medium text-gray-400">
                     {t('version')} {import.meta.env.VITE_VERSION || '0.0.0'}
                   </div>
                 </div>
@@ -303,14 +303,14 @@ const Layout = ({
         </>
       )}
 
-      <div className={`${hideNav ? '' : 'lg:pl-64'} flex flex-col flex-1`}>
+      <div className={`${hideNav ? '' : 'lg:pl-64'} flex flex-1 flex-col`}>
         <div
-          className="sticky top-0 z-10 lg:hidden px-6 pt-4 bg-gray-100 dark:bg-slate-900"
+          className="sticky top-0 z-10 bg-gray-100 px-6 pt-4 dark:bg-slate-900 lg:hidden"
           ref={headerRef as React.RefObject<HTMLDivElement>}
         >
           <button
             type="button"
-            className={`-ml-0.5 -mt-0.5 h-12 inline-flex items-center rounded-md text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 ${
+            className={`-ml-0.5 -mt-0.5 inline-flex h-12 items-center rounded-md text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 ${
               hideNav ? 'invisible' : 'visible'
             }`}
             onClick={() => {
@@ -330,7 +330,7 @@ const Layout = ({
                 }}
               />
             )}
-            <div className="max-w-7xl mx-auto px-6 lg:px-8">
+            <div className="mx-auto max-w-7xl px-6 lg:px-8">
               <Error error={error} />
               <Outlet />
             </div>
diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
index 052ac16f4..f3bd6f11e 100644
--- a/src/components/LoadingSpinner.tsx
+++ b/src/components/LoadingSpinner.tsx
@@ -1,9 +1,9 @@
 const LoadingSpinner = () => {
   return (
-    <div className="w-full flex justify-center p-4" id="loading">
+    <div className="flex w-full justify-center p-4" id="loading">
       <div
         style={{ borderTopColor: 'transparent' }}
-        className="w-8 h-8 border-4 border-gray-600 dark:border-gray-400 border-dotted rounded-full animate-spin"
+        className="h-8 w-8 animate-spin rounded-full border-4 border-dotted border-gray-600 dark:border-gray-400"
       ></div>
     </div>
   )
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 364652750..5794fc8d1 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -20,7 +20,7 @@ const Modal = ({ open, setOpen, children }: Props) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-800/[.8] dark:bg-slate-700/[.8]  transition-opacity" />
+          <div className="fixed inset-0 bg-gray-800/[.8] transition-opacity  dark:bg-slate-700/[.8]" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -34,7 +34,7 @@ const Modal = ({ open, setOpen, children }: Props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg sm:p-6">
+              <Dialog.Panel className="relative w-full transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all dark:bg-slate-800 sm:my-8 sm:max-w-lg sm:p-6">
                 {children}
               </Dialog.Panel>
             </Transition.Child>
diff --git a/src/components/MonthPicker.tsx b/src/components/MonthPicker.tsx
index 94df18e0c..dac553c1a 100644
--- a/src/components/MonthPicker.tsx
+++ b/src/components/MonthPicker.tsx
@@ -34,12 +34,12 @@ const MonthPicker = ({ open, setOpen, activeMonth }: Props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 px-4 pt-6 pb-4 text-left shadow-xl border dark:border-gray-500 transition-all sm:max-w-sm sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border bg-white px-4 pb-4 pt-6 text-left shadow-xl transition-all dark:border-gray-500 dark:bg-slate-800 sm:max-w-sm sm:p-6">
                 <div>
                   <button
                     type="button"
                     title={t('close')}
-                    className="absolute top-2 right-2 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
+                    className="absolute right-2 top-2 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
                     onClick={e => {
                       e.preventDefault()
                       setOpen(false)
@@ -84,7 +84,7 @@ const MonthPicker = ({ open, setOpen, activeMonth }: Props) => {
                       </div>
                       <Link
                         to="/"
-                        className="block link-blue text-end text-sm pt-2"
+                        className="link-blue block pt-2 text-end text-sm"
                         onClick={() => setOpen(false)}
                       >
                         {t('dashboard.goToCurrentMonth')}
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index f98c592f8..13ba2b0c6 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -25,7 +25,7 @@ const Notification = ({ notification, setNotification }: Props) => {
   return (
     <div
       aria-live="assertive"
-      className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-10"
+      className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-start sm:p-6"
     >
       <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
         <Transition
diff --git a/src/components/OwnAccountsList.tsx b/src/components/OwnAccountsList.tsx
index b679f2a29..b6e358086 100644
--- a/src/components/OwnAccountsList.tsx
+++ b/src/components/OwnAccountsList.tsx
@@ -100,17 +100,17 @@ const OwnAccountsList = ({ budget }: Props) => {
       ) : (
         <div>
           {archived ? (
-            <div className="flex align-center justify-start link-blue pb-2">
+            <div className="align-center link-blue flex justify-start pb-2">
               <Link to="/own-accounts?archived=false">
-                <ChevronLeftIcon className="icon inline relative bottom-0.5" />
+                <ChevronLeftIcon className="icon relative bottom-0.5 inline" />
                 {t('back')}
               </Link>
             </div>
           ) : (
-            <div className="flex align-center justify-end link-blue pb-2">
+            <div className="align-center link-blue flex justify-end pb-2">
               <Link to="/own-accounts?archived=true">
                 {t('showArchived')}
-                <ChevronRightIcon className="icon inline relative bottom-0.5" />
+                <ChevronRightIcon className="icon relative bottom-0.5 inline" />
               </Link>
             </div>
           )}
@@ -120,11 +120,11 @@ const OwnAccountsList = ({ budget }: Props) => {
                 {accounts.map(account => (
                   <li
                     key={account.id}
-                    className="col-span-1 card p-0 flex flex-col justify-between  divide-y divide-gray-200 dark:divide-gray-600"
+                    className="card col-span-1 flex flex-col justify-between divide-y  divide-gray-200 p-0 dark:divide-gray-600"
                   >
                     <div className="flex w-full items-center justify-between space-x-6 p-6">
                       <div className="flex-1 truncate">
-                        <div className="lg:flex items-start justify-between lg:space-x-3">
+                        <div className="items-start justify-between lg:flex lg:space-x-3">
                           <div className="flex justify-between lg:block">
                             <h3
                               className={`truncate text-base font-bold ${
@@ -134,7 +134,7 @@ const OwnAccountsList = ({ budget }: Props) => {
                               {safeName(account, 'account')}
                               {account.archived ? (
                                 <ArchiveBoxIcon
-                                  className="icon-sm inline link-blue ml-2 stroke-2"
+                                  className="icon-sm link-blue ml-2 inline stroke-2"
                                   title={t('archived')}
                                 />
                               ) : null}
@@ -145,7 +145,7 @@ const OwnAccountsList = ({ budget }: Props) => {
                                   Number(account.computedData.balance) >= 0
                                     ? 'text-lime-600'
                                     : 'text-red-600'
-                                } lg:mt-2 text-lg text-right lg:text-left`}
+                                } text-right text-lg lg:mt-2 lg:text-left`}
                               >
                                 <strong>
                                   {formatMoney(
@@ -201,7 +201,7 @@ const OwnAccountsList = ({ budget }: Props) => {
             </>
           ) : (
             <>
-              <div className="text-gray-700 dark:text-gray-300 text-center">
+              <div className="text-center text-gray-700 dark:text-gray-300">
                 {archived
                   ? t('accounts.emptyArchive')
                   : t('accounts.emptyList')}
diff --git a/src/components/QuickAllocationForm.tsx b/src/components/QuickAllocationForm.tsx
index 653104975..dfdce8f9c 100644
--- a/src/components/QuickAllocationForm.tsx
+++ b/src/components/QuickAllocationForm.tsx
@@ -36,7 +36,7 @@ const QuickAllocationForm = ({ link, reloadBudgetMonth }: Props) => {
   return (
     <div>
       <button
-        className="text-base w-full full-centered"
+        className="full-centered w-full text-base"
         onClick={() => setShowPopup(true)}
       >
         {t('dashboard.quickAllocation')}
@@ -55,7 +55,7 @@ const QuickAllocationForm = ({ link, reloadBudgetMonth }: Props) => {
         <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
           <button
             type="button"
-            className="rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:hover:text-gray-300"
             onClick={() => {
               setShowPopup(false)
               if (error) {
diff --git a/src/components/TransactionFilters.tsx b/src/components/TransactionFilters.tsx
index 3f1d9a8c7..fd160d320 100644
--- a/src/components/TransactionFilters.tsx
+++ b/src/components/TransactionFilters.tsx
@@ -63,7 +63,7 @@ const TransactionFilters = ({
       onReset={hideFilters}
       className="card"
     >
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
         <FormField
           type="number"
           name="amountMoreOrEqual"
diff --git a/src/components/TransactionForm.tsx b/src/components/TransactionForm.tsx
index a4a4b2e75..4b80e1690 100644
--- a/src/components/TransactionForm.tsx
+++ b/src/components/TransactionForm.tsx
@@ -227,7 +227,7 @@ const TransactionForm = ({ budget, setNotification }: Props) => {
                   }
                 }}
               >
-                <LockClosedIcon className="icon-red inline mr-1" />
+                <LockClosedIcon className="icon-red mr-1 inline" />
                 {t('transactions.unlock')}
               </button>
               <small className="text-xs md:text-sm">
@@ -236,7 +236,7 @@ const TransactionForm = ({ budget, setNotification }: Props) => {
             </div>
           ) : null}
 
-          <FormFields className="md:grid grid-cols-2 gap-x-4 space-y-6 md:space-y-0 md:gap-y-6">
+          <FormFields className="grid-cols-2 gap-x-4 space-y-6 md:grid md:gap-y-6 md:space-y-0">
             <FormField
               type="text"
               name="note"
@@ -425,7 +425,7 @@ const TransactionForm = ({ budget, setNotification }: Props) => {
             ) : null}
           </FormFields>
 
-          <div className="mt-8 button-group">
+          <div className="button-group mt-8">
             <button type="submit" className="btn-primary">
               {t('save')}
             </button>
@@ -435,7 +435,7 @@ const TransactionForm = ({ budget, setNotification }: Props) => {
                   to={`/transactions/new?duplicateFrom=${transactionId}`}
                   className="btn-secondary"
                 >
-                  <DocumentDuplicateIcon className="icon-sm inline mr-1 relative bottom-0.5" />
+                  <DocumentDuplicateIcon className="icon-sm relative bottom-0.5 mr-1 inline" />
                   {t('transactions.repeat')}
                 </Link>
                 <button
@@ -455,7 +455,7 @@ const TransactionForm = ({ budget, setNotification }: Props) => {
                   }}
                   className="btn-secondary-red"
                 >
-                  <TrashIcon className="icon-red icon-sm inline mr-1 relative bottom-0.5" />
+                  <TrashIcon className="icon-red icon-sm relative bottom-0.5 mr-1 inline" />
                   {t('transactions.delete')}
                 </button>
               </>
diff --git a/src/components/TransactionImport/Form.tsx b/src/components/TransactionImport/Form.tsx
index d3353db5a..9200c799f 100644
--- a/src/components/TransactionImport/Form.tsx
+++ b/src/components/TransactionImport/Form.tsx
@@ -90,12 +90,12 @@ const Form = ({ accounts, setResult }: Props) => {
           <Error error={error} />
           <div className="card md:mt-4">
             <p
-              className="whitespace-pre-line dark:text-gray-400 mb-4"
+              className="mb-4 whitespace-pre-line dark:text-gray-400"
               dangerouslySetInnerHTML={{
                 __html: t('transactions.import.description'),
               }}
             ></p>
-            <FormFields className="md:grid grid-cols-2 gap-x-4 space-y-6 md:space-y-0 md:gap-y-6">
+            <FormFields className="grid-cols-2 gap-x-4 space-y-6 md:grid md:gap-y-6 md:space-y-0">
               <Autocomplete<Account>
                 groups={[{ items: accounts }]}
                 allowNewCreation={false}
diff --git a/src/components/TransactionImport/Result.tsx b/src/components/TransactionImport/Result.tsx
index 696e5e9ba..2f957ffe5 100644
--- a/src/components/TransactionImport/Result.tsx
+++ b/src/components/TransactionImport/Result.tsx
@@ -263,7 +263,7 @@ const Result = (props: Props) => {
             })
         }}
       >
-        <div className="w-full full-centered mb-4">
+        <div className="full-centered mb-4 w-full">
           <button
             type="button"
             title={t('transactions.import.previous')}
@@ -305,7 +305,7 @@ const Result = (props: Props) => {
         )}
 
         <div className="card mt-4">
-          <FormFields className="md:grid grid-cols-2 gap-x-4 space-y-6 md:space-y-0 md:gap-y-6">
+          <FormFields className="grid-cols-2 gap-x-4 space-y-6 md:grid md:gap-y-6 md:space-y-0">
             <FormField
               type="text"
               name="note"
@@ -472,7 +472,7 @@ const Result = (props: Props) => {
               <CheckCircleIcon className="icon mr-1" />
               {t('import')}
             </button>
-            <div className="flex justify-center col-span-2 dark:text-gray-400 text-gray-600">
+            <div className="col-span-2 flex justify-center text-gray-600 dark:text-gray-400">
               {t('transactions.import.youCanCloseAndResume')}
             </div>
           </div>
diff --git a/src/components/TransactionsList.tsx b/src/components/TransactionsList.tsx
index 702382538..e1b9084aa 100644
--- a/src/components/TransactionsList.tsx
+++ b/src/components/TransactionsList.tsx
@@ -130,7 +130,7 @@ const TransactionsList = ({ budget }: Props) => {
       case 'account':
         return (
           <>
-            <BanknotesIcon className="icon-red icon-sm inline mr-1" />
+            <BanknotesIcon className="icon-red icon-sm mr-1 inline" />
             {safeName(
               accounts.find(account => account.id === value),
               'account'
@@ -145,7 +145,7 @@ const TransactionsList = ({ budget }: Props) => {
 
         return (
           <>
-            <EnvelopeIcon className="icon-red icon-sm inline mr-1" />
+            <EnvelopeIcon className="icon-red icon-sm mr-1 inline" />
             {safeName(
               envelopes.find(envelope => envelope.id === value),
               'envelope'
@@ -220,13 +220,13 @@ const TransactionsList = ({ budget }: Props) => {
         ) : (
           <button
             type="button"
-            className="rounded-full full-centered  px-2.5 py-1.5 bg-red-800 text-sm text-gray-100"
+            className="full-centered rounded-full  bg-red-800 px-2.5 py-1.5 text-sm text-gray-100"
             onClick={() => setShowFilters(!showFilters)}
             title={t('filterResource', {
               resource: t('transactions.transactions'),
             })}
           >
-            <FunnelIcon className="icon-sm inline mr-1" />
+            <FunnelIcon className="icon-sm mr-1 inline" />
             {t('filterResource', {
               resource: t('transactions.transactions'),
             })}
@@ -244,7 +244,7 @@ const TransactionsList = ({ budget }: Props) => {
           return (
             <button
               key={filter}
-              className="rounded-full full-centered border border-red-800 dark:border-red-600 bg-white dark:bg-slate-800 px-2.5 py-1.5 text-sm font-medium text-red-800 hover:text-red-900 dark:text-red-600 max-w-full truncate group"
+              className="full-centered group max-w-full truncate rounded-full border border-red-800 bg-white px-2.5 py-1.5 text-sm font-medium text-red-800 hover:text-red-900 dark:border-red-600 dark:bg-slate-800 dark:text-red-600"
               type="button"
               onClick={() => {
                 searchParams.delete(filter)