defaultTheme 未使用 Tailwind CSS 定义

Question

我正在开发一个项目，其中使用了 React、Next.js 和 Tailwind CSS，并且我在样式中做了一些自定义，例如使用 react-slick 来实现 slider，并且我应用了自定义 CSS 反应光滑的滑块类并按照我想要的方式制作滑块...但同时我正在尝试将默认的自定义字体应用于我的整个项目。在这种情况下，我对

的文件做了一些更改

文件tailwind.config.js

theme: {
  fontFamily: {
    customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
  },
  extend: {},
},

之后，我得到了编译错误：

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/ next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/slick-carousel/slick /slick-theme.css

参考错误：默认主题未定义

我的 Tailwind CSS Config.js 文件供参考

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
    },
    extend: {
      fontFamily: {
        customfontname: ['Segoe UI',
                         'Helvetica Neue',
                         'Arial',
                         'sans-serif',
                         ...defaultTheme.fontFamily.customfontname],
      },
    }
  },
  plugins: [],
};

这是试图帮助我的人的代码，但我遇到了与我提到的相同的错误......

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      customfontname: [
        "Segoe UI",
        "Helvetica Neue",
        "Arial",
        "sans-serif",
        ...defaultTheme.fontFamily.customfontname,
      ],
    },
    extend: {},
  },
  plugins: [],
};

Answer 1

将您的

customfontname

添加到主题的

extend

中

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {     // 👈 Add it inside this 
     fontFamily: {
      customfontname: ['Segoe UI', 
                       'Helvetica Neue', 
                       'Arial',
                       'sans-serif',
                       /*...*/ defaultTheme.fontFamily.customfontname],
      },
    }
  }
}

Answer 2

添加“require”解决了我的类似问题。不过，我想知道，这有什么缺点吗？我想我现在注意到我的字体首先加载默认字体一秒钟，然后加载自定义字体，但我不确定是否总是如此。