我正试图在我的团队正在建设的网站上标准化排版,我们决定在Tailwind中使用以下自定义实用程序类。现在,对于small-italicized
,我们也希望文本是斜体的,但是,根据我的研究,fontSize
只接受lineHeight
,letterSpacing
和fontWeight
。如果我想把small-italicized
也变成斜体,应该放在哪里?
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
'./src/shared/components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontSize: {
'heading-1': ['1.5rem', { fontWeight: 700 }],
'heading-2': ['1.375rem', { fontWeight: 700 }],
'heading-3': ['1.125rem', { fontWeight: 700 }],
'bold-body': ['1rem', { fontWeight: 700 }],
body: ['1rem', { fontWeight: 400 }],
small: ['0.875rem', { fontWeight: 400 }],
'small-italicized': ['0.875rem', { fontWeight: 400 }],
label: ['0.875rem', { fontWeight: 300 }],
'graph-label': ['0.75rem', { fontWeight: 500 }],
'graph-number': ['0.625rem', { fontWeight: 400 }],
},
},
},
plugins: [],
};
我尝试在small-italicized
中添加fontStyle
属性,如下所示:
'small-italicized': ['0.875rem', { fontWeight: 400, fontStyle: 'italic' }]
但是,这不会应用所需的字体样式。我也试着阅读了Tailwind的文档,但我不认为我找到了任何解决这个问题的方法。
1条答案
按热度按时间57hvy0tb1#
您可以在Tailwind处理的CSS文件中应用
font-style
,如下所示:或者作为一个通过Tailwind插件添加的实用程序类:
此外,你可以进一步推断Tailwind插件路线,如果你想的话,你可以把所有东西都放在一个地方。