---
title: "Many `!important` utilities in one file (lint/tw-important-soup)"
description: "lint/tw-important-soup: Stacking `!` modifiers means the cascade is being fought rather than designed."
canonical: https://void-design.vercel.app/rules/lint/tw-important-soup
lastModified: 2026-09-16
---

# Many `!important` utilities in one file

`lint/tw-important-soup` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## Why it matters

Stacking `!` modifiers means the cascade is being fought rather than designed. It breaks variants (hover/dark can no longer override), makes components unthemeable and usually hides a conflicting global style.

## How to fix it

Find the conflicting rule (often an unlayered global CSS rule beating `@layer utilities`) and fix it at the source; use `tailwind-merge`/`cn()` to resolve class conflicts instead of `!`.

## Example

```css
/* move global resets into a layer so utilities win without ! */
@layer base {
  button { padding: 0; }
}
```

## References

- https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `tw-v3-arbitrary-var` `utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)` — [lint/tw-v3-arbitrary-var](https://void-design.vercel.app/rules/lint/tw-v3-arbitrary-var)
- `tw-js-config-ignored` `tailwind.config.*` exists but the CSS entry has no `@config` — [lint/tw-js-config-ignored](https://void-design.vercel.app/rules/lint/tw-js-config-ignored)
- `tw-dark-variant-os` `dark:` follows the OS, but the app toggles themes with a class/attribute — [lint/tw-dark-variant-os](https://void-design.vercel.app/rules/lint/tw-dark-variant-os)
- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)
- `img-raw` Raw `<img>` in a Next.js app — [lint/img-raw](https://void-design.vercel.app/rules/lint/img-raw)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/tw-important-soup`