Nx, React & Tailwind CSS  -  Made Simple

Nx, React & Tailwind CSS  -  Made Simple

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…

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 \
  [email protected] \
  postcss \
  postcss-cli \
  postcss-nested -D

I am using [email protected] because there are known issues with the latest release at the time of this writing.

notes nodejs

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire NodeJs Developer

Looking to build dynamic, extensively featured, and full-fledged web applications? **[Hire NodeJs Developer](https://hourlydeveloper.io/hire-dedicated-node-js-developer/ "Hire NodeJs Developer")** to create a real-time, faster, and scalable...

Decoding Nodejs

The main goal of this blog is to explain the “Architecture of Nodejs” and to know how the Nodejs works behind the scenes. Generally, most of the server-side languages, like PHP, ASP.NET, Ruby, and including Nodejs follows multi-threaded architecture. That means for each client-side request initiates a new thread or even a new process.

How to Install NodeJS on Ubuntu 19.04

In this tutorial, you will learn how to install Node onto Ubuntu 19.04 Disco Dingo. We will cover installation from the default repositories and, for those wanting more recent releases, how to install from the NodeSource repositories.

What is The Republic Note (NOTE) | What is NOTE token

The Republic Note, which will launch on Algorand, pays holders when startups and private equities funded through certain Republic investment platforms get acquired or go public. We intend to make payment in stablecoin proportional to how many tokens a holder owns. Beyond payouts, holding the Republic Note will offer investor perks including investment vouchers, waitlist priorities, and other platform benefits across the Republic Ecosystem. What is The Republic Note (NOTE) | What is NOTE token

Top NodeJS Mobile App Development Company in USA

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!