I'm working on a Symfony 7 project with symfony/ux-twig-component v2.22.1 and tales-from-a-dev/twig-tailwind-extra v0.2.1 packages. I sometime have to override some default tailwind classes in my components but I can't seem to find a way to do it without keeping the old classes that are conflicting.

For example, I have this basic component:

# Test.html.twig
<div {{ attributes.defaults({class: 'size-40 bg-danger'}) }}></div>

If I try to assign a new background color in my template, I end up with something like this:

# index.html.twig
<twig:Test class="bg-primary" />

# renders
<div class="size-40 bg-danger bg-primary"></div>

# expected
<div class="size-40 bg-primary"></div>

I tried to force the merge myself in the component this way

<div {{ attributes.defaults({
    class: ('size-40 bg-danger'~attributes.render('class'))|tailwind_merge,
}) }}></div>

But I end up with no classes in the rendered div.

Is there a way to do it ?

I'm working on a Symfony 7 project with symfony/ux-twig-component v2.22.1 and tales-from-a-dev/twig-tailwind-extra v0.2.1 packages. I sometime have to override some default tailwind classes in my components but I can't seem to find a way to do it without keeping the old classes that are conflicting.

For example, I have this basic component:

# Test.html.twig
<div {{ attributes.defaults({class: 'size-40 bg-danger'}) }}></div>

If I try to assign a new background color in my template, I end up with something like this:

# index.html.twig
<twig:Test class="bg-primary" />

# renders
<div class="size-40 bg-danger bg-primary"></div>

# expected
<div class="size-40 bg-primary"></div>

I tried to force the merge myself in the component this way

<div {{ attributes.defaults({
    class: ('size-40 bg-danger'~attributes.render('class'))|tailwind_merge,
}) }}></div>

But I end up with no classes in the rendered div.

Is there a way to do it ?

• symfony
• twig
• symfonyux

Share Follow edited Mar 7 at 15:19 humblots asked Mar 7 at 14:07 humblotshumblots 9111 silver badge66 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

For now I'm writing them this way since classes are prepended anyways.

<div class="{{ ('size-40 bg-danger ' ~ attributes.render('class'))|tailwind_merge }}"></div>