FilamentF
Filament•2y ago
David | Fortune Validator

Custom theme issue

Scratching my head here. I've created a custom theme on another project without issue.

I have added Filament panels under /admin path and all works fine. I have run the commands for a custom theme and added the neccessary lines:

Vite Config:
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.scss',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
});

I can see the css file on the source, however its not compiling the tailwind and shows me this. 
@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root.dark{color-scheme:dark}[data-field-wrapper]{scroll-margin-top:8rem}}@config "tailwind.config.js";


For some reason its not building the tailwind assets. Custom plain CSS in this file will work. But the page styles are broken without the taildwind.!!!

I'm at a loss on how to get this file to actually compile. any help would be greatly appreciated.
Solution
FIXED. For anyone else struggling with the same issue and note this was panel installed ontop of an existing NON tailwind project. The issue was I was missing 'tailwindcss: {},' from postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
Jump to solution
Was this page helpful?