tailwindcss指令不能与项目外的样式文件一起工作

Question

我想使用tailwindcss在我的样式在一个nx monoorepo

我用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文件?

我想知道我是否可以让顺风导入在全局样式文件中工作?谢谢你的建议或解释!

Answer 1

如果其他人正在努力解决这个问题，以下是我的解决方法:我将postcss-import安装为node_module，并将此插件添加到我想要使用css ui库的项目的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文件，那么清除仍然可以正常工作。

Answer 2

我也有同样的问题，也使用nx单线程。我的结构看起来像这样:

monorepo/
|-apps/
|-my-app/
|-libs/
|-styles/

我最终通过在my-app/目录中创建css文件并从libs/styles导入所有全局样式来修复它。然后，这个css文件被加载到我的应用程序中。

app/index.css

@import '/libs/styles/global.css`

你还需要确保在每个应用程序的根目录下都有一个tailwind.config.js和一个postcss.config.js文件。如果希望保留一些全局规则，可以使用presets键扩展顺风配置。以下是我在nx中的顺风配置。

app/tailwind.config.js

module.exports = {
presets: [require('../../libs/shared/styles/tailwind.base')],
content: [
join(
__dirname,
'{src,pages,components}/**/*!(*.stories|*.spec).{js, jsx, ts,tsx,html}'
),
...createGlobPatternsForDependencies(__dirname),
],
plugins: [],
}