shadow-md is one of the highest-frequency classes in real Nakshora codebases. shadow-md lifts cards off the page; one step below hover state, one above resting UI.

What it compiles to#

css
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) }

Ten ways to use it#

  • Open any recipe in the recipes/index|recipe library and you will find shadow-md 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