在自定义角度库中使用 tailwindcss

Question

我正在使用 Angular 12 创建自定义库。在这个库中，我想使用 tailwindcss 来设置自定义组件的样式。我将 tailwindcss 声明为对等依赖项，并在库文件夹的根目录中创建了 tailwinscss.config.js 文件，并将所有必需的模块导入到组件的 scss 文件中。不幸的是，没有加载顺风类。

然后我注意到，如果我将库导入的应用程序也使用了 tailwind 并使用了也在库中使用的任何类，则自定义组件的样式是正确的。

例如：我的自定义组件具有类 bg-green-800。当我在我的应用程序中加载这个组件时，它不会应用背景颜色。然后我在我的应用程序中创建一个元素并应用 bg-green-800。从现在开始，元素和自定义组件都显示正确的背景颜色。

有没有办法在自定义角度库中使用 tailwindcss？

Answer 1

我为自己的问题找到了解决方案。需要创建一个静态样式表文件，因为它不是自动生成的。

• 在库的根目录中创建 tailwindcss.config.js
• 从库的根目录运行 npx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss
• 在您的组件中包含 tailwind.scss 文件：styleUrls: ['../tailwind.scss']。 （注意路径）

每次将新类添加到要包含到 npx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss 中的组件时，仍然需要运行 tailwind.scss。