Skip to content

Instantly share code, notes, and snippets.

@sidd
Last active Sep 2, 2022
Embed
What would you like to do?
module.exports = {
content: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
fontFamily: {
sans: ['Calibre', /* ... */,'sans-serif']
serif: ["'GT Alpina'", /* ... */, 'serif'],
},
screens: {
xs: '384px',
...screens,
'3xl': '2024px',
},
extend: {
typography: (theme) => ({
DEFAULT: {
css: {
a: {
color: theme('colors.steel'),
},
},
},
}),
container: {
padding: {
DEFAULT: '2rem',
md: '3rem',
xl: '4rem',
},
},
colors: {
blurple: '#4840bb',
'blurple-light': '#958CF2',
'eggplant-light': '#5a4a80',
lavender: '#dadef1',
lavender2: '#BDC6F5',
peach: '#df8c5e',
periwinkle: '#7086C9',
caracara: '#ad6035',
// ...
},
breakpoints: {
xs: '384px',
},
gridTemplateColumns: {
'60/40': '6fr 4fr',
header: 'minmax(0, 1fr) auto minmax(0, 1fr)',
},
// When adding a font size, add classes for *all* breakpoints (i.e. -mobile, -xl) to reduce
// cognitive load when using in app
fontSize: {
// Heading 1 styles
h1: ['63.3px', { lineHeight: 0.9, letterSpacing: '-0.03em' }],
'h1-alt': ['60px', { lineHeight: 0.9, letterSpacing: '-0.05em' }],
'h1-mobile': ['42.2px', { lineHeight: 0.9, letterSpacing: '-0.03em' }],
// ...
// Body styles
body: ['18px', { lineHeight: 1.2 }],
'body-mobile': ['18px', { lineHeight: 1.2 }],
'body-xl': ['22.5px', { lineHeight: 1.2 }],
// Body Small styles
'body-sm': ['16px', { lineHeight: 1.2 }],
'body-sm-mobile': ['16px', { lineHeight: 1.2 }],
'body-sm-xl': ['20px', { lineHeight: 1.2 }],
// ...
}
},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/line-clamp')],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment