Getting started with tailwindCSS in your Angular project
Tags: angular, javascript, webpack, tailwindcss
Published: 2017-12-17 11:26:05

---
title: Getting started with tailwindCSS in your Angular project
published: true
description: How to configure tailwindCSS and include the build process in your project build
tags: angular, js, webpack, tailwindCss
---
![Tailwind + Angular](https://thepracticaldev.s3.amazonaws.com/i/jftdorwqp0p7tsbdmrah.png)

**What is Tailwind** 

According to the [tailwind](https://tailwindcss.com) site, "Tailwind is a utility first framework for rapidly building custom interfaces". What that means from my perspective, tailwind provides easy to remember css classes for creating user interfaces while writing minimal css. 

"*On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo.*"

I'm not going into details about how to use tailwind exactly, their [site](https://tailwindcss.com) has easy to follow examples and it is well documented. So I suggest you peep at it after following the setup procedures that I'll show you.

**Getting Started**

So to get started you need to create a new angular project using the `angular-cli`.

`ng new tailwind-config`

Run that command to start a new angular-cli project. Now to add tailwind to our project, we can use the CDN

 `<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">`

OR 

we can seperate the base styles from the utility classes using their respective CDNs

`<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">`

`<!--- Your stylesheet here --->`

`<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">`

But I recommend that you install the project from NPM so you can configure it to your style and taste. This also helps you control the size of the final bundle. So we'll install tailwind from NPM

`npm install tailwindcss --save-dev`

After installing tailwind, you'll need to create a config file. Now this is necessary if you'll want to customize it and insert new utility classes.

`./node_modules/.bin/tailwind init [filename]`

Run that command to create your config file. In my case, I'll name my config file `tailwind.js`.


**Getting started with Angular**

I'm going to describe two distinct methods of using tailwind in our project. Each method has it's pitfalls, it's left for you to chose.

#### Method 1:
###### Include tailwind build in our webpack config.

To use this method, we'll need to eject the webpack config file for our project. We can do this using the following method. `ng eject`. After that, run `npm install` again.

Add the top of the `webpack.config.js` add this line to inject tailwind.

```javascript
const tailwind = require('tailwindcss');

```

In the same file you'll see a postcssPlugins function. In that function right before autoprefixer is called, we'll include our tailwind build there. 

The function should now look like this:

```javascript
const postcssPlugins = function() {
   ......

  };
  return [
    postcssUrl({
    ......

    tailwind('./tailwind.js'),
    autoprefixer()
  ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};
``` 

You might run into the following error `atRule.before is not a function`. If so, you'll need to install the latest postcss modules. You can do so with the following command. 

`npm install postcss postcss-loader postcss-url --save-dev`

start your server using `npm start`.

Now the issue with this method is that `ng eject` hard codes the paths for your project's files making it difficult for reuse on a different pc especially if you have a team working on the same project. Here's an excerpt from my config file.

```javascript
'rxjs/util/tryCatch':
        'c:\\Users\\Test\\Desktop\\Work\\project\\node_modules\\rxjs\\_esm5\\util\\tryCatch.js',
'rxjs/util/toSubscriber':
        'c:\\Users\\Test\\Desktop\\Work\\project\\node_modules\\rxjs\\_esm5\\util\\toSub
 ............
```

Now if you're comfortable editing and re-configuring your webpack-config file to fix this issue, you can stop at this method or check out the next if you're just curious.


**Method 2:**
##### Using tailwind's cli

 
Tailwind has a CLI for creating your config file and also to process your stylesheet. I'm assuming you have a stylesheet where you've injected tailwind's base styles and utilities.

 `tailwind-build.css`

```css
@tailwind prefilgiht;

@tailwind utilities;
``` 
We'll place this stylesheet in the same folder as our project's `styles.css` file. You can name the file whatever way you please. We'll then use the tailwind CLI to output our styles.css file containing tailwind's base and utility styles.

`./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.js -o ./src/styles.css`  

Since we'll need to do this every time before we start our server, we can add this to package.json file.

```javascript
{
  "name": "tailwind-config",
  "version": "0.0.0",
  ........
  "scripts": {
  "prestart": "tailwind build ./src/taliwind-build.css -c ./tailwind.js -o ./src/styles.css",
   ..........
  }
},
```
That will build out our `styles.css` file before our server starts. That's it.

There might be several solution to this, if you have one, be free to drop them in the comments below. Or mention me on twitter [@iamAfro](https://twitter.com/iamafro).