Scoped styles coexist; dynamic class bindings with Nakshora.

Conditional classes#

Component.vue
vue
<template>
  <button
    :class="[
      'px-4 py-2 rounded-lg transition',
      active ? 'bg-blue-500 text-white' : 'bg-slate-100'
    ]"
  >
    {{ label }}
  </button>
</template>

Patterns that scale#

  • Use :class arrays for readability
  • Scoped styles + utilities coexist: utilities for layout, scoped for one-offs
  • v-bind() CSS can consume Nakshora variables

Gotchas#

  • Dynamic :class with computed fragments needs safelisting
Tip. Dynamic class fragments must be visible to the content scanner — full class names in source, or a configuration/safelist|safelist.