Filament•8mo 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•8mo ago

I assume you run npm build again?

waleedGRT•8mo 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•8mo ago

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

waleedGRT•8mo 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•8mo ago

You also created and configured a custom theme, right?

waleedGRT•8mo 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•8mo ago

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

waleedGRT•8mo 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•8mo ago

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

waleedGRT•8mo 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.