在自定义角度库中使用 tailwindcss

Question

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

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

例如：我的自定义组件有 class 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.

Answer 2

Tailwind 3+ 简单的解决方案：只需将您的库文件夹添加到tailwind.config.js

module.exports = {
    content: [
      "./src/**/*.{html,ts}",
      "./projects/ui-components/src/**/*.{html,ts}",
    ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
  corePlugins: {
    preflight: false,
  }
}

使用 Angular 13 进行测试，效果非常好！

Answer 3

我知道这是一篇旧帖子，但在尝试弄清楚如何执行此操作时，我发现截至撰写此答案之日，将 Tailwind 依赖项添加到 Angular 库基本上是不可能的。这是因为ng-packagr不支持加载自定义postcss配置。

在这里找到更多详细信息：

https://github.com/ng-packagr/ng-packagr/issues/1471

https://github.com/ngneat/tailwind/issues/12

https://github.com/ng-packagr/ng-packagr/issues/643

https://github.com/just-jeb/angular-builders/issues/1059 -> 我发现这是关于为什么这是不可能的最好解释。

接受的答案虽然有效，但会将整个 TailwindCSS 包复制到最终版本中，这违背了目的。

更新：如果您确实需要的话，这是向 Angular 库添加 TailwindCSS 支持的另一种方法。虽然，它仍然是一种“hacky”方式，但它比接受的答案更好，因为它不包括整个 TailwindCSS 样式表，感谢@Charly