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.
Files changed (4) hide show
  1. package/README.md +69 -51
  2. package/dist/vue3-tailwind-components.es.js +3192 -3146
  3. package/dist/vue3-tailwind-components.umd.js +9 -9
  4. 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
- content: [
50
- "./index.html",
51
- "./src/**/*.{js,ts,jsx,vue}",
52
- "./node_modules/vue3-tailwind-components/dist/vue3-tailwind-components.es.js"
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: /text-(primary|secondary|warning|success|danger|info)-(\d00)/,
65
- variants: ['file', 'dark']
66
- },
67
- {
68
- pattern: /placeholder-(\w+)-(\d00)/,
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
- plugins: [require("tailwindcss-animate")],
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
- pattern: /bg-(\w+)-(\d00)/,
115
- variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
116
- },
117
- {
118
- pattern: /border-(\w+)-(\d00)/,
119
- variants: ['dark', 'dark:hover'],
120
- },
121
- {
122
- pattern: /text-(\w+)-(\d00)/,
123
- variants: ['file', 'dark']
124
- },
125
- {
126
- pattern: /placeholder-(\w+)-(\d00)/,
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.