hsl(var(--color-name)) not working; how to convert oklch to hsl?

My question is that colors from index.css doesn't apply for my project where I put classes like fill-primary or my imported button from ShadCN I didn't update all classes but it doesn't matter since my updated ones don't work.

index.css I took out .dark class since there would be too much code

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: theme('fontFamily.raleway');
  }

  body {
    overflow-x: hidden;
  }
  
  :root {
    --background: oklch(1 0.37 29.23);
    --foreground: oklch(0.2 0.02 29.23);
    --card: oklch(1 0.2 29.23);
    --card-foreground: oklch(0.25 0.02 29.23);
    --popover: oklch(1 0.37 29.23);
    --popover-foreground: oklch(0.2 0.37 29.23);
    --primary: oklch(0.45 0.15 29.23);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.82 0.1 29.23);
    --secondary-foreground: oklch(0 0 0);
    --muted: oklch(0.92 0.1 324);
    --muted-foreground: oklch(0.45 0.02 29.23);
    --accent: oklch(0.85 0.1 324);
    --accent-foreground: oklch(0.25 0.02 29.23);
    --destructive: oklch(0.65 0.26 29.23);
    --destructive-foreground: oklch(1 0.02 29.23);
    --border: oklch(0.8 0.1 29.23);
    --input: oklch(0.6 0.1 29.23);
    --ring: oklch(0.45 0.15 29.23);
    --radius: 0.5rem;
  }
}

tailwind.config.js I took out unnecessary code

const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx, mdx}",
    "app/**/*.{ts,tsx, mdx}",
    "components/**/*.{ts,tsx, mdx}",
  ],
  theme: {
    screens: {
    },
    fontSize: {
    },
    borderWidth: {
    },
    borderRadius: {
    },
    extend: {
      spacing: {
      },
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        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))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
      },
      fontFamily: {
        raleway: ["Raleway", "sans-serif"],
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")],
};

package.json

{
  "name": "healme",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.1.2",
    "@tabler/icons-react": "^3.26.0",
    "@tailwindcss/forms": "^0.5.10",
    "@types/lodash": "^4.17.13",
    "ag-grid-community": "^33.1.0",
    "ag-grid-react": "^33.1.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.13",
    "lucide-react": "^0.475.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router": "^7.1.0",
    "react-router-dom": "^7.0.2",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/node": "^22.13.14",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.21",
    "eslint": "^8.57.1",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "postcss": "^8.5.3",
    "prettier": "^3.5.0",
    "prettier-eslint": "^16.3.0",
    "tailwindcss": "^3.4.17",
    "typescript": "^4.9.5",
    "typescript-eslint": "^8.11.0",
    "vite": "^6.2.4",
    "vite-plugin-svgr": "^4.3.0"
  }
}

component.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

You're trying to declare oklch() colors in hsl() (by the way, oklch(var(--variable)) wouldn't work either). You can't pass an already declared color to a new color declaration.

That's an impossible mission. You need to use color-mix() if you want to convert them.

/* convert color */
color-mix(in hsl, var(--background) 100%, transparent)

/* convert color with TailwindCSS' alpha value */
color-mix(in hsl, var(--background) calc(100% * <alpha-value>), transparent)

• color-mix(): takes two values and returns the result of mixing them - MDN Docs

:root {
  --background: oklch(1 0.37 29.23);
  --foreground: oklch(0.89 0.0691 52.94);
}

div {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 2px solid #000;
}

/* working: oklch */
.example {
  background: var(--background);
  color: var(--foreground);
}

/* NOT working: oklch to oklch */
.example-oklch {
  background: oklch(var(--background));
  color: oklch(var(--foreground));
}

/* NOT working: oklch to hsl */
.example-hsl {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* working: colormix to hsl */
.example-colormix-to-hsl {
  background: color-mix(in hsl, var(--background) 100%, transparent);
  color: color-mix(in hsl, var(--foreground) 100%, transparent);
}

<div class="example">A</div>
<div class="example-oklch">A</div>
<div class="example-hsl">A</div>
<div class="example-oklch">A</div>
<div class="example-colormix-to-hsl">A</div>

TailwindCSS v3

With TailwindCSS v3, if you only use the variables natively, the alpha-value that ensures transparency cannot take effect.

tailwind.config = {
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      }
    }
  }
}

:root {
  --background: oklch(1 0.37 29.23);
  --foreground: oklch(0.89 0.0691 52.94);
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-background text-foreground h-10 w-10 border-2 border-black inline-block">A</div>
<div class="bg-background/50 text-foreground/50 h-10 w-10 border-2 border-black inline-block">A</div>

That's why a color declaration like this is needed:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        background: "color-mix(in hsl, var(--background) calc(100% * <alpha-value>), transparent)",
        foreground: "color-mix(in hsl, var(--foreground) calc(100% * <alpha-value>), transparent)",
      }
    }
  }
}

:root {
  --background: oklch(1 0.37 29.23);
  --foreground: oklch(0.89 0.0691 52.94);
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-background text-foreground h-10 w-10 border-2 border-black inline-block">A</div>
<div class="bg-background/50 text-foreground/50 h-10 w-10 border-2 border-black inline-block">A</div>

TailwindCSS v4

As you may have seen, color-mix() is part of the 2023 baseline, which is still relatively new. Browser support for CSS v3 is broader, which is why it's not used by default. However, TailwindCSS v4 aligns with this direction to provide long-term access to many new and useful features.

• Browser support - TailwindCSS v4 Docs
• Simplified variable colors - TailwindCSS v4 Beta
• Referencing in CSS - TailwindCSS v4 Docs
• --alpha() function - TailwindCSS v4 Docs

That's why the CSS-first configuration in v4 no longer requires manual conversion—it handles it automatically:

:root {
  --primary: oklch(1 0.37 29.23);
  --secondary: hsl(23.13 100% 85%);
}

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --color-primary: var(--primary); /* oklch and working */
  --color-secondary: var(--secondary); /* hsl and working*/
}
</style>

<div class="bg-primary text-secondary h-10 w-10 border-2 border-black inline-block">A</div>
<div class="bg-primary/50 text-secondary/50 h-10 w-10 border-2 border-black inline-block">A</div>

Note: And this is the point where I'd mention that naming colors based on their usage location doesn't seem logical to me. For example, using a color named --background for a border or text color would feel inconsistent since that's not its intended purpose. I believe it's better to name colors based on their actual hue, like "orange"; or use a more neutral naming convention such as "primary", "secondary", etc.