@vt7/nuxt-tailwindui
Getting started
yarn add @vt7/nuxt-tailwindui
Basic Usage
In nuxt.config.js
export default {
...
components: true,
buildModules: [
...
'@vt7/nuxt-tailwindui/nuxt',
],
build: {
postcss: {
plugins: {
'postcss-nesting': {},
'postcss-nested': {},
}
}
},
tailwindUI: {
prefix: 't',
}
}
In tailwind.config.js
module.exports = {
...
theme: {
extend: {
colors: {
primary: {
DEFAULT: colors.indigo['600'],
focus: colors.indigo['500'],
hover: colors.indigo['700'],
content: colors.white,
},
secondary: {
DEFAULT: colors.indigo['100'],
focus: colors.indigo['500'],
hover: colors.indigo['200'],
content: colors.indigo['700'],
},
error: colors.red['500'],
info: colors.blue['500'],
warning: colors.yellow['500'],
success: colors.green['500'],
}
}
}
}
In index.vue
<template>
<t-button color="primary" size="sm">Button base</t-button>
</template>