Filament•2w ago

CSS not being applied to my tables

So I am completely new to filament, I just installed filament into my app. I followed the steps provided by the documentation. I am working on laravel. Basically my steps were: - Installed filaments/table only - then installed filaments (tailwind i already had installed before, so i skipped all the tailwind installation steps) - added @FilamentStyles and @FilamentScripts as stated to my main layout - added (@import '../../vendor/filament/tables/resources/css/index.css';) to my app.css - in my already existing livewire component, i added hasaction, hastable and hasschema and their use tags - i added a table function that loads my table it loads but i dont see any css applied to it, am i missing something?

Solution:

Do you still have a postcss.config.js ? If yes: Remove it

Jump to solution

38 Replies

CKDOP•2w ago

Dennis Koch•2w ago

You did run php artisan filament:install? Did you recompile your Tailwind file? Can you check DevTools: a) Whether your CSS is loaded b) What content is loaded.

CKDOP•2w ago

yea i ran that and css is loaded cause everything in the css works but now i get the issue of /vendor/filament/support/resources/css/components/badge.css:45:9: The bg-color-50 class does not exist. If bg-color-50 is a custom class, make sure it is defined within a @layer directive.

LeandroFerreira•2w ago

V4?

CKDOP•2w ago

yea tailwind v4.1.+ please can you help me, been trying for 12 hours trying to fix these issues, i even reinstalled every single dependendy, wireui, tailwind, filament and i end up there

CKDOP•2w ago

im using these steps here

CKDOP•2w ago

and end up with the same error of bg-color-50 i even tried adding a bg-color-50 to see if it lets me pass, but it said again ring-50

LeandroFerreira•2w ago

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';


/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';


/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

You need to add all css required by tables

CKDOP•2w ago

okay thanks, but now i get to an issue that says use strict?

CKDOP•2w ago

/node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"

CKDOP•2w ago

fyi this is the app.css

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';


/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

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


@source '../../vendor/wireui/wireui';

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';


/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

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


@source '../../vendor/wireui/wireui';

LeandroFerreira•2w ago

Remove base, components, utilities

CKDOP•2w ago

did so but it is still there removed

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

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

still the same strict message my code now

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';


/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

@source '../../vendor/wireui/wireui';

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';


/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

@source '../../vendor/wireui/wireui';

CKDOP•2w ago

LeandroFerreira•2w ago

what about vite.config.js ?

Solution

Dennis Koch•2w ago

Do you still have a postcss.config.js ? If yes: Remove it

CKDOP•2w ago

Yea I fixed it by removing postcss and using vite But doing that made all my components use the primary and secondary color that filament provides Im trying to change the colors but I can’t seem to find customization in the documentation @Dennis Koch @LeandroFerreira

LeandroFerreira•2w ago

https://filamentphp.com/docs/4.x/styling/colors/#customizing-the-default-colors

Colors - Customizing styling - Filament

ids•2w ago

I'm kinda having the same problem. I have a custom page within filament which needs some custom styling with tailwind. I followed the steps in the documentation, but now none of the styles are applied. 1. In the AdminPanelProvider, I added ->viteTheme('resources/css/filament/admin/theme.css') 2. I ran php artisan make:filament-theme 3. In the theme file, I added the contents as above:

@import 'tailwindcss';

/* Required by all components */
@import '../../../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../../../vendor/filament/forms/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../../../vendor/filament/tables/resources/css/index.css';

@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

@variant dark (&:where(.dark, .dark *));

@import 'tailwindcss';

/* Required by all components */
@import '../../../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../../../vendor/filament/forms/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../../../vendor/filament/tables/resources/css/index.css';

@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

@variant dark (&:where(.dark, .dark *));

4. In vite.config.js, I added resources/css/filament/admin/theme.css to the input array 5. I ran npm run build It looks like it's totally overriding the filament theme and not applying the styles from the 'normal' theme. How can I extend the theme instead of overriding it?

Dennis Koch•2w ago

You do not need to add the CSS code to the theme. It should work already. Same question for you: Do you still have a postcss.config.js?

ids•2w ago

Ok, but as soon as I add the viteTheme to my panel, the styling breaks. Without it, the css file is not included. No, no postcss, this is a clean laravel 12 / filament 4 install

Dennis Koch•2w ago

Check the DevTool: Is the theme.css included? What's the content of it?

ids•2w ago

When I add the viteTheme, it is included, but css/filament/filament/app.css is not anymore. In compiled the theme.css only the fonts are included

CKDOP•2w ago

It’s it possible to make the colors defined in tailwind.config override the filament default colors, like primary and secondary

Dennis Koch•2w ago

When I add the viteTheme, it is included, but css/filament/filament/app.css is not anymore

That's expected.

In compiled the theme.css only the fonts are included

No styles at all? Can you show a screenshot of that file?

ids•2w ago

Applied some formatting, but it contains the Inter font

Dennis Koch•2w ago

That's all the content?

ids•2w ago

yep

Dennis Koch•2w ago

Can you share your uncompiled theme.css?

ids•2w ago

.fi-tree-container {
    background: red;
}

.fi-tree-container {
    background: red;
}

🤷‍♂️ you stated earlier that it was not needed to include the other files

Dennis Koch•2w ago

No. It's not needed to overwrite the created theme.css file. You still need to keep the lines that were added when you created it Remove it, and run php artisan make:filament-theme again. Keep that content.

ids•2w ago

Ok, the generated theme now contains more css, but still all the styling is broking in the generated css, I see:

@media source(none){

@layer theme, base, components, utilities;
}
}

@media source(none){

@layer theme, base, components, utilities;
}
}

That media query doesn't look right to me

Dennis Koch•2w ago

You recompiled it?

ids•2w ago

yeah my source theme file now contains:

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

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

.fi-tree-container {
    background: red;
}

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

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

.fi-tree-container {
    background: red;
}

To be sure, this vite.config is correct?

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/beluga/css/screen.css', 'resources/beluga/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/beluga/css/screen.css', 'resources/beluga/js/app.js', `resources/css/filament/admin/theme.css`],
            refresh: true,
        }),
    ],
    
});

Dennis Koch•7d ago

Not sure whether that's inlcuded in laravel() but the Tailwind plugin is missing: https://tailwindcss.com/docs/installation/using-vite

Installing with Vite - Installation

Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.

Dennis Koch•7d ago

It should look like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

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

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

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

ids•7d ago

Thanks! That did it

CKDOP•7d ago

It’s this possible

Gaming

Programming

CSS not being applied to my tables

Did you find this page helpful?