@davincihealthcare/elty-design-system-vue 1.17.2 → 1.18.0

package/README.md

@@ -14,7 +14,7 @@ Then install required plugins and the design system package itself
 
 ```bash
 # using yarn (or any other package manager)
-yarn add -D @tailwindcss/forms @tailwindcss/typography
+yarn add -D tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography
 yarn add @davincihealthcare/elty-design-system-vue
 ```
 
@@ -22,25 +22,26 @@ yarn add @davincihealthcare/elty-design-system-vue
 
 in tailwind.config file
 
-```js
+```ts
+import {EltyTailwindPlugin, EltyTailwindPreset} from '@davincihealthcare/elty-design-system-vue'
 
 module.exports = {
   ...
   content: [..., './node_modules/@davincihealthcare/elty-design-system-vue/**/*.{tsx,js}'],
+  presets: [EltyTailwindPreset],
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
-    require('@davincihealthcare/elty-design-system-vue').EltyTailwindPlugin
+    EltyTailwindPlugin
   ]
   ...
 }
 ```
 
-Note: content needs a new entry in the array, alongside other you may already have.
-
-Make sure to:
+Note: The Preset way of loading the css was introduced from version 1.18.0
 
-- do NOT to import the elty foundations which are already imported alongside this plugin.
+Note: content needs a new entry in the array, alongside other you may already have.
+You may also change the require with a neater
 
 in main.ts file
 
@@ -83,6 +84,10 @@ const onClick = () => {
 
 ## Tech stuff and instructions 🔥🔥
 
+- EltyTailwindPlugin contains some custom css to be applied on forms and so on.
+- EltyTailwindPreset contains the base style for the elty design system. Exported as a preset, and not as a plugin so that it can be easily overridden by the user application
+- EltyVuePlugin contains the vee-validate rules for the inputs
+
 As it has been set the following as `peer dependencies`
 
 - @tailwindcss/forms

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 
 export { default as EltyVuePlugin } from './vue.plugin';
 export { default as EltyTailwindPlugin } from './tailwind.plugin';
+export { default as EltyTailwindPreset } from './preset';
 export * from './types';
 export * from './ElAccordion.vue';
 export { default as ElAccordion } from './ElAccordion.vue';