Using with Tailwind

vael-ui ships in @layer ui-components. Tailwind v4 wraps its own utilities in a layer too, so order matters: import vael-ui's CSS before your Tailwind entry (below) so its layer registers first, keeping Tailwind's utilities layer after it in the cascade. A Tailwind utility on a vael-ui component then always wins, no !important, no specificity fights. See Styling and cascade layers for the general mechanics.

import 'vael-ui/style.css'
import './style.css' // your Tailwind entry

Keep this import first

Most consumers no longer need an explicit vael-ui/style.css import since 0.2.0 — each component loads its own CSS automatically. Tailwind v4 is the exception: its utilities live in their own cascade layer, and whichever stylesheet registers a layer name first wins the ordering. Import vael-ui's CSS before your Tailwind entry, in your app's main entry file, so this holds even as more components' CSS loads later.

Merging classes with tailwind-merge

Every component accepts a ui prop for part classes (e.g. :ui="{ root: 'my-class' }"). To resolve conflicting Tailwind utilities there the way tailwind-merge would (last one wins per property), wire it up once:

import { twMerge } from 'tailwind-merge'
import { ConfigProvider } from 'vael-ui'

<ConfigProvider :class-merge="twMerge">
  <YourApp />
</ConfigProvider>

Every ui.* part class in the tree now passes through twMerge.