如您所知,Tailwind 是一个非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我该怎么做?
我决定发布并回答我自己的问题,因为这是我最近通过 Angular 社区看到的一个非常受欢迎的问题
如您所知,Tailwind 是一个非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我该怎么做?
我决定发布并回答我自己的问题,因为这是我最近通过 Angular 社区看到的一个非常受欢迎的问题
安装npm install -D tailwindcss
安装 TailwindCSS 插件(可选):
npm i @tailwindcss/typography
npm i @tailwindcss/forms
tailwind.config.js
它应该如下所示:
module.exports = {
prefix: '',
purge: {
content: [
'./src/**/*.{html,ts}',
]
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
如果您使用的是 CSS 而不是 SCSS,您的文件应如下所示:
@tailwind base;
@tailwind components;
@tailwind utilities;
转到您的任何组件并编写以下内容:
<button
class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>
现在运行ng serve
,您应该看到以下按钮
如果我们不清除,由于 TailwindCSS 为您添加的所有 CSS 类,我们的 CSS 可能会非常繁重。如果您清除,所有未使用的类都将被删除。
我想在 Angular 11.2.0 中进行清除的方式如下:
A)这是我的首选方式。将此添加到您的构建脚本中NODE_ENV=production ng build --prod
,您的 tailwind.config.js 文件应如下所示。
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'./src/**/*.{html,ts}',
]
},
B)在您的属性中,tailwind.config.js file
您可以将enabled
属性内部的purge
属性设置为true
。这将一直运行 purge,请注意这一点。
....
prefix: '',
purge: {
enabled: true,
content: [
'./src/**/*.{html,ts}',
]
},
....
然后你可以运行ng build --prod
,你会看到你的包越来越小。
吹扫前
吹扫后
要了解有关使用 TailwindCSS 的 Angular(11.2.0 或更早版本)的更多信息,请查看我的文章
https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l