在角11.2.0中设置TailwindCSS

用 npm install -D tailwindcss 安装

安装plugins(Optional):

1. TailwindCSS

• npm i @tailwindcss/typography

• npm i @tailwindcss/forms

1. 在工作区或项目根中创建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')],
};

1. 在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: {