saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library

Home Page:https://daisyui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bug: DaisyUI doesn't detect classes when using template litterals

Splinteer opened this issue · comments

What version of daisyUI are you using?

4.7.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://stackblitz.com/edit/daisyui-angular-bys9bg?file=src%2Fapp%2Fbutton.component.ts

Describe your issue

Classes like btn-primary, btn-secondary... are not working when using template litterals in TypeScript.
I need to do:

export type ButtonColor =
  | 'neutral'
  | 'primary'
  | 'secondary'
  | 'accent'
  | 'info'
  | 'success'
  | 'warning'
  | 'error'
  | 'ghost'
  | 'link';

type ButtonColorClass = 

    | 'btn-neutral'
    | 'btn-primary'
    | 'btn-secondary'
    | 'btn-accent'
    | 'btn-info'
    | 'btn-success'
    | 'btn-warning'
    | 'btn-error'
    | 'btn-ghost'
    | 'btn-link';

Instead of

type ButtonColorClass = `btn-${ButtonColor}`;

to have my button with a working btn-primary class

Thank you @Splinteer for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

It's not related to daisyUI. It's how Tailwind CSS works. All class names should exist in the file as a string:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names