60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
|
module.exports = ({ addBase, theme, addUtilities }) => {
|
||
|
|
const commonHeaderStyles = {
|
||
|
|
display: 'inline-block',
|
||
|
|
}
|
||
|
|
const headerStyles = {
|
||
|
|
...commonHeaderStyles,
|
||
|
|
fontFamily: theme('fontFamily.display'),
|
||
|
|
fontWeight: theme('fontWeight.bold'),
|
||
|
|
lineHeight: theme('lineHeight.sm'),
|
||
|
|
}
|
||
|
|
const headerStylesStrong = {
|
||
|
|
...commonHeaderStyles,
|
||
|
|
fontFamily: theme('fontFamily.display'),
|
||
|
|
fontWeight: theme('fontWeight.black'),
|
||
|
|
lineHeight: theme('lineHeight.none'),
|
||
|
|
textShadow: theme('dropShadow.title'),
|
||
|
|
}
|
||
|
|
const headers = {
|
||
|
|
h1: {
|
||
|
|
...headerStylesStrong,
|
||
|
|
fontSize: theme('fontSize.4xl'),
|
||
|
|
marginBottom: '1em',
|
||
|
|
},
|
||
|
|
h2: {
|
||
|
|
...headerStylesStrong,
|
||
|
|
fontSize: theme('fontSize.3xl'),
|
||
|
|
marginBottom: '0.75em',
|
||
|
|
},
|
||
|
|
h3: {
|
||
|
|
...headerStylesStrong,
|
||
|
|
fontSize: theme('fontSize.2xl'),
|
||
|
|
marginBottom: '0.75em',
|
||
|
|
},
|
||
|
|
h4: {
|
||
|
|
...headerStyles,
|
||
|
|
fontSize: theme('fontSize.xl'),
|
||
|
|
marginBottom: '0.625em',
|
||
|
|
},
|
||
|
|
h5: {
|
||
|
|
...headerStyles,
|
||
|
|
fontSize: theme('fontSize.lg'),
|
||
|
|
marginBottom: '0.5em',
|
||
|
|
},
|
||
|
|
h6: {
|
||
|
|
...headerStyles,
|
||
|
|
fontSize: theme('fontSize.normal'),
|
||
|
|
marginBottom: '0.375em',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
// bind styles to tags
|
||
|
|
addBase(headers)
|
||
|
|
|
||
|
|
// create .h# utils (e.g. `tw-h6` etc)
|
||
|
|
addUtilities(Object.entries(headers).reduce((utils, [tag, styles]) => ({
|
||
|
|
...utils,
|
||
|
|
[`.${tag}`]: styles,
|
||
|
|
}), {}))
|
||
|
|
}
|