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

Leave a Reply

We use cookies to give you the best experience. Privacy Policy

eskişehir eskort - adana eskort - mersin escorteskişehir eskort - adana eskort - mersin escort