almost finish tailwind integration

resources/sass/pages/games/hangman.scss

@@ -17,14 +17,14 @@
 
 .figure-container {
     fill: transparent;
-    stroke: $mediumDark;
+    stroke: orange;
     stroke-width: 4px;
     stroke-linecap: round;
 }
 
 .figure-part {
     display: none;
-    stroke: $dark;
+    stroke: #7b341e;
 }
 
 .wrong-letters-container {
@@ -47,13 +47,11 @@
 }
 
 .word {
-    display: flex;
-    align-self: center;
-    justify-self: center;
+    @apply flex justify-center items-center;
     bottom: 1rem;
 
     .letter {
-        border-bottom: 3px solid $medium;
+        border-bottom: 3px solid #c05621;
         display: inline-flex;
         font-size: 30px;
         align-items: center;
@@ -69,16 +67,17 @@
     width: calc(100% - 6rem);
 
     .popup {
-        background-color: $medium;
+        background-color: #c05621;
         border-radius: 5px;
-        color: $light;
+        color: #fbd38d;
+        min-height: 10rem;
         padding: 20px;
         text-align: center;
 
         button {
             cursor: pointer;
             background-color: #fff;
-            color: $dark;
+            color: #7b341e;
             border: 0;
             margin-top: 20px;
             padding: 12px 20px;
@@ -96,7 +95,7 @@
 }
 
 .notification-container {
-    background-color: $mediumLight;
+    background-color: #ed8936;
     border-radius: 2px;
     padding: 1rem;
     text-align: center;