Tailwind-css

( It is a most popular framework of css )

[ Make sure you had already installed node.js( runtime-environment) in your system ]

Step 1 -

Install tailwind css in your system

Command -

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init vite

Add tailwind to your postcss configuration [postcss.config.js]

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      }
    }

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

** If you use the below command , the above files will automatically generated

Command - npx tailwindcss init -p

Now step-up tailwind.config.js

content=["file location"]

Now , add script in package.json file

"scripts": {
    "start": "vite",
    "watch": "npx tailwindcss -i input.css -o ./css/style.css --watch",
    "build": "vite build"
  },

Add tailwind directive in main.css

Create a file named main.css ( link this file to the head of main html file)

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

Now Start the development server

npm start