TailwindCSS - adding fontSize

Question

TailwindCSS 1.2.0

What I'm doing wrong? if I add fontSize as below text-7xl doesn't show up as the new optional value and text-6xl disappear.

module.exports = {
    important: true,
    theme: {
        fontFamily: {
            'theme-f1': ['"Oswald"', "sans-serif"],
            'theme-f2': ['"Lora"', "serif"],
            'theme-f3': ['"Bebas Kai"', "sans-serif"],
            'theme-f4': ['"Open Sans"', "sans-serif"],
        },
        fontSize: {
            '7xl': '7rem',
        },
        extend: {
            colors: {
                'theme-c1': '#006c32',
                'theme-c1-b': '#6c8213',
                'theme-c2': '#000000',
                'theme-c3': '#ffffff',
            }
        },
    },
    variants: {
        letterSpacing: ['responsive', 'hover', 'focus'],
    },
    plugins: [],
}

Answer 1

Currently you are overriding the default font sizes, you have to extend them if you want to add new font sizes without overriding the default ones:

module.exports = {
    important: true,
    theme: {
        fontFamily: {
            'theme-f1': ['"Oswald"', "sans-serif"],
            'theme-f2': ['"Lora"', "serif"],
            'theme-f3': ['"Bebas Kai"', "sans-serif"],
            'theme-f4': ['"Open Sans"', "sans-serif"],
        },
        extend: {
            fontSize: {
                '7xl': '7rem',
            },
            colors: {
                'theme-c1': '#006c32',
                'theme-c1-b': '#6c8213',
                'theme-c2': '#000000',
                'theme-c3': '#ffffff',
            }
        },
    },
    variants: {
        letterSpacing: ['responsive', 'hover', 'focus'],
    },
    plugins: [],
}

Afterwards compile your assets and you should have the default font sizes and your custom font size available.

You can read more about extending the default theme in the docs:

If you'd like to preserve the default values for a theme option but also add new values, add your extensions under the theme.extend key.

For example, if you wanted to add an extra breakpoint but preserve the existing ones, you could extend the screens property:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '2xl': '1440px',
      }
    }
  }
}