how to install TailwindCSS via NPM (all steps explained)

Hey tailwind CSS fans, I know most newcomers use CDN, so I thought of making a quick guide on how to install tailwindCSS via npm so you can use it for your vue or react js project or even HTML files.
for a deatiled in depth tutorial you see this

The first step is to make a folder where the tailwind CSS will reside

mkdir tailwind_with_npm

now, go inside the folder

cd .\tailwind_with_npm\

Now make a package.json file

npm init -y

Now install tailwindCSS package and some other packages with npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Now create a index.html file and style.css file

Inside the style.css file paste the below code and leave the html page for now

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

Now the we are going to to generate a fully compiled Tailwind CSS file from style,css

npx tailwindcss -i style.css -o tailwind.css

Now we are going to use the compiled tailwind.css file inside our index.html, to do that paste the below code in your html file

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="tailwind.css" rel="stylesheet">
</head>
<body>
<p class=”text-red-900”> Hello world </p>
</body>
</html>

Now open the html file in your browser, and if you see the hello world written in red, congrats tailwind CSS is working fine.

You may find this video helpful for a better and more in-depth understanding