Guide to integrate Tailwind CSS into Angular Project
If you are an Angular developer and waiting to integrate Tailwind CSS into your Angular project, here is some good news for you. With the new Angular version update v11.2, Now Angular supports the integration of Tailwind CSS in few steps, please follow this pull request merged by Angular to support this feature, But we suggest you upgrade to Angular 12 for easy integration.
What is Tailwind CSS?
If you are new to Tailwind CSS or never heard before, it's a utility-first CSS framework and packed with many classes for a different set of styles and you need to apply these classes individually to style an element, unlike bootstrap. This will help to develop any styles directly in markup instead of creating separate classes.
Why upgrading to Angular 12 is necessary?
As you know that, Angular recently released the latest version of Angular, i.e. v12, in this upgrade, the Angular team has provided easy integration of Tailwind in very few steps and also resolved all the issues related to purging unused CSS to make bundle file very small.
Steps to integrate tailwind into Angular
- Update your project to the latest version of Angular (v12)
- Install the tailwind in
npm install tailwindcss@latest postcss@latest autoprefixer@latest
- Add the tailwind configuration file
tailwind.config.js
to the root of your project - Import the tailwind CSS styles into your Angular
styles.scss
file
Configuration of Tailwind CSS
The below configuration needs to be added in the tailwind.config.js
As you can see below, we have added the purge object inside the configuration files, which helps to remove unused CSS files from your final production bundle and makes it very lightweight, You can refer to this link to understand on controlling the purging of the CSS.
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
theme: {
extend: {},
},
variants: {},
plugins: [],
};
Importing tailwind styles into Angular
The tailwind base CSS files need to be imported in styles.scss
of your Angular project
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Demo
- Github Repo: https://github.com/allabouttech0803/angular-tailwindcss-starter
- App: https://angular-tailwindcss-starter.vercel.app/
References
This configuration seems to enable purging on ng serve too, anyone know how to make purge work only for ng build?
This configuration seems to enable purging on ng serve too, anyone know how to make purge work only for ng build?
```module.exports = { purge: { enabled: process.env.TAILWIND_MODE === 'build', content: [ './src/**/*.{html,scss,ts}' ] }, theme: { extend: {}, }, variants: {}, plugins: [], };```