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.

Sign up for GitHub

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

Jump to bottom

bug: Cannot use @apply with join and join-item #3084

Closed
TheHadiAhmadi opened this issue Jun 14, 2024 · 2 comments
Closed

bug: Cannot use @apply with join and join-item #3084

TheHadiAhmadi opened this issue Jun 14, 2024 · 2 comments

Comments

@TheHadiAhmadi
Copy link

What version of daisyUI are you using?

4.12.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/8gTvGmHF0y

Describe your issue

I want to create custom class name for my components, and use @apply. combination of join and join-item doesn't work with apply.

I expect this code works:

<div class="my-pagination">
  <button class="my-pagination-item">1</button>
  <button class="my-pagination-item my-pagination-item-active">2</button>
  <button class="my-pagination-item">3</button>
  <button class="my-pagination-item">4</button>
</div>
.my-pagination {
  @apply join;
}

.my-pagination-item {
  @apply join-item btn btn-primary btn-md;
}

.my-pagination-item-active {
  @apply btn-active;
}

but buttons have roundness and styles of join-item are not applied.

above code should be equivalent to below code:

<div class="join">
  <button class="join-item btn btn-primary btn-md">1</button>
  <button class="join-item btn btn-primary btn-md btn-active">2</button>
  <button class="join-item btn btn-primary btn-md">3</button>
  <button class="join-item btn btn-primary btn-md">4</button>
</div>

thanks
@github-actions GitHub Actions
Copy link

Thank you @TheHadiAhmadi 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
Copy link
Owner

That's how @apply works and there's nothing I can do about it.
When you use

.my-pagination {
  @apply join;
}

It copies the CSS rules of .join class to .my-pagination but it doesn't copy a child selector (.join .join-item) to a new class name .my-pagination .my-pagination-item. In other words, with @apply you can use a single CSS rule in a new class name but all the relations between class names will be ignored. This is not a bug, but simply how @apply is intented to work.

May I ask why you need to rename the class names?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @TheHadiAhmadi