F
Filament•5mo ago
Rolland

Tailwind color not applied

protected static function getDefaultCurrencyWarning(): Forms\Components\Placeholder
    {
        return Forms\Components\Placeholder::make('default_warning')
            ->hiddenLabel()
            ->content(view('filament.components.core.currency.default-warning'))
            ->visible(fn (Forms\Get $get): bool => $get('is_default'));
    }
protected static function getDefaultCurrencyWarning(): Forms\Components\Placeholder
    {
        return Forms\Components\Placeholder::make('default_warning')
            ->hiddenLabel()
            ->content(view('filament.components.core.currency.default-warning'))
            ->visible(fn (Forms\Get $get): bool => $get('is_default'));
    }
<div class="p-4 bg-amber-50 border border-amber-200 rounded-lg dark:bg-amber-900/20 dark:border-amber-700/50">
    <div class="flex items-start">
        <x-heroicon-s-exclamation-triangle
            class="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 mr-3 flex-shrink-0" />
        <div class="text-sm text-amber-800 dark:text-amber-200">
            <strong class="font-semibold">Default Currency:</strong> This will automatically set the exchange rate to
            1.0000 and mark the currency as active. All other currencies will lose default status.
        </div>
    </div>
</div>
<div class="p-4 bg-amber-50 border border-amber-200 rounded-lg dark:bg-amber-900/20 dark:border-amber-700/50">
    <div class="flex items-start">
        <x-heroicon-s-exclamation-triangle
            class="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 mr-3 flex-shrink-0" />
        <div class="text-sm text-amber-800 dark:text-amber-200">
            <strong class="font-semibold">Default Currency:</strong> This will automatically set the exchange rate to
            1.0000 and mark the currency as active. All other currencies will lose default status.
        </div>
    </div>
</div>
13 Replies
Rolland
RollandOP•5mo ago
I am wondering why the tailwind color have not been applied. I have created custom theme.. please let me know what else i need to do here. I am stuck on this part over an hour. really appreciate the help. thank you in advance.
Rolland
RollandOP•5mo ago
No description
LeandroFerreira
LeandroFerreira•5mo ago
Is your content configuration in tailwind.config.js set to scan for classes in the directory where you are using this file?
LeandroFerreira
LeandroFerreira•5mo ago
for example: https://filamentphp.com/docs/3.x/tables/advanced#custom-row-classes These classes are not automatically compiled by Tailwind CSS. If you want to apply Tailwind CSS classes that are not already used in Blade files, you should update your content configuration in tailwind.config.js to also scan for classes inside your directory: './app/Filament/*/.php'
Advanced - Tables - Filament
Rolland
RollandOP•5mo ago
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}
this file is under resources/css/filament/app/... do i need to define the color in the "tailwind.config.js"?
LeandroFerreira
LeandroFerreira•5mo ago
where is this file <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg dark:bg-amber-900/20 dark:border-amber-700/50">... ?
Rolland
RollandOP•5mo ago
No description
Rolland
RollandOP•5mo ago
"resources\views\filament\components\core\currency\default-warning.blade.php"
LeandroFerreira
LeandroFerreira•5mo ago
add this path to the content array ./resources/views/filament... then, run npm run build or dev
Rolland
RollandOP•5mo ago
doesnt seems to work. i have added it in the config. 
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        "./resources/views/filament/components/core/currency/default-warning.blade.php",
    ],
}
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        "./resources/views/filament/components/core/currency/default-warning.blade.php",
    ],
}
i fixed the typo and rerun the "npm run build" the color still not getting applied.
LeandroFerreira
LeandroFerreira•5mo ago
Rolland
RollandOP•5mo ago
i double check i forgot to add the viteTheme(). after i add it, i got another error. 
Unable to locate file in Vite manifest: resources/css/filament/app/theme.css.
Unable to locate file in Vite manifest: resources/css/filament/app/theme.css.
->viteTheme('resources/css/filament/app/theme.css')
->viteTheme('resources/css/filament/app/theme.css')
@tailwindcss/vite:generate:build] Can't resolve 'tailwind.config.js' in 'C:\laragon\www\x\resources\css\filament\app'
@tailwindcss/vite:generate:build] Can't resolve 'tailwind.config.js' in 'C:\laragon\www\x\resources\css\filament\app'
anyone knows how to fix this?
Dennis Koch
Dennis Koch•5mo ago
Does the tailwind.config.js exist in resources\css\filament\app? The error should be unrelated to the viteTheme() addition

Did you find this page helpful?