Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: .list-row specificity is too high #3433

Open
randallmlough opened this issue Jan 30, 2025 · 4 comments
Open

bug: .list-row specificity is too high #3433

randallmlough opened this issue Jan 30, 2025 · 4 comments
Assignees
Labels

Comments

@randallmlough
Copy link

randallmlough commented Jan 30, 2025

What version of daisyUI are you using?

v5.0.0-beta.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/gyrcuJoHMV

Describe your issue

In v5 of daisy, list-row has a higher specificity than tailwind utility classes and you're not able to override it's default properties. According to the tailwind v4 docs, should "list-row" be on the component layer rather than the utility layer?

Simple example

<ul class="list border">
    <li class="list-row rounded-lg p-0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </li>
  </ul>

Image

Copy link

Thank you @randallmlough 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.

@randallmlough randallmlough changed the title bug: .list specificity is too high bug: .list-row specificity is too high Jan 30, 2025
@saadeghi saadeghi self-assigned this Jan 30, 2025
@saadeghi saadeghi added the v5 label Jan 30, 2025
@randallmlough
Copy link
Author

@saadeghi : Just wanted to add that this issue is more common than this example. Any class that is nested breaks tailwinds utility function. For example, if you tried to override the badge text color using a tailwind class, it wont work -> badge badge-soft text-black

@saadeghi
Copy link
Owner

saadeghi commented Feb 4, 2025

list-row specificity is fixed now.
badge badge-soft text-black is not expected to be black. If you think about it, badge-soft is already a modifier that sets bg color and text color so if you want it to have a black text, you wouldn't need badge-soft.
It's like using text-black and text-white at the same time. You wouldn't know which one applies because Tailwind decides the order.

This can be fixed in the future if Tailwind CSS allows plugins to add styles to @layer components but with the current plugin API everything goes to @layer utilities
Related issue tailwindlabs/tailwindcss#15045

Other than badge badge-soft text-black if there's a customization challenge, let me know.

@randallmlough
Copy link
Author

Got it. I guess my assumption was daisyui (v5 specifically) is providing the basic default properties but tailwind utility classes would still be able to override those defaults, even in my extreme and non-practical example. But from your link that may not always be the case and there may be some gotchas; which is fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants