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/
- Open terminal in VS Code & type
npm init-yThis will generate the package.json file
- Install Tailwind CSS with the following command
npm install -D [email protected] [email protected] [email protected]
- 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