next.js Tailwind中斜体字体的标准化排版

8xiog9wr  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(119)

我正试图在我的团队正在建设的网站上标准化排版,我们决定在Tailwind中使用以下自定义实用程序类。现在,对于small-italicized,我们也希望文本是斜体的,但是,根据我的研究,fontSize只接受lineHeightletterSpacingfontWeight。如果我想把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的文档,但我不认为我找到了任何解决这个问题的方法。

57hvy0tb

57hvy0tb1#

您可以在Tailwind处理的CSS文件中应用font-style,如下所示:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-small-italicized {
    font-style: italic;
  }
}

或者作为一个通过Tailwind插件添加的实用程序类:

/** @type {import('tailwindcss').Config} */
export default {
  // …
  plugins: [
    require('tailwindcss/plugin')(({ addUtilities }) => {
      addUtilities({
        '.text-small-italicized': {
          fontStyle: 'italic',
        },
      });
    }),
  ],
}

此外,你可以进一步推断Tailwind插件路线,如果你想的话,你可以把所有东西都放在一个地方。

相关问题