Setting up Tailwind with React

We all know setting up tailwind with React is somewhat a pain for the beginners. I personally got into this problem too. Today here we will be setting up tailwindcss from scratch.

Note: This tutorial can also be used in a project made before

Without talking anymore lets jump right into the tutorial

First we will start our react project in the normal way

npx create-react-app project-name

Right when you see the Happy Hacking Text in your screen, then you know that its done

Cd into the Folder and lets start editing and stuffs!

Open your code editor. (Mine is VSCode)

Now open your terminal and Install the following things.

With NPM:

npm i -D tailwindcss postcss autoprefixer postcss-cli

With Yarn:

yarn add -D tailwindcss postcss autoprefixer postcss-cli

Now Create output.css and tailwind.css Files in the src folder like in the structure given below.

src/
├── styles/
         ├── output.css
         └── tailwind.css
├── app.js
└── index.js

Your folder structure should look like this

In the tailwind.css file, Paste this code.

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

Leave the Output.css file empty because it will be taken care of Postcss.

Now enter the following two commands in the Command Line:
(Works with both yarn and npm)

npx tailwindcss init --full

and

npx tailwindcss init tailwindcss-config.js -p

Now we have to edit the Following Lines in package.json

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
},

Now in order to wrap up and actually code in tailwind we have to import the following line in out App.js file.

import './styles/output.css'

Now start the project and play with Tailwind yourself!

npm run start

or

yarn start

We are all good. We can now use tailwind in our react project!

HOLD UP! But there is no Intellisense :(

First of all it is all bland and there is no suggestions on what will we do.

For that we need to add a Extension in VSCode for Tailwind

Simply search Tailwind in the extensions tab and install the first one :)

Restart your code editor and now we have awesome Tailwind Intellisense!

👑 Happy Hacking!

Follow me on Github at https://github.com/hasib-rashid