Setup your Angular project to work with tailwindcss

What is tailwindcss?

Quoting Adam Wathan:

tailwindcss is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override

What's the difference between tailwindcss and other CSS frameworks?

tailwindcss doesn't have any theme or built-in ready-to-use UI components. Besides, Tailwind is not opinionated, meaning that it provides highly composable, low-level utility classes that make it easy to build unique and fully responsive user interfaces without ever leaving your HTML file.

Why I choose tailwindcss?

I love the process of building my own user interfaces from scratch, but I don't want to deal with the pain that comes from having to write custom CSS, or thinking about what's the best name I can use for each element. With tailwind, you can build complex components in a breeze thanks to features like Pseudo-class variants and responsive utility variants

Ok, this looks amazing but... Can I use it in my Angular projects?

Angular integration

tailwindcss best features are found in the build process, which is conveniently automated using (mostly) postCSS plugins. Unfortunately, Angular CLI currently does not offer developers access to the webpack configuration being used (which is managed by the CLI 'under the hood'), so you're out of luck. Unless you use ng-eject to fully customize your Angular CLI build😖. But wait! if you eject your project, you'll also loose several capabilities provided by Angular CLI, like:

• Add features to your Angular project: https://angular.io/cli/generate
• Run your application unit tests: https://angular.io/cli/test
• Build your application for production: https://angular.io/cli/build
• Build your custom template-based code generators using Schematics: https://angular.io/guide/schematics

ng-tailwindcss to the rescue 👀

ng-tailwindcss is a CLI tool for integrating tailwindcss into Angular-CLI projects with as little pain as possible. Thanks to this amazing library, you won't need to eject your project.

Installation

1. After starting your new angular-cli project run these commands:

npm i ng-tailwindcss -g
npm i tailwindcss -D

1. Then, we'll generate a Tailwind config file:

npx tailwind init

1. Create an empty tailwind.css file within your src folder and use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:

/* tailwind.css file */
@tailwind base;
@tailwind components;
@tailwind utilities;

1. Configure source/destination/config files:

ngtw configure

This will result in an ng-tailwind.js file at your project's root.

1. Update your package.json scripts to include tailwind compilation by running the following command:

ngtw scripts

Now using npm run start for your development server will ensure your tailwind files are being watched and built with your project, and you can still rely on the angular-cli for everything else.

Testing your setup

Go to your app.component.html file and paste the following code:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
    <img class="w-full" src="https://tailwindcss.com//img/card-top.jpg" alt="Sunset in the mountains">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-black">The Coldest Sunset</div>
        <p class="text-gray-700 text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
                perferendis eaque, exercitationem praesentium nihil.
        </p>
    </div>
    <div class="px-6 py-4">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
    </div>
</div>

If everything is ok, you should see the following card:

If you want to see tailwindcss in action, checkout my tailwind-css-snippets repo on github: https://github.com/mauro-codes/tailwind-css-snippets

Also, checkout the official tailwindcss documentation here

Once you start playing with tailwind, there is no way back. So, please be careful😀