fonts not getting applied in production build

[hrahul2605]

Hi there,
Currently in the production build (CRA), even when the class is font-serif , Poppins is getting applied.
I'm not sure why is this happening.

I'm also using classnames, where is use something like

const classNames = classnames(className, {
    [`font-${family}`]: true,
    [`font-${type}-${size}`]: true,
    [`font-${weight}`]: true,
    [`font-${type}-base`]: true,
  });

Here all other are custom classes.
This classNames is simply applied to the p tag.

tailwind.config.css

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class',
  theme: {
    fontFamily: {
      serif: ['Merriweather', 'serif'],
      sans: ['Poppins', 'sans-serif'],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

As you can see on the screenshot, class applied is font-serif but displaying font Poppins which should be applied in font-sans

[olets]

Some ideas:

Could be something about the font files. Is Merriwether available in the production build?

Could be something about the cascade. Don't know what your font-display- classes do. If you remove them is it still Poppins?

Could be PurgeCSS. When using a dynamic class like font-${family} there's no guarantee that the class will be included in the production stylesheet. https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

[hrahul2605]

Hi there, thank you for the reply.

It was actually a problem of PurgeCSS, the dynamic class was not getting included in production build.
To solve the problem the, I added the classes on the safelist

Anyone looking for a workaround can do something like this

 purge: {
    enabled: true,
    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    options: {
      safelist: ['font-sans', 'font-serif'],
    },
  },

If there are any other ways of doing so, please do reply.
I'll mark this as resolved as of now.

P.S - i forgot to update this discussion

[olets]

Cool. My preference has been to do it in the template — something like

classnames(className, {
  'font-sans': myCondition,
  'font-serif': !myCondition,
  ...
})

Then I don't have to look at or manage the safelist. (Though with Tailwind 3 coming up safelist might the better solution, makes it easy to cut out code that JIT makes unnecessary)