vue3-tailwind-components 0.1.6 → 0.1.8
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +14 -5
- package/dist/vue3-tailwind-components.es.js +1741 -1724
- package/dist/vue3-tailwind-components.umd.js +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,7 +24,9 @@ npm i vue3-tailwind-components --save
|
|
|
24
24
|
|
|
25
25
|
Edit `tailwind.config.js` to look like this. Be especially careful to include this line
|
|
26
26
|
`"./node_modules/vue3-tailwind-components/dist/vue3-tailwind-components.es.js"` it tells Tailwind to that we want to use
|
|
27
|
-
classes that
|
|
27
|
+
classes that are computed in the components.
|
|
28
|
+
|
|
29
|
+
Here is a boilerplate tailwind config:
|
|
28
30
|
|
|
29
31
|
```javascript
|
|
30
32
|
/** @type {import('tailwindcss').Config} */
|
|
@@ -38,14 +40,15 @@ module.exports = {
|
|
|
38
40
|
safelist: [
|
|
39
41
|
{
|
|
40
42
|
pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
|
41
|
-
variants: ['hover', 'focus','file'],
|
|
43
|
+
variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
|
|
42
44
|
},
|
|
43
45
|
{
|
|
44
46
|
pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
|
47
|
+
variants: ['dark', 'dark:hover'],
|
|
45
48
|
},
|
|
46
49
|
{
|
|
47
50
|
pattern: /text-(primary|secondary|warning|success|danger|info)-(\d00)/,
|
|
48
|
-
variants:['file']
|
|
51
|
+
variants:['file','dark']
|
|
49
52
|
},
|
|
50
53
|
{
|
|
51
54
|
pattern: /placeholder-(\w+)-(\d00)/,
|
|
@@ -91,13 +94,15 @@ If you want to use every color that Tailwind supply in their default theme you c
|
|
|
91
94
|
safelist: [
|
|
92
95
|
{
|
|
93
96
|
pattern: /bg-(\w+)-(\d00)/,
|
|
94
|
-
|
|
97
|
+
variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
|
|
95
98
|
},
|
|
96
99
|
{
|
|
97
100
|
pattern: /border-(\w+)-(\d00)/,
|
|
101
|
+
variants: ['dark', 'dark:hover'],
|
|
98
102
|
},
|
|
99
103
|
{
|
|
100
104
|
pattern: /text-(\w+)-(\d00)/,
|
|
105
|
+
variants:['file','dark']
|
|
101
106
|
},
|
|
102
107
|
{
|
|
103
108
|
pattern: /placeholder-(\w+)-(\d00)/,
|
|
@@ -109,7 +114,11 @@ safelist: [
|
|
|
109
114
|
This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.
|
|
110
115
|
|
|
111
116
|
A more optimal solution is to use color aliases. Those who have used Bootstrap css will be familiar with color aliasing.
|
|
112
|
-
The advantage of this approach is that we can control the color of all components from one place.
|
|
117
|
+
The advantage of this approach is that we can control the color of all components from one place.
|
|
118
|
+
|
|
119
|
+
### Dark mode
|
|
120
|
+
|
|
121
|
+
All the components have dark mode styling. if that is your bag
|
|
113
122
|
|
|
114
123
|
|
|
115
124
|
Color aliases in `tailwind.config.js` like this:
|