Upgraded to tailwind 4

assets/css/main.css

@@ -1,20 +1,67 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
+@utility container {
+  margin-inline: auto;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 640px) {
+    max-width: 640px;
+  }
+  @media (width >= 640px) {
+    max-width: 640px;
+  }
+  @media (width >= 760px) {
+    max-width: 760px;
+  }
+  @media (width >= 960px) {
+    max-width: 960px;
+  }
+  @media (width >= 1180px) {
+    max-width: 1180px;
+  }
+}
+
+/*
+  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);
+  }
+}
+
+@utility flow {
+  & > * + * {
+    margin-top: 1em;
+  }
+}
+
+@layer utilities {
   @font-face {
-  font-family: "Inter";
-  src: url("/fonts/Inter.woff2") format("woff2 supports variations"),
-       url("/fonts/Inter.woff2") format("woff2-variations");
+    font-family: 'Inter';
+    src:
+      url('/fonts/Inter.woff2') format('woff2 supports variations'),
+      url('/fonts/Inter.woff2') format('woff2-variations');
     font-weight: 400 700;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-  font-family: "Inter";
-  src: url("/fonts/Inter-Italic.woff2") format("woff2 supports variations"),
-       url("/fonts/Inter-Italic.woff2") format("woff2-variations");
+    font-family: 'Inter';
+    src:
+      url('/fonts/Inter-Italic.woff2') format('woff2 supports variations'),
+      url('/fonts/Inter-Italic.woff2') format('woff2-variations');
     font-weight: 400 700;
     font-style: italic;
     font-display: swap;
@@ -22,12 +69,18 @@
 
   body {
     font-family:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      'Inter',
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
     font-weight: 300;
   }
-
-@layer utilities {
-  .flow > * + * {
-    margin-top: 1em;
-  }
 }

astro.config.mjs

@@ -1,5 +1,5 @@
 import { defineConfig } from 'astro/config';
-import tailwind from "@astrojs/tailwind";
+import tailwind from "@tailwindcss/vite";
 
 import sitemap from '@astrojs/sitemap';
 
@@ -12,8 +12,12 @@ export default defineConfig({
   prefetch: true,
   site: "https://alexcreates.fr",
   integrations: [
-    tailwind({ applyBaseStyles: false }),
     sitemap(),
     compressor(),
+  ],
+  vite: {
+    plugins: [
+      tailwind()
     ]
+  }
 });

package.json

@@ -11,14 +11,13 @@
   },
   "dependencies": {
     "@astrojs/sitemap": "^3.4.1",
-    "@astrojs/tailwind": "^6.0.2",
     "@astrojs/vue": "^5.1.0",
+    "@tailwindcss/vite": "^4.1.8",
     "@vueuse/core": "^13.3.0",
     "astro": "^5.9.2",
     "astro-compressor": "^1.0.0",
-    "scrambling-text": "^1.2.0",
     "swiper": "^11.2.8",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.8",
     "vue": "^3.5.16"
   },
   "devDependencies": {

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'

src/components/Button.astro

@@ -10,7 +10,7 @@ const { variant = 'secondary', glow = false, href } = Astro.props;
 
 {href && (
   <a
-    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-4"
     href={href}
     target="_blank"
     class:list={
@@ -28,7 +28,7 @@ const { variant = 'secondary', glow = false, href } = Astro.props;
 )}
 {!href && (
   <button
-    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-4"
     class:list={
       [
         {

src/components/Card.astro

@@ -1,4 +1,4 @@
-<div class="p-3 text-slate-200 bg-slate-900 border-[1px] border-slate-800 rounded">
+<div class="p-3 text-slate-200 bg-slate-900 border border-slate-800 rounded-sm">
   <div class="flex items-center gap-2">
     <slot name="icon" />
 

src/components/home/Hero.astro

@@ -18,7 +18,7 @@ import BgParticles from "./BgParticles.astro";
         </p>
       </div>
 
-      <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-gradient-to-b from-emerald-500 to-emerald-600" />
+      <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-linear-to-b from-emerald-500 to-emerald-600" />
 
       <div>
         <p class="md:text-xl">

tailwind.config.js

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'
-  ],
-  theme: {
-    container: {
-      center: true,
-      screens: {
-        sm: '640px',
-        md: '640px',
-        lg: '760px',
-        xl: '960px',
-        '2xl': '1180px',
-      }
-    },
-  }
-}