transition is one of the highest-frequency classes in real Nakshora codebases. transition enables the default property set for smooth state changes — polish in one word.

What it compiles to#

css
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms }

Ten ways to use it#

  • Open any recipe in the recipes/index|recipe library and you will find transition doing structural work
  • Combine with responsive prefixes for breakpoint behavior
  • Pair with state variants (hover:, focus:) for interactivity
  • Use in components extracted in your framework of choice
  • Audit existing projects: search for hand-written equivalents and replace them
  • Teach your team the class — it appears in most code reviews
  • Compose it with spacing/color utilities for complete patterns
  • Test it in the playground before committing
  • Check dark mode: add the dark: twin where color is involved
  • Bookmark its reference page — the generated table never lies

Common mistakes#

  • Applying it on the wrong display type (some utilities only make sense on flex/grid/block)
  • Stacking a conflicting utility of the same property later in the cascade
  • Expecting layout utilities to affect inline elements without a display change
  • Forgetting responsive prefixes, hard-coding desktop assumptions

spotlight/index|Spotlight index · utilities/index|Utilities reference