TailwindCss setup coding frontend

This is a blog about how to setup tailwind css.(It is found on tailwind documentation but I like this)

for quick reference

make a file index.html and open tailwind css doucmentation (you know)

go to terminal then type (you need to install node js .duh )

npm init -y
npm i -D tailwindcss
npx tailwindcss init

go to the file name(tailwind.config.js)

make changes in content

a)content : change below

 module.exports = {
   content: ['./*.html'],
   // content:['./code/*.html'], //if index.html code folder
   theme: {

b) make input.css folder and put this(you can manually type this or you can copy from tailwindcss doumentation )

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

c) go to the package.json folder and make changes this

(remove test)

      "scripts": {
         "build":"tailwindcss -i ./input.css -o ./css/main.css",
     "watch":"tailwindcss -i ./input.css -o ./css/main.css --watch"

       },

npm run build

After npm run build

(in terminal it make css folder)

d) go to index.html file the link to css like
```
  <link rel="stylesheet" href="/css/main.css">
```
npm run watch

After npm run watch your can test it like this
```
 <body>
     <div class="bg-purple-600 w-full h-96"></div>
   </body>
```
then open with live server you can see the result
If you close vs code then resume the project type npm run watch before you start coding . Otherwise it doesn't show new tailwind css properly.

Read this if you wanna learn in deep about setup otherwise its done you can code in tailwindcss

The command "npm init -y" is used to initialize a new Node.js project with default settings.(you can change the package the json file if you want to )
The command "npm i -D tailwindcss" is used to install the Tailwind CSS framework as a development dependency in a Node.js project
The command "npx tailwindcss init" is used to generate a default configuration file for Tailwind CSS in a project(make tailwind.config.json file)

Tutorial for TailwindCss setup

`npm init -y`

`npm i -D tailwindcss`

`npx tailwindcss init`