Filament•16mo 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•16mo ago

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

awcodes•16mo ago

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

Hasnayeen•16mo ago

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

MdkOP•16mo 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•16mo ago

That means it’s not compiling.

Dennis Koch•16mo ago

Nope. That one wasn't processed by VIte

awcodes•16mo ago

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

MdkOP•16mo ago

oh, I do, it's this:

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

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

awcodes•16mo ago

That’s right.

MdkOP•16mo ago

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

Hasnayeen•16mo ago

show us your terminal output for npm run build

awcodes•16mo ago

Tailwind won’t run without it.

MdkOP•16mo ago

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

Dennis Koch•16mo ago

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

MdkOP•16mo ago

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

Dennis Koch•16mo ago

6 lines aren't empty 😉

Hasnayeen•16mo ago

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

MdkOP•16mo ago

you ain't wrong indeed

Dennis Koch•16mo ago

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

Solution

Lind•16mo ago

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

MdkOP•16mo ago

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

Hasnayeen•16mo ago

or you can change postcss file extension to mjs

MdkOP•16mo ago

with this

MdkOP•16mo 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.

MdkOP•16mo ago

but at least now the site displays properly

Lind•16mo ago

Ah ok, didn't know that xD

awcodes•16mo 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.

MdkOP•16mo ago

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

MdkOP•16mo 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.

MdkOP•16mo ago

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

awcodes•16mo 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. 🙂

MdkOP•16mo ago

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

MdkOP•16mo ago

awcodes•16mo 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.

MdkOP•16mo 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•16mo ago

No worries.

Hurruwa•16mo 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