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
- npm install -D tailwindcss
- 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,
- npx tailwindcss init
This will create tailwind.config.js with default and empty configuration as shown below,
- module.exports = {
- purge: [],
- darkMode: false, // or 'media' or 'class'
- theme: {
- extend: {},
- },
- variants: {
- extend: {},
- },
- plugins: [],
- }
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,
- @tailwind base;
- @tailwind components;
- @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.
- //styles.scss
- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @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.
in angular build. Let's fix this,
Join the conversation! Your thoughts help the community grow.