Getting started with tailwindCSS in your Angular project

What is Tailwind

According to the tailwind 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 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.

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:

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.

'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

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

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