TailwindCSS -添加fontSize

Question

TailwindCSS 1.2.0

我做错什么了？如果我在下面添加fontSize，文本-7XL不会显示为新的可选值，而文本-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: [],
}

然后编译您的资产，您应该有默认的字体大小和自定义字体大小可用。

您可以阅读有关在文档中扩展默认主题的更多信息。

如果希望保留主题选项的默认值，但也要添加新值，请在theme.extend键下添加扩展。 例如，如果您想要添加额外的断点但保留现有的断点，则可以扩展screens属性：

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