TailwindCSS - 添加字体大小答案

【问题标题】：TailwindCSS - adding fontSizeTailwindCSS - 添加字体大小
【发布时间】：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: [],
}

【问题讨论】：

标签： tailwind-css

【解决方案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',
      }
    }
  }
}

【讨论】：