Tailwind 在运行项目后给我带来了问题

Question

1

我在尝试在 React（或 Next.js，如果适用）项目中使用 Tailwind CSS 时遇到问题。应用程序加载并运行几秒钟，但随后在控制台中显示以下错误：

模块解析失败：意外字符“@”(1:0) 您可能需要适当的加载器来处理此文件类型，当前没有配置加载器来处理此文件。请参阅https://webpack.js.org/concepts#loaders

@顺风基地； | | @tailwind组件；

上下文：我使用 Webpack 作为捆绑器（或 Next.js，如果适用）。我已经根据官方文档安装了 Tailwind CSS 及其依赖项。我的 tailwind.config.js 文件配置正确。这是我的 postcss.config.js 文件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

我尝试过的： 1.我验证了依赖项已安装： npm install tailwindcss postcss autoprefixer 2.我验证了 postcss.config.js 和 tailwind.config.js 位于根目录中。 **其他详细信息：**应用程序加载正常，并在抛出错误之前运行几秒钟。在最初的几秒钟内，一切似乎都正常，但随后它停止响应并出现提到的错误。 **问题：**什么可能导致错误在一段时间后发生而不是在启动时发生？是Webpack配置、PostCSS还是其他什么问题？预先感谢！

Answer 1

你的 CSS 是什么样的？ 是字面意思吗：

@tailwind base; | | @tailwind components;

如果是这样，请尝试将它们放在不同的行上

@tailwind base;
@tailwind components;