diff --git a/folio-board/components/Panels/__snapshots__/Panel.test.jsx.snap b/folio-board/components/Panels/__snapshots__/Panel.test.jsx.snap
index 47e996cb..e6ef67dd 100644
--- a/folio-board/components/Panels/__snapshots__/Panel.test.jsx.snap
+++ b/folio-board/components/Panels/__snapshots__/Panel.test.jsx.snap
@@ -2,11 +2,11 @@
 
 exports[`Panel should render 1`] = `
 <div
-  className="position:absolute z:5 select:none"
+  className="position-absolute z-5 select-none"
   style={Object {}}
 >
   <div
-    className="b:1 b:solid b:gray-300 r:lg shadow:md items:center bg:white d:flex gap:2 p:2"
+    className="b-1 b-solid b-gray-300 r-lg shadow-md items-center bg-white d-flex gap-2 p-2"
   >
     CONTENT
   </div>
@@ -15,7 +15,7 @@ exports[`Panel should render 1`] = `
 
 exports[`PanelButton should render 1`] = `
 <div
-  className="justify:center items:center r:md d:flex text:lg p:2 text:gray-800 bg:gray-800:hover text:white:hover cursor:pointer"
+  className="justify-center items-center r-md d-flex text-lg p-2 text-gray-800 bg-gray-800:hover text-white:hover cursor-pointer"
 >
   CONTENT
 </div>
diff --git a/folio-board/components/commons/__snapshots__/Button.test.jsx.snap b/folio-board/components/commons/__snapshots__/Button.test.jsx.snap
index 6b1f3158..027483b1 100644
--- a/folio-board/components/commons/__snapshots__/Button.test.jsx.snap
+++ b/folio-board/components/commons/__snapshots__/Button.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Button should render 1`] = `
 <div
-  className="d:flex items:center justify:center gap:2 select:none p:3 r:lg cursor:pointer"
+  className="d-flex items-center justify-center gap-2 select-none p-3 r-lg cursor-pointer"
   onClick={null}
 />
 `;
diff --git a/folio-board/components/commons/__snapshots__/Dropdown.test.jsx.snap b/folio-board/components/commons/__snapshots__/Dropdown.test.jsx.snap
index 879b1238..19aab00c 100644
--- a/folio-board/components/commons/__snapshots__/Dropdown.test.jsx.snap
+++ b/folio-board/components/commons/__snapshots__/Dropdown.test.jsx.snap
@@ -2,21 +2,21 @@
 
 exports[`Dropdown should render 1`] = `
 <div
-  className="top:0 left:0 position:absolute mt:1"
+  className="top-0 left-0 position-absolute mt-1"
 >
   <div
-    className="bg:white shadow:md w:56 p:3 r:lg d:flex flex:col gap:0"
+    className="bg-white shadow-md w-56 p-3 r-lg d-flex flex-col gap-0"
   >
     <div
-      className="d:flex items:center gap:2 r:md px:3 py:2 select:none bg:gray-200:hover cursor:pointer"
+      className="d-flex items-center gap-2 r-md px-3 py-2 select-none bg-gray-200:hover cursor-pointer"
       onClick={[Function]}
       tabIndex="0"
     >
       <div
-        className="d:flex text:lg items:center text:gray-700"
+        className="d-flex text-lg items-center text-gray-700"
       />
       <div
-        className="d:flex items:center text:sm text:gray-700"
+        className="d-flex items-center text-sm text-gray-700"
       >
         <span>
           Item 1
@@ -24,15 +24,15 @@ exports[`Dropdown should render 1`] = `
       </div>
     </div>
     <div
-      className="d:flex items:center gap:2 r:md px:3 py:2 select:none bg:gray-200:hover cursor:pointer"
+      className="d-flex items-center gap-2 r-md px-3 py-2 select-none bg-gray-200:hover cursor-pointer"
       onClick={[Function]}
       tabIndex="0"
     >
       <div
-        className="d:flex text:lg items:center text:gray-700"
+        className="d-flex text-lg items-center text-gray-700"
       />
       <div
-        className="d:flex items:center text:sm text:gray-700"
+        className="d-flex items-center text-sm text-gray-700"
       >
         <span>
           Item 2
diff --git a/folio-board/components/commons/__snapshots__/Modal.test.jsx.snap b/folio-board/components/commons/__snapshots__/Modal.test.jsx.snap
index 36221f97..9a7b229b 100644
--- a/folio-board/components/commons/__snapshots__/Modal.test.jsx.snap
+++ b/folio-board/components/commons/__snapshots__/Modal.test.jsx.snap
@@ -3,13 +3,13 @@
 exports[`Modal should render 1`] = `
 Array [
   <div
-    className="position:fixed w:full h:full bg:gray-900 o:50 z:9 top:0 left:0"
+    className="position-fixed w-full h-full bg-gray-900 o-50 z-9 top-0 left-0"
   />,
   <div
-    className="position:fixed w:full h:full d:flex items:center justify:center z:10 top:0 left:0"
+    className="position-fixed w-full h-full d-flex items-center justify-center z-10 top-0 left-0"
   >
     <div
-      className="r:xl b:solid b:1 b:gray-300 bg:white w:full p:8"
+      className="r-xl b-solid b-1 b-gray-300 bg-white w-full p-8"
       style={
         Object {
           "maxWidth": "500px",