How to Add Tailwind CSS to Angular 13

Tailwind CSS is currently one of the emerging popular CSS framework in the world. Adding Tailwind CSS to Angular applications used to be tedious task earlier and developers usually used to depend on third party libraries such as @ngneat/tailwind. 

From Angular 12, adding Tailwind CSS to Angular applications is very simple and straight forward just like adding Bootstrap to Angular Applications.

Inside Angular application folder install Tailwind CSS using the following npm command

npm install -D tailwindcss

The above command will add the Tailwind CSS to the devDependencies of the package.json file.

Now, to create tailwind.config.js file run the following command

npx tailwindcss init

Now you can import the Tailwind css files inside your global styles.css file like this

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

For further optimization, we can add the following rules to the tailwind.config.js file

module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.{html,ts}'],
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    }
  },
  // ...
}

The purge option in the above example will make the unused styles to be removed from the final build. Transform option tells the Tailwind CSS to check the class names after compilation of HTML files.

To enable the Just In Time (jit) mode for better development experience, we can add the following property to the modue.exports object

...
mode: 'jit',
...