Install and Use Tailwind CSS in React Js

When it comes to Styling our websites as quickly as possible it’s obvious to use UI frameworks like Bootstrap and Tailwind CSS but even if it is easier to style our web app with Bootstrap,

It leaves its smell in our website so we might use Tailwind CSS to create the most custom website possible without using CSS ( Of course Pure CSS is always the king ).

So let’s leave this debate for the latter and let’s learn How we can install and use Tailwind CSS to style our React application.

We can use Tailwind CSS in React App in two ways

By using Tailwind Play CDN
By Using Tailwind CLI

In this tutorial we are going to use Tailwind CSS in our React app so make sure to create a React App with npx create-react-app app-name

#By using Play CDN

Just add this code inside <head> </head> tag of your index.html inside the public folder and you are ready to use Tailwind CSS in your app.

<script src="https://cdn.tailwindcss.com"></script>

And You can use Tailwind Classes inside your components in your app.

#By using Tailwind CLI Tool

Tailwind CLI tool is an NPM package that can be used to configure and use Tailwind styling in a React or any Node project, so let’s configure it in your React App.

#Create React App

First, create a great app if you haven’t already with this command.

npx create-react-app my-project

Now navigate to the project folder with this command

cd my-project

#Install Tailwind CSS

Now we have to install Tailwind CSS and its related dependencies smooth the generation of our Output CSS from Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

Now run the init command below to generate configs files for Tailwind and Postcss i,e tailwind.config.js and postcss.config.js

npx tailwindcss init -p

#Configure your template paths

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

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

#Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

#Start your build process

Run your build process with npm run start.

npm run start

#Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

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