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.
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.
Steps to follow
- Update your project to the latest version of Angular (v11.2.0)
- Install the tailwind in
npm install [email protected] [email protected] [email protected]
- Install the tailwind plugins with
npm i @tailwindcss/forms
andnpm i @tailwindcss/typography
- 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
module.exports = {
prefix: '',
purge: {
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};
Importing tailwind styles into Angular
The tailwind base CSS files need to be imported in styles.scss
of your Angular project
@import 'tailwindcss/dist/base.min.css';
@import 'tailwindcss/dist/components.min.css';
@import 'tailwindcss/dist/utilities.min.css';
Demo
- Github Repo: https://github.com/allabouttech0803/angular-tailwindcss-starter
- App: https://angular-tailwindcss-starter.vercel.app/