TailWindCSS w/ Angular Setup

Each time I build a new project, I like to try and learn something new. With the DARSI Advanced Reporting (see Installment 1), I learned how to use the Material Node Tree component. The Angular and Material combination have really be working well. But that doesn't mean we shouldn't explore other options especially in the area of design and style. Giving the users a modern look and feel goes a long way toward making them feel comfortable with the product they are using.

TailwindCSS

I've decided to get familiar with TailwindCSS. It comes up quite frequently in my twitter feed and seems to popular, so exploring it seems like a good idea. And I find the best way to dive into something is to apply it to a project. In reading up on TailwindCSS, I am a bit nervous that it doesn't come with components like Angular Material does and that the expectation is to create your own (or buy them?). But it's an experience as a developer that I should have so that if that side hustle came along or I had to change jobs for some unfortunate reason, I would be a bit more prepared.

Setting Up

The report builder project has already been created. I do need to come up with a fancy name or acronym. But that usually comes later when the meetings start up to go over the tool. I think it's important to have a cool name so that the customer, PM, and developer can talk about the application in a way that's familiar and casual, no matter with it is in the development cycle. Saying that we are working on Report Builder is kind of cold and out of reach. But if we say we are developing ReBA (Report Building Application - just made this up), it sounds warm and cordial.

In googling to see if TailwindCSS would work with Angular, I came across a dev.to post with the very instruction / experience I was looking for. So let's see how this goes. I'll be following the post starting at the Angular version > 11.2 as ReBA will be on 11.2.14.

First step was to execute npm install -D tailwindcss

Seemed to work find except for a npm audit issue with the glob-parent module. After some research, this appears to be a false positive of a concern. But not willing to let it go and trying to understand the workings of Angular a bit more, I began investing the package.json and package-lock.json files. I discovered that the webpack-dev-server module was a bit outdated and contained a dependency on an older version of the glob-parent module. So I updated the webpack-dev-server module to the latest version and now the app is golden. (Narrator: For now.) And that didn't last long... (Narrator: No...no it didn't).

So I've gone down the rabbit hole that is web development these days for anything beyond AngularJS. At first I got an WORKER_THREADS error when trying to do an ng serve to make sure ReBA works. But apparently the latest version of Angular doesn't work with NodeJS 10-. Installing the latest stable version of NodeJS seems to have resolved the issue. ReBA is alive. Okay, let's continue on with the TailwindCSS (Narrator: one eternity later...) installation.

Next up is the installation of the TailwindCSS optional plugins.

npm i @tailwindcss/typography
npm i @tailwindcss/forms

Both installed without issue. Whew!

....and of course that was only temporary. For some reason, I couldn't get the style.css implementation via the blog post to work. In googling for more information, it appears that scss would be the way to go. In order to convert the project from css to scss, I executed:

ng config schematics.@schematics/angular:component.style scss

Then I updated the three scss imports accordingly and put the tailwind.config.js file into the root folder of the project (per the dev.to post).

ng serve Finally...a button. I don't think I've ever been so happy to see a button in ages.

Next up: Application UI and Data Architecture