refactor: use Tailwind v4 config

app/assets/css/main.css

@@ -0,0 +1,57 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  /* Fonts */
+  --font-serif: 'Lora';
+  --font-sans: 'Lato';
+
+  /* Colors */
+  --color-red-50: #fef1f4;
+  --color-red-100: #fcdee5;
+  --color-red-200: #fac2cd;
+  --color-red-300: #f693a7;
+  --color-red-400: #f05678;
+  --color-red-500: #ec224e;
+  --color-red-600: #eb1443;
+  --color-red-700: #d3123c;
+  --color-red-800: #ae0f31;
+  --color-red-900: #750019;
+  --color-red-950: #570013;
+
+  --color-primary-50: var(--ui-color-primary-50);
+  --color-primary-100: var(--ui-color-primary-100);
+  --color-primary-200: var(--ui-color-primary-200);
+  --color-primary-300: var(--ui-color-primary-300);
+  --color-primary-400: var(--ui-color-primary-400);
+  --color-primary-500: var(--ui-color-primary-500);
+  --color-primary-600: var(--ui-color-primary-600);
+  --color-primary-700: var(--ui-color-primary-700);
+  --color-primary-800: var(--ui-color-primary-800);
+  --color-primary-900: var(--ui-color-primary-900);
+  --color-primary-950: var(--ui-color-primary-950);
+
+  --color-neutral-50: var(--ui-color-neutral-50);
+  --color-neutral-100: var(--ui-color-neutral-100);
+  --color-neutral-200: var(--ui-color-neutral-200);
+  --color-neutral-300: var(--ui-color-neutral-300);
+  --color-neutral-400: var(--ui-color-neutral-400);
+  --color-neutral-500: var(--ui-color-neutral-500);
+  --color-neutral-600: var(--ui-color-neutral-600);
+  --color-neutral-700: var(--ui-color-neutral-700);
+  --color-neutral-800: var(--ui-color-neutral-800);
+  --color-neutral-900: var(--ui-color-neutral-900);
+  --color-neutral-950: var(--ui-color-neutral-950);
+
+  --color-raisin: #1d1f25;
+  --color-raisin-cool: #242A32;
+
+  --ui-primary: var(--color-primary-900);
+}
+
+@layer theme {
+  .dark {
+    --ui-primary: var(--color-primary-400);
+    color: var(--ui-text);
+  }
+}

nuxt.config.ts

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
   build: {
     transpile: ['vue-google-maps-community-fork', '@googlemaps/markercluster'],
   },
+  css: ['~/assets/css/main.css'],
   devtools: { enabled: true },
   eslint: {
     config: {
@@ -15,6 +16,11 @@ export default defineNuxtConfig({
   extends: [
     // 'github:happydesigns/ui-base',
   ],
+  fonts: {
+    experimental: {
+      processCSSVariables: true,
+    },
+  },
   image: {
     provider: 'cloudflare',
     cloudflare: {