vael-ui

Using with Tailwind

vael-ui ships in @layer ui-components. Tailwind's utility classes are unlayered, and unlayered CSS always wins over a layer regardless of specificity or import order, so a Tailwind utility on a vael-ui component always overrides the library's default. No !important, no specificity fights, nothing to configure. See Styling and cascade layers for the general mechanics.

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

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.