Стандартизация типографики для стиля шрифта, выделенного курсивом в Tailwind ⇐ CSS
-
Гость
Стандартизация типографики для стиля шрифта, выделенного курсивом в Tailwind
Я пытаюсь стандартизировать типографику на веб-сайте, который создает моя команда, и мы решили использовать следующие пользовательские служебные классы в Tailwind. Теперь для small-italicized мы также хотим, чтобы текст был выделен курсивом, однако, как я исследовал, fontSize принимает только lineHeight , letterSpacing и fontWeight. Если бы я хотел также сделать small-italicized курсивом, куда бы это пошло?
tailwind.config.js
/** @type {import('tailwindcss').Config} */ модуль.экспорт = { содержание: [ './src/pages/**/*.{js,ts,jsx,tsx}', './src/comComponents/**/*.{js,ts,jsx,tsx}', './src/shared/comComponents/**/*.{js,ts,jsx,tsx}', ], тема: { продлевать: { размер шрифта: { 'heading-1': ['1.5rem', {fontWeight: 700 }], 'heading-2': ['1.375rem', {fontWeight: 700 }], 'heading-3': ['1.125rem', {fontWeight: 700 }], 'bold-body': ['1rem', { FontWeight: 700 }], тело: ['1rem', { FontWeight: 400 }], маленький: ['0.875rem', { FontWeight: 400 }], 'маленький курсив': ['0,875rem', { FontWeight: 400 }], метка: ['0.875rem', { FontWeight: 300 }], 'graph-label': ['0,75rem', {fontWeight: 500 }], 'номер-графика': ['0,625рем', { FontWeight: 400 }], }, }, }, плагины: [], }; Я попробовал добавить свойство fontStyle внутри маленького курсива следующим образом:
'small-italicized': ['0.875rem', { FontWeight: 400, FontStyle: 'Italic' }] Однако это не применяет желаемый стиль шрифта. Я также пытался прочитать документацию Tailwind по этому поводу, но не думаю, что нашел что-либо, что касалось бы этого вопроса.
Я пытаюсь стандартизировать типографику на веб-сайте, который создает моя команда, и мы решили использовать следующие пользовательские служебные классы в Tailwind. Теперь для small-italicized мы также хотим, чтобы текст был выделен курсивом, однако, как я исследовал, fontSize принимает только lineHeight , letterSpacing и fontWeight. Если бы я хотел также сделать small-italicized курсивом, куда бы это пошло?
tailwind.config.js
/** @type {import('tailwindcss').Config} */ модуль.экспорт = { содержание: [ './src/pages/**/*.{js,ts,jsx,tsx}', './src/comComponents/**/*.{js,ts,jsx,tsx}', './src/shared/comComponents/**/*.{js,ts,jsx,tsx}', ], тема: { продлевать: { размер шрифта: { 'heading-1': ['1.5rem', {fontWeight: 700 }], 'heading-2': ['1.375rem', {fontWeight: 700 }], 'heading-3': ['1.125rem', {fontWeight: 700 }], 'bold-body': ['1rem', { FontWeight: 700 }], тело: ['1rem', { FontWeight: 400 }], маленький: ['0.875rem', { FontWeight: 400 }], 'маленький курсив': ['0,875rem', { FontWeight: 400 }], метка: ['0.875rem', { FontWeight: 300 }], 'graph-label': ['0,75rem', {fontWeight: 500 }], 'номер-графика': ['0,625рем', { FontWeight: 400 }], }, }, }, плагины: [], }; Я попробовал добавить свойство fontStyle внутри маленького курсива следующим образом:
'small-italicized': ['0.875rem', { FontWeight: 400, FontStyle: 'Italic' }] Однако это не применяет желаемый стиль шрифта. Я также пытался прочитать документацию Tailwind по этому поводу, но не думаю, что нашел что-либо, что касалось бы этого вопроса.
Мобильная версия