Update to Tailwind v4

apps/volt/assets/styles/app/_core.scss

@@ -1,7 +1,7 @@
 html {
     font-size: 14px;
     font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-feature-settings: "cv02","cv03","cv04","cv11";
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 }
 
 body {
@@ -29,7 +29,12 @@ a {
     color: var(--selection-text-color);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-block: 1.5rem 1rem;
     margin-inline: 0;
     font-family: inherit;
@@ -75,20 +80,4 @@ p {
 .p-toast.p-toast-top-right,
 .p-toast.p-toast-top-left {
     top: 7rem;
-}
-
-button {
-    font-family: inherit;
-    font-feature-settings: inherit;
-}
-
-*,
-::before,
-::after {
-    border-width: 0;
-    border-style: solid;
-}
-
-textarea {
-    resize: none;
-}
+}

apps/volt/assets/styles/tailwind.css

@@ -1,3 +1,36 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@custom-variant dark (&:where(.p-dark, .p-dark *));
+
+@theme {
+    --breakpoint-sm: '576px';
+    --breakpoint-md: '768px';
+    --breakpoint-lg: '992px';
+    --breakpoint-xl: '1200px';
+    --breakpoint-2xl: '1920px';
+}
+
+@custom-variant p-invalid (&[data-p~="invalid"]);
+@custom-variant p-small (&[data-p~="small"]);
+@custom-variant p-large (&[data-p~="large"]);
+@custom-variant p-xlarge (&[data-p~="xlarge"]);
+@custom-variant p-fluid (&[data-p~="fluid"]);
+@custom-variant p-filled (&[data-p~="filled"]);
+@custom-variant p-horizontal (&[data-p~="horizontal"]);
+@custom-variant p-vertical (&[data-p~="vertical"]);
+@custom-variant p-stacked (&[data-p~="stacked"]);
+@custom-variant p-checked (&[data-p~="checked"]);
+@custom-variant p-disabled (&[data-p~="disabled"]);
+@custom-variant p-enabled (&:not([data-p~="disabled"]));
+@custom-variant p-left (&[data-p~="left"]);
+@custom-variant p-right (&[data-p~="right"]);
+@custom-variant p-top (&[data-p~="top"]);
+@custom-variant p-bottom (&[data-p~="bottom"]);
+@custom-variant p-alternate (&[data-p~="alternate"]);
+@custom-variant p-active (&[data-p~="active"]);
+@custom-variant p-focus-visible (&[data-p~="focus-visible"]);
+@custom-variant p-readonly (&[data-p~="readonly"]);
+@custom-variant p-removable (&[data-p~="removable"]);
+@custom-variant p-circle (&[data-p~="circle"]);
+@custom-variant p-determinate (&[data-p~="determinate"]);
+@custom-variant p-indeterminate (&[data-p~="indeterminate"]);

apps/volt/nuxt.config.js

@@ -1,5 +1,7 @@
 const baseUrl = '/';
 
+import tailwindcss from '@tailwindcss/vite';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-11-01',
@@ -29,7 +31,8 @@ export default defineNuxtConfig({
                     silenceDeprecations: ['legacy-js-api'] //@todo
                 }
             }
-        }
+        },
+        plugins: [tailwindcss()]
     },
     runtimeConfig: {
         GITHUB_TOKEN: ''
@@ -71,13 +74,6 @@ export default defineNuxtConfig({
         }
     },
     css: ['@/assets/styles/tailwind.css', '@/assets/styles/app/app.scss', '@/assets/styles/demo/flags.css', 'primeicons/primeicons.css'],
-    postcss: {
-        plugins: {
-            'postcss-import': {},
-            tailwindcss: {},
-            autoprefixer: {}
-        }
-    },
     layouts: {
         default: '~/layouts/default.vue'
     }

apps/volt/package.json

@@ -57,8 +57,9 @@
         "sass": "catalog:app",
         "sass-loader": "catalog:app",
         "tailwind-merge": "^3.0.2",
-        "tailwindcss": "^3",
+        "tailwindcss": "^4",
         "tailwindcss-primeui": "catalog:",
+        "@tailwindcss/vite": "4.0.9",
         "typedoc": "0.27.9",
         "vite": "catalog:app"
     },

apps/volt/tailwind.config.js

@@ -1,46 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import PrimeUI from 'tailwindcss-primeui';
-import plugin from 'tailwindcss/plugin';
-
-export default {
-    darkMode: ['selector', '[class~="p-dark"]'],
-    content: ['./components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './volt/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
-    plugins: [
-        PrimeUI,
-        plugin(function ({ addVariant }) {
-            addVariant('p-invalid', '&[data-p~="invalid"]');
-            addVariant('p-small', '&[data-p~="small"]');
-            addVariant('p-large', '&[data-p~="large"]');
-            addVariant('p-xlarge', '&[data-p~="xlarge"]');
-            addVariant('p-fluid', '&[data-p~="fluid"]');
-            addVariant('p-filled', '&[data-p~="filled"]');
-            addVariant('p-horizontal', '&[data-p~="horizontal"]');
-            addVariant('p-vertical', '&[data-p~="vertical"]');
-            addVariant('p-stacked', '&[data-p~="stacked"]');
-            addVariant('p-checked', '&[data-p~="checked"]');
-            addVariant('p-disabled', '&[data-p~="disabled"]');
-            addVariant('p-enabled', '&:not([data-p~="disabled"])');
-            addVariant('p-left', '&[data-p~="left"]');
-            addVariant('p-right', '&[data-p~="right"]');
-            addVariant('p-top', '&[data-p~="top"]');
-            addVariant('p-bottom', '&[data-p~="bottom"]');
-            addVariant('p-alternate', '&[data-p~="alternate"]');
-            addVariant('p-active', '&[data-p~="active"]');
-            addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
-            addVariant('p-readonly', '&[data-p~="readonly"]');
-            addVariant('p-removable', '&[data-p~="removable"]');
-            addVariant('p-circle', '&[data-p~="circle"]');
-            addVariant('p-determinate', '&[data-p~="determinate"]');
-            addVariant('p-indeterminate', '&[data-p~="indeterminate"]');
-        })
-    ],
-    theme: {
-        screens: {
-            sm: '576px',
-            md: '768px',
-            lg: '992px',
-            xl: '1200px',
-            '2xl': '1920px'
-        }
-    }
-};