tailwindcss：在插件中添加字体答案

【问题标题】：tailwindcss: add font-face in plugintailwindcss：在插件中添加字体
【发布时间】：2021-08-16 17:21:31
【问题描述】：

我尝试将一些字体包含在我想在多个项目中使用的顺风预设中。

在文档中仅描述了如何在 css 文件的基础层中定义字体，请参见此处：https://tailwindcss.com/docs/adding-base-styles#font-face-rules。

但是，将它包含在可分发的预设中（据我所知）是将其包含在插件中。但是我不明白是什么问题。

我的方法如下：

const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')


module.exports = {
  prefix: '',
  mode: 'jit',
  purge: {
    content: [
      './src/**/*.{html,ts,css,scss,sass,less,styl}',
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['myfont', ...defaultTheme.fontFamily.sans]
      },
    }
  },
  variants: {
    extend: {},
  },
  plugins: [ plugin(function ({ addBase}) {
    const fonts = {
      '@font-face': [
        {
          fontFamily: 'My Font',
          fontStyle: 'normal',
          fontWeight: 400,
          src:
            'url("./fonts/my-font.woff") format("woff");'
        },
      ]
    };
    addBase(fonts);
  })],
};

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您的插件看起来正确，但@font-face 规则中定义的fontFamily 应该与font-family CSS 规则中定义的fontFamily 相同。尝试在您的主题扩展配置中将 myfont 更改为 My Font。

请参阅此Tailwind Play REPL 以获取示例。

【讨论】：