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: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

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

Jump to solution

Custom theme issue

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

Solution

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

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

Jump to solution

Custom theme issue

Custom theme issue

Similar Threads

Similar Threads

Similar Threads