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>

[cdsaenz]

This was the right workaround for me, thanks. Here using Bootstrap, it applies there too.

[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!

[kondratovbr]

If anyone is still having this issue, Tailwind now provides a suitable workaround:
https://tailwindcss.com/docs/configuration#selector-strategy

TLDR:
Configure tailwind.config.js like this:

module.exports = {
    important: '#app',
}

And add id="app" on your root <html> tag. (Or on your root <body> tag, provided you have no Tailwind utilities on it.)

This effectively increases the CSS selector specificity on Tailwind utilities, but inline classes still override it.

[timkley]

I stumbled upon this today. Would it make sense to provide a modifier for this? I don't think this should be dependent on setting important: true in Tailwind CSS or your own CSS.

Using x-bind:class totally works, yes, but you'd have to change classes in multiple places.

If possible I'd like to use x-show.important="expression" to achieve this. What do you think @calebporzio?

[timkley]

In all 3 cases you loose flexibility. Although I'd agree most with your first point because
I can't think of a downside, also :)

[SimoTod]

I believe Caleb agreed on having important by default in v3 (it should be somewhere in this thread). It's a mild breaking change so probably fine (it would break if someone uses a mediaquery do force display block using important for certain breakpoints but I don't know if anyone does it).

[timkley]

I'd argue that if you're doing different hidden states across breakpoints you would probably use the class binding syntax.

I can't imagine a use case where you would combine a logical and a presentational condition, and then overriding the logical one.

Mild breaking change or not, it still can be a breaking change, thus my PR. Maybe making !important the default can target a v4.

[rafales]

That sounds very reasonable.

[Tim-Wils]

I’m all for important by default!
How about the idea of adding the functionality like x-mask: evaluating a function where you can for example do advanced stuff like hide and show based on breakpoints and display block/flex where you want.
Additionally add x-show.flex and x-show.grid modifier

[moisesotjar]

If anyone still has this problem, I think I found a solution.
Adding the style="display: none !important;" attribute to the element with "x-show"

Here is a test with the x-cloak attribute and the style added to the html itself

And here with the line style="display: none !important;" in the "Modal"