Complete set-up of Tailwind CSS with a minimum effort.

Introduction

In this article, I would be walking you through the complete setup of tailwind CSS in your web-dev project. Though we can use the CDN of tailwind CSS and start on a fly but always using a CDN has some disadvantages as well.

Installation

Firstly, we need a node.js on our system if you don't have it no worries, here you go with the installation of NODE

For making it simple and fast I have divided the process just into 6 steps

npm init

This will create a package.json file in our project folder

npm install -D tailwindcss

This will create dev dependency within our project & create the node_modules folder.

npx tailwindcss init

It will create a "tailwind.config.json" file and give the path of your index.html file to it under "content".

Create a folder "src" within that a file "input.css" ( SRC -> input.css) And add the below code to input.css file:-

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

Now run the below command

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

NOTE Make sure that in your case input.css file path is correct in my case it is

./src/input.css

Once you run this command it will create a folder "dist" and "output.css" file within it

Add the link tag to your HTML file as below

<link href="./dist/output.css" rel="stylesheet" />

CONGRATULATIONS!!! here you are done with your full Tailwind project setup pls go ahead & create something beautiful by using the tailwind CSS framework.

Happy coding !!!