Basic component

Define a button and use its class in a template.

Define the base styles

Create button.config.ts beside your varia.config.ts:

button.config.ts

import { defineComponent } from 'variacss'

export default defineComponent('btn', {
  base: [
    'inline-flex items-center justify-center rounded px-4 py-2 font-medium',
    'bg-blue-600 text-white hover:bg-blue-700',
    'focus-visible:outline-2 focus-visible:outline-offset-2',
  ],
})

The name btn becomes the base class. Supply utilities as a string or an array of strings. Each expansion must contain at least one utility. A definition must include base, at least one slot, or at least one variant.

Register and use it

Import the definition into varia.config.ts and add it to components:

varia.config.ts

import { tailwindVaria } from 'variacss/tailwind'
import button from './button.config.js'

export default tailwindVaria({ components: [button] })

Keep any other definitions you already register. Add the button to a scanned template:

<button type="button" class="btn">Save</button>

Run your development command. You should see a blue button with white text and padding.