Adding/upgrading tailwind CSS to v3.0 to existing ReactJS application

You already have React app up and running for some reason you wish to add tailwind to it or upgrade the version of tailwind, don't worry, I got you covered.

if you are upgrading?

It is advisable to delete your node_module folder, package-lock.json file, uninstall tailwindcss, postcss, autoprefixer and delete any other tailwind configuration file in your project

to uninstall them, run

npm uninstall tailwindcss postcss autoprefixer

or

npm un tailwindcss postcss autoprefixer

if you use

npm install -D tailwindcss postcss autoprefixer

in the previous installation,

if you have different version of tailwindcss, postcss, autoprefixer ? Check your package.json file to see the version and uninstall it like this

npm un postcss@^7 tailwindcss@npm:@tailwindcss/postcss7-compat autoprefixer@^9

Uninstall craco if you use craco and update your scripts in package.json

npm un craco

and your package.json should change from this

"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"

to this

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

To install new tailwind CSS

Now install tailwindcss, postcss and autoprefixer as dev dependencies. like this

npm install -D tailwindcss postcss autoprefixer

Hola!!! Tailwind CSS successfully installed. After finish installing, then initialize tailwind CSS with

npx tailwindcss init

Now a tailwind.config.js will be created in your react root directory. This contains all your tailwind CSS settings, like themes (colors), screen sizes. copy the code below and add it to your tailwind.config.css file

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Change

content: [],

to

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Now the file will look like this

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adding tailwind CSS

Now go to your CSS entry-level file index.css and add the following lines of code

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally!

npm run start

Now start editing your component with tailwind classes

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello, world!
    </h1>
  )
}

Hola! Tailwind CSS is set, up, and running, for full docs, visit Here

PLS: Leave a comment, or follower me on Twitter @NigerianCoder