Working

package-lock.json

@@ -62,7 +62,7 @@
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.15",
-        "@tailwindcss/vite": "^4.1.3",
+        "@tailwindcss/vite": "^4.2.1",
         "@types/node": "^24.7.0",
         "@types/react": "^19.2.1",
         "@types/react-dom": "^19.2.1",
@@ -71,7 +71,7 @@
         "pnpm": "^10.15.1",
         "postcss": "^8.4.47",
         "prettier": "^3.6.2",
-        "tailwindcss": "^4.1.14",
+        "tailwindcss": "^4.2.1",
         "tsx": "^4.19.1",
         "tw-animate-css": "^1.4.0",
         "typescript": "5.6.3",

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",
-    "@tailwindcss/vite": "^4.1.3",
+    "@tailwindcss/vite": "^4.2.1",
     "@types/node": "^24.7.0",
     "@types/react": "^19.2.1",
     "@types/react-dom": "^19.2.1",
@@ -73,7 +73,7 @@
     "pnpm": "^10.15.1",
     "postcss": "^8.4.47",
     "prettier": "^3.6.2",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.2.1",
     "tsx": "^4.19.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "5.6.3",
@@ -82,4 +82,4 @@
     "vitest": "^2.1.4"
   },
   "packageManager": "[email protected]"
-}
+}

tailwind.config.js

@@ -0,0 +1,97 @@
+/** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+  darkMode: 'class', // supports .dark class
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--color-background)',
+        foreground: 'var(--color-foreground)',
+        card: 'var(--color-card)',
+        'card-foreground': 'var(--color-card-foreground)',
+        popover: 'var(--color-popover)',
+        'popover-foreground': 'var(--color-popover-foreground)',
+        primary: 'var(--color-primary)',
+        'primary-foreground': 'var(--color-primary-foreground)',
+        secondary: 'var(--color-secondary)',
+        'secondary-foreground': 'var(--color-secondary-foreground)',
+        muted: 'var(--color-muted)',
+        'muted-foreground': 'var(--color-muted-foreground)',
+        accent: 'var(--color-accent)',
+        'accent-foreground': 'var(--color-accent-foreground)',
+        destructive: 'var(--color-destructive)',
+        'destructive-foreground': 'var(--color-destructive-foreground)',
+        border: 'var(--color-border)',
+        input: 'var(--color-input)',
+        ring: 'var(--color-ring)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+      },
+      fontFamily: {
+        heading: ['Syne', 'sans-serif'],
+        body: ['Geist', 'DM Sans', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
+      backdropBlur: {
+        sm: '12px',
+        md: '20px',
+      },
+      keyframes: {
+        blink: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-8px)' },
+        },
+        fadeInUp: {
+          '0%': { opacity: '0', transform: 'translateY(30px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        blink: 'blink 1s step-end infinite',
+        float: 'float 4s ease-in-out infinite',
+        fadeInUp: 'fadeInUp 0.7s ease forwards',
+      },
+    },
+  },
+  plugins: [
+    require('tw-animate-css'),
+    plugin(function({ addUtilities }) {
+      addUtilities({
+        '.glass': {
+          background: 'rgba(255, 255, 255, 0.04)',
+          'backdrop-filter': 'blur(12px)',
+          '-webkit-backdrop-filter': 'blur(12px)',
+          border: '1px solid rgba(255, 255, 255, 0.08)',
+        },
+        '.glass-strong': {
+          background: 'rgba(255, 255, 255, 0.07)',
+          'backdrop-filter': 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          border: '1px solid rgba(255, 255, 255, 0.12)',
+        },
+        '.navbar-glass': {
+          background: 'rgba(8, 8, 8, 0.6)',
+          'backdrop-filter': 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          'border-bottom': '1px solid rgba(255, 255, 255, 0.06)',
+        },
+        '.navbar-glass-solid': {
+          background: 'rgba(8, 8, 8, 0.92)',
+          'backdrop-filter': 'blur(20px)',
+          '-webkit-backdrop-filter': 'blur(20px)',
+          'border-bottom': '1px solid rgba(255, 255, 255, 0.08)',
+        },
+      });
+    }),
+  ],
+};

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),