From dfe968dfde4deeb73075f07c892aca2be6474b81 Mon Sep 17 00:00:00 2001 From: philipp lang Date: Sat, 3 Jul 2021 23:52:44 +0200 Subject: [PATCH] decrease tailwindcss compile time --- .ackrc | 12 +++ resources/css/app.css | 1 + resources/css/base.css | 31 ------- resources/css/buttons.css | 25 ++++++ resources/css/switch.css | 4 + resources/js/components/FSwitch.vue | 2 +- tailwind.config.js | 120 ++++++++++++++++++++++------ 7 files changed, 139 insertions(+), 56 deletions(-) create mode 100644 .ackrc create mode 100644 resources/css/buttons.css diff --git a/.ackrc b/.ackrc new file mode 100644 index 00000000..0bb4f14a --- /dev/null +++ b/.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 diff --git a/resources/css/app.css b/resources/css/app.css index a889f574..cc308b63 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -4,3 +4,4 @@ @import "base"; @import "switch"; @import "layout"; +@import "buttons"; diff --git a/resources/css/base.css b/resources/css/base.css index 169cdfb7..d81b6e9e 100644 --- a/resources/css/base.css +++ b/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; } diff --git a/resources/css/buttons.css b/resources/css/buttons.css new file mode 100644 index 00000000..15d35b48 --- /dev/null +++ b/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; + } + } +} + diff --git a/resources/css/switch.css b/resources/css/switch.css index 4708ff0c..6d70c6c3 100644 --- a/resources/css/switch.css +++ b/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; diff --git a/resources/js/components/FSwitch.vue b/resources/js/components/FSwitch.vue index d0a55d9a..4bdadc45 100644 --- a/resources/js/components/FSwitch.vue +++ b/resources/js/components/FSwitch.vue @@ -6,7 +6,7 @@ }">{{ label }}
- + diff --git a/tailwind.config.js b/tailwind.config.js index 93843279..37d2ed42 100644 --- a/tailwind.config.js +++ b/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({})