defaultTheme 未使用 Tailwind CSS 定义

Question

我当时正在做一个项目，我使用了React、Next.js和Tailwind CSS，并且我在样式上做了一些自定义，比如使用react-slick作为slider，我将自定义CSS应用到react-slick滑块类并根据需要制作了滑块到...但同时我正在尝试将默认的自定义字体应用于我的整个项目。在这种情况下，我对文件进行了一些更改

文件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/光滑主题.css

ReferenceError：默认主题未定义

我的 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],
      },
    }
  }
}