Filament•3w ago

tailwind v3, vite.config - strange behavior

Hello, before I created this post, I tried to find some things via Discord search here and via the documentation, unfortunately not really successful. This is what my tailwind.config.js looks like:

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {},
}

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {},
}

I'm trying to use this in a custom page: https://play.tailwindcss.com/wmjhmlEcKc Custom Page:

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Install extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.install';

    protected static bool $shouldRegisterNavigation = false;
}

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Install extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.install';

    protected static bool $shouldRegisterNavigation = false;
}

And under resources/views/filament/pages/install.blade.php is my blade file with the HTML (above from the play.tailwindcss) Unfortunately, it is not finished as it should be. Why? I have also tried to use FilamentAsset::register in a ServiceProvider and a custom css with tailwindcssv3 and, unfortunately, this doesn't really work either.

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Solution:

You need a custom filament theme

Jump to solution

6 Replies

Solution

Matthew•3w ago

You need a custom filament theme

Matthew•3w ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panels - Filament

Matthew•3w ago

Then you should add the directory of your blade in the tailwind config of the theme Then run npm run build

DevsomeOP•3w ago

I'll try it, thanks I have now downgraded tailwind v4 to v3, runned yarn build and artisan filament:assets, still the html is not correct.

Matthew•3w ago

wdym downgraded? In the title you said you were in tailwind v3!

DevsomeOP•3w ago

got it working now with the custom theme. After setting the "->viteTheme('resources/css/filament/dashboard/theme.css');" in the PanelProvider and running again ddev yarn build it successfully builded. Also replaced all the other @vite([]) includes for the none filament pages (like welcome screen) to get the correct design.

Gaming

Programming

tailwind v3, vite.config - strange behavior

Did you find this page helpful?