Tailwind CSS Installation Guide

Installing Tailwind CSS can be a slightly different process depending on what other frameworks/tools you’re using. In this article, I will be showing you the most efficient way to install Tailwind CSS via npm on Linux. I will be using VS Code IDE for my installation & development.

• Download & install the latest NODE JS Current Version from the following website https://nodejs.org/en/

To check whether node js is properly installed on your machine run the following command in the terminal node -v If you get the version number displayed that means it’s properly installed.

• Open terminal in VS Code & type

npm init-y 

This will generate the package.json file

• Install Tailwind CSS with the following command

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

• Create a new folder inside your Tailwind CSS folder & name it “source”. Create “style.css” file inside the Source folder & add the following lines to the “source/style.css” file

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

• Create another folder inside the Tailwind CSS folder & name that as “public”. Create your “index.html” & “style.css” files inside that “Public” folder.
• Now open the “package.json” file & edit the script section like this

"scripts": {
"build:css": "tailwind build source/style.css -o public/style.css "
},

• Open up the terminal again inside VS Code & type the following command

npm rum build:css

• To generate the post css config & tailwind css config file use the following command

npx tailwindcss init -p