diff --git a/packages/react/.eslintrc.cjs b/packages/react/.eslintrc.cjs
index 0bf6ae5b3..ad75bc933 100644
--- a/packages/react/.eslintrc.cjs
+++ b/packages/react/.eslintrc.cjs
@@ -8,6 +8,14 @@ module.exports = {
     'plugin:tailwindcss/recommended',
   ],
   plugins: ['react-refresh'],
+  settings: {
+    tailwindcss: {
+      "whitelist": [
+        'i\\-.+:?.+',
+        // doesn't work see: [https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/284]
+      ],
+    },
+  },
 
   ignorePatterns: ['dist', '.eslintrc.cjs'],
 
@@ -25,5 +33,6 @@ module.exports = {
       { allowConstantExport: true },
     ],
     '@typescript-eslint/no-unused-vars': ['warn'],
+    "tailwindcss/no-custom-classname": ['warn']
   },
 }
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 5f2b8c27e..146989c37 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -69,7 +69,7 @@
         "eslint": "^8.51.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
-        "eslint-plugin-tailwindcss": "^3.13.0",
+        "eslint-plugin-tailwindcss": "3.13.0",
         "i18next-scanner": "^4.4.0",
         "lightningcss": "^1.22.0",
         "postcss": "^8.4.31",
diff --git a/packages/react/package.json b/packages/react/package.json
index c8c444444..763312f40 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -75,7 +75,7 @@
     "eslint": "^8.51.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-tailwindcss": "3.13.0",
     "i18next-scanner": "^4.4.0",
     "lightningcss": "^1.22.0",
     "postcss": "^8.4.31",
diff --git a/packages/react/src/components/common/ErrorFallback.tsx b/packages/react/src/components/common/ErrorFallback.tsx
index 060161f25..0bb152da0 100644
--- a/packages/react/src/components/common/ErrorFallback.tsx
+++ b/packages/react/src/components/common/ErrorFallback.tsx
@@ -13,7 +13,7 @@ export function ErrorFallback(props?: FallbackProps) {
   const error = routeError ?? (props?.error as Error | null);
 
   return (
-    <div className=" h-full w-full overflow-y-auto p-8">
+    <div className="h-full w-full overflow-y-auto p-8">
       <div className="mx-auto flex h-full w-full max-w-screen-lg flex-col items-center gap-4">
         <h2 className="text-3xl font-bold">{t("Gomenasorry!")}</h2>
         <p>
@@ -54,7 +54,7 @@ export function ErrorFallback(props?: FallbackProps) {
         <code className="max-w-full shrink-0 overflow-x-auto whitespace-pre rounded-md bg-black/10 p-2 text-xs">
           {error?.stack}
         </code>
-        <TwitterFeed className="w-[min(800px, calc(100vw - 40px))] flex h-[400px] justify-center" />
+        <TwitterFeed className="w-[min(800px,calc(100vw-40px))] flex h-[400px] justify-center" />
       </div>
     </div>
   );
diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
index d8b5f6418..4f6913c7d 100644
--- a/packages/react/src/components/video/VideoCard.tsx
+++ b/packages/react/src/components/video/VideoCard.tsx
@@ -61,7 +61,7 @@ export function VideoCard({
             return `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
         }
       })(),
-    [type, thumbnail, id],
+    [type, thumbnail, id, size],
   );
 
   switch (size) {
@@ -77,9 +77,9 @@ export function VideoCard({
               onClick={
                 onThumbnailClick
                   ? (e) => {
-                      e.preventDefault();
-                      onThumbnailClick(e);
-                    }
+                    e.preventDefault();
+                    onThumbnailClick(e);
+                  }
                   : undefined
               }
             >
@@ -176,9 +176,9 @@ export function VideoCard({
               onClick={
                 onThumbnailClick
                   ? (e) => {
-                      e.preventDefault();
-                      onThumbnailClick(e);
-                    }
+                    e.preventDefault();
+                    onThumbnailClick(e);
+                  }
                   : undefined
               }
             >
@@ -217,9 +217,9 @@ export function VideoCard({
                   onClick={
                     onInfoClick
                       ? (e) => {
-                          e.preventDefault();
-                          onInfoClick(e);
-                        }
+                        e.preventDefault();
+                        onInfoClick(e);
+                      }
                       : undefined
                   }
                 >
@@ -231,9 +231,9 @@ export function VideoCard({
                     onClick={
                       onChannelClick
                         ? (e) => {
-                            e.preventDefault();
-                            onChannelClick(e);
-                          }
+                          e.preventDefault();
+                          onChannelClick(e);
+                        }
                         : undefined
                     }
                   >
@@ -327,8 +327,8 @@ function VideoCardDuration({
     (end_actual && start_actual
       ? new Date(end_actual).valueOf() - new Date(start_actual).valueOf()
       : start_actual
-      ? date.valueOf() - new Date(start_actual).valueOf()
-      : null);
+        ? date.valueOf() - new Date(start_actual).valueOf()
+        : null);
 
   return durationMs ?? status === "upcoming" ? (
     <span