[#69] Run npx @tailwindcss/upgrade@next

package.json

@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.3.0",
-    "autoprefixer": "^10.4.19",
+    "@tailwindcss/postcss": "^4.0.0",
     "cssnano": "^7.0.1",
     "eslint-config-prettier": "^9.1.0",
     "globals": "^15.3.0",
@@ -22,7 +22,7 @@
     "postcss": "^8.4.38",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "3.2.5",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.0",
     "vite": "^5.2.0",
     "vite-plugin-static-copy": "^1.0.6"
   },

postcss.config.js

@@ -1,7 +1,8 @@
+import process from 'process'
+
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
     'postcss-pxtorem': {
       rootValue: 16,
       unitPrecision: 5,

src/css/app.css

@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../../tailwind.config.js';
 
 @layer base {
   @font-face {

templates/_components/accordion.twig

@@ -22,7 +22,7 @@
   }) }}
 >
   <summary
-    class="group/summary flex cursor-pointer items-center justify-between py-24 marker:content-none focus:outline-none"
+    class="group/summary flex cursor-pointer items-center justify-between py-24 marker:content-none focus:outline-hidden"
   >
     {{ tag(headingTag, {
       class: 'text-lg font-bold',
@@ -31,7 +31,7 @@
 
     {# Animated toggle icon #}
     <span
-      class="relative size-28 shrink-0 rounded border-2 border-transparent text-gray-600 transition-all group-hover/summary:bg-sky-200 group-focus-visible/summary:border-sky-700 group-active/summary:bg-sky-300 dark:group-hover/summary:bg-gray-800 dark:group-focus-visible/summary:border-gray-600 dark:group-active/summary:bg-gray-700"
+      class="relative size-28 shrink-0 rounded-sm border-2 border-transparent text-gray-600 transition-all group-hover/summary:bg-sky-200 group-focus-visible/summary:border-sky-700 group-active/summary:bg-sky-300 dark:group-hover/summary:bg-gray-800 dark:group-focus-visible/summary:border-gray-600 dark:group-active/summary:bg-gray-700"
     >
       <span
         class="absolute inset-0 m-auto h-4 w-20 bg-neutral-600 transition-transform duration-500 group-open/details:rotate-[360deg]"

templates/_components/dialog.twig

@@ -65,7 +65,7 @@
         size: 'sm',
         title: 'Close',
         variant: 'subtle',
-        class: 'absolute right-4 top-4 size-24 !min-h-0 [&_svg]:size-12',
+        class: 'absolute right-4 top-4 size-24 min-h-0! [&_svg]:size-12',
         attrs: {
           '@click': 'handleDialogClose()'
         }

templates/_components/tabs.twig

@@ -31,14 +31,14 @@
         <button
           data-index="{{ loop.index0 }}"
           id="{{ id }}-tab-{{ loop.index }}"
-          class="group cursor-pointer bg-transparent px-8 pb-4 transition-colors aria-selected:font-bold aria-selected:shadow-[inset_0_-3px_theme(colors.blue.500)]"
+          class="group cursor-pointer bg-transparent px-8 pb-4 transition-colors aria-selected:font-bold aria-selected:shadow-[inset_0_-3px_var(--color-blue-500)]"
           role="tab"
           aria-controls="{{ id }}-tabpanel-{{ loop.index }}"
           :aria-selected="activeIndex === {{ loop.index0 }}"
           @click="selectTab"
         >
           <span
-            class="pointer-events-none mb-4 flex items-center justify-center rounded px-8 py-0 group-hover:bg-gray-100 group-active:bg-gray-200 dark:group-hover:bg-gray-800 dark:group-active:bg-gray-700"
+            class="pointer-events-none mb-4 flex items-center justify-center rounded-sm px-8 py-0 group-hover:bg-gray-100 group-active:bg-gray-200 dark:group-hover:bg-gray-800 dark:group-active:bg-gray-700"
           >
             {{ tab.title }}
           </span>

templates/_components/tag.twig

@@ -33,7 +33,7 @@
 {% tag el with attrs|merge({
   href: href,
   type: clickable and el == 'button' ? 'button' : null,
-  class: classNames('inline-flex items-center justify-center gap-4 rounded-sm text-center font-medium focus:outline-none focus-visible:ring-4', {
+  class: classNames('inline-flex items-center justify-center gap-4 rounded-xs text-center font-medium focus:outline-hidden focus-visible:ring-4', {
     'bg-sky-600 text-white dark:bg-sky-200 dark:text-sky-800': variant == 'contained',
     'no-underline hover:bg-sky-700 focus-visible:bg-sky-700 focus-visible:ring-sky-600/50 active:bg-sky-800 dark:hover:bg-sky-50 dark:focus-visible:bg-sky-50 dark:focus-visible:ring-white/50 dark:active:bg-sky-100': variant == 'contained' and (href or clickable),
     'border border-sky-600 bg-transparent text-sky-600 dark:border-white dark:text-white': variant == 'outlined',

templates/_partials/nav-mobile.twig

@@ -49,13 +49,13 @@
   {# Logo and nav toggle button lockup #}
   <div
     class="container flex items-center justify-between transition-colors duration-300"
-    :class="isOpen && '!bg-neutral-800'"
+    :class="isOpen && 'bg-neutral-800!'"
   >
     {# The logo changes when you open the mobile nav. Just because it's rad. #}
     <a
       href="{{ url('/') }}"
       class="relative z-10 transition-colors duration-700 text-neutral-500"
-      :class="isOpen && '!text-amber-600'"
+      :class="isOpen && 'text-amber-600!'"
     >
       {{ icon({
         name: 'logo-primary',