saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.24k stars 1.31k forks source link

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

Closed Splinteer closed 8 months ago

Splinteer commented 8 months ago

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

github-actions[bot] commented 8 months ago

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.

saadeghi commented 8 months ago

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