Angular 7 + TailwindCSS

So I am in the process of creating a web app with an Angular 7 front-end, a Django backend, and initially, Bootstrap 4 for my styling. Bootstrap is a great tool and easy to use for creating great looking sites, but I want my app to have a distinct appearance, not similar to other Bootstrap sites. In my search for alternative CSS frameworks I found TailwindCSS which describes their framework as “A utility-first CSS framework for rapidly building custom designs.” (https://tailwindcss.com/) I haven’t used Tailwind yet, but it seems like a good idea and worth a shot. Can’t be too hard to set up….

I was right, it’s really not hard, but there is no documentation for how to set up Tailwind with Angular 7, so the initial setup took way too long. Eventually, I found a resource on Github (https://gist.github.com/dannyockilson/260ca2915d9dda5eb52400acdcc0c662#file-angular-json-L8) which worked for me. Here are the steps to setting up Tailwind CSS in your Angular 6+ project.

1. Follow steps 1 and 2 from Tailwind: https://tailwindcss.com/docs/installation/

2. Generate a config file for Tailwind: https://tailwindcss.com/docs/configuration

3. Install dependencies for Angular custom webpacking

npm i @angular-builders/custom-webpack
npm i @angular-builders/dev-server

4. Follow directions given here: https://gist.github.com/dannyockilson/260ca2915d9dda5eb52400acdcc0c662#file-angular-json-L8

• Replace the file path in line 11 of the webpack config file with the path to your config file (probably ./tailwind.config.js)

Hope this helps you get started with Tailwind quicker!