Tailwind one of the most popular modern CSS frameworks. In this tutorial, we will learn how to quickly and easily connect this framework to React.js. So if you're here, then you don't need to be told what Tailwind is and how it compares to other frameworks. Let's jump right into connecting it.

I will be using the free VS Code IDE, you can use your favorite development application. I use an internal terminal inside the IDE, it opens from the main menu: Terminal -> New Terminal.

Inside the terminal, we create a new React application:

npx create-react-app my-tailwind-project

Go to the newly created folder with the command:

cd my-tailwind-project

React is installed, now we start installing the Tailwind CSS framework:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

After tailwind is installed and initiated you should see two new files in your project folder: postcss.config.js and tailwind.config.js Your folder should be something like this:

Add the paths to all of your template files in your tailwind.config.js file.

Add to the content array:

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

The last thing you need to do in order to make everything work is to add tailwind CSS directives to index.css file. Paste them at the top of the file:

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

That is basically all you have to do, now start your local server with a command:

npm start

If you started your local server before it is better to stop it with CTRL+C and restart again. Now everything should be working just fine. In order to check how everything works paste tailwind classes inside html tags, don't forget to use className instead of class:

<h1 className="text-6xl font-thin bg-clip-text text-transparent 
bg-gradient-to-r from-pink-300 to-orange-500">
            TailWind CSS
</h1>

That's all folks, I hope you liked this tutorial on connecting tailwind CSS and React, I wanted to make it as simple as possible for beginners. React is a great library and Tailwind is an excellent framework for rapid development in my opinion.