Skip to content

Instantly share code, notes, and snippets.

@shanerbaner82

shanerbaner82/tailwind.config.js

Created August 8, 2020 13:42
Show Gist options
  • Save shanerbaner82/8d0eaec6c22aed89228f904460ea6098 to your computer and use it in GitHub Desktop.
Save shanerbaner82/8d0eaec6c22aed89228f904460ea6098 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme');
module.exports = {
prefix: 'tw-',
important: true,
shadowLookup: true,
purge: {
content: [
'./resources/views/**/*.blade.php',
'./resources/assets/js/**/*.vue',
],
},
theme: {
colors: {
purple: '#8a00ff',
brown: '#a0724b',
black: '#22292f',
grey: '#b8c2cc',
red: '#c9302c',
orange: '#f0750f',
green: '#5cb85c',
wheat: '#ffefaf',
aqua: '#45b39c',
blue: '#4799e1',
violet: '#9386e2',
indigo: '#5c6ac4',
salmon: '#e29390',
pink: '#d99e88',
yellow: '#f6cf2c',
transparent: 'transparent',
},
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
standard: '1440px',
xxl: '1600px',
twok: '2000px',
xxxl: '2560px',
dt: '2560px',
big: '2800px',
threek: '3000px',
imac: '4000px',
fivek: '5000px',
},
container: {
center: true,
padding: '1rem',
},
extend: {
colors: {
...colors,
'true-black': '#000',
'brown-light': '#c1af9d',
'brown-medium': '#978878',
'brown-dark': '#1e1400',
'grey-darkest': '#333c4a',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey-custom': '#c2c2c2',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'grey-blue': '#323b4b',
'grey-ecs': '#d3d2ce',
'red-darkest': '#710e0b',
'red-darker': '#911e1a',
'red-dark': '#ac2925',
'red-light': '#d64440',
'red-lighter': '#d9534f',
'red-lightest': '#ffb4b4',
'orange-darker': '#d25010',
'orange-dark': '#d36408',
'orange-light': '#f89406',
'orange-lighter': '#f39c12',
'orange-lightest': '#f0ad4e',
'green-darkest': '#265228',
'green-darker': '#2b542c',
'green-dark': '#4ca54c',
'green-light': '#7acc7a',
'green-lighter': '#93de93',
'green-lightest': '#def7de',
'green-pct-header': '#adba00',
'green-b12': '#8ede9e',
'royal-blue': '#113fbd',
'blue-darkest': '#204d74',
'blue-darker': '#286090',
'blue-dark': '#3581c4',
'blue-aqua': '#95e6e4',
'blue-light': '#65b3e7',
'blue-lighter': '#87c7e5',
'blue-lightest': '#c4e3f3',
'violet-dark': '#9643f6',
'indigo-dark': '#202e78',
'indigo-lighter': '#b3bcf5',
'pink-darker': '#a94442',
'pink-dark': '#d9534f',
'pink-light': '#e4b9b9',
'pink-lighter': '#ebcccc',
'pink-lightest': '#f2dede',
'pink-light-custom': '#fef9ec',
'yellow-dark': '#ddb91f',
'yellow-light': '#e7d3ad',
'yellow-lightest': '#fef3de',
'baby-blue-dark': '#e2eaff',
'baby-blue': '#e2f1ff',
'baby-blue-light': '#f0f9ff',
'baby-blue-lighter': '#f8f8f8',
'wheat-light': '#fff3c3',
'wheat-lighter': '#fff6d4',
'aqua-dark': '#32917d',
'aqua-light': '#cfffef',
'aqua-lighter': '#e0fff4',
},
boxShadow: {
'custom-2xl': '0 2px 5px 0px rgba(0, 0, 0, 0.5)',
'custom-4xl': '0 8px 25px 0px rgba(0, 0, 0, 0.5)',
},
minHeight: {
'350': '350px',
},
maxWidth: {
'10xl': '128rem',
'1525px': '1525px',
'3000': '3000px',
initial: 'initial',
'110vw': '110vw',
'115vw': '115vw',
'130vw': '130vw',
},
inset: {
50: '50px',
'1/2': '50%',
'-1vw': '-1vw',
'-1.3vw': '-1.3vw',
'-3vw': '-3vw',
'-4vw': '-4vw',
'-5vw': '-5vw',
'-5.5vw': '-5.5vw',
'-9vw': '-9vw',
'-13vw': '-13vw',
'-14vw': '-14vw',
'-17vw': '-17vw',
'-28vw': '-28vw',
'-32vw': '-32vw',
'-35vw': '-35vw',
'1vw': '1vw',
'3vw': '3vw',
'4vw': '4vw',
'5vw': '5vw',
'8vw': '8vw',
'10vw': '10vw',
'17vw': '17vw',
'19.5vw': '19.5vw',
'31/1': '31%',
},
margin: {
'80': '20rem',
'96': '24rem',
'-21': '-5.2rem',
'-28': '-7rem',
'-36': '-9rem',
'-44': '-11rem',
'-1/2': '-5%',
'-1/4': '-25%',
'0.1vw': '0.1vw',
'-0.1vw': '-0.1vw',
'-0.5vw': '-0.5vw',
'-0.8vw': '-0.8vw',
'-1.3vw': '-1.3vw',
'-1.5vw': '-1.5vw',
'-1.6vw': '-1.6vw',
'-3vw': '-3vw',
'-2vw': '-2vw',
'-2.4vw': '-2.4vw',
'-2.6vw': '-2.6vw',
'-2.8vw': '-2.8vw',
'-2.9vw': '-2.9vw',
'-3.2vw': '-3.2vw',
'-3.3vw': '-3.3vw',
'-3.5vw': '-3.5vw',
'-3.6vw': '-3.6vw',
'-3.8vw': '-3.8vw',
'-4vw': '-4vw',
'-4.2vw': '-4.2vw',
'-4.4vw': '-4.4vw',
'-4.5vw': '-4.5vw',
'-4.6vw': '-4.6vw',
'-4.7vw': '-4.7vw',
'-5vw': '-5vw',
'-5.2vw': '-5.2vw',
'-6vw': '-6vw',
'-6.3vw': '-6.3vw',
'-7vw': '-7vw',
'-7.5vw': '-7.5vw',
'-8vw': '-8vw',
'-9vw': '-9vw',
'-9.5vw': '-9.5vw',
'-10vw': '-10vw',
'-11vw': '-11vw',
'-12vw': '-12vw',
'-15.5vw': '-15.5vw',
'-15vw': '-15vw',
'-16vw': '-16vw',
'-17vw': '-17vw',
'-18vw': '-18vw',
'-19.5vw': '-19.5vw',
'-22vw': '-22vw',
'-23vw': '-23vw',
'-27vw': '-27vw',
'-30vw': '-30vw',
'-40vw': '-40vw',
'10.8vw': '10.8vw',
'7.5vw': '7.5vw',
'8.6vw': '8.6vw',
'1vw': '1vw',
'1.4vw': '1.4vw',
'2vw': '2vw',
'3vw': '3vw',
'3.5vw': '3.5vw',
'4vw': '4vw',
'5vw': '5vw',
'6vw': '6vw',
'6.6vw': '6.6vw',
'9vw': '9vw',
'10vw': '10vw',
'10.5vw': '10.5vw',
'11vw': '11vw',
'12vw': '12vw',
'15vw': '15vw',
'22vw': '22vw',
'24vw': '24vw',
'30vw': '30vw',
'72': '20rem',
'74': '24rem',
'76': '28rem',
'78': '32rem',
'86': '40rem',
'94': '48rem',
'102': '56rem',
'110': '64rem',
'-72': '-20rem',
'-74': '-24rem',
'-76': '-28rem',
'-78': '-32rem',
'-86': '-40rem',
'-90': '-45rem',
'-94': '-48rem',
'-102': '-56rem',
'-110': '-64rem',
},
width: {
'1/7': '14.2857143%',
'2/7': '28.5714286%',
'3/7': '42.8571429%',
'4/7': '57.1428571%',
'5/7': '71.4285714%',
'6/7': '85.7142857%',
initial: 'initial',
'2px': '2px',
'4px': '4px',
'44': '11rem',
'68': '17rem',
'72': '18rem',
'76': '19rem',
'88': '22rem',
'92': '23rem',
'96': '24rem',
'100': '25rem',
'104': '26rem',
'112': '28rem',
'124': '31rem',
'126': '31.5rem',
'132': '33rem',
'136': '34rem',
'160': '40rem',
'178': '45rem',
'200': '50rem',
'204': '51rem',
'208': '52rem',
'232': '58rem',
'272': '68rem',
'292': '75rem',
'360': '90rem',
'380': '95rem',
'408': '102rem',
'436': '109rem',
'488': '122rem',
'524': '131rem',
'42p': '42%',
'43p': '43%',
'48p': '48%',
'52p': '52%',
'5/7': '71%',
'84p': '84%',
'450px': '450px',
'460px': '460px',
'500px': '500px',
'525px': '525px',
'600px': '600px',
'980px': '980px',
'1080px': '1080px',
'1800px': '1800px',
'2050px': '2050px',
full5: '105%',
full25: '125%',
full50: '150%',
'0.1vw': '0.1vw',
'1.5vw': '1.5vw',
'2.5vw': '2.5vw',
'3vw': '3vw',
'4vw': '4vw',
'6.3vw': '6.3vw',
'7vw': '7vw',
'9vw': '9vw',
'9.5vw': '9.5vw',
'11vw': '11vw',
'15vw': '15vw',
'20vw': '20vw',
'22vw': '22vw',
'25vw': '25vw',
'26vw': '26vw',
'27vw': '27vw',
'29vw': '29vw',
'30vw': '30vw',
'31vw': '31vw',
'32vw': '32vw',
'33vw': '33vw',
'34vw': '34vw',
'35vw': '35vw',
'36vw': '36vw',
'36.5vw': '36.5vw',
'38vw': '38vw',
'40vw': '40vw',
'41vw': '41vw',
'41.5vw': '41.5vw',
'42vw': '42vw',
'42.5vw': '42.5vw',
'43.5vw': '43.5vw',
'45vw': '45vw',
'47vw': '47vw',
'48vw': '48vw',
'50.5vw': '50.5vw',
'51vw': '51vw',
'52vw': '52vw',
'53vw': '53vw',
'53.5vw': '53.5vw',
'55vw': '55vw',
'60vw': '60vw',
'62vw': '62vw',
'64vw': '64vw',
'68.5vw': '68.5vw',
'69vw': '69vw',
'70vw': '70vw',
'72vw': '72vw',
'74.5vw': '74.5vw',
'75vw': '75vw',
'76vw': '76vw',
'78vw': '78vw',
'80vw': '80vw',
'81vw': '81vw',
'85vw': '85vw',
'86vw': '86vw',
'88vw': '88vw',
'90vw': '90vw',
'95vw': '95vw',
'101vw': '101vw',
'104.5vw': '104.5vw',
'107vw': '107vw',
'115vw': '115vw',
'118vw': '118vw',
},
height: {
'11': '2.7rem',
'0.1vw': '0.1vw',
'0.2vw': '0.2vw',
'0.3vw': '0.3vw',
'0.5vw': '0.5vw',
'10vw': '10vw',
'35vw': '35vw',
'20.4vw': '20.4vw',
'46vw': '46vw',
'80': '20rem',
},
lineHeight: {
'3vw': '3vw',
'3.5vw': '3.5vw',
},
fontSize: {
'2.3xl': '1.6rem',
'2.5xl': '1.7rem',
'4.4xl': '2.50rem',
'4.7xl': '2.75rem',
'5.2xl': '3.2rem',
'5.3xl': '3.3rem',
'5.5xl': '3.7rem',
'8xl': '4.5rem',
'9xl': '6rem',
'9.3xl': '6.3rem',
'9.5xl': '7rem',
'10xl': '8rem',
'11xl': '9rem',
'12xl': '10rem',
'13xl': '11rem',
'14xl': '12rem',
'14.5xl': '12.5rem',
'16xl': '14rem',
'24xl': '16rem',
'40xl': '28rem',
'48xl': '32rem',
'0.8vw': '0.8vw',
'1.3vw': '1.3vw',
'1.6vw': '1.6vw',
'1.33vw': '1.33vw',
'1.4vw': '1.4vw',
'2.3vw': '2.3vw',
'2.5vw': '2.5vw',
'2.7vw': '2.7vw',
'3vw': '3vw',
'3.2vw': '3.2vw',
'3.4vw': '3.4vw',
'3.5vw': '3.5vw',
'4vw': '4vw',
'4.5vw': '4.5vw',
'5vw': '5vw',
'5.5vw': '5.5vw',
'6vw': '6vw',
'7vw': '7vw',
'7.5vw': '7.5vw',
'8vw': '8vw',
'8.5vw': '8.5vw',
'9.5vw': '9.5vw',
'10vw': '10vw',
'10.3vw': '10.3vw',
'11vw': '11vw',
'12vw': '12vw',
'13vw': '13vw',
'15vw': '15vw',
},
padding: {
'7': '1.75rem',
'18': '4.5rem',
'80': '20rem',
'88': '22rem',
'96': '24rem',
'100': '25rem',
'104': '26rem',
'0.8vw': '0.8vw',
'1vw': '1vw',
'1.5vw': '1.5vw',
'2vw': '2vw',
'3vw': '3vw',
'3.5vw': '3.5vw',
'4vw': '4vw',
'5vw': '5vw',
'6vw': '6vw',
'7vw': '7vw',
'8vw': '8vw',
'9vw': '9vw',
'11vw': '11vw',
'12vw': '12vw',
'13vw': '13vw',
'15vw': '15vw',
'18vw': '18vw',
'25vw': '25vw',
'30vw': '30vw',
'35vw': '35vw',
'40vw': '40vw',
'45vw': '45vw',
},
borderWidth: {
'3': '3px',
'6': '6px',
'16': '16px',
'0.1vw': '0.1vw',
'0.15vw': '0.15vw',
'0.3vw': '0.3vw',
'0.4vw': '0.4vw',
'1vw': '1vw',
},
},
fontFamily: {
heading: [
'Raleway',
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
sans: [
'Source Sans Pro',
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
serif: [
'Roboto Slab',
'Constantia',
'Lucida Bright',
'Lucidabright',
'Lucida Serif',
'Lucida',
'DejaVu Serif',
'Bitstream Vera Serif',
'Liberation Serif',
'Georgia',
'serif',
],
mono: [
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
],
lato: ['Lato'],
},
fontSize: {
xs: '.75rem',
sm: '.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'2.3xl': '1.6rem',
'2.5xl': '1.7rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'4.4xl': '2.50rem',
'4.7xl': '2.75rem',
'5xl': '3rem',
'5.2xl': '3.2rem',
'5.3xl': '3.3rem',
'5.5xl': '3.7rem',
'6xl': '4rem',
'7xl': '5rem',
'8xl': '4.5rem',
'9xl': '6rem',
'9.3xl': '6.3rem',
'9.5xl': '7rem',
'10xl': '8rem',
'11xl': '9rem',
'12xl': '10rem',
'13xl': '11rem',
'14xl': '12rem',
'14.5xl': '12.5rem',
'16xl': '14rem',
'18xl': '16rem',
'20xl': '18rem',
'22xl': '20rem',
'24xl': '16rem',
'40xl': '28rem',
'48xl': '32rem',
'1vw': '1vw',
'1.3vw': '1.3vw',
'1.33vw': '1.33vw',
'1.4vw': '1.4vw',
'1.6vw': '1.6vw',
'1.8vw': '1.8vw',
'2.3vw': '2.3vw',
'2.5vw': '2.5vw',
'2.7vw': '2.7vw',
'3vw': '3vw',
'3.2vw': '3.2vw',
'3.4vw': '3.4vw',
'3.5vw': '3.5vw',
'3.7vw': '3.7vw',
'3.9vw': '3.9vw',
'4vw': '4vw',
'4.5vw': '4.5vw',
'5vw': '5vw',
'5.5vw': '5.5vw',
'6vw': '6vw',
'6.2vw': '6.2vw',
'7vw': '7vw',
'7.5vw': '7.5vw',
'8vw': '8vw',
'8.5vw': '8.5vw',
'9.5vw': '9.5vw',
'10vw': '10vw',
'10.3vw': '10.3vw',
'11vw': '11vw',
'12vw': '12vw',
'13vw': '13vw',
'15vw': '15vw',
},
borderColor: theme => ({
default: theme('colors.grey-light'),
...theme('colors'),
}),
height: theme => ({
auto: 'auto',
...theme('spacing'),
full: '100%',
screen: '100vh',
'80': '20rem',
'96': '24rem',
'120': '30rem',
'128': '36rem',
'160': '40rem',
'200': '50rem',
'224': '56rem',
}),
maxWidth: {
xs: '20rem',
sm: '30rem',
md: '40rem',
lg: '50rem',
xl: '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
full: '100%',
'10xl': '128rem',
'1525px': '1525px',
'3000': '3000px',
initial: 'initial',
'15vw': '15vw',
'110vw': '110vw',
'115vw': '115vw',
'130vw': '130vw',
},
zIndex: {
auto: 'auto',
'0': 0,
'1': 1,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
},
},
variants: {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColor: ['responsive', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: [],
borderColor: ['responsive', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive', 'hover', 'focus'],
borderWidth: ['responsive'],
cursor: ['responsive'],
display: ['responsive', 'hover', 'focus'],
flexDirection: ['responsive'],
flexWrap: ['responsive'],
alignItems: ['responsive'],
alignSelf: ['responsive'],
justifyContent: ['responsive'],
alignContent: ['responsive'],
flex: ['responsive'],
flexGrow: ['responsive'],
flexShrink: ['responsive'],
float: ['responsive'],
fontFamily: ['responsive'],
fontWeight: ['responsive', 'hover', 'focus'],
height: ['responsive'],
lineHeight: ['responsive'],
listStylePosition: ['responsive'],
listStyleType: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
negativeMargin: ['responsive'],
objectFit: ['responsive'],
objectPosition: ['responsive'],
opacity: ['responsive', 'hover', 'focus'],
outline: ['focus'],
overflow: ['responsive'],
padding: ['responsive'],
pointerEvents: ['responsive'],
position: ['responsive'],
inset: ['responsive'],
resize: ['responsive'],
boxShadow: ['responsive', 'hover', 'focus'],
fill: [],
stroke: [],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'hover', 'focus'],
fontSize: ['responsive', 'hover', 'focus'],
fontStyle: ['responsive', 'hover', 'focus'],
textTransform: ['responsive', 'hover', 'focus'],
textDecoration: ['responsive', 'hover', 'focus'],
fontSmoothing: ['responsive'],
letterSpacing: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
wordBreak: ['responsive'],
width: ['responsive'],
zIndex: ['responsive'],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment