x-show not working in conjunction with flex

[cgrisar]

Suggesting to change the style attribute to

display:none !important

Without the !important flag, situations occur when the content is displayed, even when condition is falsy

[SimoTod]

Setting !important is a bad practice, especially in a third party library, because it breaks the natural order of CSS rules.
Do you have an example where it does not work?

[cgrisar]

OK, it seems tailwind proposes important as standard.
One has to set important to false when building the framework.

x-show works if that important flag is set to false

[ryangjchandler]

OK, it seems tailwind proposes important as standard.
One has to set important to false when building the framework.

x-show works if that important flag is set to false

That's not actually true. By default, Tailwind won't use !important with utility classes, please see here: https://tailwindcss.com/docs/configuration#important

[stefanfisk]

Have there been any thoughts about using a property instead of inline styles, like for x-cloak? That would allow customizations for weird setups like when using !important.

[camillo777]

Same here with Bulma CSS... if I put "is-flex" class, the div is not hidden

[HugoDF]

Could you share the is-flex CSS?

It's always been my understanding that inline-styles have higher precedence styles from a CSS file

[KevinBatdorf]

It's always been my understanding that inline-styles have higher precedence styles from a CSS file

@HugoDF That is the case, unless you use !important, which Bulma uses:

.is-flex {
  display: flex !important;
}

[HugoDF]

I mean the workarounds would be:

• toggle the is-flex class along with using x-show
• bind style directly and display: none!important

[mccarlosen]

I solved it using a parent element:

<div x-show="!files.length">
    <div class="is-flex is-justify-content-center">
        <p class="help has-text-grey">Not found</p>
   </div>
</div>

It can also work as it says @HugoDF

<div :class="{'is-justify-content-center': true, 'is-flex': !files.length}" x-show="!files.length">
    <p class="help has-text-grey">Not found</p>
</div>

or also

<div :class="{'is-hidden': files.length, 'is-flex is-justify-content-center': !files.length}">
    <p class="help has-text-grey">Not found</p>
</div>

[kondratovbr]

I also think that !important on the display: none toggled by x-show is, well, important. At least there should be an option to add it. Specifically to avoid gross workarounds with Tailwind - it uses !important on utility classes to override base styles, third-party styles and Tailwind's extracted components styling.

[cgrisar]

you can deactivate the !important setting in tailwind

…

Le 24 mars 2021 à 11:58, Bogdan Kondratov ***@***.***> a écrit : I also think that !important on the display: none toggled by x-show is, well, important. At least there should be an option to add it. Specifically to avoid gross workarounds with Tailwind - it uses !important on utility classes to override base styles, third-party styles and Tailwind's extracted components styling. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#791 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB4E6QAVKV3HG3ZAD5QO25LTFHAWLANCNFSM4R4KMX3Q>.

[stefanfisk]

important: true is not the default, but there are quite a few people out here who need it enabled for whatever reasons.

[kondratovbr]

you can deactivate the !important setting in tailwind
…

It is even disabled by default. It is quite useful though, that's why it's often enabled in projects.

[kondratovbr]

Right now the most elegant workaround, in case anybody is facing the same issue with Alpine and Tailwind goes something like this:

x-bind:class="{'inline-flex': !show, 'hidden': show}"

Edit: This isn't a proper workaround because it messes x-transition - leave transition doesn't work because the element gets hidden immediately by x-bind:class.

[jcasanova]

Hi!

First I'd like to thank the creators and contributors of these two amazing libs and frameworks. Tailwindcss and AlpineJs are awesome ❤️

Then I'd like to second the option to have x-show directive to allow for '!important' specificity. As Sebastian mentions in this article https://sebastiandedeyne.com/why-we-use-important-with-tailwind/ utilities should have the final word ;)
Could it be something like the recent tailwind addition, by prefixing with an exclamation point ? !x-show="open"

As a specific workaround I successfully tried and set Tailwind's important flag on every selector not matching the x-show directive :

module.exports = {
    ...
    important: ':not([x-show])', 
   ...
}

This has the benefit to allow x-show directive to override flex display and have its transitions applied.

[calebporzio]

Thanks for bringing this back up. I agree this needs to be addressed. I think I will add !important to x-show in v3.

Is there any downside to doing this?

[jcasanova]

I don't see any downside, as the x-show directive should have the final word regarding display (none) of the element. And this is the only style rule affected by the directive.

@calebporzio what's your status re:v3, is it something you plan to release in a few weeks or more like end of the year ?

[stefanfisk]

Personally I'd much prefer the option of using a property or class for applying the display: none, just like how I need to supply the styles for x-cloak.

[calebporzio]

@jcasanova , thanks for the input. In a few weeks!