diff --git a/packages/alpinejs/src/directives/x-show.js b/packages/alpinejs/src/directives/x-show.js index 3a1369abb..6d764e206 100644 --- a/packages/alpinejs/src/directives/x-show.js +++ b/packages/alpinejs/src/directives/x-show.js @@ -9,7 +9,9 @@ directive('show', (el, { modifiers, expression }, { effect }) => { // We're going to set this function on the element directly so that // other plugins like "Collapse" can overwrite them with their own logic. if (! el._x_doHide) el._x_doHide = () => { - mutateDom(() => el.style.display = 'none') + mutateDom(() => { + el.style.setProperty('display', 'none', modifiers.includes('important') ? 'important' : undefined) + }) } if (! el._x_doShow) el._x_doShow = () => { diff --git a/packages/docs/src/en/directives/show.md b/packages/docs/src/en/directives/show.md index 988a16f8a..cd28fcf97 100644 --- a/packages/docs/src/en/directives/show.md +++ b/packages/docs/src/en/directives/show.md @@ -37,3 +37,20 @@ If you want to apply smooth transitions to the `x-show` behavior, you can use it ``` + + +## Using the important modifier + +Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the `display` property with the `!important` flag, it will take precedence over the inline style set by Alpine. + +In these cases you may use the `.important` modifier to set the inline style to `display: none !important`. + +```alpine +