Filament•12mo ago

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",
    ],
};

10 Replies

toeknee•12mo ago

I assume you run npm build again?

waleedGRTOP•12mo 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•12mo ago

I’m not totally sure that custom attributes will work in a safelist like that.

waleedGRTOP•12mo 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•12mo ago

You also created and configured a custom theme, right?

waleedGRTOP•12mo 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•12mo ago

What's the file you added h-[60vh] to? Can you share the PanelProvider config?

waleedGRTOP•12mo 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•12mo ago

Can you try "app/Livewire/**/*.php", instead of "app/Livewire/**", not sure whether that makes a difference though

waleedGRTOP•12mo 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.

Gaming

Programming

TailwindCSS safelist is not working.