tailwindcss 指令不适用于项目外部的样式文件

Question

我想在 nx monorepo 中使用 tailwindcss 来实现我的样式。

我lib用一个global-styles.scss文件创建了一个全局样式，以保留应添加到每个app.

@tailwind base;
@tailwind components;
@tailwind utilities;

.test {
   color: aqua;
}

#root {
  --teal: #008285;
  --iceberg: #D1F0F1;
  --polar: #F6FCFD;
  --scooter: #2BBEC3;
  --purple: #481059;
  --white: #FFFFFF;
  --red: #E8203A;
  --black: #2C2C2C;
}

在我的文件中workspace.json，我已将此样式文件的路径添加到构建目标中。

"styles": ["apps/my-app/src/styles.scss", "libs/ui-shared/src/lib/styles/global-styles.scss"],

现在，test我的应用程序选择了作为 css 变量的类，但所有 tailwind 类都不起作用，因此该@tailwind指令不起作用。

和位于该文件夹中，当我将文件从该目录移动到该应用tailwind.config.js程序文件夹时，一切正常。所以我想知道是否有某种配置或规则必须将 css 文件保留在与文件相同（或更深层嵌套）的位置？postcss.config.jsapps/my-appglobal-styles.scsslibspostcss.config

我想知道是否可以让顺风导入在该全局样式文件中工作？感谢您的建议或解释！

Answer 1

如果其他人正在努力解决这个问题，我是这样解决的：我安装postcss-import为node_module，并将这个插件添加到postcss.config.js我想要使用css ui-library的项目中的文件中。

const { join } = require('path');
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: { config: join(__dirname, 'tailwind.config.js') },
    autoprefixer: {},
  },
};

现在我可以在我的 ui 库中创建一个 css 文件，在其中定义所有常用样式并导入 tailwind 类。@import在我的应用程序中，我可以在应用程序的文件中导入该 css 文件styles.css。tailwind.config如果您按照 nx 文档中的说明配置了应用程序的文件，清除仍然可以正常工作。