Filament•12mo ago

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/**',
            ],
        }),
    ],
});

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";

@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: {...

Jump to solution

1 Reply

Solution

David | Fortune Validator•12mo ago

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Gaming

Programming

Custom theme issue