使用Tailwind CSS出现defaultTheme未定义编译错误求助

我正在开发一个基于React、Next.js和Tailwind CSS的项目，已经完成部分样式定制——比如用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

ReferenceError: defaultTheme is not defined

完整的Tailwind配置文件 #

/** @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: [],
};

1. 修正defaultTheme引用逻辑
   Tailwind默认主题仅包含sans/serif/mono这几个内置字体族，不存在customfontname，你试图解构不存在的属性才是报错核心。如果要继承默认无衬线字体，应使用defaultTheme.fontFamily.sans。

2. 调整配置结构
   建议在theme.extend下扩展字体族，避免覆盖整个theme.fontFamily配置：

/** @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: {
    extend: {
      fontFamily: {
        // 替换项目默认无衬线字体
        sans: ['Segoe UI', 'Helvetica Neue', 'Arial', ...defaultTheme.fontFamily.sans],
        // 或单独定义自定义字体族
        customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', ...defaultTheme.fontFamily.sans],
      },
    }
  },
  plugins: [],
};

3. 清理缓存并重启服务
   停止开发服务器，删除项目根目录下的.next文件夹，再重新启动npm run dev/yarn dev，避免缓存导致修改不生效。

4. 确认样式导入顺序
   确保项目中先导入Tailwind基础样式，再导入react-slick的样式，避免样式冲突或加载异常。

内容的提问来源于stack exchange，提问作者Jason0011