我创建了一个使用tailwind 样式的angular 库。然后将其推送到 NPM，然后导入到新项目中，但 css 没有得到应用。我在 tailwind.config.ts 中引用了节点模块路径：
content: [
"./src/**/*.{html,ts}",
'./node_modules/components-name/**/*.{html,js,ts}'
],
我错过了什么？
如果我将 Tailwind 直接应用到新应用程序，它就可以工作，但它不能与导入的库一起工作。
【问题讨论】：
标签： tailwind-css
如果您希望所有依赖应用程序都使用顺风，您可以使用库中的类并让它们配置 ./node_modules/my-lib/esm2020/**/*.mjs 的内容路径。
它确实在 Ivy 编译文件中找到了内联/转义的类。
esm2020 扫描范围。
如果您希望应用程序在没有尾风的情况下使用它作为依赖项，您可以编译样式并在 css 文件中提供实用程序类。
我建议在您的库下创建一个tailwind.config.js，并将其配置范围设置为仅拾取找到的类/样式，同时关闭preflight，以免对引入您库样式的应用程序产生冲突的样式。仅当您在此项目中有其他应用程序（例如演示/游乐场）时才需要，这将导致顺风引入过多的实用程序类。
如果您有扩展/自定义，您可以创建第三个文件并在它们之间共享配置。
projects/my-lib/tailwind.config.js
module.exports = {
prefix: '',
content: [
'./projects/my-lib/**/*.{html,ts,css,scss}',
],
darkMode: 'class',
theme: {
extend: {
},
},
variants: {
extend: {
},
},
plugins: [],
corePlugins: {
preflight: false,
}
};
注意
content路径仍然是相对于项目根目录的，因为这是它运行的上下文
我建议添加要使用的样式表，即使它只包含 @tailwind utilities;，否则它可能会包含错误的根变量。
projects/my-lib/style.scss
@tailwind utilities;
然后将postbuild 添加到您的顶级package.json 以生成样式表，前提是您使用npm run build 构建库。
"postbuild": "npx tailwind -c projects/my-lib/tailwind.config.js -i projects/my-lib/style.scss -o dist/my-lib/style.css",
直接依赖项目然后包含这个编译的样式表：
@import 'my-lib/style.css'
缺点是您可以从所有组件中获取所有实用程序类，即使它们未使用（使用 tailwind 的项目也是如此，所以还不错。
如果使用tailwind本身，依赖项目可能会产生重复的实用程序类，但我希望他们使用postcss和autoprefixer :)
另外一方面是你的库不需要依赖者有顺风（除非使用一些依赖于 css vars 的实用程序......）。
可能值得尝试提供顺风的base，而不是重置（飞行前）。
请注意，这两个选项都不适用于@apply 功能。
【讨论】：
有没有在 Angular 库中使用 Tailwind 的正确方法？我们希望创建一个包含所有 UI 特定布局组件的单一库项目，以便为我们的 Angular 应用程序提供全局外观。
Out 库项目包含带有 *.sccs 文件的不同组件，使用顺风特定功能（@apply,..）。
但是：我们无法让它工作。
【讨论】：