Filament•4mo ago

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>'))

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')`

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')`

2. Added new item in vite.config.js

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

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

3. Added viteTheme() to Admin-panel

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

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

4. 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.

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',
    ],
}

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?

3 Replies

Dennis Koch•4mo ago

Hm, this looks all good to me. I guess you build the theme after adding the new TW class?

GasparOP•4mo ago

Weird. I got it finally working. Any ideas why vite is yelling about Tailwind CSS config?

Dennis Koch•4mo ago

Not really. I think I have the same 😅

Gaming

Programming

Custom theme - Tailwind class not included in built css