fix: tag spacing

Author: timlrx

components/Tag.js

@@ -4,7 +4,7 @@ import { kebabCase } from '@/lib/utils'
 const Tag = ({ text }) => {
   return (
     <Link href={`/tags/${kebabCase(text)}`}>
-      <a className="text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400">
+      <a className="mr-3 text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400">
         {text.split(' ').join('-')}
       </a>
     </Link>

layouts/ListLayout.js

@@ -63,7 +63,7 @@ export default function ListLayout({ posts, title }) {
                           {title}
                         </Link>
                       </h3>
-                      <div className="space-x-3">
+                      <div className="flex flex-wrap">
                         {tags.map((tag) => (
                           <Tag key={tag} text={tag} />
                         ))}

pages/index.js

@@ -56,7 +56,7 @@ export default function Home({ posts }) {
                               {title}
                             </Link>
                           </h2>
-                          <div className="space-x-3">
+                          <div className="flex flex-wrap">
                             {tags.map((tag) => (
                               <Tag key={tag} text={tag} />
                             ))}

pages/tags.js

@@ -30,11 +30,11 @@ export default function Tags({ tags }) {
           {Object.keys(tags).length === 0 && 'No tags found.'}
           {sortedTags.map((t) => {
             return (
-              <div key={t} className="m-2">
+              <div key={t} className="mt-2 mb-2 mr-5">
                 <Tag text={t} />
                 <Link
                   href={`/tags/${kebabCase(t)}`}
-                  className="mx-1 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
+                  className="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
                 >
                   {` (${tags[t]})`}
                 </Link>