decrease tailwindcss compile time

.ackrc

@@ -0,0 +1,12 @@
+--ignore-dir=vendor/composer
+--ignore-dir=public/js
+--ignore-dir=public/vendor
+--ignore-dir=vendor
+--ignore-dir=public/css
+--ignore-dir=storage/debugbar
+--type-set=tags:is:tags
+--type-set=log:ext:log
+--type-set=packagelock:is:package-lock.json
+--notags
+--nolog
+--nopackagelock

resources/css/app.css

@@ -4,3 +4,4 @@
 @import "base";
 @import "switch";
 @import "layout";
+@import "buttons";

resources/css/base.css

@@ -34,37 +34,6 @@
     @apply form-control-font;
 }
 
-.btn {
-    @apply px-3 py-2 uppercase no-underline text-sm rounded text-white;
-}
-.btn-sm {
-    @apply text-xs !important;
-}
-.btnp-0 {
-    padding: 0 !important;
-}
-.btn-primary {
-    @apply bg-primary;
-}
-.btn-primary:hover {
-    @apply bg-primary-light;
-}
-.btn-danger {
-    @apply bg-danger;
-}
-.btn-danger:hover {
-    @apply bg-danger-light;
-}
-.btn-default {
-    @apply bg-gray-600;
-}
-.btn-primary-light {
-    @apply bg-primary-light;
-}
-.btn-default:hover {
-    @apply bg-gray-600;
-}
-
 .field-wrapper {
     @apply flex flex-col;
 }

resources/css/buttons.css

@@ -0,0 +1,25 @@
+.btn {
+    @apply px-3 py-2 uppercase no-underline text-sm rounded text-white;
+    svg {
+
+    }
+
+    &.btn-sm {
+        @apply text-xs !important;
+        svg {
+        }
+    }
+    &.btn-primary {
+        @apply bg-primary-700;
+        &:hover {
+            @apply bg-primary-500;
+        }
+    }
+    &.btn-danger {
+        @apply bg-red-700;
+        &:hover {
+            @apply bg-red-500;
+        }
+    }
+}
+

resources/css/switch.css

@@ -7,6 +7,10 @@
     --xs-margin: 0.2rem;
 }
 
+.bg-switch {
+    @apply bg-primary-700;
+}
+
 .field-switch {
     input:checked + span {
         transition: background 0.3s;

resources/js/components/FSwitch.vue

@@ -6,7 +6,7 @@
         }">{{ label }}</span>
         <div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`">
             <input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" />
-            <span class="relative cursor-pointer flex flex-grow display" :class="{'bg-primary': v === true, 'bg-gray-700': v === false}">
+            <span class="relative cursor-pointer flex flex-grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
                 <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span>
                 <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span>
                 <var class="absolute overlay bg-gray-400 rounded top-0"></var>

tailwind.config.js

@@ -1,34 +1,106 @@
-var tailwind = require('agnoster/tailwind.js');
 var modules = require('js-modules/tailwind/index.js');
+const { colors } = require('tailwindcss/defaultTheme');
 
 module.exports = {
+    purge: {
+        enabled: false,
+        content: [
+            "resources/js/views/**/*.vue",
+            "resources/js/layouts/**/*.vue",
+        ]
+    },
     theme: {
         extend: {
-            ...tailwind,
-            colors: {
-                ...tailwind.colors,
-                'primary-lightest': 'hsl(181, 98%, 93%)',
-                'primary-ligher': 'hsl(181, 78%, 62%)',
-                'primary-light': 'hsl(181, 75%, 44%)',
-                'primary': 'hsl(181, 75%, 26%)',
-                'primary-dark': 'hsl(181, 86%, 16%)',
-                'primary-darker': 'hsl(181, 94%, 10%)',
-                'primary-darkest': 'hsl(181, 98%, 6%)',
-                'primary-100': 'hsl(181, 98%, 93%)',
-                'primary-200': 'hsl(181, 84%, 78%)',
-                'primary-300': 'hsl(181, 78%, 62%)',
-                'primary-400': 'hsl(181, 76%, 53%)',
-                'primary-500': 'hsl(181, 75%, 44%)',
-                'primary-600': 'hsl(181, 75%, 35%)',
-                'primary-700': 'hsl(181, 75%, 26%)', // locked
-                'primary-800': 'hsl(181, 86%, 16%)',
-                'primary-900': 'hsl(181, 94%, 10%)'
-            },
-            width: tailwind.width,
-            height: tailwind.height,
         },
+        colors: {
+            teal: [],
+            primary: {
+                100: 'hsl(181, 98%, 93%)',
+                200: 'hsl(181, 84%, 78%)',
+                300: 'hsl(181, 78%, 62%)',
+                400: 'hsl(181, 76%, 53%)',
+                500: 'hsl(181, 75%, 44%)',
+                600: 'hsl(181, 75%, 35%)',
+                700: 'hsl(181, 75%, 26%)', // locked
+                800: 'hsl(181, 86%, 16%)',
+                900: 'hsl(181, 94%, 10%)'
+            },
+            gray: colors.gray,
+            white: colors.white,
+            red: colors.red,
+        }
+    },
+    corePlugins: {
+        clear: false,
+        float: false,
+        boxSizing: false,
+        accessibility: false,
+        animation: false,
+        backgroundPosition: false,
+        backgroundRepeat: false,
+        skew: false,
+        verticalAlign: false,
+        wordBreak: false,
+        ringWidth: false,
+        ringColor: false,
+        ringOffsetColor: false,
+        ringOffsetWidth: false,
+        ringOpacity: false,
+        ringWidth: false,
+    },
+    variants: {
+        alignContent: ['responsive'],
+        alignItems: [],
+        alignSelf: [],
+        appearance: [],
+        backgroundAttachment: ['responsive'],
+        backgroundColor: ['hover'],
+        backgroundPosition: [],
+        backgroundSize: [],
+        borderCollapse: [],
+        borderColor: [],
+        borderRadius: [],
+        borderStyle: [],
+        borderWidth: [],
+        boxShadow: ['hover'],
+        cursor: [],
+        display: ['responsive', 'group-hover'],
+        fill: ['responsive'],
+        flex: ['responsive'],
+        flexDirection: ['responsive'],
+        flexGrow: ['responsive'],
+        flexShrink: [],
+        flexWrap: ['responsive'],
+        fontFamily: [],
+        fontSize: ['responsive'],
+        fontSmoothing: [],
+        fontStyle: ['responsive'],
+        fontWeight: ['hover'],
+        height: ['responsive'],
+        inset: [],
+        justifyContent: ['responsive'],
+        width: ['responsive'],
+        zIndex: [],
+        gap: ['responsive'],
+        gridAutoFlow: ['responsive'],
+        gridTemplateColumns: ['responsive'],
+        gridColumn: ['responsive'],
+        gridColumnStart: ['responsive'],
+        gridColumnEnd: ['responsive'],
+        gridTemplateRows: ['responsive'],
+        gridRow: ['responsive'],
+        gridRowStart: ['responsive'],
+        gridRowEnd: ['responsive'],
+        transform: [],
+        transformOrigin: [],
+        scale: [],
+        rotate: [],
+        translate: [],
+        skew: [],
+        transitionProperty: [],
+        transitionTimingFunction: [],
+        transitionDuration: [],
     },
-    variants: {},
     plugins: [
         modules.checkbox({}),
         modules.switch({})