css - 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(':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": ".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"
}

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

@import url('https://fonts.googleapis/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/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"
}

Share Improve this question edited Apr 1 at 5:46 rozsazoltan 10.8k6 gold badges19 silver badges52 bronze badges asked Mar 31 at 21:23 isnintendo 133 bronze badges New contributor isnintendo is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

github link github/Healme-Diets-Healthy-Nutrition/healme-frontend/tree/… – isnintendo Commented Mar 31 at 21:24
are you using both autoprefixer and post-css? what does you post-css config look like? – hengrv Commented Mar 31 at 21:42
export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; – isnintendo Commented Apr 1 at 4:02

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

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"></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"></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/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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

1 Answer 1

TailwindCSS v3

TailwindCSS v4

与本文相关的文章

评论列表(0)