Add view helper for colored badges

app/helpers/application_helper.rb

@@ -10,5 +10,12 @@ module ApplicationHelper
       "text-gray-300 hover:bg-gray-900/30 hover:text-white active:bg-gray-900/30 active:text-white px-3 py-2 rounded-md font-medium text-base md:text-sm block md:inline-block"
     end
   end
+
+  # Colors available: gray, red, yellow, green, blue, purple, pink
+  # (Add more colors by adding classes to the safelist in tailwind.config.js)
+  def badge(text, color)
+    tag.span text, class: "inline-flex items-center rounded-full bg-#{color}-100 px-2.5 py-0.5 text-xs font-medium text-#{color}-800"
+  end
+
 end
 

tailwind.config.js

@@ -7,6 +7,15 @@ module.exports = {
     './app/helpers/**/*.rb',
     './app/javascript/**/*.js'
   ],
+  safelist: [
+    'bg-gray-100', 'text-gray-800',
+    'bg-red-100', 'text-red-800',
+    'bg-yellow-100', 'text-yellow-800',
+    'bg-green-100', 'text-green-800',
+    'bg-blue-100', 'text-blue-800',
+    'bg-purple-100', 'text-purple-800',
+    'bg-pink-100', 'text-pink-800',
+  ],
   theme: {
     extend: {
       fontFamily: {
@@ -16,5 +25,5 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms')
-  ],
+  ]
 }