vue3-tailwind-components 0.2.9 → 0.3.1

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 +72 -51
  2. package/dist/vue3-tailwind-components.es.js +5718 -5621
  3. package/dist/vue3-tailwind-components.umd.js +11 -11
  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)
@@ -12,11 +13,14 @@ This is a simple set of Vue 3, Tailwind based components. At the moment these co
12
13
  * [Dropdown](./src/components/dropdown/README.md)
13
14
  * [Notication (Toast)](./src/components/notification/README.md)
14
15
  * [Collapse](./src/components/collapse/README.md)
16
+
15
17
  * Form elements
16
18
  *
17
19
  * [Select](./src/components/select/README.md)
18
20
  *
19
21
  * [Input](./src/components/input/README.md)
22
+
23
+ * [Range (slider)](./src/components/range/README.md)
20
24
  *
21
25
  * [Textarea](./src/components/textarea/README.md)
22
26
  *
@@ -40,44 +44,52 @@ classes that are computed in the components.
40
44
  Here is a boilerplate tailwind config:
41
45
 
42
46
  ```javascript
43
- /** @type {import('tailwindcss').Config} */
44
47
  const colors = require('tailwindcss/colors')
45
48
  module.exports = {
46
- content: [
47
- "./index.html",
48
- "./src/**/*.{js,ts,jsx,vue}",
49
- "./node_modules/vue3-tailwind-components/dist/vue3-tailwind-components.es.js"
50
- ],
51
- safelist: [
52
- {
53
- pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
54
- variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
55
- },
56
- {
57
- pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
58
- variants: ['dark', 'dark:hover'],
59
- },
60
- {
61
- pattern: /text-(primary|secondary|warning|success|danger|info)-(\d00)/,
62
- variants: ['file', 'dark']
63
- },
64
- {
65
- pattern: /placeholder-(\w+)-(\d00)/,
66
- },
67
- ],
68
- theme: {
69
- extend: {
70
- colors: {
71
- primary: colors.slate,
72
- secondary: colors.lime,
73
- warning: colors.amber,
74
- success: colors.green,
75
- danger: colors.red,
76
- info: colors.indigo
77
- }
78
- },
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'],
79
66
  },
80
- plugins: [require("tailwindcss-animate")],
67
+ {
68
+ pattern: /text-(\w+)-(\d00)/,
69
+ variants:['file','dark']
70
+ },
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")],
81
93
  }
82
94
  ```
83
95
 
@@ -107,23 +119,32 @@ If you want to use every color that Tailwind supply in their default theme you c
107
119
  ```javascript
108
120
  ...
109
121
  safelist: [
110
- {
111
- pattern: /bg-(\w+)-(\d00)/,
112
- variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
113
- },
114
- {
115
- pattern: /border-(\w+)-(\d00)/,
116
- variants: ['dark', 'dark:hover'],
117
- },
118
- {
119
- pattern: /text-(\w+)-(\d00)/,
120
- variants: ['file', 'dark']
121
- },
122
- {
123
- pattern: /placeholder-(\w+)-(\d00)/,
124
- },
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
+
125
146
  ],
126
- ...
147
+
127
148
  ```
128
149
 
129
150
  This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.