Install tailwind in terminal

Then use these to install

npm install -D tailwindcss

npx tailwindcss init

You will see a tailwind.config.js file created

copy paste this

/** @type {import('tailwindcss').Config} */

export default {

content: ["./css/tailwindCSS/Cliway/**/*.{html,js}"],

theme: {

extend: {},

},

plugins: [],

}

here I will keep my css files in this ./css/tailwindCSS/Cliway location. You have to change according to your path.

then within the Cliway folder, create input.css and paste these

@tailwind base;

@tailwind components;

@tailwind utilities;

then in the terminal run this

npx tailwindcss -i ./css/tailwindCSS/Cliway/input.css -o ./css/tailwindCSS/Cliway/output.css --watch

Here my input.css file is in the ./css/tailwindCSS/Cliway/input.css path

You can change this according to your one.

once done, the code will build properly and give an output in the output.css

Also, install this extension

Let’s play with this now

Once I added the class underline here

There was a css added for me automatically in the output.css file

Again, when I did choose background colour orange-700 and underline for my p element

I got this in output.css

Finally we add this style file path here

<link href="./output.css" rel="stylesheet">

This is my output in the browser

Done!