Nx, React & Tailwind made Simple: New and Improved! (v2)

Photo by Fotis Fotopoulos on Unsplash

You may have read an article I published late last year titled “Nx, React & Tailwind made Simple”. At the time I wrote that, Tailwind 2.0 was just getting released and there were some sharp edges with postcss compatibility— which is why I wrote the thing. Well, its about three months later and the good news is that we can simplify our integration of Tailwind in Nx for react applications. That is what this article is about. It’s a lighter, simpler and cleaner way to do the same thing.

All the steps

Step 1: Create your Nx workspace

npx create-nx-workspace my-workspace

Chose to create a react app (I called mine ‘my-app’) that uses CSS (I wont cover other integrations here). Once the modules are done installing and the workspace is created. Change into that new directory — in my case it was “my-workspace”

Step 2: Install the tailwind stuff into the new workspace

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Step 3: Create the tailwind config

Change directories, go to ‘apps/my-app’ (or what ever you called your react app). Then, execute the following:

npx tailwindcss init

This will create the tailwind.config.js file in the root of the react app. It will look like this:

While we are in the react app path, locate and edit the styles.css (it should be empty if you just created the app)

Step 4: Edit your workspace.json

Open up the workspace.json file in your editor and locate the “app” name and trace down the config for that app until you see the “test” (you will see “serve”:…, “lint”…, “test”….) add this following snippet after the “test” config.

Change the cwd to match your react app name.

Additionally, edit the “my-app” build config. Specifically we will need to add the path of the soon to be generated tailwind.css file.

Note the “styles” array includes the path of the tailwind.css file that we generate in the next step. This config value is not required to generate the file, but rather is necessary to have it included when we build our react app.

Step 5: Generate your tailwind.css

From the workspace root (and assuming you have nx installed globally — if not then maybe use npx)

nx run my-app:build-tailwind-css

And just like that you have a tailwind.css file generated in your react app. You can now import it where you would like to in your react app.

If you found this useful, please consider giving a clap.