style: prevents index.css styling conflicts

Author: BenTopping

.prettierignore

@@ -8,6 +8,9 @@ selenium-debug.log
 # local asset build
 release.tar.gz
 
+# Postcss managed files
+src/styles/index.css
+
 # local env files
 .env.local
 .env.*.local

src/styles/index.css

@@ -2,34 +2,34 @@
 @import '../../node_modules/@sanger/ui-styling/tailwind.css';
 
 /* Define your custom styles */
-.success-message {
+.success-message{
   --tw-bg-opacity: 1;
-  background-color: rgb(72 187 120 / var(--tw-bg-opacity));
+  background-color: rgb(72 187 120 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.success-icon {
+.success-icon{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.success-icon:hover {
+.success-icon:hover{
   --tw-text-opacity: 1;
-  color: rgb(34 84 61 / var(--tw-text-opacity));
+  color: rgb(34 84 61 / var(--tw-text-opacity, 1));
 }
 
-.failure-message {
+.failure-message{
   --tw-bg-opacity: 1;
-  background-color: rgb(245 101 101 / var(--tw-bg-opacity));
+  background-color: rgb(245 101 101 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.failure-icon {
+.failure-icon{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.failure-icon:hover {
+.failure-icon:hover{
   --tw-text-opacity: 1;
-  color: rgb(116 42 42 / var(--tw-text-opacity));
+  color: rgb(116 42 42 / var(--tw-text-opacity, 1));
 }
 
 .warning-message {
@@ -58,22 +58,22 @@ nav {
 }
 
 #nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
+    font-weight: bold;
+    color: #2c3e50;
+  }
 
 #nav a.router-link-exact-active {
-  color: #42b983;
-}
+      color: #42b983;
+    }
 
 #nav a.router-link-active {
-  color: #42b983;
-}
+      color: #42b983;
+    }
 
 a:hover {
-  text-decoration: none;
-  color: black;
-}
+    text-decoration: none;
+    color: black;
+  }
 
 .file {
   visibility: hidden;
@@ -95,13 +95,13 @@ nav {
 }
 
 nav a {
-  color: white;
-}
+    color: white;
+  }
 
 nav a:hover,
-nav a:visited {
-  color: white;
-}
+    nav a:visited {
+      color: white;
+    }
 
 th {
   background-color: #ddd1c3;
@@ -122,7 +122,7 @@ th {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+      flex-wrap: wrap;
   width: 100%;
 }
 
@@ -131,10 +131,10 @@ th {
 }
 
 .table td,
-.table th {
-  min-height: 50px;
-  font-size: 12px;
-}
+  .table th {
+    min-height: 50px;
+    font-size: 12px;
+  }
 
 .control {
   color: white;