如何在角11.2.0或更低的角度设置TailwindCSS
正如您所知，Tailwind是一种非常流行的PostCSS解决方案。我想在运行11.2.0版或更旧版本的角度应用程序中添加TailwindCSS。我怎样才能做到呢？
，我决定发帖并回答我自己的问题，因为这是我最近在棱角社区中看到的一个非常流行的问题，。
回答 1
Stack Overflow用户
发布于 2021-02-17 08:08:48
在角11.2.0中设置TailwindCSS
用npm install -D tailwindcss安装
安装plugins(Optional):
- TailwindCSS
npm i @tailwindcss/typography
npm i @tailwindcss/forms
- 在工作区或项目根中创建TailwindCSS配置文件。将配置文件命名为
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')],
};- 在styles.scss文件中添加以下TailwindCSS imports
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';如果您使用的是CSS而不是SCSS，您的文件应该如下所示：
@tailwind base;
@tailwind components;
@tailwind utilities;确保角上的TailwindCSS正常工作
转到您的任何组件并编写以下内容：
<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
如果我们不清除，由于TailwindCSS为您添加的所有CSS类，我们的CSS可能会非常重。如果您清除，所有未使用的类将被删除。
我认为在角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中，可以将purge属性中的enabled属性设置为true。这将一直运行清除，要注意这一点。
....
prefix: '',
purge: {
enabled: true,
content: [
'./src/**/*.{html,ts}',
]
},
....然后，您可以运行ng build --prod，您将看到您的包，因为变得更小。
清洗前的
清除后的
要了解关于TailwindCSS的更多信息(11.2.0或更高版本)，请看我的文章
https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l
https://stackoverflow.com/questions/66237966
复制相似问题
腾讯云开发者
