我正在开发一个项目,使用了React、Next.js和Tailwind CSS。在样式方面,我进行了一些自定义,例如使用react-slick来制作滑块,并且我对react-slick滑块类应用了自定义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
引用错误:defaultTheme未定义
我的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: [],
};
const defaultTheme = require('tailwindcss/defaultTheme')
。请问你的tailwind.config.js
文件中是否也有这行代码? - Layhouttailwind.config.js
文件的顶部。 - Layhoutglobal.css
而不是tailwind.config.js
,因为我也是这样做的。 - Layhout