Tailwind CSS setup

*Tailwind CSS * is an open source CSS framework. It gives us low-level utility-classes to implement CSS in our projects. By low level we mean that the utility classes gives us style elements instead of style components. E.g.- 'bg-red-200' in Tailwind gives red background colour to our element where as in frameworks like bootstrap or materialize we get fully styled components like buttons, forms etc.
Here are the basic steps to include Tailwind CSS in our javaScript project.

Step 1: Get node.js installed in your computer. You can get it by going the nodejs.org and selecting the right version for your computer.

Step 2: Go to your project folder in the terminal and write

npm init

This will include package.json file to your project folder. you can check this to know your project dependencies.

Step 3: On the terminal on the same address of your project folder, write

npm i tailwindcss

This will include Tailwind CSS to your project. You can check this as a dependency in your package.json file.

Step 4: Now go to your package.json file and in the script tag and replace build tag with

"build-css": "tailwindcss build src/style.css -o public/style.css --watch"

Step 5: Now in your terminal, write:

npm run build-css

This will compile all your tailwind file in your public CSS file.

Now you can use tailwind CSS utility classes in your project.