Using Tailwind by CLI

HERE, WE NEED TO REFRESH THE PAGE AGAIN AND AGAIN TO SEE IF THE STYLING IS ADDED. HENCE, WE INSTALL VITE HERE.( WE'VE INSTALLED DURING REACT)

HRE, WE WILL DOWNLOAD THE VERSION V3.4.17

TO INSTALL:

npm install -D tailwindcss@3

npx tailwindcss init -p

WE ADD A FLAG -p TO DOWNLOAD POSTCSS.CONFIG.JS

DOWNLOAD VITE : npm i vite

IN TAILWIND.CONFIG.JS , content:["*"]

WHICH MEANS THAT TAILWIND IS APPLIED FOR ALL(*) THE FILES.HERE, WE CAN DEFINE THE FILES THAT WE WANT TAILWIND TO BE APPLIED FOR.

WE CREATE A CSS FILE, AND ADD THESE LINES.

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

IN PACKAGE.JSON

  "scripts": {
    "start": "vite"
  },

NOW, LINK CSS WITH HTML.

HERE, WE ADDED ADDITIONAL AUTOPREFIXER USING COMMAND:

npm install autoprefixer postcss --save-dev (CHATGPT)

Tailwind