fix: Add outline focus-visible styles for buttons, links

timlrx · Jan 13, 2025 · 4df6812 · 4df6812
1 parent 94e87c9
commit 4df6812
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -29,14 +29,14 @@ const Header = () => {
         </div>
       </Link>
       <div className="flex items-center space-x-4 leading-5 sm:space-x-6">
-        <div className="no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96">
+        <div className="no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto pr-2 sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96">
           {headerNavLinks
             .filter((link) => link.href !== '/')
             .map((link) => (
               <Link
                 key={link.title}
                 href={link.href}
-                className="block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
+                className="m-1 block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
               >
                 {link.title}
               </Link>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -72,5 +72,20 @@ module.exports = {
       }),
     },
   },
-  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    ({ addBase, theme }) => {
+      addBase({
+        'a, button': {
+          outlineColor: theme('colors.primary.500'),
+          '&:focus-visible': {
+            outline: '2px solid',
+            borderRadius: theme('borderRadius.DEFAULT'),
+            outlineColor: theme('colors.primary.500'),
+          },
+        },
+      })
+    },
+  ],
 }