From dec1bd908196852f813245343e5c31445333856a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Fr=C3=B6hlich?= <jan.froehlich.janf@gmail.com>
Date: Tue, 28 Jan 2025 00:11:55 +0100
Subject: [PATCH] refactor: use Tailwind v4 config

---
 app/assets/css/main.css | 57 +++++++++++++++++++++++++++++++++++++++++
 nuxt.config.ts          |  6 +++++
 tailwind.config.ts      | 45 --------------------------------
 3 files changed, 63 insertions(+), 45 deletions(-)
 create mode 100644 app/assets/css/main.css
 delete mode 100644 tailwind.config.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
new file mode 100644
index 0000000..98cb1b9
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 12eaf8d..4129268 100644
--- a/nuxt.config.ts
+++ b/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: {
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 3bc5a44..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Config } from 'tailwindcss'
-import defaultTheme from 'tailwindcss/defaultTheme'
-
-export default <Partial<Config>> {
-  content: ['./content/**/*.{md,json,yaml,yml,csv}'],
-  theme: {
-    extend: {
-      // https://uicolors.app/create
-      colors: {
-        background: 'rgb(var(--ui-background) / <alpha-value>)',
-        foreground: 'rgb(var(--ui-foreground) / <alpha-value>)',
-        red: {
-          50: '#fef1f4',
-          100: '#fcdee5',
-          200: '#fac2cd',
-          300: '#f693a7',
-          400: '#f05678',
-          500: '#ec224e',
-          600: '#eb1443',
-          700: '#d3123c',
-          800: '#ae0f31',
-          900: '#750019',
-          950: '#570013',
-        },
-        raisin: '#1d1f25',
-        raisinCool: '#242A32',
-      },
-      fontFamily: {
-        sans: ['Lato', ...defaultTheme.fontFamily.sans],
-        serif: ['Lora', ...defaultTheme.fontFamily.serif],
-      },
-    },
-  },
-  safelist: [
-    'bg-cool-800',
-    'dark:bg-cool-800',
-    'dark:bg-cool-900',
-    'fill-cool-800',
-    'dark:fill-cool-800',
-    'xl:grid-cols-5',
-    'xl:col-span-3',
-    'xl:col-span-2',
-    'dark:fill-raisinCool',
-  ],
-}