defaultTheme不是使用顺风CSS定义的

Question

我在一个项目中使用了React, Next.js和顺风CSS，我在样式上做了一些自定义，如使用React -slick滑块为，我应用自定义CSS反应光滑滑块类和滑块，因为我想…但同时，我试图将默认的自定义字体应用到我的整个项目。在这种情况下，我对

文件做了一些更改

文件tailwind.config.js

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

之后，我得到了一个编译错误:

。/node_modules/下/dist/构建/webpack/加载器/css-loader/src/index.js ? ?规则集[1].rules [2] .oneOf [7] .use[1] !。/node_modules/下/dist/构建/webpack/加载器/postcss-loader/src/index.js ? ?规则集[1].rules [2] .oneOf [7] .use[2] !。/node_modules/slick-carousel/的/slick-theme.css

ReferenceError: defaultTheme is not defined

My Tailwind CSSConfig.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],
},
}
}
}