Integrating tailwind into Angular was a somewhat cumbersome process before version 11.2, Angular 11.2 came with native support for TailwindCSS and eased the process of installing and making use of tailwind on the platform.
With the latest version of TailwindCSS (v3) Integrating tailwind with angular has become even easier. This version of tailwind (v3) brings a raft of improvements including JIT all the time, an extended colour palette, and arbitrary properties amongst many other upgrades.
There is no longer a need to configure tailwind to purge unused CSS classes as the new engine processes only the classes used in real-time which leads to a smaller file size and faster development. There is no need to use a tailwind watch, angular will handle that.
As easy as it now is to integrate tailwind into your new or existing angular application, I will still work through the process in this guide. At the time of publishing, I’m making use of Angular 13.
Create New Angular Project with the Angular CLI
Use ng new <project_name> to create a new angular project
cd into the project folder with cd c <project-name>
Install Tailwindcss
Enter this command into your CLI to install the latest version of tailwind as a dependency in your project:
npm install -D tailwindcss postcss autoprefixer
Initialize tailwind with:
npx tailwindcss init
This will generate a tailwind.config.js file in the root of your angular project
Configure Tailwind
Specify paths to all your template files in your tailwind config file, input your templates paths into the contents array like this:
content: [“./src/**/*.{html,ts}”]
There is no need to purge or configure Just in time mode in tailwind 3
Add the tailwind directives to your CSS
Open your styles.css file
src/styles.css
and add the @tailwind directives
@tailwind base;
@tailwind components;
@tailwind utilities;
Serve your application
Use ng serve and try out tailwind in your application. That’s it.
If you want, you can extend tailwind functionality in the tailwind config file and angular will apply them on save, without any extra effort on your part.
Additional Information
Sometimes after serving your application, tailwind jit might compile only the first time you start your application and might not do so again after saving changes, this might be because angular has a hidden .angular file that caches data. see the issue here:
What's the best way to install Tailwind into Angular project? #6390
To remedy this, delete the .angular folder and edit your angular.json file to include:
"cli": {
"cache": {
"enabled": false
}
},
You can add it below the second line, this:
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
To Know if Tailwind JIT is working look at your cli and check for this:
Generating browser application bundles (phase: building)...
info - Tailwind CSS is watching for changes...
info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds
⠴ Generating browser application bundles (phase: building)...
info - Tailwind CSS is watching for changes...
info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds
✔ Browser application bundle generation complete.
If you see this then tailwind JIT mode is working, otherwise it might be loading from the angular cache.
Resources:
Tailwind Docs
Using TailwindCSS In Angular Is Easy From V11.2
Tailwind CSS with Angular V12- What You Need to Know
What's the best way to install Tailwind into Angular project? #6390
Top comments (0)