Getting started with Angular + Tailwind

Getting started guide to Tailwind integration with Angular.

Getting started with Angular + Tailwind

Why tailwind?

Tailwind is an utility-first css framework with a set of utility css classes. Using these class we can easily build a UI components and modifies their designs to create our own design pattern.

"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."

Who is using Tailwind

  1. Medium
  2. Algolia
  3. Starbucks
  4. Github CoPilot
  5. NASA's Jet Propulsion Laboratory
  6. Heroku
  7. Twitch
  8. Stripe

Getting started with Tailwind

You can install tailwind in your existing project very in straight forward way.

npm i -D tailwindcss

Create tailwind configuration file `tailwind.config.js` in your angular project root.

module.exports = {
    prefix: '',
    purge: {
      content: [
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    variants: {
      extend: {},
    plugins: [],

Import tailwind css modules in `styles.scss`


@tailwind base;
@tailwind components;
@tailwind utilities;

Let's test tailwind classes in angular project

<button type="button" class="btn-primary">Default</button>
.btn-primary {
    @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;


We have seen how to integrate Tailwind CSS in Angular with simple examples.

Installation: Tailwind CLI - Tailwind CSS
Documentation for the Tailwind CSS framework.
Tailblocks — Ready-to-use Tailwind CSS blocks
Ready-to-use Tailwind CSS blocks