Hi Friends ❤️

Since I'll be writing a lot of ReactJS + TailwindCSS articles, I think it's only fair that I write an article specifically for creating a ReactJS app and adding TailwindCSS to it.

So without wasting time, let's do this!

Create-React-App

First, we create a ReactJS app using this command right in the terminal

npx create-react-app demo

Then, we move into the folder of the app we just created with the command:

cd demo

Now start your app:

npm start

View your app on the browser (at http://localhost:3000/) and you should see this:

Done? Good. Let's continue.

Adding TailwindCSS

Now, to add Tailwind, use this command to install it:

npm install -D tailwindcss postcss autoprefixer

and this command to create two important files that Tailwind will need:

npx tailwindcss init -p

This will create two new files, postcss.config.js & tailwind.config.js, in the root directory of our project.

Now on the tailwind.config.js file, remove all the code in it and replace it with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then finally, locate your index.css file in the root directory, delete all the codes in it, and add these 3 lines of code at the top:

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

That's it.

Everything should work well now.

To be sure, view your app on the browser and you should see something like this:

Notice any changes?

Yes, the "Learn React" link is no longer underlined.

TailwindCSS has removed all the default styles making our app ready to be styled using Tailwind utility classes.

If you don't notice any change on yours, please refer back to the instructions above and try to find out what you didn't do correctly.

Okay. That's it.

Hopefully, this article is useful to you if this is your first time using ReactJS + TailwindCSS.

See ya later! Gracias! ✌️