fix: resolve Tailwind v3 configuration issues

Revert v4 imports, fix color definitions, and update theme config.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>

app/globals.css

@@ -1,66 +1,72 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@theme inline {
-  /* Updated to use the CSS variable generated by Next.js */
-  --font-mono: var(--font-vt323), monospace;
-  --font-sans: var(--font-vt323), monospace;
-  --radius: 0rem;
-}
+@layer base {
+  :root {
+    /* Pure Black & Green Terminal Theme - HSL Values */
+    /* #000000 */
+    --background: 0 0% 0%;
+    /* #33ff00 - Phosphor Green */
+    --foreground: 108 100% 50%;
 
-:root {
-  /* Pure Black & Green Terminal Theme */
-  --background: #000000;
-  /* Brightened the green to a classic phosphor green */
-  --foreground: #33ff00;
+    /* #050505 */
+    --card: 0 0% 2%;
+    --card-foreground: 108 100% 50%;
 
-  --card: #050505;
-  --card-foreground: #33ff00;
+    /* #000000 */
+    --popover: 0 0% 0%;
+    --popover-foreground: 108 100% 50%;
 
-  --popover: #000000;
-  --popover-foreground: #33ff00;
+    /* #33ff00 */
+    --primary: 108 100% 50%;
+    --primary-foreground: 0 0% 0%;
 
-  --primary: #33ff00;
-  --primary-foreground: #000000;
+    /* #002200 */
+    --secondary: 120 100% 7%;
+    --secondary-foreground: 108 100% 50%;
 
-  --secondary: #002200;
-  --secondary-foreground: #33ff00;
+    /* #001100 */
+    --muted: 120 100% 3%;
+    --muted-foreground: 120 100% 27%;
 
-  --muted: #001100;
-  --muted-foreground: #008800;
+    /* #003300 */
+    --accent: 120 100% 10%;
+    --accent-foreground: 108 100% 50%;
 
-  --accent: #003300;
-  --accent-foreground: #33ff00;
+    /* #cc0000 */
+    --destructive: 0 100% 40%;
+    --destructive-foreground: 0 0% 0%;
 
-  --destructive: #cc0000;
-  --destructive-foreground: #000000;
-
-  --border: #004400;
-  --input: #004400;
-  --ring: #33ff00;
+    /* #004400 */
+    --border: 120 100% 13%;
+    --input: 120 100% 13%;
+    --ring: 108 100% 50%;
 
     --radius: 0rem;
-}
+  }
 
-.dark {
-  --background: #000000;
-  --foreground: #33ff00;
-  --card: #050505;
-  --card-foreground: #33ff00;
-  --popover: #000000;
-  --popover-foreground: #33ff00;
-  --primary: #33ff00;
-  --primary-foreground: #000000;
-  --secondary: #002200;
-  --secondary-foreground: #33ff00;
-  --muted: #001100;
-  --muted-foreground: #008800;
-  --accent: #003300;
-  --accent-foreground: #33ff00;
-  --destructive: #cc0000;
-  --destructive-foreground: #000000;
-  --border: #004400;
-  --input: #004400;
-  --ring: #33ff00;
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 108 100% 50%;
+    --card: 0 0% 2%;
+    --card-foreground: 108 100% 50%;
+    --popover: 0 0% 0%;
+    --popover-foreground: 108 100% 50%;
+    --primary: 108 100% 50%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 120 100% 7%;
+    --secondary-foreground: 108 100% 50%;
+    --muted: 120 100% 3%;
+    --muted-foreground: 120 100% 27%;
+    --accent: 120 100% 10%;
+    --accent-foreground: 108 100% 50%;
+    --destructive: 0 100% 40%;
+    --destructive-foreground: 0 0% 0%;
+    --border: 120 100% 13%;
+    --input: 120 100% 13%;
+    --ring: 108 100% 50%;
+  }
 }
 
 @layer base {

package.json

@@ -15,7 +15,7 @@
     "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "shadcn": "latest",
+    "shadcn": "3.5.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "1.4.0"

pnpm-lock.yaml

@@ -27,7 +27,7 @@ importers:
         specifier: 19.2.0
         version: 19.2.0(react@19.2.0)
       shadcn:
-        specifier: latest
+        specifier: 3.5.0
         version: 3.5.0(@types/node@22.0.0)(typescript@5.9.3)
       tailwind-merge:
         specifier: ^2.5.5

tailwind.config.ts

@@ -1,19 +1,24 @@
 import type { Config } from "tailwindcss"
-import defaultConfig from "shadcn/ui/tailwind.config"
 
-const config: Config = {
-  ...defaultConfig,
+const config = {
+  darkMode: ["class"],
   content: [
-    ...defaultConfig.content,
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
     "*.{js,ts,jsx,tsx,mdx}",
   ],
+  prefix: "",
   theme: {
-    ...defaultConfig.theme,
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
-      ...defaultConfig.theme.extend.colors,
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -54,9 +59,27 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
         },
       },
-  plugins: [...defaultConfig.plugins, require("tailwindcss-animate")],
-}
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+      fontFamily: {
+        sans: ["var(--font-vt323)", "monospace"],
+        mono: ["var(--font-vt323)", "monospace"],
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
 
 export default config