feat: focus ring class

packages/frontend/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .focus-ring {
+    @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
+  }
+}

packages/frontend/src/pages/components/index.tsx

@@ -18,10 +18,22 @@ const Page = () => {
           <h1 className="text-2xl font-bold">Component A</h1>
 
           <div className="flex flex-row gap-10 items-center justify-center">
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+              tabIndex={0}
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
           </div>
 
           <div className="flex flex-row gap-10 items-center justify-center">

packages/frontend/tailwind.config.js

@@ -8,7 +8,14 @@ export default withMT({
     '../../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        snowball: {
+          200: '#DDEEFD',
+          500: '#47A4FA',
+        },
+      },
+    },
   },
   plugins: [],
 });