template

frontend/tailwind.config.ts

@@ -0,0 +1,73 @@
+/**
+ * =============================================================================
+ * TAILWIND CSS CONFIGURATION
+ * =============================================================================
+ * 
+ * This config is set up for Shadcn/ui components.
+ * Shadcn/ui uses CSS variables for theming, making it easy to customize colors.
+ * 
+ * To add new Shadcn components, run:
+ * npx shadcn-ui@latest add <component-name>
+ * 
+ * Example: npx shadcn-ui@latest add button
+ */
+
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  // Enable dark mode via class (allows toggle)
+  darkMode: ["class"],
+  
+  // Tell Tailwind where to look for class usage
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  
+  theme: {
+    extend: {
+      // Shadcn/ui uses CSS variables for colors - defined in globals.css
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      // Border radius also uses CSS variables for consistency
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;