vue3-tailwind-components 0.1.10 → 0.2.0

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 +60 -37
  2. package/dist/vue3-tailwind-components.es.js +545 -546
  3. package/dist/vue3-tailwind-components.umd.js +10 -10
  4. package/package.json +3 -2
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # vue3-tailwind-components
2
+
2
3
  This is a simple set of Vue 3, Tailwind based components. At the moment these consist of:
4
+
3
5
  * [Button](./src/components/button/README.md)
4
6
  * [Badge](./src/components/badge/README.md)
5
7
  * [Table](./src/components/table/README.md)
@@ -10,13 +12,21 @@ This is a simple set of Vue 3, Tailwind based components. At the moment these co
10
12
  * [Dropdown](./src/components/dropdown/README.md)
11
13
  * [Notication (Toast)](./src/components/notification/README.md)
12
14
  * Form elements
13
- * * [Select](./src/components/select/README.md)
14
- * * [Input](./src/components/input/README.md)
15
- * * [Textarea](./src/components/textarea/README.md)
16
- * * [Switch](./src/components/switch/README.md)
15
+ *
16
+ * [Select](./src/components/select/README.md)
17
+ *
18
+ * [Input](./src/components/input/README.md)
19
+ *
20
+ * [Textarea](./src/components/textarea/README.md)
21
+ *
22
+ * [Switch](./src/components/switch/README.md)
17
23
 
18
- ## Installation
24
+ ## Demo
19
25
 
26
+ I have done a simple demo page [here](https://richardhulbert.github.io/vue3-tailwind-components/index.html) which should
27
+ give you some idea as to how they look and behave. Please feel free to email me with suggestions or make a pull request. richard@codevanilla.com
28
+
29
+ ## Installation
20
30
 
21
31
  ```shell
22
32
  npm i vue3-tailwind-components --save
@@ -40,15 +50,15 @@ module.exports = {
40
50
  safelist: [
41
51
  {
42
52
  pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
43
- variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
53
+ variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
44
54
  },
45
55
  {
46
56
  pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
47
- variants: ['dark', 'dark:hover'],
57
+ variants: ['dark', 'dark:hover'],
48
58
  },
49
59
  {
50
60
  pattern: /text-(primary|secondary|warning|success|danger|info)-(\d00)/,
51
- variants:['file','dark']
61
+ variants: ['file', 'dark']
52
62
  },
53
63
  {
54
64
  pattern: /placeholder-(\w+)-(\d00)/,
@@ -56,13 +66,13 @@ module.exports = {
56
66
  ],
57
67
  theme: {
58
68
  extend: {
59
- colors:{
60
- primary:colors.slate,
61
- secondary:colors.lime,
62
- warning:colors.amber,
63
- success:colors.green,
64
- danger:colors.red,
65
- info:colors.indigo
69
+ colors: {
70
+ primary: colors.slate,
71
+ secondary: colors.lime,
72
+ warning: colors.amber,
73
+ success: colors.green,
74
+ danger: colors.red,
75
+ info: colors.indigo
66
76
  }
67
77
  },
68
78
  },
@@ -77,14 +87,18 @@ You can then just import the ones you want to use like this:
77
87
 
78
88
  <tw-button>My Button</tw-button>
79
89
  <script setup>
80
- import { TwButton} from "vue3-tailwind-components"
90
+ import {TwButton} from "vue3-tailwind-components"
81
91
  </script>
82
92
  ```
83
93
 
84
94
  ### Colors
85
- I expect that if you use this library you will already understand how to use Tailwind generally. It comes with a generous
86
- color pallet of gradated colors. In the background Tailwind strips out the classes it does not see directly in your code to keep your css small
87
- but this creates a problem for us. It cannot see computed (concatenated strings). In order to use our components you will need to edit your.
95
+
96
+ I expect that if you use this library you will already understand how to use Tailwind generally. It comes with a
97
+ generous
98
+ color pallet of gradated colors. In the background Tailwind strips out the classes it does not see directly in your code
99
+ to keep your css small
100
+ but this creates a problem for us. It cannot see computed (concatenated strings). In order to use our components you
101
+ will need to edit your.
88
102
  `tailwind.config.js` file in the root of your project.
89
103
 
90
104
  If you want to use every color that Tailwind supply in their default theme you could use this safe list:
@@ -93,33 +107,32 @@ If you want to use every color that Tailwind supply in their default theme you c
93
107
  ...
94
108
  safelist: [
95
109
  {
96
- pattern: /bg-(\w+)-(\d00)/,
97
- variants: ['hover', 'focus', 'file','dark', 'dark:hover'],
110
+ pattern: /bg-(\w+)-(\d00)/,
111
+ variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
98
112
  },
99
113
  {
100
- pattern: /border-(\w+)-(\d00)/,
101
- variants: ['dark', 'dark:hover'],
114
+ pattern: /border-(\w+)-(\d00)/,
115
+ variants: ['dark', 'dark:hover'],
102
116
  },
103
117
  {
104
- pattern: /text-(\w+)-(\d00)/,
105
- variants:['file','dark']
118
+ pattern: /text-(\w+)-(\d00)/,
119
+ variants: ['file', 'dark']
106
120
  },
107
121
  {
108
122
  pattern: /placeholder-(\w+)-(\d00)/,
109
123
  },
110
- ],
124
+ ],
111
125
  ...
112
126
  ```
113
127
 
114
- This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.
128
+ This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.
115
129
 
116
- A more optimal solution is to use color aliases. Those who have used Bootstrap css will be familiar with color aliasing.
130
+ A more optimal solution is to use color aliases. Those who have used Bootstrap css will be familiar with color aliasing.
117
131
  The advantage of this approach is that we can control the color of all components from one place.
118
132
 
119
133
  ### Dark mode
120
134
 
121
- All the components have dark mode styling. if that is your bag
122
-
135
+ All the components have dark mode styling. if that is your bag
123
136
 
124
137
  Color aliases in `tailwind.config.js` like this:
125
138
 
@@ -129,18 +142,28 @@ theme: {
129
142
  extend: {
130
143
  colors:{
131
144
  primary:colors.slate,
132
- secondary:colors.lime,
133
- warning:colors.amber,
134
- success:colors.green,
135
- danger:colors.red,
136
- info:colors.indigo
145
+ secondary
146
+ :
147
+ colors.lime,
148
+ warning
149
+ :
150
+ colors.amber,
151
+ success
152
+ :
153
+ colors.green,
154
+ danger
155
+ :
156
+ colors.red,
157
+ info
158
+ :
159
+ colors.indigo
137
160
  }
138
- },
161
+ }
162
+ ,
139
163
  }
140
164
  ...
141
165
  ```
142
166
 
143
-
144
167
  ## Running this project locally
145
168
 
146
169
  See [Vite Configuration Reference](https://vitejs.dev/config/).