Why utilities never fight each other, how !important support works, and how to override safely.

The idea#

Utilities are single-class selectors, so they all tie — the cascade decides by source order, which Nakshora controls for you. States (hover:, focus:) and screens compile into the right order automatically. When you truly need to win against legacy CSS, there is an important mode.

In practice#

example
html
<button class="bg-blue-500 hover:bg-blue-600">…</button>
<!-- hover always wins over base: it is compiled later -->

Common mistakes#

  • Stacking two conflicting base utilities on one element (text-red-500 + text-blue-500)
  • Adding !important by hand instead of using the important option
  • Overriding utilities with IDs — the specificity hole becomes unfillable

Keep learning#

Next: concepts/design-tokens|Design tokens and utilities/index|the utilities reference put this concept to work. For the big picture, see getting-started/introduction|the introduction.