Search code examples
tailwind-cssdaisyui

How to add a oklch color to tailwind safelist

I am trying to an a color from daisyUI to tailwind safelist but it does not seem to be working

tailwind.config.ts

const config: Config = {
  safelist: [
    'bg-[oklch(94.51% 0.179 104.32)]', // cyberpunk
  ],

}

and I am trying to use it like:

page.tsx

export default async function Home() {
  return (
    <main className="bg-[oklch(94.51% 0.179 104.32)]">
      page content...
    </main>
  );
}

But it is not working.

Solution

  • If you are using it in page.tsx and this file is covered by the content file globs in the Tailwind configuration, you do not need to add it to the safelist. Instead, you'd need to escape the spaces with underscores (_) for Tailwind to generate the appropriate CSS rule:

    <main className="bg-[oklch(94.51%_0.179_104.32)]">

    Or if page.tsx is not covered by the content file globs, then in safelist:

    const config: Config = {
  safelist: [
    'bg-[oklch(94.51%_0.179_104.32)]', // cyberpunk