Last active
March 3, 2023 16:09
-
-
Save andy3520/1588c2c5ed5e9b24b860b8e368f558da to your computer and use it in GitHub Desktop.
Tailwind UI default config and color, form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| transparent: 'transparent', | |
| white: '#ffffff', | |
| black: '#000000', | |
| gray: { | |
| '50': '#f9fafb', | |
| '100': '#f4f5f7', | |
| '200': '#e5e7eb', | |
| '300': '#d2d6dc', | |
| '400': '#9fa6b2', | |
| '500': '#6b7280', | |
| '600': '#4b5563', | |
| '700': '#374151', | |
| '800': '#252f3f', | |
| '900': '#161e2e', | |
| }, | |
| 'cool-gray': { | |
| '50': '#fbfdfe', | |
| '100': '#f1f5f9', | |
| '200': '#e2e8f0', | |
| '300': '#cfd8e3', | |
| '400': '#97a6ba', | |
| '500': '#64748b', | |
| '600': '#475569', | |
| '700': '#364152', | |
| '800': '#27303f', | |
| '900': '#1a202e', | |
| }, | |
| red: { | |
| '50': '#fdf2f2', | |
| '100': '#fde8e8', | |
| '200': '#fbd5d5', | |
| '300': '#f8b4b4', | |
| '400': '#f98080', | |
| '500': '#f05252', | |
| '600': '#e02424', | |
| '700': '#c81e1e', | |
| '800': '#9b1c1c', | |
| '900': '#771d1d', | |
| }, | |
| orange: { | |
| '50': '#fff8f1', | |
| '100': '#feecdc', | |
| '200': '#fcd9bd', | |
| '300': '#fdba8c', | |
| '400': '#ff8a4c', | |
| '500': '#ff5a1f', | |
| '600': '#d03801', | |
| '700': '#b43403', | |
| '800': '#8a2c0d', | |
| '900': '#771d1d', | |
| }, | |
| yellow: { | |
| '50': '#fdfdea', | |
| '100': '#fdf6b2', | |
| '200': '#fce96a', | |
| '300': '#faca15', | |
| '400': '#e3a008', | |
| '500': '#c27803', | |
| '600': '#9f580a', | |
| '700': '#8e4b10', | |
| '800': '#723b13', | |
| '900': '#633112', | |
| }, | |
| green: { | |
| '50': '#f3faf7', | |
| '100': '#def7ec', | |
| '200': '#bcf0da', | |
| '300': '#84e1bc', | |
| '400': '#31c48d', | |
| '500': '#0e9f6e', | |
| '600': '#057a55', | |
| '700': '#046c4e', | |
| '800': '#03543f', | |
| '900': '#014737', | |
| }, | |
| teal: { | |
| '50': '#edfafa', | |
| '100': '#d5f5f6', | |
| '200': '#afecef', | |
| '300': '#7edce2', | |
| '400': '#16bdca', | |
| '500': '#0694a2', | |
| '600': '#047481', | |
| '700': '#036672', | |
| '800': '#05505c', | |
| '900': '#014451', | |
| }, | |
| blue: { | |
| '50': '#ebf5ff', | |
| '100': '#e1effe', | |
| '200': '#c3ddfd', | |
| '300': '#a4cafe', | |
| '400': '#76a9fa', | |
| '500': '#3f83f8', | |
| '600': '#1c64f2', | |
| '700': '#1a56db', | |
| '800': '#1e429f', | |
| '900': '#233876', | |
| }, | |
| indigo: { | |
| '50': '#f0f5ff', | |
| '100': '#e5edff', | |
| '200': '#cddbfe', | |
| '300': '#b4c6fc', | |
| '400': '#8da2fb', | |
| '500': '#6875f5', | |
| '600': '#5850ec', | |
| '700': '#5145cd', | |
| '800': '#42389d', | |
| '900': '#362f78', | |
| }, | |
| purple: { | |
| '50': '#f6f5ff', | |
| '100': '#edebfe', | |
| '200': '#dcd7fe', | |
| '300': '#cabffd', | |
| '400': '#ac94fa', | |
| '500': '#9061f9', | |
| '600': '#7e3af2', | |
| '700': '#6c2bd9', | |
| '800': '#5521b5', | |
| '900': '#4a1d96', | |
| }, | |
| pink: { | |
| '50': '#fdf2f8', | |
| '100': '#fce8f3', | |
| '200': '#fad1e8', | |
| '300': '#f8b4d9', | |
| '400': '#f17eb8', | |
| '500': '#e74694', | |
| '600': '#d61f69', | |
| '700': '#bf125d', | |
| '800': '#99154b', | |
| '900': '#751a3d', | |
| }, | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| prefix: '', | |
| important: false, | |
| separator: ':', | |
| theme: { | |
| 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', | |
| }, | |
| red: { | |
| 100: '#fff5f5', | |
| 200: '#fed7d7', | |
| 300: '#feb2b2', | |
| 400: '#fc8181', | |
| 500: '#f56565', | |
| 600: '#e53e3e', | |
| 700: '#c53030', | |
| 800: '#9b2c2c', | |
| 900: '#742a2a', | |
| }, | |
| orange: { | |
| 100: '#fffaf0', | |
| 200: '#feebc8', | |
| 300: '#fbd38d', | |
| 400: '#f6ad55', | |
| 500: '#ed8936', | |
| 600: '#dd6b20', | |
| 700: '#c05621', | |
| 800: '#9c4221', | |
| 900: '#7b341e', | |
| }, | |
| yellow: { | |
| 100: '#fffff0', | |
| 200: '#fefcbf', | |
| 300: '#faf089', | |
| 400: '#f6e05e', | |
| 500: '#ecc94b', | |
| 600: '#d69e2e', | |
| 700: '#b7791f', | |
| 800: '#975a16', | |
| 900: '#744210', | |
| }, | |
| green: { | |
| 100: '#f0fff4', | |
| 200: '#c6f6d5', | |
| 300: '#9ae6b4', | |
| 400: '#68d391', | |
| 500: '#48bb78', | |
| 600: '#38a169', | |
| 700: '#2f855a', | |
| 800: '#276749', | |
| 900: '#22543d', | |
| }, | |
| teal: { | |
| 100: '#e6fffa', | |
| 200: '#b2f5ea', | |
| 300: '#81e6d9', | |
| 400: '#4fd1c5', | |
| 500: '#38b2ac', | |
| 600: '#319795', | |
| 700: '#2c7a7b', | |
| 800: '#285e61', | |
| 900: '#234e52', | |
| }, | |
| blue: { | |
| 100: '#ebf8ff', | |
| 200: '#bee3f8', | |
| 300: '#90cdf4', | |
| 400: '#63b3ed', | |
| 500: '#4299e1', | |
| 600: '#3182ce', | |
| 700: '#2b6cb0', | |
| 800: '#2c5282', | |
| 900: '#2a4365', | |
| }, | |
| 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', | |
| '0': '0', | |
| '1': '0.25rem', | |
| '2': '0.5rem', | |
| '3': '0.75rem', | |
| '4': '1rem', | |
| '5': '1.25rem', | |
| '6': '1.5rem', | |
| '8': '2rem', | |
| '10': '2.5rem', | |
| '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', | |
| '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: [ | |
| 'system-ui', | |
| '-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: { | |
| 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', | |
| }), | |
| 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', | |
| 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'), | |
| '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'], | |
| 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: [], | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const defaultTheme = require('tailwindcss/resolveConfig')(require('tailwindcss/defaultConfig')).theme | |
| module.exports = { | |
| input: { | |
| appearance: 'none', | |
| backgroundColor: defaultTheme.colors.white, | |
| borderColor: defaultTheme.borderColor.default, | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.default, | |
| paddingTop: defaultTheme.spacing[2], | |
| paddingRight: defaultTheme.spacing[3], | |
| paddingBottom: defaultTheme.spacing[2], | |
| paddingLeft: defaultTheme.spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| '&::placeholder': { | |
| color: defaultTheme.colors.gray[500], | |
| opacity: '1', | |
| }, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: defaultTheme.boxShadow.outline, | |
| borderColor: defaultTheme.colors.blue[400], | |
| }, | |
| }, | |
| textarea: { | |
| appearance: 'none', | |
| backgroundColor: defaultTheme.colors.white, | |
| borderColor: defaultTheme.borderColor.default, | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.default, | |
| paddingTop: defaultTheme.spacing[2], | |
| paddingRight: defaultTheme.spacing[3], | |
| paddingBottom: defaultTheme.spacing[2], | |
| paddingLeft: defaultTheme.spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| '&::placeholder': { | |
| color: defaultTheme.colors.gray[500], | |
| opacity: '1', | |
| }, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: defaultTheme.boxShadow.outline, | |
| borderColor: defaultTheme.colors.blue[400], | |
| }, | |
| }, | |
| multiselect: { | |
| appearance: 'none', | |
| backgroundColor: defaultTheme.colors.white, | |
| borderColor: defaultTheme.borderColor.default, | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.default, | |
| paddingTop: defaultTheme.spacing[2], | |
| paddingRight: defaultTheme.spacing[3], | |
| paddingBottom: defaultTheme.spacing[2], | |
| paddingLeft: defaultTheme.spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: defaultTheme.boxShadow.outline, | |
| borderColor: defaultTheme.colors.blue[400], | |
| }, | |
| }, | |
| select: { | |
| appearance: 'none', | |
| colorAdjust: 'exact', | |
| '&::-ms-expand': { | |
| border: 'none', // The select padding is causing some whitespace around the chevron which looks weird with a border | |
| '@media not print': { | |
| display: 'none', | |
| }, | |
| }, | |
| backgroundRepeat: 'no-repeat', | |
| backgroundColor: defaultTheme.colors.white, | |
| borderColor: defaultTheme.borderColor.default, | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.default, | |
| paddingTop: defaultTheme.spacing[2], | |
| paddingRight: defaultTheme.spacing[10], | |
| paddingBottom: defaultTheme.spacing[2], | |
| paddingLeft: defaultTheme.spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| backgroundPosition: `right ${defaultTheme.spacing[2]} center`, | |
| backgroundSize: `1.5em 1.5em`, | |
| iconColor: defaultTheme.colors.gray[500], | |
| icon: iconColor => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${iconColor}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: defaultTheme.boxShadow.outline, | |
| borderColor: defaultTheme.colors.blue[400], | |
| }, | |
| }, | |
| checkbox: { | |
| appearance: 'none', | |
| colorAdjust: 'exact', | |
| '&::-ms-check': { | |
| '@media not print': { | |
| color: 'transparent', // Hide the check | |
| background: 'inherit', | |
| borderColor: 'inherit', | |
| borderRadius: 'inherit', | |
| } | |
| }, | |
| display: 'inline-block', | |
| verticalAlign: 'middle', | |
| backgroundOrigin: 'border-box', | |
| userSelect: 'none', | |
| flexShrink: 0, | |
| height: '1em', | |
| width: '1em', | |
| color: defaultTheme.colors.blue[500], | |
| backgroundColor: defaultTheme.colors.white, | |
| borderColor: defaultTheme.borderColor.default, | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.default, | |
| iconColor: defaultTheme.colors.white, | |
| icon: iconColor => `<svg viewBox="0 0 16 16" fill="${iconColor}" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>`, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: defaultTheme.boxShadow.outline, | |
| borderColor: defaultTheme.colors.blue[400], | |
| }, | |
| '&:checked': { | |
| borderColor: 'transparent', | |
| backgroundColor: 'currentColor', | |
| backgroundSize: '100% 100%', | |
| backgroundPosition: 'center', | |
| backgroundRepeat: 'no-repeat', | |
| }, | |
| }, | |
| radio: { | |
| appearance: 'none', | |
| colorAdjust: 'exact', | |
| '&::-ms-check': { | |
| '@media not print': { | |
| color: 'transparent', // Hide the check | |
| background: 'inherit', | |
| borderColor: 'inherit', | |
| borderRadius: 'inherit', | |
| } | |
| }, | |
| display: 'inline-block', | |
| verticalAlign: 'middle', | |
| backgroundOrigin: 'border-box', | |
| userSelect: 'none', | |
| flexShrink: 0, | |
| borderRadius: '100%', | |
| height: '1em', | |
| width: '1em', | |
| color: defaultTheme.colors.blue[500], | |
| backgroundColor: defaultTheme.colors.white, | |
| borderColor: defaultTheme.borderColor.default, | |
| borderWidth: defaultTheme.borderWidth.default, | |
| iconColor: defaultTheme.colors.white, | |
| icon: iconColor => `<svg viewBox="0 0 16 16" fill="${iconColor}" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: defaultTheme.boxShadow.outline, | |
| borderColor: defaultTheme.colors.blue[400], | |
| }, | |
| '&:checked': { | |
| borderColor: 'transparent', | |
| backgroundColor: 'currentColor', | |
| backgroundSize: '100% 100%', | |
| backgroundPosition: 'center', | |
| backgroundRepeat: 'no-repeat', | |
| }, | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const plugin = require('tailwindcss/plugin') | |
| const defaultTheme = require('tailwindcss/defaultTheme') | |
| const selectorParser = require('postcss-selector-parser') | |
| const rgba = require('hex-to-rgba') | |
| const colors = require('./colors') | |
| const customFormsPlugin = require('@tailwindcss/custom-forms') | |
| const spacing = { | |
| px: '1px', | |
| '0': '0', | |
| '0.5': '0.125rem', | |
| '1': '0.25rem', | |
| '1.5': '0.375rem', | |
| '2': '0.5rem', | |
| '2.5': '0.625rem', | |
| '3': '0.75rem', | |
| '3.5': '0.875rem', | |
| '4': '1rem', | |
| '5': '1.25rem', | |
| '6': '1.5rem', | |
| '7': '1.75rem', | |
| '8': '2rem', | |
| '9': '2.25rem', | |
| '10': '2.5rem', | |
| '11': '2.75rem', | |
| '12': '3rem', | |
| '13': '3.25rem', | |
| '14': '3.5rem', | |
| '15': '3.75rem', | |
| '16': '4rem', | |
| '20': '5rem', | |
| '24': '6rem', | |
| '28': '7rem', | |
| '32': '8rem', | |
| '36': '9rem', | |
| '40': '10rem', | |
| '48': '12rem', | |
| '56': '14rem', | |
| '60': '15rem', | |
| '64': '16rem', | |
| '72': '18rem', | |
| '80': '20rem', | |
| '96': '24rem', | |
| '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%', | |
| } | |
| const boxShadow = { | |
| ...defaultTheme.boxShadow, | |
| solid: '0 0 0 2px currentColor', | |
| outline: `0 0 0 3px ${rgba(colors.blue[400], 0.45)}`, | |
| 'outline-gray': `0 0 0 3px ${rgba(colors.gray[400], 0.45)}`, | |
| 'outline-blue': `0 0 0 3px ${rgba(colors.blue[300], 0.45)}`, | |
| 'outline-teal': `0 0 0 3px ${rgba(colors.teal[300], 0.45)}`, | |
| 'outline-green': `0 0 0 3px ${rgba(colors.green[300], 0.45)}`, | |
| 'outline-yellow': `0 0 0 3px ${rgba(colors.yellow[300], 0.45)}`, | |
| 'outline-orange': `0 0 0 3px ${rgba(colors.orange[300], 0.45)}`, | |
| 'outline-red': `0 0 0 3px ${rgba(colors.red[300], 0.45)}`, | |
| 'outline-pink': `0 0 0 3px ${rgba(colors.pink[300], 0.45)}`, | |
| 'outline-purple': `0 0 0 3px ${rgba(colors.purple[300], 0.45)}`, | |
| 'outline-indigo': `0 0 0 3px ${rgba(colors.indigo[300], 0.45)}`, | |
| } | |
| const maxWidth = (theme, { breakpoints }) => ({ | |
| none: 'none', | |
| xs: '20rem', | |
| sm: '24rem', | |
| md: '28rem', | |
| lg: '32rem', | |
| xl: '36rem', | |
| '2xl': '42rem', | |
| '3xl': '48rem', | |
| '4xl': '56rem', | |
| '5xl': '64rem', | |
| '6xl': '72rem', | |
| '7xl': '80rem', | |
| full: '100%', | |
| ...breakpoints(theme('screens')), | |
| }) | |
| const maxHeight = theme => ({ | |
| screen: '100vh', | |
| ...theme('spacing'), | |
| }) | |
| const inset = theme => ({ | |
| auto: 'auto', | |
| ...theme('spacing'), | |
| }) | |
| const customForms = theme => ({ | |
| default: { | |
| input: { | |
| appearance: 'none', | |
| backgroundColor: colors.white, | |
| borderColor: colors.gray[300], | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.md, | |
| paddingTop: spacing[2], | |
| paddingRight: spacing[3], | |
| paddingBottom: spacing[2], | |
| paddingLeft: spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| '&::placeholder': { | |
| color: colors.gray[400], | |
| }, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: boxShadow['outline-blue'], | |
| borderColor: colors.blue[300], | |
| }, | |
| }, | |
| textarea: { | |
| appearance: 'none', | |
| backgroundColor: colors.white, | |
| borderColor: colors.gray[300], | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.md, | |
| paddingTop: spacing[2], | |
| paddingRight: spacing[3], | |
| paddingBottom: spacing[2], | |
| paddingLeft: spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| '&::placeholder': { | |
| color: colors.gray[400], | |
| opacity: '1', | |
| }, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: boxShadow['outline-blue'], | |
| borderColor: colors.blue[300], | |
| }, | |
| }, | |
| multiselect: { | |
| appearance: 'none', | |
| backgroundColor: colors.white, | |
| borderColor: colors.gray[300], | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.md, | |
| paddingTop: spacing[2], | |
| paddingRight: spacing[3], | |
| paddingBottom: spacing[2], | |
| paddingLeft: spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: boxShadow['outline-blue'], | |
| borderColor: colors.blue[300], | |
| }, | |
| }, | |
| select: { | |
| appearance: 'none', | |
| colorAdjust: 'exact', | |
| '&::-ms-expand': { | |
| border: 'none', // The select padding is causing some whitespace around the chevron which looks weird with a border | |
| '@media not print': { | |
| display: 'none', | |
| }, | |
| }, | |
| backgroundRepeat: 'no-repeat', | |
| backgroundColor: colors.white, | |
| borderColor: colors.gray[300], | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.md, | |
| paddingTop: spacing[2], | |
| paddingRight: spacing[10], | |
| paddingBottom: spacing[2], | |
| paddingLeft: spacing[3], | |
| fontSize: defaultTheme.fontSize.base, | |
| lineHeight: defaultTheme.lineHeight.normal, | |
| backgroundPosition: `right ${spacing[2]} center`, | |
| backgroundSize: `1.5em 1.5em`, | |
| iconColor: colors.gray[400], | |
| icon: iconColor => | |
| `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke="${iconColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: boxShadow['outline-blue'], | |
| borderColor: colors.blue[300], | |
| }, | |
| }, | |
| checkbox: { | |
| appearance: 'none', | |
| colorAdjust: 'exact', | |
| '&::-ms-check': { | |
| '@media not print': { | |
| color: 'transparent', // Hide the check | |
| background: 'inherit', | |
| borderColor: 'inherit', | |
| borderRadius: 'inherit', | |
| }, | |
| }, | |
| display: 'inline-block', | |
| verticalAlign: 'middle', | |
| backgroundOrigin: 'border-box', | |
| userSelect: 'none', | |
| flexShrink: 0, | |
| height: spacing[4], | |
| width: spacing[4], | |
| color: colors.blue[500], | |
| backgroundColor: colors.white, | |
| borderColor: colors.gray[300], | |
| borderWidth: defaultTheme.borderWidth.default, | |
| borderRadius: defaultTheme.borderRadius.default, | |
| iconColor: colors.white, | |
| icon: iconColor => | |
| `<svg viewBox="0 0 16 16" fill="${iconColor}" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>`, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: boxShadow['outline-blue'], | |
| borderColor: colors.blue[300], | |
| }, | |
| '&:checked': { | |
| borderColor: 'transparent', | |
| backgroundColor: 'currentColor', | |
| backgroundSize: '100% 100%', | |
| backgroundPosition: 'center', | |
| backgroundRepeat: 'no-repeat', | |
| }, | |
| '&:checked:focus': { | |
| borderColor: 'transparent', | |
| }, | |
| }, | |
| radio: { | |
| appearance: 'none', | |
| colorAdjust: 'exact', | |
| '&::-ms-check': { | |
| '@media not print': { | |
| color: 'transparent', // Hide the check | |
| background: 'inherit', | |
| borderColor: 'inherit', | |
| borderRadius: 'inherit', | |
| }, | |
| }, | |
| display: 'inline-block', | |
| verticalAlign: 'middle', | |
| backgroundOrigin: 'border-box', | |
| userSelect: 'none', | |
| flexShrink: 0, | |
| borderRadius: '100%', | |
| height: spacing[4], | |
| width: spacing[4], | |
| color: colors.blue[500], | |
| backgroundColor: colors.white, | |
| borderColor: colors.gray[300], | |
| borderWidth: defaultTheme.borderWidth.default, | |
| iconColor: colors.white, | |
| icon: iconColor => | |
| `<svg viewBox="0 0 16 16" fill="${iconColor}" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`, | |
| '&:focus': { | |
| outline: 'none', | |
| boxShadow: boxShadow['outline-blue'], | |
| borderColor: colors.blue[300], | |
| }, | |
| '&:checked': { | |
| borderColor: 'transparent', | |
| backgroundColor: 'currentColor', | |
| backgroundSize: '100% 100%', | |
| backgroundPosition: 'center', | |
| backgroundRepeat: 'no-repeat', | |
| }, | |
| '&:checked:focus': { | |
| borderColor: 'transparent', | |
| }, | |
| }, | |
| }, | |
| }) | |
| module.exports = plugin.withOptions( | |
| function() { | |
| return function(options) { | |
| const { addUtilities, addVariant, theme, e, prefix, variants } = options | |
| customFormsPlugin(options) | |
| addVariant('group-focus', ({ modifySelectors, separator }) => { | |
| return modifySelectors(({ selector }) => { | |
| return selectorParser(selectors => { | |
| selectors.walkClasses(sel => { | |
| sel.value = `group-focus${separator}${sel.value}` | |
| sel.parent.insertBefore(sel, selectorParser().astSync(prefix('.group:focus '))) | |
| }) | |
| }).processSync(selector) | |
| }) | |
| }) | |
| } | |
| }, | |
| function(options = {}) { | |
| return { | |
| theme: { | |
| ...(options.layout === 'sidebar' | |
| ? { | |
| screens: { | |
| sm: '640px', | |
| md: '1024px', // 768 + 256 | |
| lg: '1280px', // 1024 + 256 | |
| xl: '1536px', // 1280 + 256 | |
| }, | |
| } | |
| : {}), | |
| colors, | |
| spacing, | |
| boxShadow, | |
| maxWidth, | |
| maxHeight, | |
| inset, | |
| customForms: customForms, | |
| }, | |
| variants: { | |
| backgroundColor: ['responsive', 'group-hover', 'group-focus', 'hover', 'focus', 'active'], | |
| borderColor: ['responsive', 'group-hover', 'group-focus', 'hover', 'focus'], | |
| textColor: [ | |
| 'responsive', | |
| 'group-hover', | |
| 'group-focus', | |
| 'hover', | |
| 'focus-within', | |
| 'focus', | |
| 'active', | |
| ], | |
| textDecoration: ['responsive', 'group-hover', 'group-focus', 'hover', 'focus'], | |
| zIndex: ['responsive', 'focus-within', 'focus'], | |
| }, | |
| } | |
| } | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment