tailwind-css - TailwindCSS - 添加 fontSize

Question

TailwindCSS 1.2.0

我做错了什么？如果我添加 fontSize 如下，则 text-7xl 不会显示为新的可选值并且 text-6xl 消失。

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

目前您正在覆盖默认字体大小，如果要添加新字体大小而不覆盖默认字体大小，则必须扩展它们:

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: [],
}

然后编译您的 Assets ，您应该可以使用默认字体大小和自定义字体大小。

您可以在 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',
      }
    }
  }
}