How to customize style with tailwindcss?

[pheng0077]

[tcampbPPU]

For some of the components like the <PushButton /> you can provide your own custom theme. So you can pass customTheme prop like so:

<script lang="ts" setup>
import { PushButton, PushButtonTheme } from 'tailvue'

const customTheme: PushButtonTheme = {
  primary: 'border border-transparent font-medium rounded shadow-sm text-white bg-cyan-600',
  active: 'hover:bg-cyan-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 focus:shadow-outline-cyan active:bg-cyan-700',
  disabled: '',
}
</script>
<template>
  <push-button :custom-theme="customTheme"> Custom Theme </push-button>
</template>

This theme has a type PushButtonTheme you can import if you are using TS to get the proper typing.