Original Post

I am writing this post after doing something that worked and then forgetting what I did. I tried searching for a similar solution to help me recall what I forgot I did and discovered that the info out there is perhaps not the best approach. Essentially these are just some developer notes on an approach to integrating tailwind with my Nx managed workspace with a react app.

Ok, so some context first. I am a fan of Tailwind CSS. Years of fighting with Ant, Material Design, Bootstrap and more have left me with a bad taste for “UI Frameworks” in React. Over the last year I have been tinkering with Tailwind and have come to believe it is the future of UI for web. I will spare you my further opinions on the matter and assume that since you are here reading this you know what I am talking about already.

I am also a recent convert to Nx. Born of the Angular world, Nx is the missing piece I have been hunting for to manage large React projects which involve larger back-ends and the need to separate sections of the app into libraries. Again, since you are hear reading this I will assume you know what Nx is and why its pretty good. Now onto the good stuff…

I created a new Nx workspace with an api and react app. Great, nothing special there. Then I wanted to add in tailwind. There are many ways to pull this off. Assume for the moment that using a CDN link in the html is off the table (I mean who really wants to risk the security issues involved with that — unless of course you are managing your own CDN setup but thats a different story altogether). For my case adding tailwind means having control over the generation of the css.

What I did

Install the dependencies

npm i \
  tailwindcss \
  autoprefixer@9.8.6 \
  postcss \
  postcss-cli \
  postcss-nested -D

I am using autoprefixer@9.8.6 because there are known issues with the latest release at the time of this writing.

#notes #nodejs