From 3d49bf142b06b3e786b952888d59bc456693553a Mon Sep 17 00:00:00 2001 From: Valentin Kaelin Date: Sat, 5 Dec 2020 00:31:54 +0100 Subject: [PATCH] chore: only add custom content in tailwind config --- client/tailwind.config.js | 748 +++----------------------------------- 1 file changed, 41 insertions(+), 707 deletions(-) diff --git a/client/tailwind.config.js b/client/tailwind.config.js index c61914a..234d15a 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -1,7 +1,12 @@ +/* +** TailwindCSS Configuration File +** +** Docs: https://tailwindcss.com/docs/configuration +** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js +*/ +const defaultTheme = require('tailwindcss/defaultTheme') + module.exports = { - prefix: '', - important: false, - separator: ':', theme: { customForms: theme => ({ default: { @@ -19,724 +24,53 @@ module.exports = { '&:checked': { backgroundColor: theme('colors.blue.1000'), borderColor: 'transparent', - }, + } + } + } + }), + extend: { + colors: { + teal: { + ...defaultTheme.colors.teal, + 'flashy': '#24e8cc', + }, + blue: { + ...defaultTheme.colors.blue, + 760: '#2C5C94', + 850: '#2B4B74', + 1000: '#17314f' }, }, - }), - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - }, - colors: { - transparent: 'transparent', - - black: '#000', - white: '#fff', - - gray: { - 100: '#f7fafc', - 200: '#edf2f7', - 300: '#e2e8f0', - 400: '#cbd5e0', - 500: '#a0aec0', - 600: '#718096', - 700: '#4a5568', - 800: '#2d3748', - 900: '#1a202c', + spacing: { + '2px': '2px', + '3p5': '0.875rem', + '4b': '1.15rem', + '11': '2.75rem', }, - red: { - 100: '#fff5f5', - 200: '#fed7d7', - 300: '#feb2b2', - 400: '#fc8181', - 500: '#f56565', - 600: '#e53e3e', - 700: '#c53030', - 800: '#9b2c2c', - 900: '#742a2a', + borderWidth: { + '3': '3px', }, - orange: { - 100: '#fffaf0', - 200: '#feebc8', - 300: '#fbd38d', - 400: '#f6ad55', - 500: '#ed8936', - 600: '#dd6b20', - 700: '#c05621', - 800: '#9c4221', - 900: '#7b341e', + fontFamily: { + sans: ['Inter', ...defaultTheme.fontFamily.sans], }, - yellow: { - 100: '#fffff0', - 200: '#fefcbf', - 300: '#faf089', - 400: '#f6e05e', - 500: '#ecc94b', - 600: '#d69e2e', - 700: '#b7791f', - 800: '#975a16', - 900: '#744210', + fontSize: { + xxs: '0.625rem', }, - green: { - 100: '#f0fff4', - 200: '#c6f6d5', - 300: '#9ae6b4', - 400: '#68d391', - 500: '#48bb78', - 600: '#38a169', - 700: '#2f855a', - 800: '#276749', - 900: '#22543d', + height: { + '200': '50rem', + '1/2': '50%', }, - teal: { - 100: '#e6fffa', - 200: '#b2f5ea', - 300: '#81e6d9', - 400: '#4fd1c5', - 500: '#38b2ac', - 600: '#319795', - 700: '#2c7a7b', - 800: '#285e61', - 900: '#234e52', - 'flashy': '#24e8cc', + maxWidth: { + '12': '3rem', }, - blue: { - 100: '#ebf8ff', - 200: '#bee3f8', - 300: '#90cdf4', - 400: '#63b3ed', - 500: '#4299e1', - 600: '#3182ce', - 700: '#2b6cb0', - 760: '#2C5C94', - 800: '#2c5282', - 850: '#2B4B74', - 900: '#2a4365', - 1000: '#17314f' + width: { + '22': '5.5rem', }, - indigo: { - 100: '#ebf4ff', - 200: '#c3dafe', - 300: '#a3bffa', - 400: '#7f9cf5', - 500: '#667eea', - 600: '#5a67d8', - 700: '#4c51bf', - 800: '#434190', - 900: '#3c366b', - }, - purple: { - 100: '#faf5ff', - 200: '#e9d8fd', - 300: '#d6bcfa', - 400: '#b794f4', - 500: '#9f7aea', - 600: '#805ad5', - 700: '#6b46c1', - 800: '#553c9a', - 900: '#44337a', - }, - pink: { - 100: '#fff5f7', - 200: '#fed7e2', - 300: '#fbb6ce', - 400: '#f687b3', - 500: '#ed64a6', - 600: '#d53f8c', - 700: '#b83280', - 800: '#97266d', - 900: '#702459', - }, - }, - spacing: { - px: '1px', - '2px': '2px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '3p5': '0.875rem', - '4': '1rem', - '4b': '1.15rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '11': '2.75rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '40': '10rem', - '48': '12rem', - '56': '14rem', - '64': '16rem', - }, - backgroundColor: theme => theme('colors'), - backgroundPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', - }, - backgroundSize: { - auto: 'auto', - cover: 'cover', - contain: 'contain', - }, - borderColor: theme => ({ - ...theme('colors'), - default: theme('colors.gray.300', 'currentColor'), - }), - borderRadius: { - none: '0', - sm: '0.125rem', - default: '0.25rem', - md: '0.375rem', - lg: '0.5rem', - full: '9999px', - }, - borderWidth: { - default: '1px', - '0': '0', - '2': '2px', - '3': '3px', - '4': '4px', - '8': '8px', - }, - boxShadow: { - xs: '0 0 0 1px rgba(0, 0, 0, 0.05)', - sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', - md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', - xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', - '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', - inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', - outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', - none: 'none', - }, - container: {}, - cursor: { - auto: 'auto', - default: 'default', - pointer: 'pointer', - wait: 'wait', - text: 'text', - move: 'move', - 'not-allowed': 'not-allowed', - }, - fill: { - current: 'currentColor', - }, - flex: { - '1': '1 1 0%', - auto: '1 1 auto', - initial: '0 1 auto', - none: 'none', - }, - flexGrow: { - '0': '0', - default: '1', - }, - flexShrink: { - '0': '0', - default: '1', - }, - fontFamily: { - sans: [ - 'Inter', - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - '"Noto Sans"', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', - ], - serif: [ - 'Georgia', - 'Cambria', - '"Times New Roman"', - 'Times', - 'serif', - ], - mono: [ - 'Menlo', - 'Monaco', - 'Consolas', - '"Liberation Mono"', - '"Courier New"', - 'monospace', - ], - }, - fontSize: { - xxs: '0.625rem', - xs: '0.75rem', - sm: '0.875rem', - base: '1rem', - lg: '1.125rem', - xl: '1.25rem', - '2xl': '1.5rem', - '3xl': '1.875rem', - '4xl': '2.25rem', - '5xl': '3rem', - '6xl': '4rem', - }, - fontWeight: { - hairline: '100', - thin: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', - }, - height: theme => ({ - auto: 'auto', - ...theme('spacing'), - full: '100%', - screen: '100vh', - '200': '50rem', - '1/2': '50%', - }), - inset: { - '0': '0', - auto: 'auto', - }, - letterSpacing: { - tighter: '-0.05em', - tight: '-0.025em', - normal: '0', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', - }, - lineHeight: { - none: '1', - tight: '1.25', - snug: '1.375', - normal: '1.5', - relaxed: '1.625', - loose: '2', - '3': '.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '7': '1.75rem', - '8': '2rem', - '9': '2.25rem', - '10': '2.5rem', - }, - listStyleType: { - none: 'none', - disc: 'disc', - decimal: 'decimal', - }, - margin: (theme, { negative }) => ({ - auto: 'auto', - ...theme('spacing'), - ...negative(theme('spacing')), - }), - maxHeight: { - full: '100%', - screen: '100vh', - }, - maxWidth: (theme, { breakpoints }) => ({ - none: 'none', - '12': '3rem', - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - full: '100%', - ...breakpoints(theme('screens')), - }), - minHeight: { - '0': '0', - full: '100%', - screen: '100vh', - }, - minWidth: { - '0': '0', - full: '100%', - }, - objectPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', - }, - opacity: { - '0': '0', - '25': '0.25', - '50': '0.5', - '75': '0.75', - '100': '1', - }, - order: { - first: '-9999', - last: '9999', - none: '0', - '1': '1', - '2': '2', - '3': '3', - '4': '4', - '5': '5', - '6': '6', - '7': '7', - '8': '8', - '9': '9', - '10': '10', - '11': '11', - '12': '12', - }, - padding: theme => theme('spacing'), - placeholderColor: theme => theme('colors'), - stroke: { - current: 'currentColor', - }, - strokeWidth: { - '0': '0', - '1': '1', - '2': '2', - }, - textColor: theme => theme('colors'), - width: theme => ({ - auto: 'auto', - ...theme('spacing'), - '22': '5.5rem', - '1/2': '50%', - '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', - }), - zIndex: { - auto: 'auto', - '0': '0', - '10': '10', - '20': '20', - '30': '30', - '40': '40', - '50': '50', - }, - gap: theme => theme('spacing'), - gridTemplateColumns: { - none: 'none', - '1': 'repeat(1, minmax(0, 1fr))', - '2': 'repeat(2, minmax(0, 1fr))', - '3': 'repeat(3, minmax(0, 1fr))', - '4': 'repeat(4, minmax(0, 1fr))', - '5': 'repeat(5, minmax(0, 1fr))', - '6': 'repeat(6, minmax(0, 1fr))', - '7': 'repeat(7, minmax(0, 1fr))', - '8': 'repeat(8, minmax(0, 1fr))', - '9': 'repeat(9, minmax(0, 1fr))', - '10': 'repeat(10, minmax(0, 1fr))', - '11': 'repeat(11, minmax(0, 1fr))', - '12': 'repeat(12, minmax(0, 1fr))', - }, - gridColumn: { - auto: 'auto', - 'span-1': 'span 1 / span 1', - 'span-2': 'span 2 / span 2', - 'span-3': 'span 3 / span 3', - 'span-4': 'span 4 / span 4', - 'span-5': 'span 5 / span 5', - 'span-6': 'span 6 / span 6', - 'span-7': 'span 7 / span 7', - 'span-8': 'span 8 / span 8', - 'span-9': 'span 9 / span 9', - 'span-10': 'span 10 / span 10', - 'span-11': 'span 11 / span 11', - 'span-12': 'span 12 / span 12', - }, - gridColumnStart: { - auto: 'auto', - '1': '1', - '2': '2', - '3': '3', - '4': '4', - '5': '5', - '6': '6', - '7': '7', - '8': '8', - '9': '9', - '10': '10', - '11': '11', - '12': '12', - '13': '13', - }, - gridColumnEnd: { - auto: 'auto', - '1': '1', - '2': '2', - '3': '3', - '4': '4', - '5': '5', - '6': '6', - '7': '7', - '8': '8', - '9': '9', - '10': '10', - '11': '11', - '12': '12', - '13': '13', - }, - gridTemplateRows: { - none: 'none', - '1': 'repeat(1, minmax(0, 1fr))', - '2': 'repeat(2, minmax(0, 1fr))', - '3': 'repeat(3, minmax(0, 1fr))', - '4': 'repeat(4, minmax(0, 1fr))', - '5': 'repeat(5, minmax(0, 1fr))', - '6': 'repeat(6, minmax(0, 1fr))', - }, - gridRow: { - auto: 'auto', - 'span-1': 'span 1 / span 1', - 'span-2': 'span 2 / span 2', - 'span-3': 'span 3 / span 3', - 'span-4': 'span 4 / span 4', - 'span-5': 'span 5 / span 5', - 'span-6': 'span 6 / span 6', - }, - gridRowStart: { - auto: 'auto', - '1': '1', - '2': '2', - '3': '3', - '4': '4', - '5': '5', - '6': '6', - '7': '7', - }, - gridRowEnd: { - auto: 'auto', - '1': '1', - '2': '2', - '3': '3', - '4': '4', - '5': '5', - '6': '6', - '7': '7', - }, - transformOrigin: { - center: 'center', - top: 'top', - 'top-right': 'top right', - right: 'right', - 'bottom-right': 'bottom right', - bottom: 'bottom', - 'bottom-left': 'bottom left', - left: 'left', - 'top-left': 'top left', - }, - scale: { - '0': '0', - '50': '.5', - '75': '.75', - '90': '.9', - '95': '.95', - '100': '1', - '105': '1.05', - '110': '1.1', - '125': '1.25', - '150': '1.5', - }, - rotate: { - '-180': '-180deg', - '-90': '-90deg', - '-45': '-45deg', - '0': '0', - '45': '45deg', - '90': '90deg', - '180': '180deg', - }, - translate: (theme, { negative }) => ({ - ...theme('spacing'), - ...negative(theme('spacing')), - '-full': '-100%', - '-1/2': '-50%', - '1/2': '50%', - full: '100%', - }), - skew: { - '-12': '-12deg', - '-6': '-6deg', - '-3': '-3deg', - '0': '0', - '3': '3deg', - '6': '6deg', - '12': '12deg', - }, - transitionProperty: { - none: 'none', - all: 'all', - default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', - colors: 'background-color, border-color, color, fill, stroke', - opacity: 'opacity', - shadow: 'box-shadow', - transform: 'transform', - }, - transitionTimingFunction: { - linear: 'linear', - in: 'cubic-bezier(0.4, 0, 1, 1)', - out: 'cubic-bezier(0, 0, 0.2, 1)', - 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', - }, - transitionDuration: { - '75': '75ms', - '100': '100ms', - '150': '150ms', - '200': '200ms', - '300': '300ms', - '500': '500ms', - '700': '700ms', - '1000': '1000ms', }, }, variants: { - accessibility: ['responsive', 'focus'], - alignContent: ['responsive'], - alignItems: ['responsive'], - alignSelf: ['responsive'], - appearance: ['responsive'], - backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: ['responsive'], - borderColor: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidth: ['responsive'], - boxShadow: ['responsive', 'hover', 'focus'], - boxSizing: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - fill: ['responsive'], - flex: ['responsive'], - flexDirection: ['responsive'], - flexGrow: ['responsive'], - flexShrink: ['responsive'], - flexWrap: ['responsive'], - float: ['responsive'], - clear: ['responsive'], - fontFamily: ['responsive'], - fontSize: ['responsive'], - fontSmoothing: ['responsive'], - fontStyle: ['responsive'], - fontWeight: ['responsive', 'hover', 'focus'], - height: ['responsive'], - inset: ['responsive'], - justifyContent: ['responsive'], - letterSpacing: ['responsive'], - lineHeight: ['responsive'], - listStylePosition: ['responsive'], - listStyleType: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - objectFit: ['responsive'], - objectPosition: ['responsive'], - opacity: ['responsive', 'hover', 'focus'], - order: ['responsive'], - outline: ['responsive', 'focus'], - overflow: ['responsive'], - padding: ['responsive'], - placeholderColor: ['responsive', 'focus'], - pointerEvents: ['responsive'], - position: ['responsive'], - resize: ['responsive'], - stroke: ['responsive'], - strokeWidth: ['responsive'], - tableLayout: ['responsive'], - textAlign: ['responsive'], textColor: ['responsive', 'hover', 'focus', 'group-hover'], - textDecoration: ['responsive', 'hover', 'focus'], - textTransform: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - width: ['responsive'], - wordBreak: ['responsive'], - zIndex: ['responsive'], - gap: ['responsive'], - gridAutoFlow: ['responsive'], - gridTemplateColumns: ['responsive'], - gridColumn: ['responsive'], - gridColumnStart: ['responsive'], - gridColumnEnd: ['responsive'], - gridTemplateRows: ['responsive'], - gridRow: ['responsive'], - gridRowStart: ['responsive'], - gridRowEnd: ['responsive'], - transform: ['responsive'], - transformOrigin: ['responsive'], - scale: ['responsive', 'hover', 'focus'], - rotate: ['responsive', 'hover', 'focus'], - translate: ['responsive', 'hover', 'focus'], - skew: ['responsive', 'hover', 'focus'], - transitionProperty: ['responsive'], - transitionTimingFunction: ['responsive'], - transitionDuration: ['responsive'], }, - corePlugins: {}, plugins: [ require('@tailwindcss/custom-forms'), ],