[12.x] Updating the Pulse Card TailwindCSS v3 configuration to TailwindCSS v4 (#10926)

* Updating the Pulse Card TailwindCSS v3 configuration to TailwindCSS v4

Instead of `@tailwind`, a single `@import` is used.

But because of the previous "important strategy" (v3), a long import was required (with CSS selector - v4).

The "important strategy" has been removed; only an appropriate CSS selector is needed.

`@source` requires a fallback value (to ensure that the card view is included in the automatic source detection).

* Added dark mode with `@custom-variant`

instead of `darkMode: 'class'`

* Disable preflight (`preflight: false`)

* Update pulse.md

Co-authored-by: Jess Archer <jess@jessarcher.com>

* Update pulse.md

Co-authored-by: Jess Archer <jess@jessarcher.com>

* Update pulse.md

Co-authored-by: Jess Archer <jess@jessarcher.com>

* remove layers; disable automatic source detection

Reference:
* #10926 (comment)

* formatting

---------

Co-authored-by: Jess Archer <jess@jessarcher.com>
Co-authored-by: Taylor Otwell <taylor@laravel.com>

Author: 3 people

pulse.md

@@ -650,31 +650,24 @@ When this card is included on the dashboard, Pulse will automatically include th
 <a name="custom-card-styling-tailwind"></a>
 #### Tailwind CSS
 
-When using Tailwind CSS, you should create a dedicated Tailwind configuration file to avoid loading unnecessary CSS or conflicting with Pulse's Tailwind classes:
+When using Tailwind CSS, you should create a dedicated CSS entrypoint. The following example excludes Tailwind's [preflight](https://tailwindcss.com/docs/preflight) base styles which are already included by Pulse, and scopes Tailwind using a CSS selector to avoid conflicts with Pulse's Tailwind classes:
 
-```js
-export default {
-    darkMode: 'class',
-    important: '#top-sellers',
-    content: [
-        './resources/views/livewire/pulse/top-sellers.blade.php',
-    ],
-    corePlugins: {
-        preflight: false,
-    },
-};
-```
+```css
+@import "tailwindcss/theme.css";
 
-You may then specify the configuration file in your CSS entrypoint:
+@custom-variant dark (&:where(.dark, .dark *));
+@source "./../../views/livewire/pulse/top-sellers.blade.php";
 
-```css
-@config "../../tailwind.top-sellers.config.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@theme {
+  /* ... */
+}
+
+#top-sellers {
+  @import "tailwindcss/utilities.css" source(none);
+}
 ```
 
-You will also need to include an `id` or `class` attribute in your card's view that matches the selector passed to Tailwind's [important selector strategy](https://tailwindcss.com/docs/configuration#selector-strategy):
+You will also need to include an `id` or `class` attribute in your card's view that matches the CSS selector in your entrypoint:
 
 ```blade
 <x-pulse::card id="top-sellers" :cols="$cols" :rows="$rows" class="$class">