32
Using tailwind 3.0 with Angular 13
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 color palette, arbitrary properties amongst many other upgrades.
There is no longer 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 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. As at the time this article is published, I’m making use of Angular 13.
Use ng new <project_name> to create a new angular project
cd into the project folder with cd c <project-name>
Enter this command into your CLI to install the latest version of tailwind as a dependency in your project:
npm install -D tailwindcss
Initialize tailwind with:
npx tailwindcss init
This will generate a tailwind.config.js file in the root of your angular project
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
Open your styles.css file
src/styles.css
and add the @tailwind directives
@tailwind base;
@tailwind components;
@tailwind utilities;
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.
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.
32