vue3-tailwind-components 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -51
- package/dist/vue3-tailwind-components.es.js +3192 -3146
- package/dist/vue3-tailwind-components.umd.js +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
This is a simple set of Vue 3, Tailwind based components. At the moment these consist of:
|
4
4
|
|
5
5
|
* [Button](./src/components/button/README.md)
|
6
|
+
* [Button Group](./src/components/buttonGroup/README.md)
|
6
7
|
* [Badge](./src/components/badge/README.md)
|
7
8
|
* [Table](./src/components/table/README.md)
|
8
9
|
* [Paginator](./src/components/paginator/README.md)
|
@@ -43,44 +44,52 @@ classes that are computed in the components.
|
|
43
44
|
Here is a boilerplate tailwind config:
|
44
45
|
|
45
46
|
```javascript
|
46
|
-
/** @type {import('tailwindcss').Config} */
|
47
47
|
const colors = require('tailwindcss/colors')
|
48
48
|
module.exports = {
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
],
|
71
|
-
theme: {
|
72
|
-
extend: {
|
73
|
-
colors: {
|
74
|
-
primary: colors.slate,
|
75
|
-
secondary: colors.lime,
|
76
|
-
warning: colors.amber,
|
77
|
-
success: colors.green,
|
78
|
-
danger: colors.red,
|
79
|
-
info: colors.indigo
|
80
|
-
}
|
81
|
-
},
|
49
|
+
darkMode: 'class',
|
50
|
+
content: [
|
51
|
+
"./index.html",
|
52
|
+
"./src/**/*.{js,ts,jsx,vue}",
|
53
|
+
],
|
54
|
+
safelist: [
|
55
|
+
{
|
56
|
+
pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
57
|
+
variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
|
58
|
+
},
|
59
|
+
{
|
60
|
+
pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
61
|
+
variants: ['dark', 'dark:hover'],
|
62
|
+
},
|
63
|
+
{
|
64
|
+
pattern: /divide-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
65
|
+
variants: ['dark', 'dark:hover'],
|
66
|
+
},
|
67
|
+
{
|
68
|
+
pattern: /text-(\w+)-(\d00)/,
|
69
|
+
variants:['file','dark']
|
82
70
|
},
|
83
|
-
|
71
|
+
{
|
72
|
+
pattern: /accent-(\w+)-(\d00)/,
|
73
|
+
variants:['file','dark']
|
74
|
+
},
|
75
|
+
{
|
76
|
+
pattern: /placeholder-(\w+)-(\d00)/,
|
77
|
+
},
|
78
|
+
|
79
|
+
],
|
80
|
+
theme: {
|
81
|
+
extend: {
|
82
|
+
colors:{
|
83
|
+
primary:colors.slate,
|
84
|
+
secondary:colors.lime,
|
85
|
+
warning:colors.amber,
|
86
|
+
success:colors.green,
|
87
|
+
danger:colors.red,
|
88
|
+
info:colors.indigo
|
89
|
+
}
|
90
|
+
},
|
91
|
+
},
|
92
|
+
plugins: [require("tailwindcss-animate")],
|
84
93
|
}
|
85
94
|
```
|
86
95
|
|
@@ -110,23 +119,32 @@ If you want to use every color that Tailwind supply in their default theme you c
|
|
110
119
|
```javascript
|
111
120
|
...
|
112
121
|
safelist: [
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
122
|
+
{
|
123
|
+
pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
124
|
+
variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
|
125
|
+
},
|
126
|
+
{
|
127
|
+
pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
128
|
+
variants: ['dark', 'dark:hover'],
|
129
|
+
},
|
130
|
+
{
|
131
|
+
pattern: /divide-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
132
|
+
variants: ['dark', 'dark:hover'],
|
133
|
+
},
|
134
|
+
{
|
135
|
+
pattern: /text-(\w+)-(\d00)/,
|
136
|
+
variants:['file','dark']
|
137
|
+
},
|
138
|
+
{
|
139
|
+
pattern: /accent-(\w+)-(\d00)/,
|
140
|
+
variants:['file','dark']
|
141
|
+
},
|
142
|
+
{
|
143
|
+
pattern: /placeholder-(\w+)-(\d00)/,
|
144
|
+
},
|
145
|
+
|
128
146
|
],
|
129
|
-
|
147
|
+
|
130
148
|
```
|
131
149
|
|
132
150
|
This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.
|