move badge styles to css

_includes/plugin_card.html

@@ -3,10 +3,10 @@
     <div class="col p-4 d-flex flex-column position-static">
       <div class="d-inline-block">
         {% for cat in plugin.categories %}
-        <span class="badge bg-yellow-500 whitespace-nowrap">{{ cat }}</span>
+        <span class="plugin_cat">{{ cat }}</span>
         {% endfor %}
         {% for tag in plugin.tags %}
-        <span class="badge bg-blue-400 whitespace-nowrap">{{ tag }}</span>
+        <span class="plugin_tag">{{ tag }}</span>
         {% endfor %}
       </div>
       <h3 class="my-0">{{ plugin.name }}</h3>

_layouts/plugin.html

@@ -71,7 +71,7 @@ fullwith: true
           <h4 class="plugin_links">Categories</h4>
           <div>
             {% for categorie in page.categories %}
-            <a href="/categories/#{{ categorie | slugify }}"><span class="badge bg-yellow-500 whitespace-nowrap">{{ categorie }}</span></a>
+            <a href="/categories/#{{ categorie | slugify }}"><span class="plugin_cat">{{ categorie }}</span></a>
             {% endfor %}
           </div>
         </div>
@@ -80,7 +80,7 @@ fullwith: true
           <h4 class="plugin_links">Tags</h4>
           <div>
             {% for tag in page.tags %}
-            <a href="/tags/#{{ tag | slugify }}"><span class="badge bg-blue-400 whitespace-nowrap">{{ tag }}</span></a>
+            <a href="/tags/#{{ tag | slugify }}"><span class="plugin_tag">{{ tag }}</span></a>
             {% endfor %}
           </div>
         </div>

assets/index.css

@@ -79,6 +79,14 @@ layout: empty
         @apply list-none
     }
 
+    .plugin_cat {
+        @apply badge bg-yellow-500 whitespace-nowrap
+    }
+
+    .plugin_tag {
+        @apply badge bg-blue-400 whitespace-nowrap
+    }
+
     .max-w-p90 {
         max-width: 90%
     }