Skip to content
This repository has been archived by the owner on Apr 6, 2021. It is now read-only.

Add !font-bold-style important modifier #174

Merged
merged 3 commits into from
Mar 27, 2021
Merged

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Mar 27, 2021

Resolves #92, resolves #34.

This PR adds support for making any utility "important" by throwing a ! at the beginning:

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

This matches the syntax we have been showing as an example of custom variants in the official documentation for the last 500 years:

image

As well as the syntax Netlify is using as they refactor their codebase to Tailwind:

image

There are probably weird things you can do with your CSS that will make this break, but that's why we release it and let everyone do their worst and see what is reported 😄

In the future I could see a world where instead of making things !important we use the :is selector and a private ID to boost the specificity without introducing conflicts with inline styles:

:is(#__tw, .\!font-bold) {
  font-weight: 700;
}

Browser support is pretty good for this but might want to wait until Safari 12/13 are a little more dead.

@adamwathan adamwathan merged commit f481cde into main Mar 27, 2021
@adamwathan adamwathan deleted the important-modifier branch March 27, 2021 23:35
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom "important" variant not working [Idea] - Arbitrary values with !important
1 participant