This content originally appeared on DEV Community and was authored by Abhi Raj
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
This content originally appeared on DEV Community and was authored by Abhi Raj
Abhi Raj | Sciencx (2021-09-02T23:53:04+00:00) how to install TailwindCSS via NPM (all steps explained). Retrieved from https://www.scien.cx/2021/09/02/how-to-install-tailwindcss-via-npm-all-steps-explained/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.