Setting up Tailwind CSS in an Angular Project
Tailwind CSS is a utility first CSS framework for building custom interfaces easily. From Angular 11.2, it includes native support for Tailwind CSS.
Ensure Angular version is 12.2+ and Node.js version 12.13.0+
Creating your project
Start by creating a new angular project using npm
ng new angulartailwind-demo
Set up Tailwind CSS
Run following npm command to install Tailwind CSS package.
npm install -D tailwindcss
Install postcss and autoprefixer dependencies
npm install postcss@latest autoprefixer@latest
Create Tailwind CSS Configuration File
Generate tailwind CSS configuration file(tailwind.config.js) using following command
**npx tailwindcss init**
This command will create a config file in your project root directory.
Learn more about Tailwind Configuration read more
Include Tailwind in your SCSS
If you are using css
Import Tailwind CSS into styles.css using following code.If you are using scss
Import Tailwind CSS into styles.scss using following code.
Test the Tailwind CSS Integration
Add the folowing code to app.component.html
Buy nowPurge the unused CSS in production
Tailwind CSS gives a fearture to remove unused css classes to reduce the bundle size.We can add purge option on the tailwind.config.js file as folows.
It will check the ts and html files in the entire src directory and purge unused style classes from the project.
For more information please refer Tailwind CSS Documentation
Follow me on Medium to get regular updates on blogs.