Skip to content

Allow !important on CSS variables #16873

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Mar 4, 2025
Merged

Allow !important on CSS variables #16873

merged 4 commits into from
Mar 4, 2025

Conversation

@RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Feb 28, 2025

We recently fixed an issue (#16664) so that we could remove the !important on CSS variables. The reason we did that is because Google Chrome is showing a warning in the devtools styles panel that this is invalid. However, this is valid and the code actually works as expected.

If we look at the CSS spec for this:

Note: Custom properties can contain a trailing !important, but this is automatically removed from the property’s value by the CSS parser, and makes the custom property "important" in the CSS cascade. In other words, the prohibition on top-level "!" characters does not prevent !important from being used, as the !important is removed before syntax checking happens.

— https://www.w3.org/TR/css-variables-1/#syntax

So given this input:

@import "tailwindcss";

body {
  --text-color: var(--color-white) !important;
  --bg-color: var(--color-blue-950) !important;

  /* Direct usage */
  background-color: var(--bg-color);

  /* Usage inside other functions as-if the `!important` is in the middle instead of the end */
  color: color-mix(in oklab, var(--text-color) 75%, transparent);
}

You will notice that everything works as expected, but if you look at the Styles panel in Chrome for the <body> element, you will see an incorrect warning. (At least that's what you used to see, I updated Chrome and everything renders fine in devtools).

Play: https://play.tailwindcss.com/BpjAJ6Uxg3?file=css

This change reverts the "fix" for: #16664. @winchesHe you were the original person that opened the issue so this info might be useful to you as well. Can you verify that the Play link above does work as expected for you?

Fixes: #16810

@RobinMalfait RobinMalfait requested a review from a team as a code owner February 28, 2025 09:53
@RobinMalfait RobinMalfait enabled auto-merge (squash) March 4, 2025 16:19
@RobinMalfait RobinMalfait merged commit 57b080c into main Mar 4, 2025
5 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-16810 branch March 4, 2025 16:21
@philipp-spiess philipp-spiess mentioned this pull request Mar 4, 2025
Closed
@fossabot fossabot bot mentioned this pull request Oct 25, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@philipp-spiess philipp-spiess philipp-spiess approved these changes

@thecrypticace thecrypticace thecrypticace approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

!important Not Applied in Custom Tailwind @utility in Angular

4 participants

@RobinMalfait @philipp-spiess @thecrypticace