chore: upgrade to tailwind v4

app/globals.css

@@ -1,6 +1,57 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
+
+@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;
+  --text-2xl--line-height: 1.14em;
+  --text-3xl: 2.8em;
+  --text-3xl--line-height: 1.14em;
+  --text-4xl: 3em;
+  --text-4xl--line-height: 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;

app/trainings/page.tsx

@@ -27,7 +27,7 @@ export default function Trainings() {
         )}
       </Section>
       <Section>
-        <div className="prose mx-auto mb-32 flex max-w-screen-xl flex-col items-end px-2 md:px-10 lg:flex-row lg:items-start">
+        <div className="prose mx-auto mb-32 flex max-w-(--breakpoint-xl) flex-col items-end px-2 md:px-10 lg:flex-row lg:items-start">
           <div>
             <div>
               Do you have a training that you want featured on this here?

components/src/card/card.tsx

@@ -101,7 +101,7 @@ export function Card({
                             <div className="ml-3 flex h-7 items-center">
                               <button
                                 type="button"
-                                className="focus:ring-indigo-500 relative rounded-md bg-white text-slate-300 hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-2"
+                                className="focus:ring-indigo-500 relative rounded-md bg-white text-slate-300 hover:text-slate-300 focus:outline-hidden focus:ring-2 focus:ring-offset-2"
                                 onClick={() => setOpen(false)}
                               >
                                 <span className="absolute -inset-2.5" />

components/src/checkbox/checkbox.tsx

@@ -6,7 +6,7 @@ type TextInputProps = VariantProps<typeof variants> & {
   id?: string;
 };
 
-export const variants = cva(["rounded-sm p-2 form-checkbox"], {
+export const variants = cva(["rounded-xs p-2 form-checkbox"], {
   variants: {
     variant: {
       default: ["border-gray-300 bg-gray-100 text-black"],

components/src/footer/footer.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export function Footer() {
   return (
     <div className="flex w-full justify-between bg-slate-300 p-4 md:p-10">
-      <div className="flex-grow"></div>
+      <div className="grow"></div>
       <div className="flex flex-col md:flex-row">
         <ul className="flex flex-col justify-between text-right text-sm md:flex-row">
           <li>© opensource.construction</li>

components/src/form/form.tsx

@@ -43,7 +43,7 @@ export function Form() {
         />
         <div className="flex flex-col gap-4 text-sm md:flex-row md:text-base">
           <Button type="submit" label="Register now" />
-          <div className="mt-4 flex-grow">
+          <div className="mt-4 grow">
             {state.type === "success" ? (
               <p
                 aria-live="polite"

components/src/nav/nav.tsx

@@ -21,7 +21,7 @@ export function Navbar({ title, logo, menuItems, children }: NavbarProps) {
           </Link>
         </h1>
       </div>
-      <div className="flex-grow"></div>
+      <div className="grow"></div>
       <div className="flex flex-row">
         <div className="-mt-2 h-4 text-right md:h-12">{children}</div>
         <Menu items={menuItems} />

components/src/partials/clusters.tsx

@@ -9,7 +9,7 @@ export function ClustersPartial() {
         alt="hero animation"
         className="absolute -z-10 mx-auto -mt-48 box-border flex w-96 justify-center px-14 md:w-full"
       />
-      <div className="prose mx-auto flex max-w-screen-xl flex-col items-end px-2 md:px-10 lg:flex-row lg:items-start">
+      <div className="prose mx-auto flex max-w-(--breakpoint-xl) flex-col items-end px-2 md:px-10 lg:flex-row lg:items-start">
         <div className="w-full px-4 lg:w-7/12">
           <h2>Innovation Hub: The Future of Open Source Construction</h2>
           <p>

components/src/partials/trainings.tsx

@@ -9,7 +9,7 @@ export function TrainingsPartial() {
         alt="hero animation"
         className="absolute -z-10 mx-auto -mt-48 box-border flex w-96 justify-center px-14 md:w-full"
       />
-      <div className="prose mx-auto flex max-w-screen-xl flex-col items-end px-2 md:px-10 lg:flex-row lg:items-start">
+      <div className="prose mx-auto flex max-w-(--breakpoint-xl) flex-col items-end px-2 md:px-10 lg:flex-row lg:items-start">
         <div className="w-full px-4 lg:w-7/12">
           <h2>
             Look ahead to all the great things that are there for you to be