Merge pull request #93 from JoJo-Bear/bugfix/TailwindStylingConflicts

Bugfix: Styling issue due to Tailwind Preflight

Author: mckenziearts

public/css/app.css

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=8dc7b1436df79e10f57a",
-    "/js/notify.js": "/js/notify.js?id=2164f4c5d30905505e12",
-    "/css/app.css": "/css/app.css?id=045b234f05600b46dfb7",
-    "/css/notify.css": "/css/notify.css?id=677d5d408b96e1c37360"
+    "/js/app.js": "/js/app.js",
+    "/js/notify.js": "/js/notify.js",
+    "/css/app.css": "/css/app.css",
+    "/css/notify.css": "/css/notify.css"
 }

public/css/notify.css

@@ -5,6 +5,9 @@
  * You can see the styles here:
  * https://unpkg.com/tailwindcss/dist/base.css
  */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
+#laravel-notify {
+  @import "~tailwindcss/base";
+  @import "~tailwindcss/components";
+  @import "~tailwindcss/utilities";
+}

public/js/app.js

@@ -1,3 +1,4 @@
+<div id="laravel-notify">
 @if (session()->has('notify.message'))
 
     @include('notify::notifications.toast')
@@ -19,3 +20,4 @@
         timeout: "{{ config('notify.timeout') }}",
     }
 </script>
+</div>

public/js/notify.js

@@ -18,7 +18,12 @@ mix.setResourceRoot('../')
 mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/notify.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [require('tailwindcss')])
-  .postCss('resources/css/notify.css', 'public/css', [require('tailwindcss')]);
+  .sass('resources/css/notify.scss', 'public/css', [], [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('postcss-nested'), // or require('postcss-nesting')
+    require('autoprefixer')
+  ]);
 
 if (mix.inProduction()) {
   mix.version();