A library of Vue 3 components that use Tailwind
npm install vue3-tailwind-componentsThis 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
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
``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
`
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.
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
}
}
,
}
...
See Vite Configuration Reference.
`sh`
npm install
`sh`
npm run dev
`sh``
npm run build