refactor: migrate to tailwind 4

.vscode/settings.json

@@ -40,5 +40,6 @@
   },
   "files.associations": {
     "*.astro": "astro"
-  }
-}
+  },
+  "css.customData": [".vscode/tailwind-extra-data.json"]
+}

.vscode/tailwind-extra-data.json

@@ -0,0 +1,150 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "--alpha()",
+      "description": "Use the `--alpha()` function to adjust the opacity of a color at build time.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "--spacing()",
+      "description": "Use the `--spacing()` function to generate a spacing value based on your theme’s scale.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "theme()",
+      "description": "Use the deprecated `theme()` function to access theme values using dot notation (v3 compatibility).",
+      "status": "deprecated",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    }
+  ],
+  "atDirectives": [
+    {
+      "name": "@import",
+      "description": "Inline import CSS files, including Tailwind itself.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@theme",
+      "description": "Define custom design tokens (fonts, colors, breakpoints, etc.).",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@source",
+      "description": "Specify additional source files for Tailwind’s content detection.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@utility",
+      "description": "Add custom utilities that work with variants like `hover`, `focus`, etc.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@variant",
+      "description": "Apply a Tailwind variant to CSS inside a rule.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@custom-variant",
+      "description": "Define your own variant for use in utility class names.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Inline existing utility classes into your custom CSS rules.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@reference",
+      "description": "Reference (but not output) another stylesheet for use in `@apply`/`@variant`.",
+      "status": "standard",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@config",
+      "description": "Load a legacy JavaScript-based Tailwind config (v3 compatibility).",
+      "status": "compat",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    },
+    {
+      "name": "@plugin",
+      "description": "Load a legacy JavaScript-based Tailwind plugin (v3 compatibility).",
+      "status": "compat",
+      "references": [
+        {
+          "name": "Tailwind CSS: Functions and Directives",
+          "url": "https://tailwindcss.com/docs/functions-and-directives"
+        }
+      ]
+    }
+  ]
+}

astro.config.mjs

@@ -1,11 +1,12 @@
 import react from '@astrojs/react'
 import sitemap from '@astrojs/sitemap'
-import tailwind from '@astrojs/tailwind'
 import { defineConfig } from 'astro/config'
 
+import tailwindcss from '@tailwindcss/vite'
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), react(), sitemap()],
+  integrations: [react(), sitemap()],
   site: 'https://zen-browser.app',
   i18n: {
     defaultLocale: 'en',
@@ -26,5 +27,7 @@ export default defineConfig({
         },
       },
     },
+
+    plugins: [tailwindcss()],
   },
 })

cspell.json

@@ -18,6 +18,7 @@
     "createdDesc",
     "daniel",
     "FMPEG",
+    "esbenp",
     "ferrocyante",
     "flatpaks",
     "Galdámez",
@@ -83,7 +84,8 @@
     "*.bundle.js",
     "package-lock.json",
     "yarn.lock",
-    "pnpm-lock.yaml"
+    "pnpm-lock.yaml",
+    "pnpm-workspace.yaml"
   ],
   "allowCompoundWords": true,
   "dictionaries": ["typescript", "node", "html", "css", "bash", "npm", "es-es"],

lefthook.yaml

@@ -28,7 +28,7 @@ eslint:
         - playwright-report/**
         - test-results/**
       run: |
-        pnpm eslint {staged_files} --max-warnings=0 --fix --cache
+        pnpm eslint {staged_files} --max-warnings=0 --fix --cache --no-warn-ignored
       stage_fixed: true
 
 cspell:

package.json

@@ -30,11 +30,11 @@
     "@astrojs/react": "^4.3.0",
     "@astrojs/rss": "4.0.11",
     "@astrojs/sitemap": "3.3.1",
-    "@astrojs/tailwind": "6.0.2",
     "@fontsource/bricolage-grotesque": "5.1.0",
     "@fortawesome/fontawesome-svg-core": "6.7.1",
     "@fortawesome/free-brands-svg-icons": "6.7.1",
     "@fortawesome/free-solid-svg-icons": "6.7.1",
+    "@tailwindcss/vite": "^4.1.8",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
     "astro": "5.7.10",
@@ -52,7 +52,7 @@
     "react-dom": "^19.1.0",
     "sharp": "0.33.5",
     "tailwind-merge": "3.3.0",
-    "tailwindcss": "3.4.15",
+    "tailwindcss": "4.1.8",
     "typescript": "5.6.3"
   },
   "devDependencies": {