Change classname "error-column" to custom Tailwind

src/features/ui/components/column-forbidden.tsx

@@ -13,7 +13,7 @@ const ColumnForbidden = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <div className='error-column'>
+      <div className='error-column flex min-h-[160px] flex-1 flex-col items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
         {intl.formatMessage(messages.body)}
       </div>
     </Column>

src/styles/components/columns.scss

@@ -13,14 +13,4 @@
   a {
     @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
   }
-}
+}
-
-.error-column {
-  flex-direction: column;
-
-  .svg-icon {
-    width: 70px;
-    height: 70px;
-    margin-bottom: 30px;
-  }
-}

src/styles/tailwind.css

@@ -3,6 +3,27 @@
 @tailwind utilities;
 
 @layer utilities {
+  .error-column > span {
+      @apply max-w-[400px];
+    }
+    
+  .error-column {
+    .svg-icon {
+      width: 70px;
+      height: 70px;
+      margin-bottom: 30px;
+    }
+
+    @supports (display: grid) {
+      contain: strict;
+    }
+  
+    a {
+      @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
+    }
+
+  }
+
   .mention {
     @apply text-primary-600 dark:text-accent-blue hover:underline;
   }