Nuxt tailwindcss 不是所有的 css 都被编译

Question

我有一个带有 tailwindcss 的 nuxt 3 应用程序（在单声道存储库中）。问题是当我进行静态构建时，并不是所有的 CSS 都被编译（而且我的页面看起来很奇怪）：

npx nuxi generate

。使用

npm run dev

它被正确编译（并且看起来不错）！

我的顺风配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/components/**/*.{js,vue,ts}",
    "../components/src/components/**/*.{vue,ts,js}",
  ],
};

这里出了什么问题？我需要用另一种方式定义路径吗？

Answer 1

由于路径问题，静态构建可能无法访问第二个目录

(../components/src/components)

，这可能导致某些样式未包含在最终的CSS文件中。

要解决这个问题，您可以尝试修改内容属性以包含所有必要的目录和文件，如下所示：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,vue,ts}",
    "../components/src/**/*.{vue,ts,js}",
  ],
};

此配置将包含

./src

和

../components/src

目录中具有指定扩展名的所有文件。

修改配置后，再次尝试运行静态构建

(npx nuxi generate)

，看看问题是否解决。