DEV Community

Abhi Raj
Abhi Raj

Posted on

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
Enter fullscreen mode Exit fullscreen mode

now, go inside the folder

cd .\tailwind_with_npm\
Enter fullscreen mode Exit fullscreen mode

Now make a package.json file

npm init -y
Enter fullscreen mode Exit fullscreen mode

Now install tailwindCSS package and some other packages with npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
texxs profile image
Texx Smith

This didn't work for me. Nor do the instructions on tailwindcss.com. The instructions here are 2 years old and from a third party, so its sorta understandable they don't work, but the instructions on tailwindcss.com should work. And they don't, not even close.

Reached out to them on twitter and they just ignored me. I don't blame them. But maybe I'll make a video of what happens when I follow their instructions and add some of my questions (their directions are pretty poorly written, but I think I was able to follow them).

Collapse
 
reactwindd profile image
reactwindd

It didn't works out for me :0

Collapse
 
ob2code profile image
Huy Dang

Follow the instructions but tailwindcss does not compile components or utilites, just only base. The tailwind.css only have normalize code. Any help?

Collapse
 
pfedprog profile image
Pavel Fedotov

fairly decent tutorial

Collapse
 
ujjwaltwitx profile image
Ujjwal Pratap Singh

For those who cannot get it done install postCSS Language support plugin first in vscode and then compile the css

Collapse
 
nahid570 profile image
Nahid Faraji

Thank You!