diff --git a/.yarn/cache/jiti-npm-1.21.0-baebd5985a-a7bd5d6392.zip b/.yarn/cache/jiti-npm-1.21.0-baebd5985a-a7bd5d6392.zip
new file mode 100644
index 000000000..a18e74e92
Binary files /dev/null and b/.yarn/cache/jiti-npm-1.21.0-baebd5985a-a7bd5d6392.zip differ
diff --git a/.yarn/cache/prettier-plugin-tailwindcss-npm-0.5.3-d84701bb25-c20843d973.zip b/.yarn/cache/prettier-plugin-tailwindcss-npm-0.5.3-d84701bb25-c20843d973.zip
deleted file mode 100644
index 1b4493773..000000000
Binary files a/.yarn/cache/prettier-plugin-tailwindcss-npm-0.5.3-d84701bb25-c20843d973.zip and /dev/null differ
diff --git a/.yarn/cache/prettier-plugin-tailwindcss-npm-0.5.9-467e16e035-ceb7d26d41.zip b/.yarn/cache/prettier-plugin-tailwindcss-npm-0.5.9-467e16e035-ceb7d26d41.zip
new file mode 100644
index 000000000..b08e68c56
Binary files /dev/null and b/.yarn/cache/prettier-plugin-tailwindcss-npm-0.5.9-467e16e035-ceb7d26d41.zip differ
diff --git a/.yarn/cache/tailwindcss-npm-3.3.3-1cb35d024e-0195c7a3eb.zip b/.yarn/cache/tailwindcss-npm-3.3.3-1cb35d024e-0195c7a3eb.zip
deleted file mode 100644
index 48c1832b9..000000000
Binary files a/.yarn/cache/tailwindcss-npm-3.3.3-1cb35d024e-0195c7a3eb.zip and /dev/null differ
diff --git a/.yarn/cache/tailwindcss-npm-3.4.0-e59fbdee04-d7f05beb1c.zip b/.yarn/cache/tailwindcss-npm-3.4.0-e59fbdee04-d7f05beb1c.zip
new file mode 100644
index 000000000..360010269
Binary files /dev/null and b/.yarn/cache/tailwindcss-npm-3.4.0-e59fbdee04-d7f05beb1c.zip differ
diff --git a/packages/web/package.json b/packages/web/package.json
index fec2ea134..b6f1a21d4 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -87,14 +87,14 @@
     "postcss": "^8.4.19",
     "postcss-loader": "^7.0.2",
     "prettier": "*",
-    "prettier-plugin-tailwindcss": "^0.5.3",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
     "sass-loader": "*",
     "svg-jest": "^1.0.1",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.0",
     "ts-jest": "^29.0.3",
     "ts-loader": "^9.4.2",
     "typescript": "*",
diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
index 0ea0b388d..b2da3c88b 100644
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
@@ -27,7 +27,7 @@ const AlertDialog = ({
     <Dialog
       store={dialog}
       role="alertdialog"
-      className="fixed left-0 top-0 z-modal h-full w-full flex items-center justify-center pointer-events-auto"
+      className="pointer-events-auto fixed left-0 top-0 z-modal flex h-full w-full items-center justify-center"
       modal={false}
       portal={true}
       preventBodyScroll={true}
@@ -40,7 +40,7 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'z-[1] w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-6 py-5 shadow-xl md:w-auto',
+          'z-[1] w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] px-6 py-5 shadow-xl [backdrop-filter:var(--popover-backdrop-filter)] md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}
diff --git a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
index aaa8bb221..879bf38b8 100644
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -156,7 +156,7 @@ const FilePreviewModal = observer(({ application }: Props) => {
         onKeyDown={keyDownHandler}
         ref={focusElementOnMount}
       >
-        <div className="min-h-6 hidden flex-shrink-0 flex-wrap items-center justify-between gap-2 border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none md:flex">
+        <div className="hidden min-h-6 flex-shrink-0 flex-wrap items-center justify-between gap-2 border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none md:flex">
           <div className="flex items-center">
             <div className="h-6 w-6">{IconComponent}</div>
             {isRenaming ? (
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
index 7b4fda5f8..fce27eb94 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
@@ -50,7 +50,7 @@ const LinkedItemsPanel = ({ item }: { item: DecryptedItem }) => {
     <div>
       <form
         className={classNames(
-          'sticky top-0 z-10 bg-default md:translucent-ui:bg-transparent px-2.5 pt-2.5',
+          'sticky top-0 z-10 bg-default px-2.5 pt-2.5 md:translucent-ui:bg-transparent',
           linkedResults.length || unlinkedItems.length || notesLinkingToItem.length
             ? 'border-b border-border pb-2.5'
             : 'pb-1',
diff --git a/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx b/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
index de7afe0a6..9e40cbe79 100644
--- a/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
+++ b/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
@@ -27,7 +27,7 @@ const MultipleSelectedFiles = ({ itemListController }: Props) => {
       <div className="flex min-h-full w-full max-w-md flex-grow flex-col items-center justify-center">
         <IlNotesIcon className="block" />
         <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected files</h2>
-        <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected files.</p>
+        <p className="mt-2 max-w-60 text-center text-sm">Actions will be performed on all selected files.</p>
         <Button className="mt-2.5" onClick={cancelMultipleSelection}>
           Cancel multiple selection
         </Button>
diff --git a/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx b/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
index 66723e09a..522545309 100644
--- a/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
+++ b/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
@@ -36,7 +36,7 @@ const MultipleSelectedNotes = ({ application }: Props) => {
       <div className="flex min-h-full w-full max-w-md flex-grow flex-col items-center justify-center md:min-h-0">
         <IlNotesIcon className="block" />
         <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected notes</h2>
-        <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected notes.</p>
+        <p className="mt-2 max-w-60 text-center text-sm">Actions will be performed on all selected notes.</p>
         <Button className="mt-2.5" onClick={cancelMultipleSelection}>
           Cancel multiple selection
         </Button>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
index bac0b14ba..5004ace25 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
@@ -96,7 +96,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
           <div className="flex items-center gap-2.5">
             <div className="text-sm font-semibold">Title:</div>
             <input
-              className="rounded border border-border bg-default md:translucent-ui:bg-transparent px-2 py-1"
+              className="rounded border border-border bg-default px-2 py-1 md:translucent-ui:bg-transparent"
               value={title}
               onChange={(event) => {
                 setTitle(event.target.value)
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
index 37611dbf3..17b499140 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
@@ -8,7 +8,7 @@ type Props = {
 }
 
 const EncryptionStatusItem: FunctionComponent<Props> = ({ icon, status, checkmark = true }) => (
-  <div className="text-input min-h-8 no-border my-1 flex w-full flex-row items-center rounded bg-contrast px-3 py-1.5 focus-within:ring-info">
+  <div className="text-input no-border my-1 flex min-h-8 w-full flex-row items-center rounded bg-contrast px-3 py-1.5 focus-within:ring-info">
     {icon}
     <div className="min-h-1 min-w-3" />
     <div className="flex-grow text-sm text-text">{status}</div>
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index 9a50a0aa1..281289ad1 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -36,7 +36,7 @@ export const LinkButton: FunctionComponent<{
   <a
     target="_blank"
     className={classNames(
-      'block bg-normal-button text-text rounded border-solid border px-4 py-1.5 font-bold text-base lg:text-sm w-fit focus:bg-contrast hover:bg-contrast border-border',
+      'block w-fit rounded border border-solid border-border bg-normal-button px-4 py-1.5 text-base font-bold text-text hover:bg-contrast focus:bg-contrast lg:text-sm',
       className,
     )}
     href={link}
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
index 356af498f..eba410c86 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx
@@ -50,7 +50,7 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
       animate="mobile"
       animationVariant="horizontal"
       close={application.preferencesController.closePreferences}
-      className="md:!border-0 md:h-full md:!max-h-full md:!w-full"
+      className="md:h-full md:!max-h-full md:!w-full md:!border-0"
     >
       <PreferencesView
         closePreferences={application.preferencesController.closePreferences}
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
index aaf070164..db674e9f9 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
@@ -42,7 +42,7 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController, readonly = fa
   }, [deleteRemoteRevision, selectedEntry])
 
   return (
-    <div className="min-h-6 flex flex-shrink-0 flex-wrap items-center gap-2.5 border-t border-solid border-border px-2.5 py-2 md:justify-between">
+    <div className="flex min-h-6 flex-shrink-0 flex-wrap items-center gap-2.5 border-t border-solid border-border px-2.5 py-2 md:justify-between">
       <Button className="py-1.35" label="Close" onClick={dismissModal} />
       {selectedRevision && selectedEntry && !readonly && (
         <>
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
index f5b5fc7c2..b91735910 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -147,7 +147,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
           <div className="flex items-center gap-2.5">
             <div className="text-sm font-semibold">Title:</div>
             <input
-              className="rounded border border-border bg-default md:translucent-ui:bg-transparent px-2 py-1"
+              className="rounded border border-border bg-default px-2 py-1 md:translucent-ui:bg-transparent"
               value={title}
               onChange={(event) => {
                 setTitle(event.target.value)
diff --git a/packages/web/src/javascripts/Components/Tabs/Tab.tsx b/packages/web/src/javascripts/Components/Tabs/Tab.tsx
index 89d568f5e..5abede6bf 100644
--- a/packages/web/src/javascripts/Components/Tabs/Tab.tsx
+++ b/packages/web/src/javascripts/Components/Tabs/Tab.tsx
@@ -20,7 +20,7 @@ const Tab = ({ id, className, children, ...props }: Props) => {
       aria-selected={isActive}
       aria-controls={`tab-panel-${id}`}
       className={classNames(
-        'relative cursor-pointer border-0 bg-default md:translucent-ui:bg-transparent px-3 py-2.5 text-sm focus:shadow-inner',
+        'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner md:translucent-ui:bg-transparent',
         isActive ? 'font-medium text-info' : 'text-text',
         isActive && 'after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-info',
         className,
diff --git a/packages/web/src/javascripts/Utils/Items/Icons/Icons.spec.ts b/packages/web/src/javascripts/Utils/Items/Icons/Icons.spec.ts
index 134ebad63..87a883d9c 100644
--- a/packages/web/src/javascripts/Utils/Items/Icons/Icons.spec.ts
+++ b/packages/web/src/javascripts/Utils/Items/Icons/Icons.spec.ts
@@ -1,4 +1,4 @@
-import { getIconForFileType } from "./getIconForFileType"
+import { getIconForFileType } from './getIconForFileType'
 
 describe('icons utils', () => {
   describe('getIconForFileType', () => {
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 081b1776d..f35242f82 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -26,29 +26,9 @@ module.exports = {
         'safe-right': 'var(--safe-area-inset-right)',
       },
       minWidth: {
-        1: '0.25rem',
-        2: '0.5rem',
-        3: '0.75rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        8: '2rem',
-        8.5: '2.125rem',
-        9: '2.25rem',
-        10: '2.5rem',
-        15: '3.75rem',
-        20: '5rem',
-        24: '6rem',
-        30: '7.5rem',
-        40: '10rem',
         42: '10.5rem',
-        50: '12.5rem',
         55: '13.75rem',
-        60: '15rem',
-        68: '17rem',
-        70: '17.5rem',
         76: '19rem',
-        80: '20rem',
         90: '22.5rem',
       },
       maxWidth: {
@@ -56,11 +36,6 @@ module.exports = {
         89: '22.25rem',
         125: '31.25rem',
       },
-      minHeight: {
-        1: '0.25rem',
-        2: '0.5rem',
-        11: '2.75rem',
-      },
       maxHeight: {
         110: '27.5rem',
       },
diff --git a/yarn.lock b/yarn.lock
index 3598281cf..b0e6fe5b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7533,14 +7533,14 @@ __metadata:
     postcss: ^8.4.19
     postcss-loader: ^7.0.2
     prettier: "*"
-    prettier-plugin-tailwindcss: ^0.5.3
+    prettier-plugin-tailwindcss: ^0.5.9
     qrcode.react: ^3.1.0
     react: ^18.2.0
     react-dom: ^18.2.0
     react-refresh: ^0.14.0
     sass-loader: "*"
     svg-jest: ^1.0.1
-    tailwindcss: ^3.3.3
+    tailwindcss: ^3.4.0
     ts-jest: ^29.0.3
     ts-loader: ^9.4.2
     typescript: "*"
@@ -14345,7 +14345,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0":
+"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0":
   version: 3.3.1
   resolution: "fast-glob@npm:3.3.1"
   dependencies:
@@ -17781,6 +17781,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^1.19.1":
+  version: 1.21.0
+  resolution: "jiti@npm:1.21.0"
+  bin:
+    jiti: bin/jiti.js
+  checksum: a7bd5d63921c170eaec91eecd686388181c7828e1fa0657ab374b9372bfc1f383cf4b039e6b272383d5cb25607509880af814a39abdff967322459cca41f2961
+  languageName: node
+  linkType: hard
+
 "jju@npm:^1.1.0":
   version: 1.4.0
   resolution: "jju@npm:1.4.0"
@@ -22142,20 +22151,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-plugin-tailwindcss@npm:^0.5.3":
-  version: 0.5.3
-  resolution: "prettier-plugin-tailwindcss@npm:0.5.3"
+"prettier-plugin-tailwindcss@npm:^0.5.9":
+  version: 0.5.9
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.9"
   peerDependencies:
     "@ianvs/prettier-plugin-sort-imports": "*"
     "@prettier/plugin-pug": "*"
     "@shopify/prettier-plugin-liquid": "*"
-    "@shufo/prettier-plugin-blade": "*"
     "@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: "*"
@@ -22167,8 +22176,6 @@ __metadata:
       optional: true
     "@shopify/prettier-plugin-liquid":
       optional: true
-    "@shufo/prettier-plugin-blade":
-      optional: true
     "@trivago/prettier-plugin-sort-imports":
       optional: true
     prettier-plugin-astro:
@@ -22191,7 +22198,7 @@ __metadata:
       optional: true
     prettier-plugin-twig-melody:
       optional: true
-  checksum: c20843d9739bf8ac4608166841484276dc73040ba02fef5dfee2f78f6e10957ad09c161fefb01e120fec24c0f982a34339212ad1fa70ec2b75472f6f853667d9
+  checksum: ceb7d26d4191221736983c26f213f3fac660c289dd902cbce9003dba375e9d21066906d762530c52363049ef529a1e4a9d5926387cbb44e0ef154c0d2619fe72
   languageName: node
   linkType: hard
 
@@ -25248,19 +25255,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "tailwindcss@npm:3.3.3"
+"tailwindcss@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "tailwindcss@npm:3.4.0"
   dependencies:
     "@alloc/quick-lru": ^5.2.0
     arg: ^5.0.2
     chokidar: ^3.5.3
     didyoumean: ^1.2.2
     dlv: ^1.1.3
-    fast-glob: ^3.2.12
+    fast-glob: ^3.3.0
     glob-parent: ^6.0.2
     is-glob: ^4.0.3
-    jiti: ^1.18.2
+    jiti: ^1.19.1
     lilconfig: ^2.1.0
     micromatch: ^4.0.5
     normalize-path: ^3.0.0
@@ -25277,7 +25284,7 @@ __metadata:
   bin:
     tailwind: lib/cli.js
     tailwindcss: lib/cli.js
-  checksum: 0195c7a3ebb0de5e391d2a883d777c78a4749f0c532d204ee8aea9129f2ed8e701d8c0c276aa5f7338d07176a3c2a7682c1d0ab9c8a6c2abe6d9325c2954eb50
+  checksum: d7f05beb1cf98d169b9b65ef674a82dd16c97757194f9bacee4c536cf74f3852e0008a74f7af8578f4a1e9639fac262fd8ef89efe3e6e06667243640422f9462
   languageName: node
   linkType: hard