Setup React and Tailwind - The Easy Way
Tags: react, webdev, tailwindcss, productivity
Published: 2023-02-13 10:48:16

---
title: Setup React and Tailwind - The Easy Way
canonical_url: 'https://blog.nrwl.io/setup-react-and-tailwind-the-easy-way-15592eebf4bc?source=friends_link&sk=06748bc07ec6e83209f9affa8556613d'
published: true
description: "Don't read the docs, generate your Tailwind setup"
cover_image: 'https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh6knbxkaerqavbhbr7l.png'
tags:
 - react
 - webdev
 - tailwindcss
 - productivity
---

Developers love to argue about whether Tailwind is good, almost like arguing about code formatting or tabs vs. spaces (I use spaces!!). But whether you love it or hate it, Tailwind has found massive adoption among the frontend developer community. In fact, I'm right now in the process of refreshing and rebuilding my personal site (it will be at https://juri.dev soon, so keep an eye on that).

## Table of Contents
&nbsp;1. [Prefer a video? I've got you covered!](#prefer-a-video-ive-got-you-covered)
&nbsp;2. [Configuring Tailwind for React](#configuring-tailwind-for-react)
&nbsp;3. [There is an easier way - Code Generators](#there-is-an-easier-way-code-generators)
&nbsp;4. [Generating a Tailwind Setup](#generating-a-tailwind-setup)
&nbsp;5. [That's it!](#thats-it)

## Prefer a video? I've got you covered!

{% youtube https://youtu.be/hHh0xhzSnx8 %}

## Configuring Tailwind for React

Tailwind has good docs around getting started quickly. There are options to set up Tailwind with their Tailwind CLI, PostCSS, and framework-specific guides.

![Tailwind docs screenshot installation instructions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q3ef6c5aku3otvf2ns3.png)

These steps mostly involve
- installing `tailwindcss`, `postcss` and `autoprefixer`
- configuring your `tailwind.config.js` to make sure Tailwind can properly "purge" its generated CSS file based on the content files (usually your `html`, `[j|t]sx`, `[t|j]s` )
- adjusting your main CSS file to include the Tailwind base classes (in case you want to use Tailwind also in your CSS files, a heated topic)

**One important thing:** if you use [Create-React-App](https://create-react-app.dev/) you might want to check out [what the Tailwind docs say](https://tailwindcss.com/docs/guides/create-react-app) first.

![Tailwind docs CRA warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0afcnevhyuouu61eolu8.png)

This came up a couple of weeks ago due to a [PR opened on the CRA repo](https://github.com/reactjs/reactjs.org/pull/5487) asking to kinda deprecate it as the main choice for new React projects. I couldn't help but share my opinion on this as well:

{% youtube https://youtu.be/fkTz6KJxhhE %}

And so did also [Fireship](https://youtu.be/2OTq15A5s0Y) and ultimately [Dan Abramov](https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741). Anyway, if you're in the **"CRA situation", read on**. There's a way to get unblocked there.

## There is an easier way - Code Generators

Code generators speed up such configuration tasks. They are valuable for scaffolding the initial project structure and adding new features to the app setup, such as Tailwind.

Nx has such generators. To use them, you need an Nx-based React setup. If you're starting new, you can create an [Nx Standalone React project](https://nx.dev/getting-started/react-standalone-tutorial) easily using the following command

```
$ npx create-nx-workspace reactapp --preset=react-standalone
```

![Nx react bundler choice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqovccyo2uvczcqn79ha.png)

As you can see, this allows you to choose which bundler to use as well as other options (such as the CSS setup). Again, this is already such a code generator that creates this initial project scaffold.

Alternatively, **if you happen to use CRA already**, you can easily convert to an Nx and Vite (or also Webpack) based setup by running:

```
$ npx nx@latest init
```

You can pass `--vite=false` if you still want to keep the Webpack configuration or pass `--integrated` if you already plan to have a monorepo instead of a single-project setup. The [Nx docs go into more detail here](https://nx.dev/recipes/adopting-nx/migration-cra).

## Generating a Tailwind Setup
Once you have a [Nx-based React](https://nx.dev/getting-started/react-standalone-tutorial) setup, adding Tailwind is as easy as running:

```
$ npx nx g @nrwl/react:setup-tailwind
```

This launches a generator that will guide you through the setup. It works **not only for Nx React-based projects**, but **also if you use Next.js** in an Nx workspace.

You'll get
- Tailwind, PostCSS, and Autoprefixer installed
- Tailwind configured together with PostCSS
- your main `styles.css` file updated with the Tailwind base classes

![Nx React Tailwind setup result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovvoiwotce986zvjnnuy.png)

## That's it!

You should be all setup and ready now! Here are some related resources to explore:
- [Nx docs: React Standalone tutorial](https://nx.dev/getting-started/react-standalone-tutorial)
- [Nx docs: React Monorepo tutorial](https://nx.dev/react-tutorial/1-code-generation)
- [Youtube: Is CRA Dead](https://youtu.be/fkTz6KJxhhE)
- [Nx docs: Migrate CRA to React and Vite](https://nx.dev/recipes/adopting-nx/migration-cra)

---

## Learn more
- 🧠 [Nx Docs](https://nx.dev)
- 👩‍💻 [Nx GitHub](https://github.com/nrwl/nx)
- 💬 [Nx Community Slack](https://go.nrwl.io/join-slack)
- 📹 [Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
- 🥚 [Free Egghead course](https://egghead.io/courses/scale-react-development-with-nx-4038)

Also, if you liked this, click the :heart: and make sure to follow [Juri](https://twitter.com/juristr) and [Nx](https://twitter.com/nxdevtools) on Twitter for more!

{% embed https://dev.to/t/nx %}