Shajith

Without further ado, let’s get started on adding it.

I have a node.js application with a templating engine – Here currently I am using PUG.

The first step is to install tailwind CSS,

npm i tailwindcss

The second step is to create a tailwind.config.js file, which can be created using

npx tailwindcss init

The third step is to create two files, Input.css and output.css – You can decide with your own naming convention.

Add the following in the input.css file,

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

Add output.css as your stylesheet in your pug files or the HTML files,

npx tailwindcss -i path/to/input.css -o path/to/output.css --watch

I have it inside the public folder which is in the project root location, so I would write it as,

npx tailwindcss -i ./public/input.css -o ./public/main.css --watch

Now start adding classes to the template, or start adding tailwind classes to the template classes.

You can add this to your input.css file if in case,