npm install v-essentials --save

const defaultTheme = require('tailwindcss/defaultTheme')
​
module.exports = {
  important: "#app",
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
    customForms: theme => ({
      default: {
        checkbox: {
          '&:indeterminate': {
            background: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'8\' height=\'2\' x=\'4\' y=\'7\' rx=\'1\'/%3E%3C/svg%3E");',
            borderColor: 'transparent',
            backgroundColor: 'currentColor',
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }
        }
      }
    })
  },
  variants: {
    margin: ['responsive', 'first', 'hover', 'focus'],
    backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
  },
  plugins: [
    require('@tailwindcss/ui')
  ],
  purge: {
    content: [
      './resources/views/**/*.blade.php',
      './node_modules/v-essentials/src/fields/**/*.vue',
      './node_modules/v-essentials/src/components/**/*.vue',
    ],
    options: {
      whitelist: [
        'grid-cols-1',
        'grid-cols-2',
        'grid-cols-3',
        'grid-cols-4',
        'grid-cols-5',
        'grid-cols-6',
        'grid-cols-7',
        'grid-cols-8',
        'grid-cols-9',
        'grid-cols-10',
        'grid-cols-11',
        'grid-cols-12',
        'max-w-xs',
        'max-w-sm',
        'max-w-md',
        'max-w-lg',
        'max-w-xl',
        'max-w-2xl',
        'max-w-3xl',
        'max-w-4xl',
        'max-w-5xl',
        'max-w-6xl',
        'max-w-full',
      ],
    }
  }
}

// you can optionally include bootstrap theme
@import '~v-essentials/scss/style.default';
​
@tailwind base;
​
@tailwind components;
​
@import '~v-essentials/scss/tailwind';
​
@tailwind utilities;

import vEss from 'v-essentials';
​
Vue.use(vEss, {
    hasMixins: true,
    hasAutoRegister: true, // - req by vfg
    hasDirectives: true, 
});
​
import('v-essentials/src/modules/tinymce-vue')
import('v-essentials/src/modules/vue-google-map')('your-key')
import('v-essentials/src/modules/bootstrap-vue')
import('v-essentials/src/modules/vue-multiselect')
import('v-essentials/src/modules/vue-form-generator')
import('v-essentials/src/modules/momentjs')
import('v-essentials/src/modules/v-money')
import('v-essentials/src/modules/aos')
import('v-essentials/src/modules/vue-button-spinner')
import('v-essentials/src/modules/vue-ctk-datetime-picker')
​
const app = new Vue({
        el: '#app',
        data() {
            return {
                open: false
            }
        }
    });
​

rm -r node_modules
​
npm cache clean --force
​
npm install
​
npm run watch