Skip to content

Instantly share code, notes, and snippets.

@andy3520

andy3520/color.js

Last active March 3, 2023 16:09
Show Gist options
  • Save andy3520/1588c2c5ed5e9b24b860b8e368f558da to your computer and use it in GitHub Desktop.
Save andy3520/1588c2c5ed5e9b24b860b8e368f558da to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind UI default config and color, form
Raw
color.js
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',
},
}
Raw
default.js
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: [],
}
Raw
formDefault.js
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',
},
}
}
Raw
tailwind.config.js
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