Question

我在tailwind.config.js文件中添加了新的字体系列。这些在.font-sans类中可用，但是我也想更改全局字体系列。 'tailwindcss/base'导入在html, body选择器上添加了一个通用的sans serif系列。

是否有办法在配置文件中更改此全局字体系列，而不仅仅是添加新样式来撤消它？

我想将整体CSS保持在最低水平，而不必添加额外的CSS来撤消不需要的样式。我在文档中看不到任何适用于此的选项。

Answer 1

对我来说，它可以覆盖“ sans”，因为默认情况下就是这样。

module.exports = {
  theme: {
    fontFamily: {
      sans: ['"PT Sans"', 'sans-serif']
    }
  },
}

（请注意theme.fontFamily将覆盖这三个默认值，因此，如果复制粘贴上面的代码，则会丢失font-serif和font-mono）

但是用衬线栈之类的东西覆盖'sans'很奇怪，因此在这种情况下，您可以定义该栈并将其应用于html / body标签：

<body class="font-serif"> <!-- Or whatever your named your font stack -->

More about tailwind font families

Answer 2

我使用Inter字体，这是经过数小时的大量建议和教程之后对我有用的东西：

module.exports = {
  important: true,
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [
    './components/**/*.js',
    './pages/**/*.js'],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    extend: {
      fontFamily: {
        sans: [
          '"Inter"',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
    },
  },
  variants: {},
  plugins: [
    require( 'tailwindcss' ),
    require( 'precss' ),
    require( 'autoprefixer' ),
  ],
};

Answer 3

当我希望我的应用使用 Roboto 字体作为默认sans字体时，这对我有用：

在tailwind.config.js中：

const defaultTheme = require('tailwindcss/defaultTheme')

const fontFamily = defaultTheme.fontFamily;
fontFamily['sans'] = [
  'Roboto', // <-- Roboto is a default sans font now
  'system-ui',
  // <-- you may provide more font fallbacks here
];

module.exports = {
  purge: [],
  theme: {
    fontFamily: fontFamily, // <-- this is where the override is happening
    extend: {},
  },
  variants: {},
  plugins: [],
};

此替代变量仅修改font-sans系列，并保留font-serif和font-mono系列。

Answer 4

是的，在这里查看配置tailwind.config.js的文档：https://tailwindcss.com/docs/configuration/

可以在顺风配置中更改基本字体系列吗？

4 个答案: