-
Notifications
You must be signed in to change notification settings - Fork 4.6k
!important Not Applied in Custom Tailwind @utility in Angular #16810
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.
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
Comments
As per the documentation, the <h1 class="ion-opacity-0!">Hello from {{ name }}!</h1> |
Thanks, @wongjn! I see now! In v3, the ! was at the beginning of the class name, but in v4, it has been moved to the end of the class name. However, I tried this and it still didn’t work ![]() |
but in my case, it has a fixed value not a CSS variable definitions |
Hey! I'm curious what CSS you would expect this to generate? You're only setting a custom CSS property in that utility. Would you expect the |
It would be good to understand how the |
@philipp-spiess , thanks for jumping in! For example, when using a framework like Ionic, it provides some CSS variables to override styles for its components. I'm writing some complex utilities using Tailwind, which helps me have flexibility in writing CSS directly in HTML for the values I need. https://ionicframework.com/docs/api/toolbar#css-custom-properties-1 I have my ionic-app.css file where: /* Add application styles & imports to this file! */
@import 'tailwindcss';
@utility ion-opacity-* {
--opacity: --value(integer);
}
@utility ion-border-* {
--border-width: --value(integer);
}
/* etc... */ sometime in html, want to do this : <ion-toolbar class="ion-opacity-4! ion-border-3">
<ion-buttons slot="secondary">
<ion-button> Secondary </ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button> Primary </ion-button>
</ion-buttons>
<ion-title>Primary / Secondary Buttons</ion-title>
</ion-toolbar> This approach helps me leverage Tailwind-like utilities while working with Ionic's styling system. 🚀 |
@medbenmakhlouf Thanks, that makes sense! But what CSS rule would you expect |
@philipp-spiess I expect that whenever I add an exclamation point at the end of a class name, it would automatically apply the !important flag. For now, the workaround I’ve used is this: /* Add application styles & imports to this file! */
@import 'tailwindcss';
@utility ion-opacity-* {
--opacity: --value(integer) !important;
}
/* etc... */ But I’d rather have to do that when needed in HTML example 1: <ion-toolbar class="ion-opacity-4! ion-border-3"> expected Output : ion-opacity-4\!{
--opacity: 4 !important
} example 2: <ion-toolbar class="ion-opacity-4 ion-border-3"> expected Output : ion-opacity-4 {
--opacity: 4
} |
Gotcha! Yeah i think the problem here is that it's not clear which custom properties are safe to have an Will have think about this some more, for now it's definitely better to inline the |
@medbenmakhlouf Thanks for the issue again! We've decided to revert that change and add the |
Thanks @philipp-spiess ! |
Uh oh!
There was an error while loading. Please reload this page.
What version of Tailwind CSS are you using?
v4.0.9
What build tool (or framework if it abstracts the build tool) are you using?
Angular 19.1.8
What version of Node.js are you using?
For example: v22.14.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
N/A
Describe your issue
When defining a custom Tailwind utility using @Utility, adding ! as a prefix (e.g., !ion-opacity-0) does not generate the expected CSS with the !important flag.
Observe that the generated CSS does not include the !important flag when using ion-opacity-0!.
Expected Behavior
The ! prefix should apply the !important flag to the generated CSS rule, ensuring higher specificity.
Actual Behavior
The generated CSS does not include !important, even when explicitly using the ! prefix in the class.
The text was updated successfully, but these errors were encountered: