Note: In the v12 release, Angular added support for Tailwind CSS. See tailwind official documentation on how to install Tailwind CSS in Angular v12

Rapidly build modern websites without ever leaving your HTML. - Tailwind CSS

Install Tailwind CSS

Open terminal and go to the Angular project directory and run

npm install tailwindcss

Optionally, install Tailwind CSS plugins

npm install @tailwindcss/typography
npm install @tailwindcss/forms

Configure Tailwind CSS

1. In the Angular project directory, create a Tailwind CSS configuration file name tailwind.config.js

2. Add the following configurations
   

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],
};

Add configuration for forms and typography plugins if the following Tailwind CSS plugins are installed

plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography')
    ],

1. Open styles.scss file to import the 3 Tailwind CSS layers

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Try it out

Add the following to any components

<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>

Run ng serve and open browser on http://localhost:4200/

Using a utiliy-first frameworks like TailwindCSS can make your HTML files bloated to deal with this duplication and to keep your project maintainable, visit Extracting Components at Tailwind CSS

To see how I created a Authentication form using TailwindCSS visit link below