This requires Nuxt.js with the Tailwind CSS module

Quick Setup

1. Add the nuxt-tailvue dependency to your Nuxt.js project

npm install nuxt-tailvue
# OR
yarn add nuxt-tailvue

2. Add button to the modules section of nuxt.config.js

{
  modules: [
    ['nuxt-tailvue', {button: true}],
  ]
}

3. If you're using Purge, add this module to the content section of tailwind.config.js

module.exports = {
    content: [
      'node_modules/tv-*/dist/tv-*.umd.min.js',
  }

Features

ButtonGroup component

• Works with themes

  <ButtonGroup>
    <PushButton group="left">
      left
    </PushButton>
    <PushButton group="middle">
      middle
    </PushButton>
    <PushButton group="right">
      right
    </PushButton>
  </ButtonGroup>

Combine with tv-icon

<PushButton>
    <IconCheck class="w-5 h-5 mr-2" primary="text-green-300" secondary="text-green-400"/>
    Pair with Icons
</PushButton>

Use as a nuxt-link

• Button turns into a for proper navigation

<PushButton to="/about">
  About Us
</PushButton>