FilamentF
Filament•2y ago
Gaspar

Custom theme - Tailwind class not included in built css

Made custom theme and required steps but my added Tailwind class is not in CSS.

For testing i added Tailwind class text-ellipsis to app/Filament/Resources/ProductResource.php
Placeholder::make('documentation')
    ->content(new HtmlString('<a href="https://filamentphp.com/docs" class="text-ellipsis">filamentphp.com</a>'))


  1. Made custom theme:

php artisan make:filament-theme --pm=bun
Using bun v1.1.4
   INFO  Filament theme [resources/css/filament/admin/theme.css] and [resources/css/filament/admin/tailwind.config.js] created successfully.  
   INFO  Filament theme [postcss.config.js] created successfully.  
   WARN  Action is required to complete the theme setup:  
  ⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`  
  ⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`


  1. Added new item in vite.config.js

input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],


  1. Added viteTheme() to Admin-panel

->viteTheme('resources/css/filament/admin/theme.css');


  1. Executed build command

bun run build
$ vite build
vite v5.3.5 building for production...
transforming (1) resources/js/app.js
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.

Why the tailwind.config.js warning here?
The Filament command created this file @ resources/css/filament/admin/tailwind.config.js:
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

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


Am i missing something here?
Was this page helpful?