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.

1: 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.

2: Open terminal in VS Code & type

npm init-y 

This will generate the package.json file

3: Install Tailwind CSS with the following command

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

4: Create a new folder inside your Tailwind CSS folder & name it as “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;

5: Create another folder inside the Tailwind CSS folder & name that as “public”. Create your “index.html” & “style.css” files inside that “Public” folder.

6: Now open the “package.json” file & edit the script section like this

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

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

npm rum build:css

8: To generate the postcss config & tailwindcss config file use the following command

npx tailwindcss init -p

Leave a Reply

Your email address will not be published.