A helper function to adjust every TailwindCSS font-size by a relative amount.
const defaultTheme = require('tailwindcss/defaultTheme');
const adjustFontSizes = (adjustFontSizeBy) => {
const getAdjustedSize = (sizeName) => {
const [fontSizeRem, { lineHeight: lineHeightRem }] = defaultTheme.fontSize[sizeName];
const fontSize = parseFloat(fontSizeRem) + adjustFontSizeBy;
const lineHeight = parseFloat(lineHeightRem);
const next = [`${fontSize}rem`, { lineHeight: `${lineHeight}rem` }];
return next;
};
return {
xs: getAdjustedSize('xs'),
sm: getAdjustedSize('sm'),
base: getAdjustedSize('base'),
lg: getAdjustedSize('lg'),
xl: getAdjustedSize('xl'),
'2xl': getAdjustedSize('2xl'),
'3xl': getAdjustedSize('3xl'),
'4xl': getAdjustedSize('4xl'),
'5xl': getAdjustedSize('5xl'),
'6xl': getAdjustedSize('6xl'),
'7xl': getAdjustedSize('7xl'),
'8xl': getAdjustedSize('8xl'),
'9xl': getAdjustedSize('9xl'),
};
};
module.exports = {
purge: {
enabled: true,
content: ['components', 'features', 'lib', 'pages', 'providers', 'sites'].map(
(dir) => `./${dir}/**/*.{js,jsx,ts,tsx}`,
),
},
theme: {
extend: {
fontFamily: {
body: ['aktiv-grotesk', ...defaultTheme.fontFamily.sans],
sans: ['aktiv-grotesk', ...defaultTheme.fontFamily.sans],
},
},
fontSize: adjustFontSizes(-0.125),
},
};
From 5xl, The line height wrong ...