From cee6a656968f8317b4672200ceee21474b4c3498 Mon Sep 17 00:00:00 2001 From: v0 Date: Thu, 20 Nov 2025 07:22:29 +0000 Subject: [PATCH] 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 | 110 ++++++++++++++++++++++++--------------------- package.json | 2 +- pnpm-lock.yaml | 2 +- tailwind.config.ts | 45 ++++++++++++++----- 4 files changed, 94 insertions(+), 65 deletions(-) diff --git a/app/globals.css b/app/globals.css index 60318f1..a3bccc8 100644 --- a/app/globals.css +++ b/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; + /* #004400 */ + --border: 120 100% 13%; + --input: 120 100% 13%; + --ring: 108 100% 50%; - --border: #004400; - --input: #004400; - --ring: #33ff00; + --radius: 0rem; + } - --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 { diff --git a/package.json b/package.json index 831f42e..43dcb50 100644 --- a/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a4524fd..97b74c5 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/tailwind.config.ts b/tailwind.config.ts index a92d6b8..1dddad7 100644 --- a/tailwind.config.ts +++ b/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" }, + }, + }, + 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: [...defaultConfig.plugins, require("tailwindcss-animate")], -} + plugins: [require("tailwindcss-animate")], +} satisfies Config export default config