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
Top comments (6)
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).
It didn't works out for me :0
Follow the instructions but tailwindcss does not compile components or utilites, just only base. The tailwind.css only have normalize code. Any help?
fairly decent tutorial
For those who cannot get it done install postCSS Language support plugin first in vscode and then compile the css
Thank You!