TailwindCSS - 添加字体大小

Posted 2023-03-06

【中文标题】TailwindCSS - 添加字体大小

【英文标题】：TailwindCSS - adding fontSize

【发布时间】：2020-06-22 09:53:50

【问题描述】：

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

【参考方案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 中阅读有关扩展默认主题的更多信息：

如果您想保留主题选项的默认值，但 还添加新值，在 theme.extend 键下添加您的扩展。

例如，如果您想添加一个额外的断点但保留 现有的，您可以扩展屏幕属性：

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