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

【问题标题】：tailwindcss directives not working with style file outside of projecttailwindcss 指令不适用于项目外部的样式文件
【发布时间】：2021-11-10 13:25:27
【问题描述】：

我想在 nx monorepo 中为我的样式使用 tailwindcss。

我使用global-styles.scss 文件创建了一个全局样式lib，以保留应该添加到每个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.config.js 和 postcss.config.js 位于 apps/my-app 文件夹中，当我将 global-styles.scss 文件从 libs 目录移动到此应用程序文件夹时，一切正常。所以我想知道是否有某种配置或规则，您必须将 css 文件保存在与 postcss.config 文件相同（或更深的嵌套）位置？

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

【问题讨论】：

标签： css tailwind-css postcss monorepo

【解决方案1】：

如果其他人正在为此苦苦挣扎，这是我的解决方法：我将postcss-import 安装为node_module，并将此插件添加到我想要使用css ui-library 的项目中的postcss.config.js 文件中。

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

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

【讨论】：