Skip to content

Instantly share code, notes, and snippets.

@leMaur
Last active March 8, 2021 17:52
Show Gist options
  • Save leMaur/3c66839713bf80a314d31625fd99214a to your computer and use it in GitHub Desktop.
Save leMaur/3c66839713bf80a314d31625fd99214a to your computer and use it in GitHub Desktop.
Responsive font-size for Tailwindcss
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function ({ addBase, theme }) {
addBase({
':root': {
'--rf-min-fs': theme('responsive-font.min-fs'),
'--rf-max-fs': theme('responsive-font.max-fs'),
'--rf-min-vw': theme('responsive-font.min-vw'),
'--rf-max-vw': theme('responsive-font.max-vw'),
'--rf-min-fs-rem': 'var(--rf-min-fs) * 1rem',
'--rf-max-fs-rem': 'var(--rf-max-fs) * 1rem',
'--rf-min-vw-rem': 'var(--rf-min-vw) * 1rem',
'--rf-slope': '(var(--rf-max-fs) - var(--rf-min-fs)) * (100vw - var(--rf-min-vw-rem)) / (var(--rf-max-vw) - var(--rf-min-vw))',
'font-size': 'clamp(var(--rf-min-fs-rem), var(--rf-min-fs-rem) + var(--rf-slope), var(--rf-max-fs-rem))',
},
})
}, {
theme: {
'responsive-font': {
'min-fs': '1', // 16px
'max-fs': '1.25', // 20px
'min-vw': '20', // 320px
'max-vw': '45', // 720px
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment