Add support for custom CSS

When styling components with Tailwind class make sure to run `yarn dev` to let tailwind watch the component files and include the needed CSS. There is also support for `yarn build` which is the same as `yarn dev` but without the watch option.

dist/output.css

@@ -0,0 +1,214 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  
+}
+
+#ohdear :is(.block) {
+  display: block
+}
+
+#ohdear :is(.flex) {
+  display: flex
+}
+
+#ohdear :is(.grid) {
+  display: grid
+}
+
+#ohdear :is(.h-2) {
+  height: 0.5rem
+}
+
+#ohdear :is(.max-w-\[1px\]) {
+  max-width: 1px
+}
+
+#ohdear :is(.grid-cols-3) {
+  grid-template-columns: repeat(3, minmax(0, 1fr))
+}
+
+#ohdear :is(.flex-col) {
+  flex-direction: column
+}
+
+#ohdear :is(.justify-center) {
+  justify-content: center
+}
+
+#ohdear :is(.gap-3) {
+  gap: 0.75rem
+}
+
+#ohdear :is(.gap-6) {
+  gap: 1.5rem
+}
+
+#ohdear :is(.truncate) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+#ohdear :is(.whitespace-nowrap) {
+  white-space: nowrap
+}
+
+#ohdear :is(.text-center) {
+  text-align: center
+}
+
+#ohdear :is(.text-right) {
+  text-align: right
+}
+
+#ohdear :is(.text-xl) {
+  font-size: 1.25rem;
+  line-height: 1.75rem
+}
+
+#ohdear :is(.text-xs) {
+  font-size: 0.75rem;
+  line-height: 1rem
+}
+
+#ohdear :is(.font-bold) {
+  font-weight: 700
+}
+
+#ohdear :is(.uppercase) {
+  text-transform: uppercase
+}
+
+#ohdear :is(.tabular-nums) {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
+}
+
+#ohdear :is(.text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity))
+}
+
+#ohdear :is(.text-gray-700) {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity))
+}
+
+#ohdear :is(.text-gray-900) {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+#ohdear :is(.first\:h-0:first-child) {
+  height: 0px
+}
+
+#ohdear :is(.dark .dark\:text-gray-100) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity))
+}
+
+#ohdear :is(.dark .dark\:text-gray-300) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity))
+}
+
+#ohdear :is(.dark .dark\:text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity))
+}

package.json

@@ -0,0 +1,9 @@
+{
+    "scripts": {
+        "dev": "npx tailwindcss -i ./resources/css/style.css -o ./dist/output.css --watch",
+        "build": "npx tailwindcss -i ./resources/css/style.css -o ./dist/output.css"
+    },
+    "devDependencies": {
+        "tailwindcss": "^3.3.6"
+    }
+}

resources/css/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/views/brokenLinks.blade.php

@@ -1,7 +1,8 @@
 @php
     use Illuminate\Support\Str;
 @endphp
-<x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
+
+<x-pulse::card id="ohdear" :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Broken Links"
     >
@@ -33,20 +34,20 @@
                         <tr class="h-2 first:h-0"></tr>
                         <tr wire:key="brokenLink.{{ md5($brokenLink->crawledUrl) }}">
                             <x-pulse::td class="max-w-[1px]">
-                                <code class="block text-xs text-gray-900 dark:text-gray-100 truncate">
+                                <code class="block text-gray-900 truncate dark:text-gray-100">
                                     {{ $brokenLink->statusCode }}
                                 </code>
                             </x-pulse::td>
-                            <x-pulse::td class="text-gray-700 dark:text-gray-300 font-bold">
+                            <x-pulse::td class="font-bold text-gray-700 dark:text-gray-300">
                                 <a target="_blank"
                                    href="{{ $brokenLink->crawledUrl  }}">{{ $brokenLink->relativeCrawledUrl }}</a>
 
                             </x-pulse::td>
-                            <x-pulse::td class="text-gray-700 dark:text-gray-300 font-bold">
+                            <x-pulse::td class="font-bold text-gray-700 dark:text-gray-300">
                                 <a target="_blank"
                                    href="{{ $brokenLink->foundOnUrl  }}">{{ $brokenLink->foundOnUrl }}</a>
                             </x-pulse::td>
-                            <x-pulse::td class="text-gray-700 dark:text-gray-300 font-bold">
+                            <x-pulse::td class="font-bold text-gray-700 dark:text-gray-300">
                                 {{ $brokenLink->linkText }}
                             </x-pulse::td>
                         </tr>

resources/views/cron.blade.php

@@ -1,7 +1,8 @@
 @php
     use Illuminate\Support\Str;
 @endphp
-<x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
+
+<x-pulse::card id="ohdear" :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Cron"
     >
@@ -33,12 +34,12 @@
                         <tr class="h-2 first:h-0"></tr>
                         <tr wire:key="cronCheck.{{ $cronCheck->id }}">
                             <x-pulse::td class="max-w-[1px]">
-                                <code class="block text-xs text-gray-900 dark:text-gray-100 truncate"
+                                <code class="block text-xs text-gray-900 truncate dark:text-gray-100"
                                       title="{{ $cronCheck->name }}">
                                     {{ $cronCheck->name }}
                                 </code>
                             </x-pulse::td>
-                            <x-pulse::td class="text-gray-700 dark:text-gray-300 font-bold">
+                            <x-pulse::td class="font-bold text-gray-700 dark:text-gray-300">
                                 <div>
                                     {{ $cronCheck->humanReadableLatestPingAt }}
                                 </div>
@@ -47,11 +48,11 @@
                                 </div>
 
                             </x-pulse::td>
-                            <x-pulse::td class="text-gray-700 dark:text-gray-300 font-bold">
+                            <x-pulse::td class="font-bold text-gray-700 dark:text-gray-300">
                                 {{ $cronCheck->humanReadableCronExpression }}
                                 {{ $cronCheck->cronExpression }}
                             </x-pulse::td>
-                            <x-pulse::td class="text-gray-700 dark:text-gray-300 font-bold">
+                            <x-pulse::td class="font-bold text-gray-700 dark:text-gray-300">
                                 <div>
                                     {{ $cronCheck->latestResultLabel }}
                                 </div>

resources/views/uptime.blade.php

@@ -1,7 +1,8 @@
 @php
     use Illuminate\Support\Str;
 @endphp
-<x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
+
+<x-pulse::card id="ohdear" :cols="$cols" :rows="$rows" :class="$class">
     <x-pulse::card-header
         name="Uptime"
     >
@@ -14,18 +15,18 @@
         <div class="flex flex-col gap-6">
             <div class="grid grid-cols-3 gap-3 text-center">
                 <div class="flex flex-col justify-center @sm:block">
-                        <span class="text-xl uppercase font-bold text-gray-700 dark:text-gray-300 tabular-nums">
+                        <span class="text-xl font-bold text-gray-700 uppercase dark:text-gray-300 tabular-nums">
                                 {{ $status }}
                         </span>
-                    <span class="text-xs uppercase font-bold text-gray-500 dark:text-gray-400">
+                    <span class="text-xs font-bold text-gray-500 uppercase dark:text-gray-400">
                             Status
                         </span>
                 </div>
                 <div class="flex flex-col justify-center @sm:block">
-                        <span class="text-xl uppercase font-bold text-gray-700 dark:text-gray-300 tabular-nums">
+                        <span class="text-xl font-bold text-gray-700 uppercase dark:text-gray-300 tabular-nums">
                             {{ $performance }}
                         </span>
-                    <span class="text-xs uppercase font-bold text-gray-500 dark:text-gray-400">
+                    <span class="text-xs font-bold text-gray-500 uppercase dark:text-gray-400">
                             Performance
                         </span>
                 </div>

src/Livewire/OhDearCronPulseCardComponent.php

@@ -17,6 +17,11 @@ class OhDearCronPulseCardComponent extends Card
 
     public int $siteId;
 
+    protected function css()
+    {
+        return __DIR__.'/../../dist/output.css';
+    }
+
     public function mount(int $siteId = null)
     {
         $this->siteId = $siteId ?? config('services.oh_dear.pulse.site_id');

src/Livewire/OhDearUptimePulseCardComponent.php

@@ -20,6 +20,11 @@ class OhDearUptimePulseCardComponent extends Card
 
     public int $siteId;
 
+    protected function css()
+    {
+        return __DIR__.'/../../dist/output.css';
+    }
+
     public function mount(int $siteId = null)
     {
         $this->sites = collect();

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: "class",
+    important: "#ohdear",
+    content: ["./resources/**/*.blade.php"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+    corePlugins: {
+        preflight: false,
+    },
+};