fix: rename tailwind.config.ts → .js to avoid import issues

Author: OUMIMANDAL

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "build:tailwind": "ts-node --project tsconfig.tsnode.json scripts/generate-tailwind-config.ts",
     "build": "next build",
     "build:turbo": "next build --turbo",
     "dev": "next dev --port 3000",

frontend/pnpm-lock.yaml

@@ -0,0 +1,22 @@
+
+// scripts/generate-tailwind-config.ts
+import fs from 'fs';
+import path from 'path';
+import tailwindConfig from '../tailwind.config.js';  // ← now .js
+
+const configStr = JSON.stringify(tailwindConfig, (key, value) => {
+  if (typeof value === 'function') {
+    return `Function:${value.name || 'anonymous'}`;
+  }
+  return value;
+}, 2);
+
+const cjsContent = `
+// Auto-generated from tailwind.config.ts
+// DO NOT EDIT MANUALLY
+module.exports = ${configStr};
+`;
+
+const outputPath = path.resolve(__dirname, '../tailwind.config.generated.js');
+fs.writeFileSync(outputPath, cjsContent);
+console.log('✅ Generated: tailwind.config.generated.js');

frontend/scripts/generate-tailwind-config.ts

@@ -1,76 +1,5 @@
-import type { Config } from "tailwindcss";
-import { heroui } from "@heroui/react";
-import animate from "tailwindcss-animate";
+// tailwind.config.cjs
+// This file exists to support tools that don't support ESM or TypeScript.
+// It imports the real config from tailwind.config.ts via a generated .js file.
 
-const config: Config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        border: "hsl(var(--border))",
-        text: "hsl(var(--text))",
-        "owasp-blue": "#98AFC7",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          1: "hsl(var(--chart-1))",
-          2: "hsl(var(--chart-2))",
-          3: "hsl(var(--chart-3))",
-          4: "hsl(var(--chart-4))",
-          5: "hsl(var(--chart-5))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        scroll: {
-          "0%": { transform: "translateX(0)" },
-          "100%": { transform: "translateX(-500%)" },
-        },
-      },
-      animation: {
-        scroll: "scroll 0.5s linear infinite",
-      },
-    },
-  },
-  plugins: [heroui(), animate],
-};
-
-export default config;
+module.exports = require('./tailwind.config.generated.js');

frontend/tailwind.config.cjs

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": [
+    "scripts/generate-tailwind-config.ts"
+  ]
+}