Skip to content

Instantly share code, notes, and snippets.

@jackabox
Created June 4, 2020 14:41
Show Gist options
  • Save jackabox/317c74b4124fea8f6500da23109edb2f to your computer and use it in GitHub Desktop.
Save jackabox/317c74b4124fea8f6500da23109edb2f to your computer and use it in GitHub Desktop.
Tailwind Default Setup (v1.4)
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.container {
width: 100%;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.row {
margin-left: -20px;
margin-right: -20px;
}
.column {
margin-left: 20px;
margin-right: 20px;
}
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base';
@import 'tailwindcss/utilities';
module.exports = {
purge: [],
theme: {
screens: {
sm: '360px',
md: '560px',
lg: '768px',
xl: '960px',
xxl: '1200px',
},
textColor: {
primary: 'var(--color-text-primary)',
secondary: 'var(--color-text-secondary)',
tertiary: 'var(--color-text-tertiary)',
'menu-active': 'var(--color-menu-active)',
},
backgroundColor: {
primary: 'var(--color-bg-primary)',
secondary: 'var(--color-bg-secondary)',
tertiary: 'var(--color-bg-tertiary)',
},
blockSpacing: {
px: '1px',
'0': '0',
'1': '5px',
'2': '10px',
'3': '15px',
'4': '20px',
'5': '25px',
'6': '30px',
'7': '35px',
'8': '40px',
'9': '45px',
'10': '50px',
'-1': '-5px',
'-2': '-10px',
'-3': '-15px',
'-4': '-20px',
'-5': '-25px',
'-6': '-30px',
'-7': '-35px',
'-8': '-40px',
'-9': '-45px',
'-10': '-50px',
auto: 'auto',
},
spacing: {
auto: 'auto',
'1/12': '8.33333333%',
'2/12': '16.66666667%',
'3/12': '25%',
'4/12': '33.33333333%',
'5/12': '41.66666667%',
'6/12': '50%',
'7/12': '58.33333333%',
'8/12': '66.66666667%',
'9/12': '75%',
'10/12': '83.33333333%',
'11/12': '91.66666667%',
'12/12': '100%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'5/5': '100%',
full: '100%',
},
width: theme => ({
...theme('spacing'),
screen: '100vw',
}),
height: theme => ({
screen: '100vh',
auto: 'auto',
full: '100%',
}),
minHeight: theme => ({
screen: '100vh',
auto: 'auto',
}),
maxWidth: theme => ({
...theme('spacing'),
screen: '100vw',
}),
minWidth: theme => ({
...theme('spacing'),
screen: '100vw',
}),
margin: theme => ({
...theme('blockSpacing'),
}),
padding: theme => ({
...theme('blockSpacing'),
}),
extend: {},
},
variants: {},
plugins: [],
corePlugins: {
container: false,
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment