Migrate to tailwind v4

Author: Wykks

astro.config.mjs

@@ -1,10 +1,13 @@
 import react from "@astrojs/react";
-import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
   site: "http://www.monkeytechdays.com",
-  integrations: [tailwind(), icon(), react()],
+  integrations: [icon(), react()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@astrojs/check": "0.9.4",
     "@astrojs/react": "4.3.0",
-    "@astrojs/tailwind": "6.0.2",
-    "@fontsource/saira": "5.2.8",
+    "@fontsource-variable/saira": "5.2.8",
+    "@tailwindcss/vite": "4.1.11",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "astro": "5.12.1",
@@ -25,8 +25,8 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "sharp": "0.34.3",
-    "tailwind-merge": "2.5.5",
-    "tailwindcss": "3.4.16",
+    "tailwind-merge": "3.3.1",
+    "tailwindcss": "4.1.11",
     "typescript": "5.8.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,7 +1,8 @@
 ---
-import "@fontsource/saira";
-import { ClientRouter } from 'astro:transitions';
+import "@fontsource-variable/saira";
+import { ClientRouter } from "astro:transitions";
 import { SITE_TITLE } from "../consts";
+import "../styles/global.css";
 
 interface Props {
   title?: string;

src/components/BaseHead.astro

@@ -7,7 +7,9 @@ import Teamwork from "./teamwork.jpg";
 
 <section>
   <div class="container m-auto px-4 py-8">
-    <h1 class="mb-4 text-center text-4xl font-bold text-main-900">A propos</h1>
+    <h1 class="text-main-900 mb-4 text-center text-4xl font-medium">
+      A propos
+    </h1>
     <p class="mb-2 text-center text-2xl">
       Rassembler des TechAddicts pour évaluer des technos Innovantes
     </p>

src/components/index/About.astro

@@ -9,7 +9,7 @@ import ThemeImg from "../../assets/theme.jpg";
     <div class="flex flex-wrap justify-around gap-2">
       <div class="space-y-1">
         <h2 class="text-xl">Envie d'expérimenter une techno ?</h2>
-        <div class="grid [grid-template-areas:'stack'] [&>*]:[grid-area:stack]">
+        <div class="grid [grid-template-areas:'stack'] *:[grid-area:stack]">
           <a
             rel="noopener"
             href="https://github.com/monkeytechdays/cfp/issues/new"
@@ -21,7 +21,7 @@ import ThemeImg from "../../assets/theme.jpg";
       </div>
       <div class="space-y-1">
         <h2 class="text-xl">Envie de sponsoriser un event ?</h2>
-        <div class="grid [grid-template-areas:'stack'] [&>*]:[grid-area:stack]">
+        <div class="grid [grid-template-areas:'stack'] *:[grid-area:stack]">
           <a
             href="mailto:mktd@monkeypatch.io?subject=Devenir Sponsor MonkeyTechDays"
             class="z-10 mb-2 self-end bg-[#e5b491] py-2 text-center text-black hover:opacity-80"

src/components/index/CTAs.astro

@@ -1,9 +1,9 @@
 <section class="bg-main-900 text-white">
   <div class="container m-auto px-4 py-8">
-    <div class="text-center text-2xl font-bold">Et en plus !</div>
+    <div class="text-center text-2xl font-medium">Et en plus !</div>
     <div class="m-4">
       <div class="flex flex-col items-center py-4">
-        <div class="text-3xl font-bold">C'est 100% GRATUIT</div>
+        <div class="text-3xl font-medium">C'est 100% GRATUIT</div>
         <div class="text-xl">pour tout les participants</div>
       </div>
       <div class="mt-2 text-center">

src/components/index/Free.astro

@@ -39,7 +39,7 @@ export const GlowingEffect = ({
           backgroundSize: animate ? "400% 400%" : undefined,
         }}
         className={cn(
-          "absolute inset-0 z-[1] rounded-sm opacity-60 blur-xl transition  duration-500 group-hover:opacity-100",
+          "absolute inset-0 z-1 rounded-sm opacity-60 blur-xl transition  duration-500 group-hover:opacity-100",
           " bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]",
         )}
       />
@@ -60,7 +60,7 @@ export const GlowingEffect = ({
           backgroundSize: animate ? "400% 400%" : undefined,
         }}
         className={cn(
-          "absolute inset-0 z-[1] rounded-sm",
+          "absolute inset-0 z-1 rounded-sm",
           "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]",
         )}
       />

src/components/index/GlowingEffect.tsx

@@ -5,7 +5,7 @@ import LogoFull from "./logo_full.png";
 ---
 
 <div
-  class="grid [grid-template-areas:'stack'] before:pointer-events-none before:absolute before:h-full before:w-full before:bg-gradient-to-b before:from-black before:from-0% before:to-transparent before:to-35% [&>*]:[grid-area:stack]"
+  class="grid [grid-template-areas:'stack'] before:pointer-events-none before:absolute before:h-full before:w-full before:bg-linear-to-b before:from-black before:from-0% before:to-transparent before:to-35% *:[grid-area:stack]"
 >
   <Picture
     src={Illus}

src/components/index/Hero.astro

@@ -9,7 +9,7 @@ const events = (await getCollection("mktds"))
 
 <section>
   <div class="container m-auto px-4 py-8">
-    <h1 class="mb-4 text-center text-4xl font-bold text-main-900">
+    <h1 class="text-main-900 mb-4 text-center text-4xl font-medium">
       Précédents rendez-vous
     </h1>
     <div class="mt-4 flex flex-wrap justify-center gap-6">