Move the .body-link CSS component class to a plugin

solidusio · Dec 13, 2023 · adbc203 · adbc203
1 parent 7b0effe
commit adbc203
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
@@ -2,10 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-  .body-link {
-    @apply text-blue hover:underline;
-  }
-}
-
 <%= SolidusAdmin::Config.tailwind_stylesheets.map { File.read(_1) }.join("\n") %>
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
@@ -89,7 +89,7 @@ module.exports = {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/container-queries'),
-    plugin(({ addVariant, addBase }) => {
+    plugin(({ addVariant, addBase, addComponents, theme }) => {
       // Support the "hidden" attribute
       addVariant('hidden', '&([hidden])')
       addVariant('visible', '&:not([hidden])')
@@ -103,6 +103,16 @@ module.exports = {
         'summary::marker': { display: 'none' },
         'summary': { listStyle: 'none' },
       })
+
+      // Add a text style for links
+      addComponents({
+        '.body-link': {
+          color: theme('colors.blue'),
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        },
+      })
     }),
   ],
 }