No show cards and columns

[xx1196]

Hello, i try render the board but only can see this page

i have this app.css

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@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';
@source "../../../../vendor/relaticle/flowforge/resources/views//*.blade.php";

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

@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;
} */

my field status need be a relationship:
public function board(Board $board): Board
{
return $board
->query($this->getEloquentQuery())
->recordTitleAttribute('title')
->columnIdentifier('status_id')
->positionIdentifier('position')
->columns([
Column::make('0199d485-4503-7389-9a04-b54294696e38')->label('To Do')->color('gray'),
Column::make('0199d485-62e4-71cf-b83a-a8cef6ea7617')->label('In Progress')->color('blue'),

        ]);
}

[ManukMinasyan]

@xx1196, please check and use the correct path for your vendor directory.

[fhavio]

Hey there, i'm having this same issue, right now i'm just testing with Laravel Herd. I just installed filament 4, tailwind, livewire and flowforge.

i have follow all the steps mention in the page and my board is loading without the styles.

my app.css looks like this
`**@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php';
@source '../../storage/framework/views/.php';
@source '..//*.blade.php';
@source '..//.js';
@source "../../vendor/relaticle/flowforge/resources/views/**/.blade.php";

@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}**`

Can someone help to check what might be missing?
Also i have a custom page made in laravel directly and its loading the tailwind styles. Even filament is great.

[jeffreyvanhees]

@xx1196 You have a double slash after view, and forgot wildcards. Change it to:

@source "../../../../vendor/relaticle/flowforge/resources/views/**/*.blade.php";`

@fhavio You forgot the wildcards. Change it to:

@source "../../vendor/relaticle/flowforge/resources/views/**/*.blade.php";

It's clearly stated in the documentation...

[michaelnjuguna]

I have included the blade file like this and still the cards have no styling

@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../../../../vendor/relaticle/flowforge/resources/views/*/**.blade.php";
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

[jeffreyvanhees]

*/**.blade.php -> **/*.blade.php

[fhavio]

Seems i have paste that wrong i had that fixed already, so its not the answer and i see that @michaelnjuguna is with the same issue.
i notice that the cards blade is inside an extra folder, so i had the extra path **\ , but didnt solve the issue.

@source "../../vendor/relaticle/flowforge/resources/views/**/**/*.blade.php";

I dont see anything else missing from the configuration, the table is working fine just not loading the styles and tailwind is working. As mention before i have another pages loading it.
My app.css at the moment is like this

@import "tailwindcss";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source "../../vendor/relaticle/flowforge/resources/views/**/*.blade.php";

[ManukMinasyan]

@fhavio You need to set up the Filament custom theme and add @source inside it. Check the documentation carefully. Not app.css.

https://relaticle.github.io/flowforge/getting-started/installation#include-css-assets

[fhavio]

Solved!
That "resources/css/app.css" is just making a lot of confusion there.
Thank you for your help!

[michaelnjuguna]

Thank you, @fhavio we need to read the docs more carefully, thank you @ManukMinasyan