diff --git a/__tests__/altNodes/altConversions.test.ts b/__tests__/altNodes/altConversions.test.ts
index ab525f29..c7a6e9ae 100644
--- a/__tests__/altNodes/altConversions.test.ts
+++ b/__tests__/altNodes/altConversions.test.ts
@@ -16,7 +16,7 @@ describe("AltConversions", () => {
     rectangle.resize(20, 20);
 
     expect(tailwindMain(convertIntoAltNodes([rectangle]))).toEqual(
-      '<div class="w-5 h-5"/>'
+      '<div class="w-5 h-5"></div>'
     );
   });
 
@@ -41,7 +41,7 @@ describe("AltConversions", () => {
 
     expect(htmlMain(convertIntoAltNodes([frame]))).toEqual(
       `<div style="width: 20px; height: 20px;">
-    <div style="width: 20px; height: 20px;"/>
+    <div style="width: 20px; height: 20px;"></div>
 </div>`
     );
   });
@@ -126,7 +126,7 @@ describe("AltConversions", () => {
 
     expect(
       tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
-    ).toEqual(`<div class="w-5 h-5 rounded-full"/>`);
+    ).toEqual(`<div class="w-5 h-5 rounded-full"></div>`);
   });
 
   it("Line", () => {
@@ -146,7 +146,7 @@ describe("AltConversions", () => {
 
     expect(
       tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
-    ).toEqual(`<div class="w-5 h-0.5"/>`);
+    ).toEqual(`<div class="w-5 h-0.5"></div>`);
   });
 
   it("Vector", () => {
@@ -173,6 +173,8 @@ describe("AltConversions", () => {
 
     expect(
       tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
-    ).toEqual(`<div class="w-5 h-5 bg-pink-900 bg-opacity-50 rounded-lg"/>`);
+    ).toEqual(
+      `<div class="w-5 h-5 bg-pink-900 bg-opacity-50 rounded-lg"></div>`
+    );
   });
 });
diff --git a/__tests__/altNodes/convertGroupToFrame.test.ts b/__tests__/altNodes/convertGroupToFrame.test.ts
index 69b10667..a08c189d 100644
--- a/__tests__/altNodes/convertGroupToFrame.test.ts
+++ b/__tests__/altNodes/convertGroupToFrame.test.ts
@@ -26,7 +26,7 @@ describe("Convert Group to Frame", () => {
     const converted = convertGroupToFrame(group);
     expect(tailwindMain([convertNodesOnRectangle(converted)]))
       .toEqual(`<div class="relative w-5 h-5">
-    <div class="w-full h-full"/>
+    <div class="w-full h-full"></div>
 </div>`);
   });
 
diff --git a/__tests__/altNodes/convertNodesOnRectangle.test.ts b/__tests__/altNodes/convertNodesOnRectangle.test.ts
index 861bf25f..80ce2d3e 100644
--- a/__tests__/altNodes/convertNodesOnRectangle.test.ts
+++ b/__tests__/altNodes/convertNodesOnRectangle.test.ts
@@ -42,7 +42,7 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([converted])).toEqual(
       `<div class="w-24 h-24">
-    <div class="w-full h-full bg-black"/>
+    <div class="w-full h-full bg-black"></div>
 </div>`
     );
   });
@@ -99,7 +99,7 @@ describe("convert node if child is big rect", () => {
     expect(tailwindMain([invisibleConverted])).toEqual(
       `<div class="w-24 h-24">
     <div class="inline-flex items-start justify-start w-full h-full pr-12 pb-12">
-        <div class="flex-1 h-full bg-white"/>
+        <div class="flex-1 h-full bg-white"></div>
     </div>
 </div>`
     );
@@ -157,7 +157,7 @@ describe("convert node if child is big rect", () => {
     expect(tailwindMain([converted])).toEqual(
       `<div class="w-5 h-5">
     <div class="inline-flex items-center justify-center w-full h-full p-1 bg-black">
-        <div class="flex-1 h-full bg-white"/>
+        <div class="flex-1 h-full bg-white"></div>
     </div>
 </div>`
     );
@@ -190,8 +190,8 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([convertNodesOnRectangle(group)]))
       .toEqual(`<div class="relative" style="width: 120px; height: 20px;">
-    <div class="w-24 h-24 absolute left-0 top-0"/>
-    <div class="w-5 h-28 absolute left-0 top-0"/>
+    <div class="w-24 h-24 absolute left-0 top-0"></div>
+    <div class="w-5 h-28 absolute left-0 top-0"></div>
 </div>`);
   });
   it("group with 2 children", () => {
@@ -251,7 +251,7 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([conv])).toEqual(
       `<div class="inline-flex items-start justify-start w-5 h-5 pr-3 pb-3 bg-black">
-    <div class="flex-1 h-full bg-white"/>
+    <div class="flex-1 h-full bg-white"></div>
 </div>`
     );
   });
diff --git a/__tests__/altNodes/convertToAutoLayout.test.ts b/__tests__/altNodes/convertToAutoLayout.test.ts
index 626b6d8c..ee1eb066 100644
--- a/__tests__/altNodes/convertToAutoLayout.test.ts
+++ b/__tests__/altNodes/convertToAutoLayout.test.ts
@@ -59,8 +59,8 @@ describe("Convert to AutoLayout", () => {
     // output should be HORIZONTAL
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex items-start justify-end w-12 h-12 pr-2.5 pb-8">
-    <div class="w-1/2 h-full bg-white"/>
-    <div class="w-1/2 h-full bg-black"/>
+    <div class="w-1/2 h-full bg-white"></div>
+    <div class="w-1/2 h-full bg-black"></div>
 </div>`
     );
 
@@ -72,8 +72,8 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex flex-col items-start justify-end w-12 h-12 pr-8 pb-2.5">
-    <div class="w-full h-1/2 bg-white"/>
-    <div class="w-full h-1/2 bg-black"/>
+    <div class="w-full h-1/2 bg-white"></div>
+    <div class="w-full h-1/2 bg-black"></div>
 </div>`
     );
 
@@ -87,8 +87,8 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex flex-col space-y-1 items-end justify-end w-12 h-12 pb-1">
-    <div class="w-full h-5 bg-white"/>
-    <div class="w-5 h-5 bg-black"/>
+    <div class="w-full h-5 bg-white"></div>
+    <div class="w-5 h-5 bg-black"></div>
 </div>`
     );
 
@@ -103,8 +103,8 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex items-end justify-end w-12 h-12 pr-2.5">
-    <div class="w-1/2 h-full bg-white"/>
-    <div class="w-1/2 h-5 bg-black"/>
+    <div class="w-1/2 h-full bg-white"></div>
+    <div class="w-1/2 h-5 bg-black"></div>
 </div>`
     );
 
@@ -118,8 +118,8 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="relative" style="width: 50px; height: 50px;">
-    <div class="w-5 h-5 absolute bg-black" style="left: 10px; top: 10px;"/>
-    <div class="w-5 h-5 absolute left-0 top-0 bg-white"/>
+    <div class="w-5 h-5 absolute bg-black" style="left: 10px; top: 10px;"></div>
+    <div class="w-5 h-5 absolute left-0 top-0 bg-white"></div>
 </div>`
     );
   });
@@ -159,9 +159,9 @@ describe("Convert to AutoLayout", () => {
     // output should be HORIZONTAL
     expect(tailwindMain([convertToAutoLayout(frame)]))
       .toEqual(`<div class="inline-flex items-start justify-end w-12 h-12 pb-8">
-    <div class="w-5 h-full"/>
-    <div class="w-5 h-full"/>
-    <div class="w-5 h-full"/>
+    <div class="w-5 h-full"></div>
+    <div class="w-5 h-full"></div>
+    <div class="w-5 h-full"></div>
 </div>`);
   });
 });
diff --git a/__tests__/html/builderImpl/htmlColor.test.ts b/__tests__/html/builderImpl/htmlColor.test.ts
index 92b2fef5..43bf5df6 100644
--- a/__tests__/html/builderImpl/htmlColor.test.ts
+++ b/__tests__/html/builderImpl/htmlColor.test.ts
@@ -156,7 +156,7 @@ describe("HTML Color", () => {
     node.dashPattern = [];
 
     expect(htmlMain([node])).toEqual(
-      `<div style="width: 18px; height: 18px; background-image: linear-gradient(131deg, black, rgba(255, 0, 0, 1)); border-radius: 16px; border-style: solid; border-width: 4px; border-style: solid; border-color: rgba(63.75, 63.75, 63.75, 1);"/>`
+      `<div style="width: 18px; height: 18px; background-image: linear-gradient(131deg, black, rgba(255, 0, 0, 1)); border-radius: 16px; border-style: solid; border-width: 4px; border-style: solid; border-color: rgba(63.75, 63.75, 63.75, 1);"></div>`
     );
   });
 
diff --git a/__tests__/html/htmlMain.test.ts b/__tests__/html/htmlMain.test.ts
index a8a77b95..d8b18092 100644
--- a/__tests__/html/htmlMain.test.ts
+++ b/__tests__/html/htmlMain.test.ts
@@ -54,8 +54,8 @@ describe("HTML Main", () => {
 
     expect(htmlMain([convertToAutoLayout(node)]))
       .toEqual(`<div style="width: 320px; height: 320px; position: relative;">
-    <div style="width: 385px; height: 8px; left: 9px; top: 9px; position: absolute; background-color: white;"/>
-    <div style="width: 8px; height: 385px; left: 9px; top: 9px; position: absolute;"/>
+    <div style="width: 385px; height: 8px; left: 9px; top: 9px; position: absolute; background-color: white;"></div>
+    <div style="width: 8px; height: 385px; left: 9px; top: 9px; position: absolute;"></div>
 </div>`);
   });
 
@@ -91,7 +91,7 @@ describe("HTML Main", () => {
     child.parent = node;
     expect(htmlMain([node], "", true, true))
       .toEqual(`<div className="GROUP" style={{width: 32, height: 32, position: 'relative',}}>
-    <div className="RECT" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}}/>
+    <div className="RECT" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}} />
 </div>`);
   });
 
@@ -99,7 +99,9 @@ describe("HTML Main", () => {
     const node = new AltEllipseNode();
 
     // undefined (unitialized, only happen on tests)
-    expect(htmlMain([node])).toEqual('<div style="border-radius: 9999px;"/>');
+    expect(htmlMain([node])).toEqual(
+      '<div style="border-radius: 9999px;"></div>'
+    );
     // todo verify if it is working properly.
     node.x = 0;
     node.y = 0;
@@ -199,8 +201,8 @@ describe("HTML Main", () => {
 
     expect(htmlMain([convertToAutoLayout(node)], "", true, true))
       .toEqual(`<div className="FRAME" style={{width: 32, height: 32, position: 'relative',}}>
-    <div className="RECT1" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}}/>
-    <div className="RECT2" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute',}}/>
+    <div className="RECT1" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}} />
+    <div className="RECT2" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute',}} />
 </div>`);
   });
 
@@ -256,9 +258,9 @@ describe("HTML Main", () => {
 
     expect(htmlMain([node], "", false, true))
       .toEqual(`<div class="FRAME" style="width: 32px; height: 32px; display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
-    <div class="RECT1" style="width: 4px; height: 4px; background-color: white;"/>
-    <div style="width: 4px;"/>
-    <div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;"/>
+    <div class="RECT1" style="width: 4px; height: 4px; background-color: white;"></div>
+    <div style="width: 4px;"></div>
+    <div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;"></div>
 </div>`);
 
     node.primaryAxisAlignItems = "MAX";
@@ -269,9 +271,9 @@ describe("HTML Main", () => {
 
     expect(htmlMain([node], "", false, true))
       .toEqual(`<div class="FRAME" style="width: 32px; height: 32px; display: inline-flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;">
-    <div class="RECT1" style="width: 4px; height: 4px; background-color: white;"/>
-    <div style="width: 4px;"/>
-    <div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;"/>
+    <div class="RECT1" style="width: 4px; height: 4px; background-color: white;"></div>
+    <div style="width: 4px;"></div>
+    <div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;"></div>
 </div>`);
   });
 
diff --git a/__tests__/tailwind/builderImpl/tailwindColor.test.ts b/__tests__/tailwind/builderImpl/tailwindColor.test.ts
index 034db545..600efc28 100644
--- a/__tests__/tailwind/builderImpl/tailwindColor.test.ts
+++ b/__tests__/tailwind/builderImpl/tailwindColor.test.ts
@@ -282,7 +282,7 @@ describe("Tailwind Color", () => {
     node.cornerRadius = 16;
 
     expect(tailwindMain([node])).toEqual(
-      `<div class="w-4 h-4 bg-gradient-to-br from-black to-red-600 border-4 rounded-full border-gray-700"/>`
+      `<div class="w-4 h-4 bg-gradient-to-br from-black to-red-600 border-4 rounded-full border-gray-700"></div>`
     );
   });
 
diff --git a/__tests__/tailwind/size.test.ts b/__tests__/tailwind/size.test.ts
index 01f73724..09c1f680 100644
--- a/__tests__/tailwind/size.test.ts
+++ b/__tests__/tailwind/size.test.ts
@@ -89,7 +89,7 @@ describe("Tailwind Size", () => {
 
     expect(tailwindMain([frameNodeToAlt(node)]))
       .toEqual(`<div class="inline-flex items-center justify-center p-60" style="width: 500px; height: 500px;">
-    <img class="flex-1 h-full rounded-full" src="https://via.placeholder.com/8x8"/>
+    <img class="flex-1 h-full rounded-full" src="https://via.placeholder.com/8x8" />
 </div>`);
 
     expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("w-2 h-2 ");
@@ -261,10 +261,10 @@ describe("Tailwind Size", () => {
 
       expect(tailwindMain([node]))
         .toEqual(`<div class="inline-flex flex-col space-y-2.5 items-center justify-center w-56 h-72 px-2.5 bg-red-600">
-    <div class="w-full h-5 bg-white"/>
-    <div class="w-full h-5 bg-white"/>
-    <div class="w-24 h-5 bg-white"/>
-    <div class="w-8 h-5 bg-white"/>
+    <div class="w-full h-5 bg-white"></div>
+    <div class="w-full h-5 bg-white"></div>
+    <div class="w-24 h-5 bg-white"></div>
+    <div class="w-8 h-5 bg-white"></div>
 </div>`);
     });
   });
diff --git a/__tests__/tailwind/tailwindMain.test.ts b/__tests__/tailwind/tailwindMain.test.ts
index 7fc4b99d..9c214703 100644
--- a/__tests__/tailwind/tailwindMain.test.ts
+++ b/__tests__/tailwind/tailwindMain.test.ts
@@ -53,8 +53,8 @@ describe("Tailwind Main", () => {
 
     expect(tailwindMain([convertToAutoLayout(node)]))
       .toEqual(`<div class="relative" style="width: 320px; height: 320px;">
-    <div class="absolute bg-white" style="width: 385px; height: 8px; left: 9px; top: 9px;"/>
-    <div class="w-2 h-96 absolute" style="left: 9px; top: 9px;"/>
+    <div class="absolute bg-white" style="width: 385px; height: 8px; left: 9px; top: 9px;"></div>
+    <div class="w-2 h-96 absolute" style="left: 9px; top: 9px;"></div>
 </div>`);
   });
 
@@ -90,7 +90,7 @@ describe("Tailwind Main", () => {
     child.parent = node;
     expect(tailwindMain([node], "", true, true))
       .toEqual(`<div className="GROUP relative" style={{width: 32, height: 32,}}>
-    <div className="RECT w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}}/>
+    <div className="RECT w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}} />
 </div>`);
   });
 
@@ -98,7 +98,7 @@ describe("Tailwind Main", () => {
     const node = new AltEllipseNode();
 
     // undefined (unitialized, only happen on tests)
-    expect(tailwindMain([node])).toEqual('<div class="rounded-full"/>');
+    expect(tailwindMain([node])).toEqual('<div class="rounded-full"></div>');
 
     node.width = 0;
     node.height = 10;
@@ -195,8 +195,8 @@ describe("Tailwind Main", () => {
 
     expect(tailwindMain([convertToAutoLayout(node)], "", true, true))
       .toEqual(`<div className="FRAME relative" style={{width: 32, height: 32,}}>
-    <div className="RECT1 w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}}/>
-    <div className="RECT2 w-1 h-1 absolute" style={{left: 9, top: 9,}}/>
+    <div className="RECT1 w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}} />
+    <div className="RECT2 w-1 h-1 absolute" style={{left: 9, top: 9,}} />
 </div>`);
   });
 });