Responsive font-size for Tailwindcss

tailwind.responsive-font.js

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function ({ addBase, theme }) {
    addBase({
        ':root': {
            '--min-fs': theme('variable-font.min-fs'),
            '--max-fs': theme('variable-font.max-fs'),
            '--min-vw': theme('variable-font.min-vw'),
            '--max-vw': theme('variable-font.max-vw'),
            '--min-fs-rem': 'var(--min-fs) * 1rem',
            '--max-fs-rem': 'var(--max-fs) * 1rem',
            '--min-vw-rem': 'var(--min-vw) * 1rem',
            '--slope': '(var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw))',
            'font-size': 'clamp(var(--min-fs-rem), var(--min-fs-rem) + var(--slope), var(--max-fs-rem))',
        },
    })
}, {
    theme: {
        'variable-font': {
            'min-fs': '1', // 16px
            'max-fs': '1.25', // 20px
            'min-vw': '20', // 320px
            'max-vw': '45', // 720px
        }
    }
})