Tailwind-CSS tutorial using PostCSS

( 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

• Vite is basically used to create a local development server

Step 2 -

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

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

Configure your template paths [tailwind.config.js]

/** @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

Step 3 -

Now step-up tailwind.config.js

content=["file location"]

Step 4 -

Now , add script in package.json file

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

Step 5 -

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;

Step 6 -

Now Start the development server

npm start