defaultTheme 在使用 Tailwind CSS 时未定义。

Question

我正在开发一个项目，使用了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: [],
};

- Jason0011

---

在 tailwind 的文档 中有这样一行代码：const defaultTheme = require('tailwindcss/defaultTheme')。请问你的 tailwind.config.js 文件中是否也有这行代码？ - Layhout

尝试将该行代码放在 tailwind.config.js 文件的顶部。 - Layhout

我尝试了但还是不起作用。 - Jason0011

我建议你将自定义字体应用于 global.css 而不是 tailwind.config.js，因为我也是这样做的。 - Layhout

@Jason0011 你需要关闭你的开发服务器并重新运行 yarn dev 才能使其正常工作。可能与额外的导入/引入有关（如果你在答案中没有看到它）。我遇到了同样的问题，在我这样做之后它对我起作用了... - undefined

Answer 1

由于在您的tailwind.config.js文件中未定义defaultTheme，因此出现了这种情况。看起来您正试图通过添加新的自定义字体来扩展主题的默认字体系列，但是配置文件的作用域中不可用defaultTheme变量。

为了扩展默认字体系列，您需要从Tailwind CSS包中导入默认主题，就像这样：

const defaultTheme = require('tailwindcss/defaultTheme');

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

通过这种方式，您可以导入默认主题并将其用于将自定义字体添加到默认字体系列中。

此外，您可以使用sans代替customfontname，因为它是Tailwind CSS中的默认字体系列关键字。

另一种应用自定义字体的方法是在_app.js文件中导入该字体并在全局CSS类中使用该字体。

需要注意的是，此错误也可能由您在项目中导入的任何其他CSS文件引起，这些文件可能正在使用“defaultTheme”变量，但未定义。

- Arshad

---

无法工作 @Arshad - Jason0011

Answer 2

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

- Agni Gari

---

嘿，我通过在@type行下面包含导入语句来解决了这个问题。 - Avik

@Jason0011 我刚刚在 /** @type {import('tailwindcss').Config} */ 行后添加了 const defaultTheme = require('tailwindcss/defaultTheme')，然后它就起作用了。 - Avik

如果您已经尝试过这个方法，那么使用nextjs-tailwind模板创建一个新的样板文件夹并将您的文件转移至该文件夹可能是一个不错的选择。我以前也遇到过类似的情况！相信我，那是最好的选择。 - Avik

npx create-next-app --tailwind with-tailwindcss-app - Avik

@Jason0011 你需要关闭你的开发服务器并重新运行 yarn dev 来使其正常工作。可能与额外的导入/引用有关。 - undefined