Next.js 项目中自定义类的 Tailwind CSS 编译错误

Question

我正在使用 Tailwind CSS 开发 Next.js 项目，并且遇到了似乎无法解决的编译错误。该错误与我在 theme.css 文件中定义的自定义实用程序类有关。这是错误消息：

编译失败

./styles/theme.css:7:9
Syntax error: D:\Developer\Projects\Nextjs13\nextapp\styles\theme.css The `bg-light-850` class does not exist. If `bg-light-850` is a custom class, make sure it is defined within a `@layer` directive.

  5 | @layer utilities {
  6 |     .background-light850_dark100 {
> 7 |         @apply bg-light-850 dark:bg-dark-100;
    |         ^
  8 |     }
  9 |     .background-light900_dark200 {

在我的 theme.css 文件中，我有：

@layer utilities {
    .background-light850_dark100 {
        @apply bg-light-850 dark:bg-dark-100;
    }
    // ... other classes ...
}

我的 tailwind.config.ts 包括：

// ... other config settings ...

extend: {
  colors: {
    // ... other colors ...
    light: {
      900: '#FFFFFF',
      800: '#F4F6F8',
      850: '#FDFDFD',
      // ... other light colors ...
    },
    // ... other color settings ...
  },
  // ... other extended theme settings ...
}

// ... rest of the configuration ...

如您所见，我的 Tailwind 配置中定义了 light-850，但编译器似乎无法识别它。我已尝试清除 Next.js 缓存并重建项目，但问题仍然存在。

任何人都可以帮助我理解为什么会发生此错误以及如何修复它吗？

预先感谢您的协助！

重建，删除缓存，询问副驾驶。

Answer 1

经过一番调查，我发现问题与 tailwind.config.ts 中的内容数组有关。该数组告诉 Tailwind 在哪里查找类名。在我的项目中，数组包含各种文件类型（.js、.ts、.jsx、.tsx、.mdx），但事实证明，包含自定义类的 theme.css 文件并未被正确处理。

为了解决此问题，我确保 theme.css 文件位于内容数组中列出的目录之一中。我还确保 theme.css 中的语法正确，特别是 @apply 指令和 CSS 注释语法的使用。

此外，我清除了项目缓存并重新构建了它，这对于 Tailwind 配置中的更改生效至关重要。此步骤解决了错误，并且自定义类被正常识别。

确保 Tailwind 内容数组中包含的文件类型的一致性并验证自定义 CSS 文件的位置和语法至关重要。