Post
Ask Question

Using TailwindCSS In Angular Is Easy From V11.2

Introduction


TailwindCSS is a popular CSS framework for a Web application. It provides various utility classes like flex, pt-4, text-center, and rotate-90 that can be used to build any design, directly in your HTML.

It is different from other CSS frameworks like bootstrap, the major difference is it allows us to automatically remove all unused CSS when building an application, which means our final CSS bundle is the smallest it could possibly be. 
 
In this article, we will see How to use TailwindCSS with Angular?
 
Angular 11.2 has added support for the TailwindCSS. Before we see that, let's see how we were using TailwindCSS before angular v11.2.
 

Using TailwindCSS before Angular v11.2

 
Before angular v11.2, It was a bit difficult to use TailwindCSS  in Angular, as We need to manually set up following this,
  • Customize the angular build with Angular Custom Builder.
  • Requires Custom webpack configuration for processing the tailwindcss. Need to set up postcss-loader in webpack config.
We will not go more into it. Check out here for more details.
 

Using TailwindCSS in Angular is Easy from v11.2

 
We just need to take the following actions to use TailwindCSS in Angular.
 

Install tailwindcss into the Angular workspace or Project

  1. npm install -D tailwindcss  
or,
  1. yarn add -D tailwindcss  

Create tailwindcss configuration file

 
Create a tailwindcss configuration file (tailwind.config.js) in either the workspace root or the project root. A configuration file in the project root takes precedence over one in the workspace root.

You can do this with,
  1. npx tailwindcss init    
This will create tailwind.config.js with default and empty configuration as shown below,
  1. module.exports = {    
  2.   purge: [],    
  3.   darkMode: false, // or 'media' or 'class'    
  4.   theme: {    
  5.     extend: {},    
  6.   },    
  7.   variants: {    
  8.     extend: {},    
  9.   },    
  10.   plugins: [],    
  11. }    
When both conditions are met, the Angular CLI will initialize and integrate Tailwind CSS into the stylesheet build pipeline. Both global and component stylesheets will be processed when enabled.
 

Adding tailwindcss imports in styles.css or styles.scss


If you are using styles.css add the following statements,
  1. @tailwind base;    
  2. @tailwind components;    
  3. @tailwind utilities;   
@tailwind is a custom directive exposed by Tailwind to insert its base, components, utilities styles into styles.css.

If you are using styles.scss, add the following import statements.
  1. //styles.scss  
  2.   
  3. @import 'tailwindcss/base';  
  4. @import 'tailwindcss/components';  
  5. @import 'tailwindcss/utilities';  
We are done with the basic setup, Now let's test it.
 

Test the TailwindCSS Setup

 
Copy the following code snippet in your app.component.html. 
  1. <div class="m-5 shadow-md rounded ">    
  2.   <form class="flex-auto">    
  3.     <div class="flex flex-wrap p-5 bg-gray-50 mb-2">    
  4.       <img class="w-14 rounded-full mr-5" src="https://i.pravatar.cc/300">    
  5.       <div>    
  6.         <h1 class="flex-auto text-xl font-semibold">    
  7.           John Doe    
  8.         </h1>    
  9.         <div class="w-full flex-none text-sm font-medium text-gray-500 mt-2">    
  10.           Designer, Developer    
  11.         </div>    
  12.       </div>      
  13.     </div>    
  14.     <div>    
  15.       <p class="px-6 pb-2 font-semibold text-center text-xl">"Rapidly build modern websites without ever leaving your HTML."</p>    
  16.       <p class="px-6 pb-2 text-center">A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.</p>    
  17.           
  18.       <img class="w-full h-64 object-cover" src="https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"/>    
  19.     </div>    
  20.     <div class="flex">    
  21.       <button class="bg-gradient-to-b from-blue-800 to-green-500 p-2 rounded-full text-white m-5 px-5"> πŸ‘ Like</button>    
  22.       <button class="bg-gradient-to-b from-green-400 to-blue-500 p-2 rounded-full text-white my-5 px-5"> πŸ“€ Share</button>    
  23.     </div>    
  24.   </form>    
  25. </div>    
Serve your application and verify it on the browser, you will get the following output,
 
Using TailwindCSS with Angular Sample
 
Great!!! you are done with the basic setup of TailwindCSS in Angular.
 

Purge the unused CSS in the build


By default, all the tailwindcss styles are included in the build, which will increase the bundle size of the application. This is not acceptable for any application,

As you can see below, it creates styles.css of 2.78 MB  in angular build. Let's fix this,
 
Build with unused css
 
TailwindCSS provides a feature to remove the unused CSS in build for that we need to specify files in purge property of tailwind.config.js as shown below,
  1. //tailwind.config.js    
  2.     
  3. module.exports = {    
  4.   purge: {    
  5.     enabled: true,    
  6.     content: [    
  7.       './src/**/*.{html,ts}',    
  8.     ]    
  9.   },    
  10.   darkMode: false, // or 'media' or 'class'    
  11.   theme: {    
  12.     extend: {},    
  13.   },    
  14.   variants: {    
  15.     extend: {},    
  16.   },    
  17.   plugins: [],    
  18. }   
It will check all the component's typescript and HTML files and remove the unused CSS. Take a new build and verify.

Now we have styles.css with only 4.30 kB,
 
Using TailwindCSS In Angular Is Easy From V11.2

Great !!! We are done with the implementation, testing, and production build optimization.
 

Summary


In this article, We have seen How to use TailwindCSS in an Angular application? We have seen the step-by-step implementation of it in the angular v11.2 application.

I hope you like this article, if you feel this is useful to you, please like and share πŸ™‚


Similar Articles