Skip to content

Instantly share code, notes, and snippets.

@JamieMason
Created November 30, 2020 11:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamieMason/33d77fb73252dc4b40013b8928933549 to your computer and use it in GitHub Desktop.
Save JamieMason/33d77fb73252dc4b40013b8928933549 to your computer and use it in GitHub Desktop.
A helper function to adjust every TailwindCSS font-size by a relative amount.

Adjust Default Tailwind CSS Font Sizes

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),
  },
};
@IRediTOTO
Copy link

From 5xl, The line height wrong ...
image

@JamieMason
Copy link
Author

Can you add more detail @IRediTOTO? what do you expect and what do you get instead?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment