在自定义角度库中使用 tailwindcss答案

【问题标题】：Using tailwindcss in custom angular library在自定义角度库中使用 tailwindcss
【发布时间】：2021-08-14 19:15:32
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular tailwind-css

【解决方案1】：

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

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

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

【讨论】：

【解决方案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 测试，效果非常棒！

【讨论】：

但是当我们运行ng build 时， dist/project 文件夹的 CSS 文件不包含构建好的 tailwindcss，而是包含源 tailwindcss。所以基本上它不起作用。用于库项目的 Bcs Angular 使用 ng-packgr 编译器，该编译器具有 postcss 但不加载 postcss 配置，或者无法以我们可以使用 tailwind 的 postcss 插件的任何方式进行扩展。