atasistro
/
pingcrm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Upgrade to Tailwind 2.0 and Laravel Mix 6

This commit is contained in:
Jonathan Reinink 2021-02-27 11:23:38 -05:00
parent 5dab72d894
commit adc0db7c41
22 changed files with 3204 additions and 2999 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5982
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@ -2,31 +2,31 @@
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
"production": "mix --production"
},
"dependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0",
"@inertiajs/inertia": "^0.8.5",
"@inertiajs/inertia-vue": "^0.5.5",
"@inertiajs/progress": "^0.2.4",
"cross-env": "^5.2.1",
"autoprefixer": "^10.2.4",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.5.0",
"laravel-mix": "^5.0.9",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.21",
"popper.js": "^1.16.0",
"portal-vue": "^1.5.1",
"postcss": "^8.2.6",
"postcss-import": "^12.0.1",
"postcss-nesting": "^7.0.1",
"resolve-url-loader": "^2.3.2",
"tailwindcss": "^1.9.6",
"tailwindcss": "^2.0.3",
"vue": "^2.6.11",
"vue-loader": "^15.9.6",
"vue-meta": "^2.3.1",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.12"
}
}

12
resources/css/app.css vendored
View File

@ -1,11 +1,11 @@
/* Reset */
@import "tailwindcss/base";
@import "reset";
@import 'tailwindcss/base';
@import 'reset';
/* Components */
@import "tailwindcss/components";
@import "buttons";
@import "form";
@import 'tailwindcss/components';
@import 'buttons';
@import 'form';
/* Utilities */
@import "tailwindcss/utilities";
@import 'tailwindcss/utilities';

20
resources/css/buttons.css vendored
View File

@ -1,7 +1,5 @@
.btn-indigo {
@apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap;
&:hover, &:focus { @apply bg-orange-500 }
@apply px-6 py-3 rounded bg-indigo-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-orange-400 focus:bg-orange-400;
}
.btn-spinner,
@ -15,15 +13,19 @@
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: .2em solid white;
border-right: .2em solid white;
border-bottom: .2em solid white;
border-left: .2em solid transparent;
border-top: 0.2em solid white;
border-right: 0.2em solid white;
border-bottom: 0.2em solid white;
border-left: 0.2em solid transparent;
transform: translateZ(0);
animation: spinning 1s infinite linear;
}
@keyframes spinning {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

30
resources/css/form.css vendored
View File

@ -1,25 +1,19 @@
.form-label {
@apply .mb-2 .block .text-gray-700 .select-none;
@apply mb-2 block text-gray-700 select-none;
}
.form-input,
.form-textarea,
.form-select {
@apply .p-2 .leading-normal .block .w-full .border .text-gray-700 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
&:focus,
&.focus {
@apply .border-indigo-500;
box-shadow: 0 0 0 1px theme('colors.indigo.500');
}
@apply p-2 leading-normal block w-full border text-gray-700 bg-white font-sans rounded text-left appearance-none relative focus:border-indigo-400 focus:ring;
&::placeholder {
@apply .text-gray-500 .opacity-100;
@apply text-gray-500 opacity-100;
}
}
.form-select {
@apply .pr-6;
@apply pr-6;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==');
background-size: 0.7rem;
@ -27,20 +21,16 @@
background-position: right 0.7rem center;
&::-ms-expand {
@apply .opacity-0;
@apply opacity-0;
}
}
.form-error {
@apply .text-red-700 .mt-2 .text-sm;
}
.form-input.error,
.form-textarea.error,
.form-select.error {
@apply .border-red-600;
&:focus {
box-shadow: 0 0 0 1px theme('colors.red.600');
}
@apply border-red-500 focus:ring focus:ring-red-200;
}
.form-error {
@apply text-red-700 mt-2 text-sm;
}

2
resources/js/Pages/Auth/Login.vue
View File

@ -13,7 +13,7 @@
<span class="text-sm">Remember Me</span>
</label>
</div>
<div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center">
<div class="px-10 py-4 bg-gray-100 border-t border-gray-100 flex justify-between items-center">
<a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Login</loading-button>
</div>

4
resources/js/Pages/Contacts/Create.vue
View File

@ -4,7 +4,7 @@
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
@ -25,7 +25,7 @@
</select-input>
<text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Contact</loading-button>
</div>
</form>

4
resources/js/Pages/Contacts/Edit.vue
View File

@ -8,7 +8,7 @@
<trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
This contact has been deleted.
</trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
@ -29,7 +29,7 @@
</select-input>
<text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
<loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
</div>

4
resources/js/Pages/Contacts/Index.vue
View File

@ -15,8 +15,8 @@
<span class="hidden md:inline">Contact</span>
</inertia-link>
</div>
<div class="bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<div class="bg-white rounded-md shadow overflow-x-auto">
<table class="w-full whitespace-nowrap">
<tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">Organization</th>

4
resources/js/Pages/Organizations/Create.vue
View File

@ -4,7 +4,7 @@
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
@ -20,7 +20,7 @@
</select-input>
<text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Organization</loading-button>
</div>
</form>

6
resources/js/Pages/Organizations/Edit.vue
View File

@ -8,7 +8,7 @@
<trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
This organization has been deleted.
</trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
@ -24,7 +24,7 @@
</select-input>
<text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button v-if="!organization.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
<loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
</div>
@ -32,7 +32,7 @@
</div>
<h2 class="mt-12 font-bold text-2xl">Contacts</h2>
<div class="mt-6 bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<table class="w-full whitespace-nowrap">
<tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">City</th>

4
resources/js/Pages/Organizations/Index.vue
View File

@ -15,8 +15,8 @@
<span class="hidden md:inline">Organization</span>
</inertia-link>
</div>
<div class="bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<div class="bg-white rounded-md shadow overflow-x-auto">
<table class="w-full whitespace-nowrap">
<tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">City</th>

4
resources/js/Pages/Users/Create.vue
View File

@ -4,7 +4,7 @@
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
@ -17,7 +17,7 @@
</select-input>
<file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
</div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create User</loading-button>
</div>
</form>

4
resources/js/Pages/Users/Edit.vue
View File

@ -11,7 +11,7 @@
<trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
This user has been deleted.
</trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
@ -24,7 +24,7 @@
</select-input>
<file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
</div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button v-if="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
<loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
</div>

4
resources/js/Pages/Users/Index.vue
View File

@ -21,8 +21,8 @@
<span class="hidden md:inline">User</span>
</inertia-link>
</div>
<div class="bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<div class="bg-white rounded-md shadow overflow-x-auto">
<table class="w-full whitespace-nowrap">
<tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">Email</th>

2
resources/js/Shared/FlashMessages.vue
View File

@ -9,7 +9,7 @@
<svg class="block w-2 h-2 fill-green-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
</button>
</div>
<div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
<div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-400 rounded max-w-3xl">
<div class="flex items-center">
<svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
<div v-if="$page.props.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.props.flash.error }}</div>

2
resources/js/Shared/Layout.vue
View File

@ -19,7 +19,7 @@
<div class="mt-1 mr-4">{{ $page.props.auth.user.account.name }}</div>
<dropdown class="mt-1" placement="bottom-end">
<div class="flex items-center cursor-pointer select-none group">
<div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
<div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-nowrap">
<span>{{ $page.props.auth.user.first_name }}</span>
<span class="hidden md:inline">{{ $page.props.auth.user.last_name }}</span>
</div>

4
resources/js/Shared/SearchFilter.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex items-center">
<div class="flex w-full bg-white shadow rounded">
<dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-gray-100 focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
<dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-gray-100 focus:border-white focus:ring focus:z-10" placement="bottom-start">
<div class="flex items-baseline">
<span class="text-gray-700 hidden md:inline">Filter</span>
<svg class="w-2 h-2 fill-gray-700 md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
@ -12,7 +12,7 @@
<slot />
</div>
</dropdown>
<input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)" />
<input class="relative w-full px-6 py-3 rounded-r focus:ring" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)" />
</div>
<button class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
</div>

2
resources/js/Shared/TrashedMessage.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-4 bg-yellow-400 rounded flex items-center justify-between max-w-3xl">
<div class="p-4 bg-yellow-300 rounded flex items-center justify-between max-w-3xl">
<div class="flex items-center">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-800 mr-2" />
<div class="text-sm font-medium text-yellow-800">

8
resources/views/app.blade.php
View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html class="h-full bg-gray-200">
<html class="h-full bg-gray-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{-- Inertia --}}
<script src="https://polyfill.io/v3/polyfill.min.js?features=smoothscroll,NodeList.prototype.forEach,Promise,Object.values,Object.assign" defer></script>

48
tailwind.config.js vendored
View File

@ -1,22 +1,42 @@
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [
// prettier-ignore
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
red: colors.red,
orange: colors.orange,
yellow: colors.yellow,
green: colors.green,
gray: colors.blueGray,
indigo: {
100: '#e6e8ff',
300: '#b2b7ff',
400: '#7886d7',
500: '#6574cd',
600: '#5661b3',
800: '#2f365f',
900: '#191e38',
},
},
extend: {
borderColor: theme => ({
DEFAULT: theme('colors.gray.200', 'currentColor'),
}),
fontFamily: {
sans: ['Cerebri Sans', ...defaultTheme.fontFamily.sans],
},
colors: {
indigo: {
'900': '#191e38',
'800': '#2f365f',
'600': '#5661b3',
'500': '#6574cd',
'400': '#7886d7',
'300': '#b2b7ff',
'100': '#e6e8ff',
},
},
boxShadow: theme => ({
outline: '0 0 0 2px ' + theme('colors.indigo.500'),
}),
@ -24,9 +44,9 @@ module.exports = {
},
},
variants: {
fill: ['responsive', 'hover', 'focus', 'group-hover'],
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
zIndex: ['responsive', 'focus'],
extend: {
fill: ['focus', 'group-hover'],
},
},
plugins: [],
}

31
webpack.mix.js vendored
View File

@ -1,9 +1,7 @@
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')
/*
|--------------------------------------------------------------------------
@ -16,22 +14,15 @@ const tailwindcss = require('tailwindcss')
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css/app.css')
.options({
postCss: [
cssImport(),
cssNesting(),
tailwindcss('tailwind.config.js'),
...mix.inProduction() ? [
purgecss({
content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
whitelistPatternsChildren: [/nprogress/],
}),
] : [],
],
})
mix
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {