refactor: Upgrade to Tailwind CSS v4, adopting new CSS-based configuration and @tailwindcss/vite integration.

Author: Kiri86Dev

astro.config.mjs

@@ -1,6 +1,6 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
 
 export default defineConfig({
@@ -14,7 +14,6 @@ export default defineConfig({
   },
   output: "static",
   integrations: [
-    tailwind(),
     react(),
     sitemap({
       i18n: {
@@ -29,19 +28,20 @@ export default defineConfig({
   // AQUI ESTÁ LA MAGIA: Nivel raíz de Astro
   server: {
     host: true,
-    allowedHosts: true
+    allowedHosts: true,
   },
   preview: {
     host: true,
-    allowedHosts: true
+    allowedHosts: true,
   },
   // Lo dejamos en Vite también como doble seguro
   vite: {
+    plugins: [tailwindcss()],
     preview: {
-      allowedHosts: true
+      allowedHosts: true,
     },
     server: {
-      allowedHosts: true
-    }
-  }
+      allowedHosts: true,
+    },
+  },
 });

package.json

@@ -29,11 +29,7 @@
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^6.0.2",
-    "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/typography": "^0.5.19",
-    "autoprefixer": "^10.4.23",
-    "postcss": "^8.5.6",
+    "@tailwindcss/vite": "^4.2.1",
     "tailwindcss": "^4.2.1"
   },
   "pnpm": {

postcss.config.cjs

@@ -1,3 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #ff6f61;
+  --color-secondary: #6b5b95;
+  --color-darkbg: #1a1a1a;
+  --color-lightbg: #f4f4f4;
+
+  --shadow-xl-dark:
+    0 20px 25px -5px rgba(255, 255, 255, 0.1),
+    0 8px 10px -6px rgba(255, 255, 255, 0.1);
+
+  --animate-fade-in: fadeIn 0.5s ease-in-out;
+  --animate-slide-up: slideUp 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}