Skip to content

Instantly share code, notes, and snippets.

@jongravois

jongravois/tailwind.config.js

Created March 5, 2020 14:55
Show Gist options
  • Save jongravois/5e7ceec617614528c4778dde96d3c7db to your computer and use it in GitHub Desktop.
Save jongravois/5e7ceec617614528c4778dde96d3c7db to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tailwind.config.js
module.exports = {
prefix: '',
important: false,
separator: ':',
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
colors: {
'transparent': 'transparent',
'black': '#22292f',
'rich-black': '#1A1E24',
'charcoal': '#23272E',
'ash': '#58595c',
'gold': '#f1c40f',
'white': '#ffffff',
'mint': '#C9EBD7',
'sunburn': '#F5B7B1',
'uam-bluzzard': '#4684C5',
'uam-dark-blue': '#0064B0',
'uam-space-grey': '#656D7B',
'uam-tag-grey': '#B4BEC0',
'uam-swoosh-grey': '#BCBEC0',
'uam-head1': '#1B75BC',
'uam-head2': '#1A75BC',
'uam-head3': '#90C73E',
'uam-head4': '#EF3824',
'uam-text': '#A1A2A4',
'error': '#EF3824',
'warning': '#f1c40f',
'success': '#27AE60',
'info': '#4684C5',
'blue': {
100: '#E8F1F8',
200: '#C6DDEE',
300: '#A4C8E4',
400: '#5F9ED0',
500: '#1B75BC',
600: '#1869A9',
700: '#104671',
800: '#0C3555',
900: '#082338',
},
'grey': {
100: '#F8F9FA',
200: '#EDF0F2',
300: '#E3E7EB',
400: '#CDD4DB',
500: '#B8C2CC',
600: '#A6AFB8',
700: '#6E747A',
800: '#53575C',
900: '#373A3D',
},
'silver': {
100: '#F8F9F9',
200: '#EFEFEF',
300: '#E5E5E6',
400: '#D1D2D3',
500: '#BDBEC0',
600: '#AAABAD',
700: '#717273',
800: '#555656',
900: '#39393A',
},
'alizarin': {
100: '#FDEDEC',
200: '#F9D2CE',
300: '#F5B7B1',
400: '#EE8277',
500: '#E74C3C',
600: '#D04436',
700: '#8B2E24',
800: '#68221B',
900: '#451712',
},
'red': {
100: '#FCE8EB',
200: '#F8C5CD',
300: '#F4A3AF',
400: '#EB5D73',
500: '#E31837',
600: '#CC1632',
700: '#880E21',
800: '#660B19',
900: '#440711',
},
'saints': {
100: '#FBF8F4',
200: '#F4EEE3',
300: '#EDE4D1',
400: '#E0D0AF',
500: '#D3BC8D',
600: '#BEA97F',
700: '#7F7155',
800: '#5F553F',
900: '#3F382A',
},
'eagles': {
100: '#E6EDEE',
200: '#BFD2D4',
300: '#99B7BB',
400: '#4D8287',
500: '#004C54',
600: '#00444C',
700: '#002E32',
800: '#002226',
900: '#001719',
},
'orange': {
100: '#FFEDE8',
200: '#FED3C4',
300: '#FDB9A1',
400: '#FC845B',
500: '#FB4F14',
600: '#E24712',
700: '#972F0C',
800: '#712409',
900: '#4B1806',
},
'burgundy': {
100: '#F1EAEC',
200: '#DDCCD0',
300: '#C9ADB3',
400: '#A06F7A',
500: '#773141',
600: '#6B2C3B',
700: '#471D27',
800: '#36161D',
900: '#240F14',
},
'yellow': {
100: '#FFF8E7',
200: '#FFEDC4',
300: '#FFE2A0',
400: '#FFCC59',
500: '#FFB612',
600: '#E6A410',
700: '#996D0B',
800: '#735208',
900: '#4D3705',
},
'green': {
100: '#E9F7EF',
200: '#C9EBD7',
300: '#A9DFBF',
400: '#68C690',
500: '#27AE60',
600: '#239D56',
700: '#17683A',
800: '#124E2B',
900: '#0C341D',
},
'nephritis': {
100: '#E9F7EF',
200: '#C9EBD7',
300: '#A9DFBF',
400: '#68C690',
500: '#27AE60',
600: '#239D56',
700: '#17683A',
800: '#124E2B',
900: '#0C341D',
},
'teal': {
100: '#EDF9F8',
200: '#D3EFED',
300: '#B8E6E1',
400: '#82D3CB',
500: '#4DC0B5',
600: '#45ADA3',
700: '#2E736D',
800: '#235651',
900: '#173A36',
},
'indigo': {
100: '#F0F1FA',
200: '#D9DCF3',
300: '#C1C7EB',
400: '#939EDC',
500: '#6574CD',
600: '#5B68B9',
700: '#3D467B',
800: '#2D345C',
900: '#1E233E',
},
'purple': {
100: '#F4EFFC',
200: '#E5D8F8',
300: '#D5C0F3',
400: '#B590EB',
500: '#9561E2',
600: '#8657CB',
700: '#593A88',
800: '#432C66',
900: '#2D1D44',
},
'pink': {
100: '#FEF0F5',
200: '#FDDBE6',
300: '#FBC5D7',
400: '#F999B9',
500: '#F66D9B',
600: '#DD628C',
700: '#94415D',
800: '#6F3146',
900: '#4A212F',
},
'coral': {
100: '#FEF2F2',
200: '#FBDFDF',
300: '#F9CCCC',
400: '#F5A6A6',
500: '#F08080',
600: '#D87373',
700: '#904D4D',
800: '#6C3A3A',
900: '#482626',
},
'coffee': {
100: '#F1EDEB',
200: '#DBD3CD',
300: '#C5B8AF',
400: '#9A8373',
500: '#6F4E37',
600: '#644632',
700: '#432F21',
800: '#322319',
900: '#211711',
},
'aqua': {
100: '#E6F4F5',
200: '#BFE3E5',
300: '#99D2D5',
400: '#4DB0B6',
500: '#008E97',
600: '#008088',
700: '#00555B',
800: '#004044',
900: '#002B2D',
},
'seahawks': {
100: '#F0F9EA',
200: '#DAEFC9',
300: '#C3E5A9',
400: '#96D269',
500: '#69BE28',
600: '#5FAB24',
700: '#3F7218',
800: '#2F5612',
900: '#20390C',
},
},
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',
lg: '0.5rem',
full: '9999px',
},
borderWidth: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
'8': '8px',
},
boxShadow: {
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: [
'-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',
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
}),
maxHeight: {
full: '100%',
screen: '100vh',
},
maxWidth: {
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
full: '100%',
},
minHeight: {
'0': '0',
full: '100%',
screen: '80vh',
},
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'),
stroke: {
current: 'currentColor',
},
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',
},
},
variants: {
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'],
cursor: ['responsive'],
display: ['responsive'],
fill: ['responsive'],
flex: ['responsive'],
flexDirection: ['responsive'],
flexGrow: ['responsive'],
flexShrink: ['responsive'],
flexWrap: ['responsive'],
float: ['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'],
order: ['responsive'],
outline: ['responsive', 'focus'],
overflow: ['responsive'],
padding: ['responsive'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
stroke: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'hover', 'focus'],
textDecoration: ['responsive', 'hover', 'focus'],
textTransform: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive', 'hover', 'focus', 'group-hover'],
whitespace: ['responsive'],
width: ['responsive'],
wordBreak: ['responsive'],
zIndex: ['responsive'],
},
corePlugins: {},
plugins: [
require('@tailwindcss/custom-forms'),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment