Added blade directive for stylesheet and updated readme

mikebarlow · Sep 10, 2024 · 5f4ffd3 · 5f4ffd3
1 parent aa96e74
commit 5f4ffd3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -100,12 +100,14 @@ This will render a Bell Icon where the component has been placed. When clicked a
 
 ### Styling
 
-As default, Megaphone uses TailwindCSS to style the Bell Icon and the notification sidebar. If you are not using Tailwind you may want to include the Megaphone CSS into your template.
+As default, Megaphone uses TailwindCSS to style the Bell Icon and the notification sidebar. If you are not using Tailwind you may want to include the Megaphone CSS into your template. Add the following blade directive to your sites `<head></head>`.
 
 ```html
-<link rel="stylesheet" href="{{ asset('vendor/megaphone/css/megaphone.css') }}">
+@megaphoneStyles
 ```
 
+If you are using TailwindCSS, make sure the Megaphone views are added to any Tailwind config to ensure the correct classes are compiled.
+
 ## Sending Notifications
 
 As default, Megaphone will only load notifications that have been registered within the Megaphone config file. Notifications shipped with Megaphone will be within `config('megaphone.types')`. This will be merged with the key values of `config('megaphone.customTypes')` to create the list of supported notifications.

diff --git a/src/MegaphoneServiceProvider.php b/src/MegaphoneServiceProvider.php
@@ -50,6 +50,13 @@ function () {
                 }?>';
             }
         );
+
+        Blade::directive(
+            'megaphoneStyles',
+            function () {
+                return '<link rel="stylesheet" href="{{ asset("vendor/megaphone/css/megaphone.css") }}';
+            }
+        );
     }
 
     protected function bootConsole()