vue3-tailwind-components 0.1.10 → 0.2.0

package/README.md

@@ -1,5 +1,7 @@
 # vue3-tailwind-components
+
 This is a simple set of Vue 3, Tailwind based components. At the moment these consist of:
+
 * [Button](./src/components/button/README.md)
 * [Badge](./src/components/badge/README.md)
 * [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
 * [Dropdown](./src/components/dropdown/README.md)
 * [Notication (Toast)](./src/components/notification/README.md)
 * Form elements
-* * [Select](./src/components/select/README.md)
-* * [Input](./src/components/input/README.md)
-* * [Textarea](./src/components/textarea/README.md)
-* * [Switch](./src/components/switch/README.md)
+*
+    * [Select](./src/components/select/README.md)
+*
+    * [Input](./src/components/input/README.md)
+*
+    * [Textarea](./src/components/textarea/README.md)
+*
+    * [Switch](./src/components/switch/README.md)
 
-## Installation
+## Demo
 
+I have done a simple demo page [here](https://richardhulbert.github.io/vue3-tailwind-components/index.html) which should
+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
+
+## Installation
 
 ```shell
 npm i vue3-tailwind-components --save
@@ -40,15 +50,15 @@ module.exports = {
     safelist: [
         {
             pattern: /bg-(primary|secondary|warning|success|danger|info)-(\d00)/,
-            variants:  ['hover', 'focus', 'file','dark', 'dark:hover'],
+            variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
         },
         {
             pattern: /border-(primary|secondary|warning|success|danger|info)-(\d00)/,
-            variants:  ['dark', 'dark:hover'],
+            variants: ['dark', 'dark:hover'],
         },
         {
             pattern: /text-(primary|secondary|warning|success|danger|info)-(\d00)/,
-            variants:['file','dark']
+            variants: ['file', 'dark']
         },
         {
             pattern: /placeholder-(\w+)-(\d00)/,
@@ -56,13 +66,13 @@ module.exports = {
     ],
     theme: {
         extend: {
-            colors:{
-                primary:colors.slate,
-                secondary:colors.lime,
-                warning:colors.amber,
-                success:colors.green,
-                danger:colors.red,
-                info:colors.indigo
+            colors: {
+                primary: colors.slate,
+                secondary: colors.lime,
+                warning: colors.amber,
+                success: colors.green,
+                danger: colors.red,
+                info: colors.indigo
             }
         },
     },
@@ -77,14 +87,18 @@ You can then just import the ones you want to use like this:
 
 <tw-button>My Button</tw-button>
 <script setup>
-import { TwButton} from "vue3-tailwind-components"
+  import {TwButton} from "vue3-tailwind-components"
 </script>
 ```
 
 ### Colors
-I expect that if you use this library you will already understand how to use Tailwind generally. It comes with a generous 
-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
-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.
+
+I expect that if you use this library you will already understand how to use Tailwind generally. It comes with a
+generous
+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
+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.
 `tailwind.config.js` file in the root of your project.
 
 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
  ...
 safelist: [
     {
-      pattern: /bg-(\w+)-(\d00)/,
-        variants:  ['hover', 'focus', 'file','dark', 'dark:hover'],
+        pattern: /bg-(\w+)-(\d00)/,
+        variants: ['hover', 'focus', 'file', 'dark', 'dark:hover'],
     },
     {
-      pattern: /border-(\w+)-(\d00)/,
-        variants:  ['dark', 'dark:hover'],
+        pattern: /border-(\w+)-(\d00)/,
+        variants: ['dark', 'dark:hover'],
     },
     {
-      pattern: /text-(\w+)-(\d00)/,
-        variants:['file','dark']
+        pattern: /text-(\w+)-(\d00)/,
+        variants: ['file', 'dark']
     },
     {
         pattern: /placeholder-(\w+)-(\d00)/,
     },
-  ],
+],
 ...
 ```
 
-This tells Tailwind - Do not remove any color classes  for background, border or text (that is over 2000!) from the CSS.
+This tells Tailwind - Do not remove any color classes for background, border or text (that is over 2000!) from the CSS.
 
-A more optimal solution is to use color aliases. Those who have used Bootstrap css will be familiar with color aliasing. 
+A more optimal solution is to use color aliases. Those who have used Bootstrap css will be familiar with color aliasing.
 The advantage of this approach is that we can control the color of all components from one place.
 
 ### Dark mode
 
-All the components have dark mode styling. if that is your bag 
-
+All the components have dark mode styling. if that is your bag
 
 Color aliases in `tailwind.config.js` like this:
 
@@ -129,18 +142,28 @@ theme: {
     extend: {
         colors:{
             primary:colors.slate,
-                secondary:colors.lime,
-                warning:colors.amber,
-                success:colors.green,
-                danger:colors.red,
-                info:colors.indigo
+                secondary
+        :
+            colors.lime,
+                warning
+        :
+            colors.amber,
+                success
+        :
+            colors.green,
+                danger
+        :
+            colors.red,
+                info
+        :
+            colors.indigo
         }
-    },
+    }
+,
 }
 ...
 ```
 
-
 ## Running this project locally
 
 See [Vite Configuration Reference](https://vitejs.dev/config/).