Попутный ветер CSS - добавление fontSize - PullRequest
Новая
       3

Попутный ветер CSS - добавление fontSize

1 голос
/ 10 марта 2020

попутный ветер CSS 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 Ответ

1 голос
/ 12 марта 2020

В настоящее время вы переопределяете размеры шрифтов по умолчанию, вы должны расширить их, если хотите добавить новые размеры шрифтов, не переопределяя размеры шрифтов по умолчанию: 

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.

Например, если вы хотите добавить дополнительную точку останова, но сохранить существующие, вы можете расширить свойство экрана: 

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