Setup your Angular project to work with tailwindcss 
Tags: angular, tailwindcss, css, javascript
Published: 2019-09-11 19:49:27

---
title: Setup your Angular project to work with tailwindcss 
published: true
description: Some time ago when I started working with tailwindcss I ran into some issues trying to integrate it with Angular, so I decided to write a tutorial explaining how to do it in a couple of minutes.
tags: angular, tailwindcss, css, javascript
canonical_url: https://maurogarcia.dev/maurogarcia.dev/posts/setup-your-angular-project-to-work-with-tailwindcss/
cover_image: https://i.imgur.com/FcZB5sE.png 
---

# 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](https://tailwindcss.com/docs/pseudo-class-variants) and [responsive utility variants](https://tailwindcss.com/docs/responsive-design)

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](https://postcss.org/) 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:confounded:. 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 :eyes:

[ng-tailwindcss](https://www.npmjs.com/package/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:
```bash
npm i ng-tailwindcss -g
npm i tailwindcss -D
```

2. Then, we'll generate a Tailwind config file:
```
npx tailwind init
```

3. 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:
```css
/* tailwind.css file */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

4. Configure source/destination/config files:
```
ngtw configure
```

This will result in an ng-tailwind.js file at your project's root.
5. 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:
```html
<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:

![tailwindcss example card](https://i.imgur.com/gG64zco.png)

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

![tailwindcss snippets](https://imgur.com/6xnlwfj.png)  

Also, checkout the official tailwindcss documentation [here](https://tailwindcss.com/docs/installation)

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