V4 css problem with individual componenst
Hi all!
I set up a fresh new Laravel project using the Livewire Starter Kit. While implementing the styling, I ran into an issue.
According to the documentation, I need to add a few CSS imports to resources/css/app.css. However, one specific import causes an error:
/* Required by actions and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';
error message (also attached):
[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: wrap-break-word
When I comment out this line, everything compiles correctly, but then I'm missing some styling in certain parts of the UI.
I’m using individual Filament components (not the full Filament panel):
https://filamentphp.com/docs/4.x/introduction/installation#configuring-styles
I’m not sure what the correct approach is for Filament v4, and how the UI supposed to look.
48 Replies
Bump
bump
If it's a fresh installation, why'd you install every component individually? Just install the panel builder.
notice he said he isn't using the panel.
@Booltje124 why are you choosing not to use the panel, wouldn't you want this for the backend for instance?
I'm more comfortable working with standalone components, as that's what I'm used to. However, I might consider using the panel as an admin panel in the future.
Not sure about the error but at least the styles look similar to this issue https://github.com/filamentphp/filament/issues/16257
GitHub
v4 Some styles don't render properly when Vite dev server is runnin...
Package filament/filament Package Version 4-alpha6 Laravel Version 12 Livewire Version 3 PHP Version 8.4 Problem description Some button styles aren't rendering properly when using the Vite dev...
That is correct! I have exact the same problem with the toggle buttons.
@Lirux @toeknee Do you think it’s possible to replace my custom admin panel with a Filament panel, while still using the custom components elsewhere in my application? Or would that cause any conflicts?
I have deleted the custom component via composer and installed the panel. Also deleted the css styles for the individual components in resources/css/app.css.
Admin section works fine! But in the main app the css for the individual components is not loading.
What could be the problem?
is it the same error? you should
npm update if its that errorAfter running npm update, I can now include the following stylesheet without any Tailwind errors:
/* Required by actions and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';
However, the custom component CSS is still not loading.
Also, when I log in to the application, the first table that loads always has a dropdown menu open by default. When I refresh the page, the issue disappears and doesn’t come back.
Custom table component:
what is the "custom component css"?
you mean tailwind classes in your views?
Correct
The table layout and buttons are not loading
can you send your full css file?
1
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
/* 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 and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';
/* Required by notifications */
@import '../../vendor/filament/notifications/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';
/* Required by widgets */
@import '../../vendor/filament/widgets/resources/css/index.css';
@variant dark (&:where(.dark, .dark *));
@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
@custom-variant dark (&:where(.dark, .dark *));
2
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--color-zinc-50: #fafafa;
--color-zinc-100: #f5f5f5;
--color-zinc-200: #e5e5e5;
--color-zinc-300: #d4d4d4;
--color-zinc-400: #a3a3a3;
--color-zinc-500: #737373;
--color-zinc-600: #525252;
--color-zinc-700: #404040;
--color-zinc-800: #262626;
--color-zinc-900: #171717;
--color-zinc-950: #0a0a0a;
--color-accent: var(--color-neutral-800);
--color-accent-content: var(--color-neutral-800);
--color-accent-foreground: var(--color-white);
}
@layer theme {
.dark {
--color-accent: var(--color-white);
--color-accent-content: var(--color-white);
--color-accent-foreground: var(--color-neutral-800);
}
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
[data-flux-field]:not(ui-radio, ui-checkbox) {
@apply grid gap-2;
}
[data-flux-label] {
@apply !mb-0 !leading-tight;
}
input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}
/* \[:where(&)\]:size-4 {
@apply size-4;
} */
and which file path are your custom tailwind classes in?
and is this file
resources/css/app.css or elsewhere?Correct!
Sorry, i dont know what you mean with the custom tailwind classes?
which view file has the tailwind classes?
I am using livewire full page components like: Route::get('platforms', ShowPlatforms::class)->name('platforms');
View files are in views->livewire
It seems like your Tailwind setup isnt discovering the classes in your view files, but I don't think thats related to filament
you do have
@source for the views directory so I would expect that to work tbh
actually, have you tried @source '../views/**/*.blade.php'; instead of @source '../views';Changed @source, ran npm update again. But same result.
npm update? or npm build?
Both. First npm update
not sure, sorry. dont think its filament though.
Strange, but thanks for your help anyway!
Just to make sure I understand: Normally, if you install panels using:
composer require filament/filament:"^4.0"
php artisan filament:install --panels
Then you should also be able to use custom components outside of panels without needing to add any additional code, right?
hmm, no, that just installs panels
you still need to set up component css and javascript if you want to use components outside of a panel
Alright, then I think it's working properly now, since I'm no longer seeing the Tailwind error I mentioned in my first post. The only remaining issue is with the table dropdown filter—it only occurs right after logging in and loading a page with a table for the first time. After a refresh, it works fine and the issue doesn't come back.
Are you using flux + table builder? Did you create a table widget?
Yes, using flux (laravel livewire starter kit). Did not create a widget, just a normal table render:
https://filamentphp.com/docs/4.x/components/table#adding-the-table
could you share the code please? You can use gist for large code
I think if you are using a table inside flux dashboard view, you could create a table widget and render it in that view
are you rendering the
ShowPlatforms in the dashboard view?That's true, but why would that give a different result?
I think you can use it as you are doing.. let me check the code..
This is the flux sidebar layout file: https://gist.github.com/ruben-bolink/fbe715c2dc31a3cdf89912b8ea9ac3bf
Any console errors in the dashboard page?
Only for the database-notifications modal. That could maybe also trigger the filter tab on the table?
Maybe i have to make a database trigger, like in v3?
https://filamentphp.com/docs/3.x/notifications/database-notifications#rendering-the-database-notifications-modal
could you remove it temporarily and try again?
I don't think it is a Filament issue, because I'm trying a table widget in the flux dashboard and it looks good:
Maybe you could create a minimal repo to reproduce this issue and share on Github
Ok, thanks for now @Leandro Ferreira @Dan Harrin
Hmmmm. I suddenly see this now
add
@filamentScripts in the layoutIt's already included. But when I refresh the page, it works fine. The issue only comes back after logging out and logging back in.
Solution
try to add
@filamentScripts to the head.blade.phpThis is the fix!
Thank you @LeandroFerreira