vue3-tailwind-components

This is a simple set of Vue 3, Tailwind based components. At the moment these consist of:

* Button
* Button Group
* Badge
* Table
* Paginator
* Icons
* Modal
* Rollout
* Dropdown
* Notication (Toast)
* Collapse

* Form elements
*
* Select
*
* Input

* Range (slider)
*
* Textarea
*
* Switch

Demo

I have done a simple demo page here which should
give you some idea as to how they look and behave. Please feel free to email me with suggestions or make a pull request. richard@codevanilla.com

Installation

``shell
npm i vue3-tailwind-components --save
`

Edit tailwind.config.js to look like this. Be especially careful to include this line
"./node_modules/vue3-tailwind-components/dist/vue3-tailwind-components.es.js" it tells Tailwind to that we want to use
classes that are computed in the components.

Here is a boilerplate tailwind config:

`javascript
const colors = require('tailwindcss/colors')
module.exports = {
darkMode: 'class',
content: [
"./index.html",
"./src/*/.{js,ts,jsx,vue}",
],
safelist: [
{
pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
},
{
pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
variants: ['dark', 'dark:hover'],
},
{
pattern: /divide-(primary|secondary|warning|success|danger|info)-(\d00)/,
variants: ['dark', 'dark:hover'],
},
{
pattern: /text-(\w+)-(\d00)/,
variants:['file','dark']
},
{
pattern: /accent-(\w+)-(\d00)/,
variants:['file','dark']
},
{
pattern: /placeholder-(\w+)-(\d00)/,
},

],
theme: {
extend: {
colors:{
primary:colors.slate,
secondary:colors.lime,
warning:colors.amber,
success:colors.green,
danger:colors.red,
info:colors.indigo
}
},
},
plugins: [require("tailwindcss-animate")],
}
`

You can then just import the ones you want to use like this:

`vue


My Button

`

$3

I expect that if you use this library you will already understand how to use Tailwind generally. It comes with a
generous
color pallet of gradated colors. In the background Tailwind strips out the classes it does not see directly in your code
to keep your css small
but this creates a problem for us. It cannot see computed (concatenated strings). In order to use our components you
will need to edit your.
tailwind.config.js file in the root of your project.

If you want to use every color that Tailwind supply in their default theme you could use this safe list:

`javascript
...
safelist: [
{
pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
},
{
pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
variants: ['dark', 'dark:hover'],
},
{
pattern: /divide-(primary|secondary|warning|success|danger|info)-(\d00)/,
variants: ['dark', 'dark:hover'],
},
{
pattern: /text-(\w+)-(\d00)/,
variants:['file','dark']
},
{
pattern: /accent-(\w+)-(\d00)/,
variants:['file','dark']
},
{
pattern: /placeholder-(\w+)-(\d00)/,
},

],

`

This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.

A more optimal solution is to use color aliases. Those who have used Bootstrap css will be familiar with color aliasing.
The advantage of this approach is that we can control the color of all components from one place.

$3

All the components have dark mode styling. if that is your bag

Color aliases in tailwind.config.js like this:

`javascript
...
theme: {
extend: {
colors:{
primary:colors.slate,
secondary
:
colors.lime,
warning
:
colors.amber,
success
:
colors.green,
danger
:
colors.red,
info
:
colors.indigo
}
}
,
}
...
`

Running this project locally

See Vite Configuration Reference.

Project Setup

`sh
npm install
`

$3

`sh
npm run dev
`

$3

`sh
npm run build
``