如何在Angular 11.2.0或更低版本中设置TailwindCSS

正如您所知，Tailwind是一种非常流行的POSTSS解决方案。我想在运行版本11.2.0或旧版本的Angular应用程序中添加TailwindCSS。我怎样才能做到

我决定发布并回答我自己的问题，因为这是我最近在Angular社区看到的一个非常流行的问题

在Angular 11.2.0中设置TailwindCSS

使用

npm安装-D tailwindcss安装

安装TailwindCSS插件（可选）：

• npm i@tailwindcss/排版

• npm i@tailwindcss/forms

在工作区或项目根目录中创建TailwindCSS配置文件。命名该配置文件

tailwind.config.js

应该是这样的：

module.exports={
前缀：“”，
清除：{
内容：[
“./src/***.{html，ts}”，
]
},
暗模式：“类”、“媒体”或“类”
主题：{
扩展：{}，
},
变体：{
扩展：{}，
},
插件：[require（'@tailwindcss/forms'）、require（'@tailwindcss/typography'）]，
};

在styles.scss文件中添加以下TailwindCSS导入

@import'tailwindcss/base'；
@导入“tailwindcss/组件”；
@导入“tailwindcss/utilities”；

如果您使用的是CSS而不是SCS，则您的文件应如下所示：

@顺风基地；
@顺风组件；
@顺风公用事业；

确保Angular中的TailwindCSS正常工作 转到任何组件并编写以下内容：

你好 现在运行

ng serve

，您将看到以下按钮

如何在生产中清除尾风CSS 如果我们不清除，我们的CSS可能会非常繁重，因为所有CSS类都是TailwindCSS为您添加的。如果清除，将删除所有未使用的类

我在Angular 11.2.0中使用的吹扫方法如下：

A） 这是我喜欢的方式。将此添加到构建脚本

NODE\u ENV=production ng build--prod

您的tailwind.config.js文件应该如下所示

清除：{
已启用：process.env.NODE_env===“生产”，
内容：[
“./src/***.{html，ts}”，
]
},

B） 在

tailwind.config.js文件中

可以将

purge

属性中的

enabled

属性设置为

true

。这将一直运行清除，请注意

。。。。
前缀：“”，
清除：{
启用：对，
内容：[
“./src/***.{html，ts}”，
]
},
....

然后您可以运行

ngbuild--prod

，您将看到您的包越来越小

清除之前

清除后

要了解更多关于使用TailwindCSS的Angular（11.2.0或更早版本），请参阅我的文章