install and update tailwind to v4

assets/tailwindcss/main.css

@@ -1,6 +1,4 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
 /* @import "tailwindcss"; */
 /* @import "@nuxt/ui"; */
@@ -10,15 +8,33 @@
 
   --breakpoint-3xl: 1920px;
 
-  --color-green-50: #EFFDF5;
+  --color-green-50: #effdf5;
-  --color-green-100: #D9FBE8;
+  --color-green-100: #d9fbe8;
-  --color-green-200: #B3F5D1;
+  --color-green-200: #b3f5d1;
-  --color-green-300: #75EDAE;
+  --color-green-300: #75edae;
-  --color-green-400: #00DC82;
+  --color-green-400: #00dc82;
-  --color-green-500: #00C16A;
+  --color-green-500: #00c16a;
-  --color-green-600: #00A155;
+  --color-green-600: #00a155;
-  --color-green-700: #007F45;
+  --color-green-700: #007f45;
   --color-green-800: #016538;
-  --color-green-900: #0A5331;
+  --color-green-900: #0a5331;
-  --color-green-950: #052E16;
+  --color-green-950: #052e16;
+}
+
+/*
+  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);
+  }
 }

tailwind.config.js

@@ -1,15 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};