Update dependencies

astro.config.mjs

@@ -1,34 +1,26 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';
 import mdx from '@astrojs/mdx';
-import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
 import sitemap from '@astrojs/sitemap';
-
 import playformInline from '@playform/inline';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://juancman.dev/',
+
   integrations: [
     sitemap(),
     react(),
-    tailwind({
-      applyBaseStyles: false,
-    }),
     mdx({
-      syntaxHighlight: false,
+      syntaxHighlight: 'shiki',
-      rehypePlugins: [
+      shikiConfig: { theme: 'tokyo-night' },
-        rehypeSlug,
+      rehypePlugins: [rehypeSlug],
-        [
-          rehypePrettyCode,
-          {
-            theme: 'catppuccin-mocha',
-          },
-        ],
-      ],
     }),
     playformInline(),
   ],
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.mjs",
-    "css": "./src/styles/globals.css",
+    "css": "./src/styles/global.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""

package.json

@@ -11,17 +11,17 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.1.0",
+    "@astrojs/mdx": "^4.2.2",
-    "@astrojs/react": "^4.2.1",
+    "@astrojs/react": "^4.2.2",
     "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/sitemap": "^3.3.0",
-    "@astrojs/tailwind": "^5.1.5",
     "@playform/inline": "^0.1.1",
     "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/react": "^18.3.18",
+    "@tailwindcss/vite": "^4.0.17",
+    "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",
-    "astro": "^5.4.2",
+    "astro": "^5.5.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "fast-glob": "^3.3.3",
@@ -31,12 +31,11 @@
     "node-html-parser": "^6.1.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rehype-pretty-code": "^0.13.2",
     "rehype-slug": "^6.0.0",
-    "sanitize-html": "^2.14.0",
+    "sanitize-html": "^2.15.0",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.17",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.2"
   },

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

src/layouts/Layout.astro

@@ -3,7 +3,7 @@ import Header from '@/components/header.astro';
 import Navigation from '@/components/navigation';
 import Footer from '@/components/footer';
 import { getLangFromUrl } from '@/i18n/utils';
-import '@/styles/globals.css';
+import '@/styles/global.css';
 
 interface Props {
   title: string;

src/styles/global.css

@@ -0,0 +1,111 @@
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-*: initial;
+  --font-sans: Helvetica, Arial, sans-serif;
+
+  --color-border: #eee;
+  --color-input: #00adb5;
+  --color-ring: #00adb5;
+  --color-background: #222831;
+  --color-foreground: #eee;
+
+  --color-primary: #00adb5;
+  --color-primary-foreground: #000;
+
+  --color-secondary: #393e46;
+  --color-secondary-foreground: #eee;
+
+  --color-destructive: #ff2e63;
+  --color-destructive-foreground: #eee;
+
+  --color-muted: #393e46;
+  --color-muted-foreground: #eee;
+
+  --color-accent: #00adb5;
+  --color-accent-foreground: #eee;
+
+  --color-popover: #393e46;
+  --color-popover-foreground: #eee;
+
+  --color-card: #393e46;
+  --color-card-foreground: #eee;
+
+  --radius-lg: 8px;
+  --radius-md: 4px;
+  --radius-sm: 2px;
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  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);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    scroll-margin-top: 60px;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  .prose {
+    @apply max-w-none;
+  }
+  li {
+    overflow-wrap: break-word
+  }
+  [data-rehype-pretty-code-figure] {
+    @apply bg-[#1e1e2e] rounded-md pt-4;
+  }
+  [data-rehype-pretty-code-figure] figcaption {
+    @apply m-0 mb-2 px-4 pb-4 border-b-[0.5px] border-secondary;
+  }
+  [data-rehype-pretty-code-figure] pre {
+    @apply py-3 px-4;
+  }
+  [data-rehype-pretty-code-figure] pre > code > span {
+    @apply pr-4;
+  }
+  [data-rehype-pretty-code-fragment] {
+    @apply relative my-5 rounded-md border border-border/20 bg-[#282c34];
+  }
+  code::after, code::before {
+    display: none;
+  }
+  .prose code {
+    @apply rounded-md border border-border/20 font-normal p-0.5 bg-secondary before:content-none after:content-none;
+  }
+  .prose pre > code {
+    @apply bg-transparent border-none;
+  }
+}

src/styles/globals.css

@@ -1,40 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    @apply border-border;
-    scroll-margin-top: 60px;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  .prose {
-    @apply max-w-none;
-  }
-  li {
-    overflow-wrap: break-word
-  }
-  [data-rehype-pretty-code-figure] {
-    @apply bg-[#1e1e2e] rounded-md pt-4;
-  }
-  [data-rehype-pretty-code-figure] figcaption {
-    @apply m-0 mb-2 px-4 pb-4 border-b-[0.5px] border-secondary;
-  }
-  [data-rehype-pretty-code-figure] pre {
-    @apply py-3 px-4;
-  }
-  [data-rehype-pretty-code-figure] pre > code > span {
-    @apply pr-4;
-  }
-  [data-rehype-pretty-code-fragment] {
-    @apply relative my-5 rounded-md border border-border/20 bg-[#282c34];
-  }
-  .prose code {
-    @apply rounded-md border border-border/20 font-normal p-0.5 bg-secondary before:content-none after:content-none;
-  }
-  .prose pre > code {
-    @apply bg-transparent border-none;
-  }
-}

tailwind.config.mjs

@@ -1,61 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  prefix: '',
-  theme: {
-    fontFamily: {
-      sans: ['Helvetica', 'Arial', 'sans-serif'],
-    },
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        border: '#eee',
-        input: '#00adb5',
-        ring: '#00adb5',
-        background: '#222831',
-        foreground: '#eee',
-        primary: {
-          DEFAULT: '#00adb5',
-          foreground: '#000',
-        },
-        secondary: {
-          DEFAULT: '#393e46',
-          foreground: '#eee',
-        },
-        destructive: {
-          DEFAULT: '#ff2e63',
-          foreground: '#eee',
-        },
-        muted: {
-          DEFAULT: '#393e46',
-          foreground: '#eee',
-        },
-        accent: {
-          DEFAULT: '#00adb5',
-          foreground: '#eee',
-        },
-        popover: {
-          DEFAULT: '#393e46',
-          foreground: '#eee',
-        },
-        card: {
-          DEFAULT: '#393e46',
-          foreground: '#eee',
-        },
-      },
-      borderRadius: {
-        lg: '8px',
-        md: '4px',
-        sm: '2px',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
-};