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

package/README.md

@@ -14,15 +14,18 @@ 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
 ```
 
 ## Usage
 
+### Using the standard foundations
+
 in tailwind.config file
 
-```js
+```ts
+import {EltyTailwindPlugin, EltyTailwindPreset} from '@davincihealthcare/elty-design-system-vue'
 
 module.exports = {
   ...
@@ -30,17 +33,36 @@ module.exports = {
   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.
+### Overriding the standard foundations
 
-Make sure to:
+in tailwind.config file
 
-- do NOT to import the elty foundations which are already imported alongside this plugin.
+```ts
+import {EltyTailwindPluginWithoutStyle, 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'),
+    EltyTailwindPluginWithoutStyle
+  ]
+  ...
+}
+```
+
+The Preset way of loading the css was introduced from version 1.18.0
+
+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 +105,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,8 @@
 
 export { default as EltyVuePlugin } from './vue.plugin';
-export { default as EltyTailwindPlugin } from './tailwind.plugin';
+export { defaultPlugin as EltyTailwindPlugin } from './tailwind.plugin';
+export { pluginWithoutStyles as EltyTailwindPluginWithoutStyle } from './tailwind.plugin';
+export { default as EltyTailwindPreset } from './preset';
 export * from './types';
 export * from './ElAccordion.vue';
 export { default as ElAccordion } from './ElAccordion.vue';