TailwindCSS - 添加字体大小

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

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

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

TailwindCSS - 添加字体大小

TailwindCSS - adding fontSize

tailwind-css