From df1456031bf8f208d6d93a25607136567fcd53f2 Mon Sep 17 00:00:00 2001 From: Thomas Heumesser Date: Tue, 13 Jul 2021 10:26:19 +0200 Subject: [PATCH] fix: #2 / switch to Tailwind JIT mode --- tailwind.config.js | 300 ++++++++++++++++++++++++++++++++------------- 1 file changed, 215 insertions(+), 85 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index a991bbd..2411f2f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,15 +1,13 @@ const colors = require('tailwindcss/colors') module.exports = { - purge: { - enabled: true, - content: [ - './src/**/*.html', - './src/**/*.njk', - './src/**/*.md', - './src/**/*.11ty.js', - ], - }, + mode: 'jit', + purge: [ + './src/**/*.html', + './src/**/*.njk', + './src/**/*.md', + './src/**/*.11ty.js' + ], presets: [], darkMode: false, // or 'media' or 'class' theme: { @@ -57,20 +55,20 @@ module.exports = { 14: '3.5rem', 16: '4rem', 20: '5rem', - // 24: '6rem', - // 28: '7rem', - // 32: '8rem', - // 36: '9rem', - // 40: '10rem', - // 44: '11rem', - // 48: '12rem', - // 52: '13rem', - // 56: '14rem', - // 60: '15rem', - // 64: '16rem', - // 72: '18rem', - // 80: '20rem', - // 96: '24rem', + 24: '6rem', + 28: '7rem', + 32: '8rem', + 36: '9rem', + 40: '10rem', + 44: '11rem', + 48: '12rem', + 52: '13rem', + 56: '14rem', + 60: '15rem', + 64: '16rem', + 72: '18rem', + 80: '20rem', + 96: '24rem', }, animation: { none: 'none', @@ -79,6 +77,15 @@ module.exports = { pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', bounce: 'bounce 1s infinite', }, + backdropBlur: (theme) => theme('blur'), + backdropBrightness: (theme) => theme('brightness'), + backdropContrast: (theme) => theme('contrast'), + backdropGrayscale: (theme) => theme('grayscale'), + backdropHueRotate: (theme) => theme('hueRotate'), + backdropInvert: (theme) => theme('invert'), + backdropOpacity: (theme) => theme('opacity'), + backdropSaturate: (theme) => theme('saturate'), + backdropSepia: (theme) => theme('sepia'), backgroundColor: (theme) => theme('colors'), backgroundImage: { none: 'none', @@ -108,6 +115,30 @@ module.exports = { cover: 'cover', contain: 'contain', }, + blur: { + 0: '0', + none: '0', + sm: '4px', + DEFAULT: '8px', + md: '12px', + lg: '16px', + xl: '24px', + '2xl': '40px', + '3xl': '64px', + }, + brightness: { + 0: '0', + 50: '.5', + 75: '.75', + 90: '.9', + 95: '.95', + 100: '1', + 105: '1.05', + 110: '1.1', + 125: '1.25', + 150: '1.5', + 200: '2', + }, borderColor: (theme) => ({ ...theme('colors'), DEFAULT: theme('colors.gray.200', 'currentColor'), @@ -141,7 +172,20 @@ module.exports = { inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', none: 'none', }, + caretColor: (theme) => theme('colors'), + contrast: { + 0: '0', + 50: '.5', + 75: '.75', + 100: '1', + 125: '1.25', + 150: '1.5', + 200: '2', + }, container: {}, + content: { + none: 'none', + }, cursor: { auto: 'auto', default: 'default', @@ -155,7 +199,37 @@ module.exports = { divideColor: (theme) => theme('borderColor'), divideOpacity: (theme) => theme('borderOpacity'), divideWidth: (theme) => theme('borderWidth'), + dropShadow: { + sm: '0 1px 1px rgba(0,0,0,0.05)', + DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], + md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'], + lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'], + xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'], + '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)', + none: '0 0 #0000', + }, fill: { current: 'currentColor' }, + grayscale: { + 0: '0', + DEFAULT: '100%', + }, + hueRotate: { + '-180': '-180deg', + '-90': '-90deg', + '-60': '-60deg', + '-30': '-30deg', + '-15': '-15deg', + 0: '0deg', + 15: '15deg', + 30: '30deg', + 60: '60deg', + 90: '90deg', + 180: '180deg', + }, + invert: { + 0: '0', + DEFAULT: '100%', + }, flex: { 1: '1 1 0%', auto: '1 1 auto', @@ -348,12 +422,16 @@ module.exports = { '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', + '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', '5/6': '83.333333%', full: '100%', screen: '100vh', @@ -488,19 +566,19 @@ module.exports = { }, opacity: { 0: '0', - // 5: '0.05', - // 10: '0.1', - // 20: '0.2', - // 25: '0.25', - // 30: '0.3', - // 40: '0.4', - // 50: '0.5', - // 60: '0.6', - // 70: '0.7', - // 75: '0.75', - // 80: '0.8', - // 90: '0.9', - // 95: '0.95', + 5: '0.05', + 10: '0.1', + 20: '0.2', + 25: '0.25', + 30: '0.3', + 40: '0.4', + 50: '0.5', + 60: '0.6', + 70: '0.7', + 75: '0.75', + 80: '0.8', + 90: '0.9', + 95: '0.95', 100: '1', }, order: { @@ -513,12 +591,12 @@ module.exports = { 4: '4', 5: '5', 6: '6', - // 7: '7', - // 8: '8', - // 9: '9', - // 10: '10', - // 11: '11', - // 12: '12', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', }, outline: { none: ['2px solid transparent', '2px'], @@ -571,6 +649,13 @@ module.exports = { 90: '90deg', 180: '180deg', }, + saturate: { + 0: '0', + 50: '.5', + 100: '1', + 150: '1.5', + 200: '2', + }, scale: { 0: '0', 50: '.5', @@ -583,6 +668,10 @@ module.exports = { 125: '1.25', 150: '1.5', }, + sepia: { + 0: '0', + DEFAULT: '100%', + }, skew: { '-12': '-12deg', '-6': '-6deg', @@ -645,7 +734,8 @@ module.exports = { transitionProperty: { none: 'none', all: 'all', - DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', + DEFAULT: + 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', colors: 'background-color, border-color, color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', @@ -683,13 +773,28 @@ module.exports = { '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', + '2/4': '50%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', full: '100%', screen: '100vw', min: 'min-content', @@ -712,6 +817,8 @@ module.exports = { 'even', 'visited', 'checked', + 'empty', + 'read-only', 'group-hover', 'group-focus', 'focus-within', @@ -728,21 +835,49 @@ module.exports = { alignSelf: ['responsive'], animation: ['responsive'], appearance: ['responsive'], + backdropBlur: ['responsive'], + backdropBrightness: ['responsive'], + backdropContrast: ['responsive'], + backdropDropShadow: ['responsive'], + backdropFilter: ['responsive'], + backdropGrayscale: ['responsive'], + backdropHueRotate: ['responsive'], + backdropInvert: ['responsive'], + backdropSaturate: ['responsive'], + backdropSepia: ['responsive'], + backgroundAttachment: ['responsive'], + backgroundBlendMode: ['responsive'], + backgroundClip: ['responsive'], backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], - backgroundOpacity: ['hover'], + backgroundImage: ['responsive'], + backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], + backgroundPosition: ['responsive'], + backgroundRepeat: ['responsive'], + backgroundSize: ['responsive'], + backgroundOrigin: ['responsive'], + blur: ['responsive'], borderCollapse: ['responsive'], borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], borderRadius: ['responsive'], borderStyle: ['responsive'], borderWidth: ['responsive'], + boxDecorationBreak: ['responsive'], boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], boxSizing: ['responsive'], + brightness: ['responsive'], clear: ['responsive'], container: ['responsive'], + contrast: ['responsive'], cursor: ['responsive'], display: ['responsive'], + divideColor: ['responsive', 'dark'], + divideOpacity: ['responsive', 'dark'], + divideStyle: ['responsive'], + divideWidth: ['responsive'], + dropShadow: ['responsive'], fill: ['responsive'], + filter: ['responsive'], flex: ['responsive'], flexDirection: ['responsive'], flexGrow: ['responsive'], @@ -755,8 +890,25 @@ module.exports = { fontStyle: ['responsive'], fontVariantNumeric: ['responsive'], fontWeight: ['responsive'], + gap: ['responsive'], + gradientColorStops: ['responsive', 'dark', 'hover', 'focus'], + grayscale: ['responsive'], + gridAutoColumns: ['responsive'], + gridAutoFlow: ['responsive'], + gridAutoRows: ['responsive'], + gridColumn: ['responsive'], + gridColumnEnd: ['responsive'], + gridColumnStart: ['responsive'], + gridRow: ['responsive'], + gridRowEnd: ['responsive'], + gridRowStart: ['responsive'], + gridTemplateColumns: ['responsive'], + gridTemplateRows: ['responsive'], height: ['responsive'], + hueRotate: ['responsive'], inset: ['responsive'], + invert: ['responsive'], + isolation: ['responsive'], justifyContent: ['responsive'], justifyItems: ['responsive'], justifySelf: ['responsive'], @@ -769,6 +921,7 @@ module.exports = { maxWidth: ['responsive'], minHeight: ['responsive'], minWidth: ['responsive'], + mixBlendMode: ['responsive'], objectFit: ['responsive'], objectPosition: ['responsive'], opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], @@ -780,6 +933,8 @@ module.exports = { placeContent: ['responsive'], placeItems: ['responsive'], placeSelf: ['responsive'], + placeholderColor: ['responsive', 'dark', 'focus'], + placeholderOpacity: ['responsive', 'dark', 'focus'], pointerEvents: ['responsive'], position: ['responsive'], resize: ['responsive'], @@ -788,60 +943,35 @@ module.exports = { ringOffsetWidth: ['responsive', 'focus-within', 'focus'], ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'], ringWidth: ['responsive', 'focus-within', 'focus'], + rotate: ['responsive', 'hover', 'focus'], + saturate: ['responsive'], + scale: ['responsive', 'hover', 'focus'], + sepia: ['responsive'], + skew: ['responsive', 'hover', 'focus'], space: ['responsive'], stroke: ['responsive'], strokeWidth: ['responsive'], + tableLayout: ['responsive'], textAlign: ['responsive'], textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], textOverflow: ['responsive'], textTransform: ['responsive'], + transform: ['responsive'], + transformOrigin: ['responsive'], + transitionDelay: ['responsive'], + transitionDuration: ['responsive'], + transitionProperty: ['responsive'], + transitionTimingFunction: ['responsive'], + translate: ['responsive', 'hover', 'focus'], + userSelect: ['responsive'], + verticalAlign: ['responsive'], visibility: ['responsive'], whitespace: ['responsive'], width: ['responsive'], + wordBreak: ['responsive'], zIndex: ['responsive', 'focus-within', 'focus'], }, - corePlugins: { - backgroundAttachment: false, - backgroundClip: false, - backgroundImage: false, - backgroundPosition: false, - backgroundRepeat: false, - backgroundSize: false, - divideColor: false, - divideOpacity: false, - divideStyle: false, - divideWidth: false, - gap: false, - gradientColorStops: false, - gridAutoColumns: false, - gridAutoFlow: false, - gridAutoRows: false, - gridColumn: false, - gridColumnEnd: false, - gridColumnStart: false, - gridRow: false, - gridRowEnd: false, - gridRowStart: false, - gridTemplateColumns: false, - gridTemplateRows: false, - placeholderColor: false, - placeholderOpacity: false, - rotate: false, - scale: false, - skew: false, - tableLayout: false, - transform: false, - transformOrigin: false, - transitionDelay: false, - transitionDuration: false, - transitionProperty: false, - transitionTimingFunction: false, - translate: false, - userSelect: false, - verticalAlign: false, - wordBreak: false, - }, plugins: [], }