Angular Tailwind

This project was generated with Angular CLI version 11.2.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Setup TailwindCSS in Angular

Install with npm install -D tailwindcss
Install TailwindCSS plugins(Optional):

npm i @tailwindcss/typography
npm i @tailwindcss/forms

Create a TailwindCSS configuration file in the workspace or project root. Name that configuration file tailwind.config.js

It should look like this:

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')],
};

In your styles.scss file add the following TailwindCSS imports

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

if you are using CSS not SCSS, your file should look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Making sure TailwindCSS in Angular is working

Go to any of you components and write the following:

<button
  class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>

Now run ng serve, you should see the following button

How to purge TailwindCSS in Production

If we don't purge, our CSS can be very heavy due to all the CSS classes TailwindCSS adds for you. If you purge, all the unused classes will be removed.

The way I figured to do purging in Angular 11.2.0 are the following ways:

A) This is my preferred way. Add this to your building SCRIPT NODE_ENV=production ng build --prod and your tailwind.config.js file should look like this.

purge: {
      enabled: process.env.NODE_ENV === 'production',
      content: [
        './src/**/*.{html,ts}',
      ]
    },

B) In your tailwind.config.js file you can set the enabled property inside of the purge property to true

....
prefix: '',
    purge: {
      enabled: true,
      content: [
        './src/**/*.{html,ts}',
      ]
    },
....

Then you can run ng build --prod and you will see your bundle since getting smaller.

Before purging

After purging

To learn more about Angular and TailwindCSS

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l

xiaohuilam / angular-tailwindcss