How to Set Up Tailwind CSS for Your Web Projects

Let’s First Create A Folder For Your Project

Open VS Code On Your System Then Open Terminal And Write The Command

mkdir web-project

cd web-project
npm init -y

npm init -y will make you a JSON File For Your Project

Make a New File For Your Project

Now It Does Look like These in your System

Also Check your npm & node Version By Entering These Command

node --version
npm --version

It Shows Like in the Image below your Current Node & NPM Version If it Does’nt Show Any version Then your System Does’nt Have Node & npm Installed Better Be Installed for your Project

Type These Commands In your Terminal

It Will Install Tailwind CSS and its dependencies

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

This creates:

• tailwind.config.js

• postcss.config.js

Now Configure the tailwind.config.js so Tailwind scans your files

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

It Will look Like These in Your System

Make Two New Folder One With Name build and Other with src.

In Build Folder Move The Index.html File And In Src Folder Make A New File With name input.css.

Now Just Copy paste the CSS in your input.css File

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

Build Tailwind

Add this script in your package.json

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

Using These Command you Don’t Have to Write Repeatedly Again and Again in your Terminal

Now the Last Step In your Index.html Press (Shift+!) and Hit Enter Button It will give the HTML Template for you and link your css file with your HTML

<link rel="stylesheet" href="/src/input.css">

It’s Done Now Congrats 🎉