update tw

package.json

@@ -19,15 +19,14 @@
     "devDependencies": {
         "@primevue/auto-import-resolver": "^4.3.1",
         "@rushstack/eslint-patch": "^1.8.0",
+        "@tailwindcss/vite": "^4.1.17",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-prettier": "^9.0.0",
-        "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
-        "postcss": "^8.4.40",
         "prettier": "^3.2.5",
         "sass": "^1.55.0",
-        "tailwindcss": "^3.4.6",
+        "tailwindcss": "^4.1.17",
         "unplugin-vue-components": "^0.27.3",
         "vite": "^5.3.1"
     }

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {}
-    }
-};

src/assets/styles.scss

@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 @use 'primeicons/primeicons.css';
-@use '@/assets/tailwind.css';
 @use '@/assets/layout/layout.scss';
 @use '@/assets/demo/demo.scss';

src/assets/tailwind.css

@@ -1,3 +1,32 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+@plugin 'tailwindcss-primeui';
+
+@custom-variant dark (&:where([class*="app-dark"], [class*="app-dark"] *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1920px;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}

src/main.js

@@ -7,6 +7,7 @@ import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
 
+import '@/assets/tailwind.css';
 import '@/assets/styles.scss';
 
 const app = createApp(App);

tailwind.config.js

@@ -1,17 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import PrimeUI from 'tailwindcss-primeui';
-
-export default {
-    darkMode: ['selector', '[class*="app-dark"]'],
-    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-    plugins: [PrimeUI],
-    theme: {
-        screens: {
-            sm: '576px',
-            md: '768px',
-            lg: '992px',
-            xl: '1200px',
-            '2xl': '1920px'
-        }
-    }
-};

vite.config.mjs

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 
 import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import Components from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
@@ -12,6 +13,7 @@ export default defineConfig({
     },
     plugins: [
         vue(),
+        tailwindcss(),
         Components({
             resolvers: [PrimeVueResolver()]
         })