diff --git a/app/assets/stylesheets/tailwind_all_the_way.css b/app/assets/stylesheets/tailwind_all_the_way.css
index c26a1e81f75b0056630ccb41592541f2f4d187da..500bc79b31e045a665aa7f2b44d59113afc26820 100644
--- a/app/assets/stylesheets/tailwind_all_the_way.css
+++ b/app/assets/stylesheets/tailwind_all_the_way.css
@@ -1,60 +1,99 @@
 /* stylelint-disable scss/at-rule-no-unknown */
 
 @tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-.gl-border {
-    @apply gl-border-gray-100;
-    @apply gl-border-solid;
-}
+/*
+Components layer:
+https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
 
-.gl-border\! {
-    @apply gl-border !important;
-    @apply gl-border-gray-100 !important;
-    @apply gl-border-solid !important;
-}
+The components layer will be rendered _before_ the utilities,
+so that utilities can overwrite values
+*/
+@layer components {
+    /*
+    our gl-border shorthands do a little more than tailwinds.
+    in order not to conflict with other border related properties
+    (color, width), we need to define them _before_ the tailwind utils.
+     */
+    .gl-border {
+        @apply gl-border-gray-100;
+        @apply gl-border-solid;
+    }
 
-.gl-border-b {
-    @apply gl-border-b-gray-100;
-    @apply gl-border-b-solid;
-}
+    .gl-border\! {
+        @apply gl-border !important;
+        @apply gl-border-gray-100 !important;
+        @apply gl-border-solid !important;
+    }
 
-.gl-border-b\! {
-    @apply gl-border-b !important;
-    @apply gl-border-b-gray-100 !important;
-    @apply gl-border-b-solid !important;
-}
+    .gl-border-b {
+        @apply gl-border-b-gray-100;
+        @apply gl-border-b-solid;
+    }
 
-.gl-border-l {
-    @apply gl-border-l-gray-100;
-    @apply gl-border-l-solid;
-}
+    .gl-border-b\! {
+        @apply gl-border-b !important;
+        @apply gl-border-b-gray-100 !important;
+        @apply gl-border-b-solid !important;
+    }
 
-.gl-border-l\! {
-    @apply gl-border-l !important;
-    @apply gl-border-l-gray-100 !important;
-    @apply gl-border-l-solid !important;
-}
+    .gl-border-l {
+        @apply gl-border-l-gray-100;
+        @apply gl-border-l-solid;
+    }
 
-.gl-border-r {
-    @apply gl-border-r-gray-100;
-    @apply gl-border-r-solid;
-}
+    .gl-border-l\! {
+        @apply gl-border-l !important;
+        @apply gl-border-l-gray-100 !important;
+        @apply gl-border-l-solid !important;
+    }
 
-.gl-border-r\! {
-    @apply gl-border-r !important;
-    @apply gl-border-r-gray-100 !important;
-    @apply gl-border-r-solid !important;
-}
+    .gl-border-r {
+        @apply gl-border-r-gray-100;
+        @apply gl-border-r-solid;
+    }
+
+    .gl-border-r\! {
+        @apply gl-border-r !important;
+        @apply gl-border-r-gray-100 !important;
+        @apply gl-border-r-solid !important;
+    }
+
+    .gl-border-t {
+        @apply gl-border-t-gray-100;
+        @apply gl-border-t-solid;
+    }
+
+    .gl-border-t\! {
+        @apply gl-border-t !important;
+        @apply gl-border-t-gray-100 !important;
+        @apply gl-border-t-solid !important;
+    }
 
-.gl-border-t {
-    @apply gl-border-t-gray-100;
-    @apply gl-border-t-solid;
 }
 
-.gl-border-t\! {
-    @apply gl-border-t !important;
-    @apply gl-border-t-gray-100 !important;
-    @apply gl-border-t-solid !important;
+/*
+Utilities layer:
+https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
+*/
+@layer utilities {
+    /* the border-style utils in tailwind do not allow for top, bottom, right, left specific values */
+    .gl-border-b-solid {
+        border-bottom-style: solid;
+    }
+
+    .gl-border-l-solid {
+        border-left-style: solid;
+    }
+
+    .gl-border-r-solid {
+        border-right-style: solid;
+    }
+
+    .gl-border-t-solid {
+        border-top-style: solid;
+    }
 }
 
-@tailwind utilities;
diff --git a/scripts/frontend/lib/tailwind_migration.mjs b/scripts/frontend/lib/tailwind_migration.mjs
index f2d4b6088fc643f11704eaabc2ca2f80e9046fd1..2f7522443aa44c1df3ba3c8076144fc50fb9ed26 100644
--- a/scripts/frontend/lib/tailwind_migration.mjs
+++ b/scripts/frontend/lib/tailwind_migration.mjs
@@ -27,6 +27,11 @@ export const mismatchAllowList = [
   '.translate-y-0',
   '.rotate-90',
   '.rotate-180',
+  // the border-style utils in tailwind do not allow for top, bottom, right, left
+  '.border-b-solid',
+  '.border-l-solid',
+  '.border-r-solid',
+  '.border-t-solid',
   // Our border shorthand classes are slightly different,
   // we migrated them by prepending them to the tailwind.css
   '.border',