diff --git a/pulse.md b/pulse.md index 177b6911d9..1d61b9e723 100644 --- a/pulse.md +++ b/pulse.md @@ -650,31 +650,24 @@ When this card is included on the dashboard, Pulse will automatically include th #### 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