update to latest node and packages

^

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS build
+FROM node:22-alpine AS build
 
 WORKDIR /app
 
@@ -10,7 +10,7 @@ COPY . /app
 
 RUN npm run build
 
-FROM node:18-alpine AS prod
+FROM node:22-alpine AS prod
 
 WORKDIR /app
 

assets/app.css

@@ -1,6 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #b22222;
+  --color-darkgray: #2b292a;
+  --color-lightgray: #e3dfdf;
+}
 
 * {
   font-family: "ConthraxSemiBold";

nuxt.config.ts

@@ -1,3 +1,5 @@
+import tailwindcss from "@tailwindcss/vite";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
@@ -18,17 +20,14 @@ export default defineNuxtConfig({
 
   css: ["~/assets/app.css", "~/assets/ConthraxSemiBold.css"],
 
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-
   compatibilityDate: "2024-04-03",
   devtools: { enabled: false },
   modules: ["@nuxtjs/strapi", "@nuxt/image"],
 
+  vite: {
+    plugins: [tailwindcss()],
+  },
+
   strapi: {
     url: process.env.PUBLIC_STRAPI_URL,
     prefix: "/api",

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "nuxt-app",
+  "name": "ff-webpage-landing",
+  "version": "1.2.2",
   "private": true,
+  "description": "Feuerwehr/Verein Webseite",
   "type": "module",
   "scripts": {
     "build": "nuxt build",
@@ -12,14 +14,12 @@
   "dependencies": {
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/strapi": "^2.0.0",
-    "nuxt": "^3.13.2",
+    "@tailwindcss/vite": "^4.1.4",
+    "nuxt": "^3.16.2",
     "vue": "latest",
     "vue-router": "latest"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14"
-  },
-  "version": "1.2.1"
+    "tailwindcss": "^4.1.4"
+  }
 }

tailwind.config.js

@@ -1,21 +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: {
-      colors: {
-        primary: "#B22222",
-        darkgray: "#2B292A",
-        lightgray: "#E3DFDF",
-      },
-    },
-  },
-  plugins: [],
-};