vue3-tailwind-components 0.1.6 → 0.1.8
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 +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:
|