From 947cd676684a23e233ff777de9201735f9306bfe Mon Sep 17 00:00:00 2001 From: Thorben Westerhuys Date: Thu, 28 Nov 2024 19:26:03 +0100 Subject: [PATCH 1/4] chore: upgrade to tailwind v4 beta 1 Using npx @tailwindcss/upgrade@next --- app/globals.css | 51 +- app/trainings/page.tsx | 2 +- components/src/card/card.tsx | 2 +- components/src/checkbox/checkbox.tsx | 2 +- components/src/footer/footer.tsx | 2 +- components/src/form/form.tsx | 2 +- components/src/nav/nav.tsx | 2 +- components/src/partials/clusters.tsx | 2 +- components/src/partials/trainings.tsx | 2 +- package-lock.json | 817 ++++++++++++++++---------- package.json | 5 +- postcss.config.mjs | 2 +- tailwind.config.ts | 44 -- 13 files changed, 570 insertions(+), 365 deletions(-) delete mode 100644 tailwind.config.ts diff --git a/app/globals.css b/app/globals.css index 5160eb1..4dfad1b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,51 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@theme { + --color-*: initial; + --color-primary-500: #fbdf24; + + --color-secondary-500: #0909ff; + + --color-warning-500: #f715f7; + + --color-slate-100: #f2f2f2; + --color-slate-300: #f5f5f5; + --color-slate-500: #cccccc; + --color-slate-700: #737373; + + --color-white: #ffffff; + --color-black: #010209; + --color-transparent: transparent; + --color-current-color: currentColor; + + --text-2xl: 1.9em, 1.14em; + --text-3xl: 2.8em, 1.14em; + --text-4xl: 3em, 1.14em; + + --font-sans: var(--font-corbert), sans-serif; + --font-icon: var(--font-glyphter); + + --width-122: 122%; + --width-300: 300%; +} + +/* + 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); + } +} svg#hero { transition: all 3.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; diff --git a/app/trainings/page.tsx b/app/trainings/page.tsx index da1c809..1842434 100644 --- a/app/trainings/page.tsx +++ b/app/trainings/page.tsx @@ -27,7 +27,7 @@ export default function Trainings() { )}
-
+
Do you have a training that you want featured on this here? diff --git a/components/src/card/card.tsx b/components/src/card/card.tsx index 6018164..e33496f 100644 --- a/components/src/card/card.tsx +++ b/components/src/card/card.tsx @@ -101,7 +101,7 @@ export function Card({