Filament•12mo ago

Empty CSS when creating a new theme, not extending the default

was trying to create a new theme to overwrite just a few rules, followed all the instructions but I'm getting a basically empty CSS file resources/css/filament/admin/theme.css:

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-sidebar {
    background: white;
    border-right: 1px solid #E4E4E5;
}

.dark .fi-sidebar {
    background: #18181B;
    border-right: 1px solid #2F2F31;
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-sidebar {
    background: white;
    border-right: 1px solid #E4E4E5;
}

.dark .fi-sidebar {
    background: #18181B;
    border-right: 1px solid #2F2F31;
}

That first link (theme.css) contains just this:

@import 'index.css';

@import 'index.css';

That one, if opened, contains this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root.dark {
        color-scheme: dark;
    }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root.dark {
        color-scheme: dark;
    }
}

I did run build, but as soon as I add ->viteTheme('resources/css/filament/admin/theme.css') to the AdminPanelProvider I'm getting the ugliest site ever What am I missing?

Solution:

try this postcss.config: ``` module.exports = { plugins: { tailwindcss: {},...

Jump to solution

37 Replies

Dennis Koch•12mo ago

Check your dev tools (network tab). What does the file look like?

awcodes•12mo ago

And what does your vite.config.js look like?

Hasnayeen•12mo ago

did you add 'resources/css/filament/admin/theme.css', to vite.config.js file?

Mdk•12mo ago

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

my final css, as received by the browser, is this:

@tailwind base;@tailwind components;@tailwind utilities;@layer base {
    html {
        -webkit-tap-highlight-color: transparent
    }

    :root.dark {
        color-scheme: dark
    }
}

@config "./tailwind.config.js";.fi-sidebar {
    background: white;
    border-right: 1px solid #E4E4E5
}

.dark .fi-sidebar {
    background: #18181B;
    border-right: 1px solid #2F2F31
}

@tailwind base;@tailwind components;@tailwind utilities;@layer base {
    html {
        -webkit-tap-highlight-color: transparent
    }

    :root.dark {
        color-scheme: dark
    }
}

@config "./tailwind.config.js";.fi-sidebar {
    background: white;
    border-right: 1px solid #E4E4E5
}

.dark .fi-sidebar {
    background: #18181B;
    border-right: 1px solid #2F2F31
}

that doesn't look good to me

awcodes•12mo ago

That means it’s not compiling.

Dennis Koch•12mo ago

Nope. That one wasn't processed by VIte

awcodes•12mo ago

Do you have a postcss.config.js file? It should have been generated for you.

Mdk•12mo ago

oh, I do, it's this:

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

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

awcodes•12mo ago

That’s right.

Mdk•12mo ago

i had to comment it out tho, cause it was throwing an error on build

Hasnayeen•12mo ago

show us your terminal output for npm run build

awcodes•12mo ago

Tailwind won’t run without it.

Mdk•12mo ago

[vite:css] Failed to load PostCSS config (searchPath: /home//domains//public_html): [SyntaxError] Unexpected token 'export'

Dennis Koch•12mo ago

Well, errors on build are a critical piece of information 😉

Mdk•12mo ago

indeed, but it seemed an empty file, thought it was useless

Dennis Koch•12mo ago

6 lines aren't empty 😉

Hasnayeen•12mo ago

why you omit the most important info -> " cause it was throwing an error on build"

Mdk•12mo ago

you ain't wrong indeed

Dennis Koch•12mo ago

I guess you need .mjs extension for postcss.config.

Solution

Lind•12mo ago

try this postcss.config: ``` module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

Mdk•12mo ago

yeah, i did quite a few things in a short period, forgot about it this one compiled

Hasnayeen•12mo ago

or you can change postcss file extension to mjs

Mdk•12mo ago

with this

Mdk•12mo ago

warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

Mdk•12mo ago

but at least now the site displays properly

Lind•12mo ago

Ah ok, didn't know that xD

awcodes•12mo ago

That error is coming from your app.css file most likely. If you’re not using it you can remove it from your Vite config.

Mdk•12mo ago

you are correct thanks a lot you all that could've been a messy morning

Mdk•12mo ago

(all this because i was installing this plugin BTW: https://filamentphp.com/plugins/awcodes-overlook )

Filament

Overlook by Adam Weston - Filament

An app overview widget for Filament panels.

Mdk•12mo ago

@awcodes i sure hope it's worth it! (jk, learning new stuff is always great)

awcodes•12mo ago

You would have had to do it anyway. It’s the recommended way to style plugins with v3. So it would have been another plugin if it wasn’t one of mine. Hope it serves your needs though. 🙂

Mdk•12mo ago

right oout of the box it's not displaying properly it seems, but i'll look into it

Mdk•12mo ago

awcodes•12mo ago

If you don’t add the views to the content in your tailwind config and rebuild your theme then it’ll do that. Please read the Readme.

Mdk•12mo ago

forgot to rebuild, yep i did add, but didn't npm run i'm still new to the whole npm/css/whatever thingy, i'm a backend guy

awcodes•12mo ago

No worries.

Hurruwa•11mo ago

One question.. i know that this its resolved... but for the only thing that fix the problem was changing the resulting file from the new theme from. this:

/*From this*/
@config '/.tailwind.config.js';
/*To this*/
@config 'tailwind.config.js';

/*From this*/
@config '/.tailwind.config.js';
/*To this*/
@config 'tailwind.config.js';

Hope it helps

Gaming

Programming

Empty CSS when creating a new theme, not extending the default