feat: update to tailwindcss@4

package.json

@@ -28,23 +28,22 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^22.10.7",
     "@unhead/vue": "^1.11.18",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
-    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.10",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "terser": "^5.37.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.21.0",

src/components/AppHeader.vue

@@ -2,7 +2,7 @@
   <nav class="mx-auto flex min-h-16 w-full items-center p-2">
     <div class="flex-1">
       <RouterLink
-        class="inline-flex min-h-12 select-none flex-wrap items-center justify-center rounded-lg px-4 text-xl font-semibold"
+        class="inline-flex min-h-12 flex-wrap items-center justify-center rounded-lg px-4 text-xl font-semibold select-none"
         to="/"
       >
         Bandoneon.app
@@ -16,14 +16,14 @@
     </div>
     <div class="flex-none">
       <button
-        class="inline-flex h-12 w-12 select-none flex-wrap items-center justify-center rounded-lg font-semibold"
+        class="inline-flex h-12 w-12 flex-wrap items-center justify-center rounded-lg font-semibold select-none"
         @click.prevent="isDark = !isDark"
       >
         <IconSun v-if="!isDark" class="h-5 w-5" />
         <IconMoon v-else class="h-5 w-5" />
       </button>
       <button
-        class="inline-flex h-12 w-12 select-none flex-wrap items-center justify-center rounded-lg font-semibold"
+        class="inline-flex h-12 w-12 flex-wrap items-center justify-center rounded-lg font-semibold select-none"
         type="button"
         title="Settings"
         @click.prevent="showMenu = !showMenu"

src/components/AppSettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-neutral-100 dark:bg-neutral-800">
-    <div class="mx-auto max-w-screen-md p-6">
+    <div class="mx-auto max-w-(--breakpoint-md) p-6">
       <div class="mb-4">
         <label
           class="block text-xs font-medium text-neutral-500 dark:text-neutral-400"

src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="select-none rounded-md border border-neutral-400 px-3 py-2 text-sm font-semibold hover:bg-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-300 disabled:hover:bg-inherit aria-pressed:border-neutral-800 aria-pressed:bg-neutral-800 aria-pressed:text-white aria-pressed:hover:bg-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-700 disabled:dark:border-neutral-500 disabled:dark:text-neutral-600 disabled:dark:hover:bg-inherit aria-pressed:dark:border-neutral-200 aria-pressed:dark:bg-neutral-100 aria-pressed:dark:text-neutral-900 aria-pressed:dark:hover:bg-neutral-200"
+    class="rounded-md border border-neutral-400 px-3 py-2 text-sm font-semibold select-none hover:bg-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-300 disabled:hover:bg-inherit aria-pressed:border-neutral-800 aria-pressed:bg-neutral-800 aria-pressed:text-white aria-pressed:hover:bg-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-700 dark:disabled:border-neutral-500 dark:disabled:text-neutral-600 dark:disabled:hover:bg-inherit dark:aria-pressed:border-neutral-200 dark:aria-pressed:bg-neutral-100 dark:aria-pressed:text-neutral-900 dark:aria-pressed:hover:bg-neutral-200"
   >
     <slot />
   </button>

src/components/Modal.vue

@@ -12,7 +12,7 @@
           class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
         >
           <div
-            class="relative w-full overflow-hidden rounded-lg bg-white text-left shadow-xl dark:bg-neutral-900 sm:my-8 sm:max-w-lg"
+            class="relative w-full overflow-hidden rounded-lg bg-white text-left shadow-xl sm:my-8 sm:max-w-lg dark:bg-neutral-900"
           >
             <slot />
           </div>

src/components/NavDisplay.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-wrap justify-center print:hidden">
     <div class="flex flex-col items-center">
       <div
-        class="mb-1 select-none text-xs font-medium text-neutral-500 dark:text-neutral-400"
+        class="mb-1 text-xs font-medium text-neutral-500 select-none dark:text-neutral-400"
       >
         {{ t('scale') }}
       </div>
@@ -19,7 +19,7 @@
     </div>
     <div class="flex flex-col items-center">
       <div
-        class="mb-1 select-none text-xs font-medium text-neutral-500 dark:text-neutral-400"
+        class="mb-1 text-xs font-medium text-neutral-500 select-none dark:text-neutral-400"
       >
         {{ t('chord') }}
       </div>
@@ -36,7 +36,7 @@
     </div>
     <div class="flex flex-col items-center">
       <div
-        class="mb-1 select-none text-xs font-medium text-neutral-500 dark:text-neutral-400"
+        class="mb-1 text-xs font-medium text-neutral-500 select-none dark:text-neutral-400"
       >
         {{ t('display') }}
       </div>

src/components/Select.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <select
       :id="id"
-      class="relative block w-full select-none appearance-none rounded-md border-0 bg-white p-2.5 pe-9 text-sm ring-1 ring-inset ring-neutral-400 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900 dark:ring-neutral-500"
+      class="relative block w-full appearance-none rounded-md border-0 bg-white p-2.5 pe-9 text-sm ring-1 ring-neutral-400 ring-inset select-none focus:ring-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900 dark:ring-neutral-500"
       @input="onInput"
     >
       <option

src/pages/[...path].vue

@@ -1,3 +1,5 @@
 <template>
-  <div class="mx-auto max-w-screen-md flex-1 p-16 text-center">Not Found</div>
+  <div class="mx-auto max-w-(--breakpoint-md) flex-1 p-16 text-center">
+    Not Found
+  </div>
 </template>

src/pages/game.vue

@@ -13,7 +13,7 @@
       />
     </SvgKeyboard>
   </div>
-  <div class="mx-auto max-w-screen-md px-6 pb-6">
+  <div class="mx-auto max-w-(--breakpoint-md) px-6 pb-6">
     <NavVariant :readonly="currentPosition > 0" />
     <NavTonic />
     <!-- Medium mode: display octave buttons -->

src/pages/index.vue

@@ -19,7 +19,7 @@
       />
     </SvgKeyboard>
   </div>
-  <div class="mx-auto max-w-screen-md px-6 pb-6">
+  <div class="mx-auto max-w-(--breakpoint-md) px-6 pb-6">
     <NavVariant />
     <NavTonic />
     <NavDisplay

src/style.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));

vite.config.ts

@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite';
 import legacy from '@vitejs/plugin-legacy';
 import vue from '@vitejs/plugin-vue';
 import VueRouter from 'unplugin-vue-router/vite';
@@ -7,6 +8,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     VueRouter(),
     vue(),
     legacy({