F
Filament•14mo ago
waleedGRT

TailwindCSS safelist is not working.

I've added a class h-[60vh] to the safelist in my custom theme, and I've also included the file path in the content section of the tailwind.config.js file. However, the class doesn't seem to be working as expected. tailwind.config.js export default { darkMode: "class", safelist: [ 'h-[60vh]', ], content: [ "./app/Filament/**/*.php", "./app/Livewire/**/*.php", "./resources/views/**/*.blade.php", "./vendor/filament/**/*.blade.php", ], };
No description
10 Replies
toeknee
toeknee•14mo ago
I assume you run npm build again?
waleedGRT
waleedGRTOP•14mo ago
I attempted it multiple times—first with ‘npm run dev’ but no results were observed. After stopping the dev, I executed ‘npm run build’ yet the outcome remained unchanged.
awcodes
awcodes•14mo ago
I’m not totally sure that custom attributes will work in a safelist like that.
waleedGRT
waleedGRTOP•14mo ago
I verified that arbitrary values function properly in the safelist, as discussed in this GitHub thread: https://github.com/tailwindlabs/tailwindcss/discussions/7908
GitHub
Safelist pattern for arbitrary values · tailwindlabs tailwindcss · ...
What version of Tailwind CSS are you using? v. 3.0.23 I am trying to whitelist a set of arbitrary values since the classes is set within a CMS. I need to include top-0% to top-100% and left-0% to l...
Dennis Koch
Dennis Koch•14mo ago
You also created and configured a custom theme, right?
waleedGRT
waleedGRTOP•14mo ago
Yes, i did. I believe I haven't misconfigured anything; here is the content of my vite.config.js file. import { defineConfig } from "vite"; import laravel, { refreshPaths } 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: [ ...refreshPaths, "app/Filament/**", "app/Forms/Components/**", "app/Livewire/**", "app/Infolists/Components/**", "app/Providers/Filament/**", "app/Tables/Columns/**", ], }), ], });
Dennis Koch
Dennis Koch•14mo ago
What's the file you added h-[60vh] to? Can you share the PanelProvider config?
waleedGRT
waleedGRTOP•14mo ago
File 
<?php

namespace App\Livewire;
...
class OrderSection extends Component implements HasForms
{
    ...
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Grid::make()
                    ->schema([
                        ...
                        Repeater::make('nuc')
                            ->extraAttributes(['class' => 'h-[60vh] overflow-auto'])
                            ->relationship() 
                            ->schema([
                                   ...
                            ])->columnSpan(2)
                            ->reorderableWithButtons()
                            ->collapsible()
                    ])
            ])
            ->model(Order::class)
            ->statePath('data');
    }
     ...
}
<?php

namespace App\Livewire;
...
class OrderSection extends Component implements HasForms
{
    ...
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Grid::make()
                    ->schema([
                        ...
                        Repeater::make('nuc')
                            ->extraAttributes(['class' => 'h-[60vh] overflow-auto'])
                            ->relationship() 
                            ->schema([
                                   ...
                            ])->columnSpan(2)
                            ->reorderableWithButtons()
                            ->collapsible()
                    ])
            ])
            ->model(Order::class)
            ->statePath('data');
    }
     ...
}
PanelProvider 
<?php

namespace App\Providers\Filament;

...

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login(Login::class)
            ->registration(Register::class)
            ->passwordReset()
            ->emailVerification()
            ->profile()
            ->sidebarFullyCollapsibleOnDesktop()
            ->databaseNotifications()
            ->databaseNotificationsPolling('30s')
            ->colors([
                'primary' => Color::Amber,
            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                ...
            ])
            ->authMiddleware([
                Authenticate::class,
            ])
            ->viteTheme('resources/css/filament/admin/theme.css')
            ->plugins([
                     ...
            ]);
    }
}
<?php

namespace App\Providers\Filament;

...

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login(Login::class)
            ->registration(Register::class)
            ->passwordReset()
            ->emailVerification()
            ->profile()
            ->sidebarFullyCollapsibleOnDesktop()
            ->databaseNotifications()
            ->databaseNotificationsPolling('30s')
            ->colors([
                'primary' => Color::Amber,
            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                ...
            ])
            ->authMiddleware([
                Authenticate::class,
            ])
            ->viteTheme('resources/css/filament/admin/theme.css')
            ->plugins([
                     ...
            ]);
    }
}
Dennis Koch
Dennis Koch•14mo ago
Can you try "app/Livewire/**/*.php", instead of "app/Livewire/**", not sure whether that makes a difference though
waleedGRT
waleedGRTOP•14mo ago
I tried but same result 😭 After days of debugging, I realized that I've been editing the wrong tailwind.config.js file. The correct file that needs to be edited is located at resources\css\filament\admin\tailwind.config.js.

Did you find this page helpful?