> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/tailwindlabs/tailwindcss/llms.txt
> Use this file to discover all available pages before exploring further.
# Important Modifier
> Use the ! modifier to make utilities important and override other styles
## Overview
Tailwind CSS provides an `!` modifier (exclamation mark) that adds `!important` to utility declarations. This is useful when you need to override other styles with higher specificity.
## Basic Usage
Add an `!` prefix to any utility to make it important:
```html theme={null}
This text is blue (important overrides red)
```
Generated CSS:
```css theme={null}
.text-red-500 {
color: #ef4444;
}
.\!text-blue-500 {
color: #3b82f6 !important;
}
```
The `!important` flag increases the specificity of the declaration, making it override other conflicting styles regardless of selector specificity.
## With Variants
The important modifier can be combined with any variant:
```html theme={null}
Small text, large on medium screens (important)
```
### Multiple Variants
```html theme={null}
Low opacity, but full opacity on hover in dark mode (important)
```
## Common Use Cases
### Overriding Third-Party Styles
When integrating third-party components with their own CSS:
```html theme={null}
```
### Utility-First Overrides
When you need to override a base style without changing it:
```html theme={null}
Small on mobile, but ALWAYS extra large on large screens
```
### State-Based Overrides
```html theme={null}
```
## Important Position
The `!` modifier can be placed at different positions:
### Before the Utility (Standard)
```html theme={null}
Standard position
```
### After a Variant
```html theme={null}
Important on hover
```
### Multiple Variants
```html theme={null}
Important on large dark screens
```
While you can place `!` at different positions, the standard convention is to place it immediately before the utility name for consistency.
## With Arbitrary Values
The important modifier works with arbitrary values:
```html theme={null}
Important custom color
Important custom padding on hover
```
## With Custom Utilities
The important modifier works with custom utilities defined using `@utility`:
```css theme={null}
@utility text-trim {
text-box-trim: both;
text-box-edge: cap alphabetic;
}
```
```html theme={null}
Important text trimming
```
## Compound Utilities
The important modifier applies to all properties in compound utilities:
```html theme={null}
```
Generated CSS:
```css theme={null}
.\!inset-0 {
inset: 0 !important;
}
```
## Limitations and Caveats
**Important Considerations:**
1. Overusing `!important` makes styles harder to override later
2. Creates specificity wars that make CSS harder to maintain
3. Can make debugging more difficult
4. Should be used as a last resort, not a first solution
### Doesn't Work With These Patterns
The important modifier cannot be used in certain contexts:
```css theme={null}
/* ❌ Cannot use in @apply */
.my-class {
@apply !text-blue-500; /* Not supported */
}
/* ✅ Apply important utilities directly */
.my-class {
@apply text-blue-500; /* Then add important if needed */
}
```
### Specificity Doesn't Change
Important changes the weight of the declaration, not the selector specificity:
```html theme={null}
```
## Alternative Solutions
### Increase Specificity Instead
Often you can solve the problem by increasing specificity:
```html theme={null}
Blue
Blue
```
### Reorder Your HTML
Sometimes reordering classes is enough:
```html theme={null}
Blue background (no important needed)
```
### Use More Specific Variants
Sometimes a more specific variant solves the issue:
```html theme={null}
```
### Custom Property Override
For components, consider using CSS custom properties:
```css theme={null}
.button {
background: var(--button-bg, theme(--color-blue-500));
}
```
```html theme={null}
```
## Best Practices
**Recommendations:**
1. **Last Resort**: Only use `!` when other solutions don't work
2. **Document Usage**: Add comments explaining why important was necessary
3. **Temporary Fix**: Consider refactoring to remove important later
4. **Third-Party Override**: Most justified when overriding external libraries
5. **Team Agreement**: Establish team guidelines on important usage
### When It's Acceptable
✅ Overriding third-party component styles
✅ Quick prototyping and testing
✅ Utility classes that should always win (rare)
✅ Bug fixes where refactoring is too risky
### When To Avoid
❌ As a shortcut to avoid understanding specificity
❌ In reusable component libraries
❌ When you control all the CSS
❌ As the first solution you try
## Debugging Important Utilities
When debugging important utilities in DevTools:
```css theme={null}
/* In Chrome DevTools, important declarations are marked */
.\!text-blue-500 {
color: #3b82f6 !important; /* Shows "!important" badge */
}
```
### Finding Important Conflicts
```html theme={null}
Blue text (appears later in stylesheet)
```
When multiple `!important` declarations conflict, normal CSS cascade rules apply - the last declaration in source order wins.
## Performance Considerations
The important modifier has minimal performance impact:
* Selector specificity calculations are the same
* No additional CSS is generated (just the `!important` flag)
* Browser rendering performance is identical
## Migration Guide
### From Tailwind v3
The `!` modifier syntax is the same in v4:
```html theme={null}
Important
Important
```
### From Inline Styles
Converting inline styles with important:
```html theme={null}
Normal size on screen, important base size when printing
```
## Source Code
The important modifier is handled in the candidate parsing and compilation system. The `!` character is detected and stripped from the candidate name, then `!important` is added to all declarations in the generated CSS.
Key files:
* Candidate parsing: `/packages/tailwindcss/src/candidate.ts`
* CSS generation: `/packages/tailwindcss/src/compile.ts`