Overrides

A Tailwind utility overrides normal component declarations:

<button class="btn btn-size-lg px-8">Save</button>

px-8 wins over padding in the base, variants, or compounds. Keep variacss/tailwind.css imported before tailwindcss. It establishes these sublayers inside Tailwind's utilities layer:

varia.base < varia.variants < varia.compounds < native utilities

A utility on a slot also overrides component rules that target it through an ancestor.

!important declarations reverse CSS layer priority. Within a layer, Tailwind's utility ordering and the CSS cascade decide which declaration wins. Class attribute order has no effect.

Reuse a component in CSS

In a stylesheet that loads Varia:

@layer utilities {
  .checkout-action {
    @apply btn;
  }
}

Use checkout-action btn-size-lg to keep the size selectable. For separate component stylesheets, follow Tailwind's @reference documentation.