Separate Tailwind config for preview page - styles not working
Hi everyone,
I'm having trouble styling a separate preview page for my Filament resources differently from the main application. I'm using a separate Tailwind config (tailwind.preview.config.js), CSS file (preview.css), and Vue component.
I've set up separate Vite build processes and use a preview- prefix for all Tailwind classes in the preview config to avoid style conflicts. I'm also using a separate preset.
Despite this, Tailwind styles (especially background/text colors and other utility classes) are not being applied correctly on the preview page. It seems like styles from the main app or the Filament preset are overriding the preview styles.
I've tried:
Correct @vite directive order in app.blade.php.
Clearing all caches (browser, Vite, Tailwind).
Overriding CSS variables in preview.css using :root.
Separate output paths in Vite.
Has anyone encountered similar issues with Filament and separate Tailwind configs for preview pages? Is there a way to completely isolate the preview styles from the main app and the Filament preset?
Any help is appreciated! Code snippets and screenshots available if needed.
0 Replies