From 24d7ee39ba8749415e6c806e16a2ffb615bad5fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dar=C3=ADo=20Espinoza?= <dario@fixu.cl>
Date: Tue, 12 Dec 2023 13:55:33 -0300
Subject: [PATCH] style: :lipstick: Add text wrap balance in title card and
 center text for aling text when apply balance

---
 src/components/svgCard.svelte |  2 +-
 tailwind.config.cjs           | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index 75b1d08..4b92d0d 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -52,7 +52,7 @@
       alt={svgInfo.title}
     />
     <div class="mb-3 flex flex-col items-center justify-center">
-      <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
+      <p class="truncate text-[15px] font-medium text-balance text-center">{svgInfo.title}</p>
       <a
         href={`/directory/${svgInfo.category.toLowerCase()}`}
         class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 14d2c7d..171c7b3 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,5 +16,13 @@ module.exports = {
       }
     }
   },
-  plugins: []
+  plugins: [
+    ({ addUtilities }) => {
+      addUtilities({
+        '.text-balance': {
+          'text-wrap': 'balance'
+        }
+      });
+    }
+  ]
 };