patterncsstailwindModerate
The important modifier (!) to force a Tailwind utility to win specificity battles
Viewed 0 times
important!importantspecificityoverridethird-partyinline styles
Problem
A third-party library (date picker, modal, tooltip) applies inline styles or highly specific CSS that overrides Tailwind utilities. Alternatively, Tailwind's utilities need to beat a global stylesheet that uses IDs or deeply nested selectors.
Solution
Prefix any Tailwind utility with
Alternatively, configure global important in tailwind.config.js to make ALL utilities important:
Or scope it to a specific element:
! to add !important to its generated CSS:<!-- Force margin even against a library's inline styles -->
<div class="!mt-0 !p-4">
<!-- Force color against a third-party theme -->
<p class="!text-black !font-bold">Alternatively, configure global important in tailwind.config.js to make ALL utilities important:
module.exports = {
important: true, // or '#app' to scope to a selector
};Or scope it to a specific element:
important: '#root'Why
The
! modifier appends !important to the property value in the generated CSS rule. The important: '#root' config strategy wraps all rules in a higher specificity selector instead, avoiding !important pollution.Gotchas
- Global important: true makes ALL Tailwind utilities !important, which can cause unintended conflicts elsewhere.
- important: '#selector' is the preferred approach for third-party overrides — it increases specificity without !important.
- Using ! on individual classes is fine for one-off fixes but signals a specificity architecture problem if used frequently.
- !important cannot be beaten by anything except another !important with equal or higher specificity — use sparingly.
Context
When Tailwind utilities are overridden by third-party library styles or legacy global CSS.
Revisions (0)
No revisions yet.