1st Core

v-essentials

Firstly

For the first core, just run below command on your project

npm install v-essentials --save

Next

Copy/Merge below snippet to tailwind.config.js

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',
],
}
}
}

Finally

resources/scss/app.scss

@import '~v-essentials/scss/style.default';
@tailwind base;
@tailwind components;
@import '~v-essentials/scss/tailwind';
@tailwind utilities;

resources/js/app.js

import vEss from 'v-essentials';
Vue.use(vEss, {
hasBootstrapVue: true,
hasVueMultiselect: true, // - req by vfg
hasVFG: true, // - req by vfg
hasVueAutoRegister: true, // - req by vfg
hasMoment: true, // - req by vfg
hasVMoney: true, // - req by vfg
hasAOS: true,
hasVueButtonSpinner: true, // - req by directives
hasDirectives: true,
hasVueGoogleMap: true, // - req by vfg
vueGoogleMapKey: 'your-key', // - req by vfg
hasVueCtkDateTimePicker: true, // - req by vfg [ctkdatetimepicker]
});
const app = new Vue({
el: '#app',
data() {
return {
open: false
}
}
});
// if you want to use turbolinks
vEss.turbolinksVue(() => {
const app = new Vue({
el: '#app',
data() {
return {
open: false
}
}
});
})

Cannot npm run?

try this

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