F
Filament•3mo ago
Iven S. | LvckyWorldᶜʳᵉʷ

no default css after creating custom theme

I'am creating a custom page for a ticket system. In blade i wrote something like this: 
<div class="message space-y-4">
    @foreach($this->record->messages as $message)
        <div class="flex items-start">
            <div class="relative max-w-lg bg-blue-400 text-gray-800 rounded-2xl px-5 py-3 shadow-md">
                <div class="message-header flex items-center gap-2 mb-2">
                    <span class="message-sender font-semibold">{{ $message->sender->name }}</span>
                    <span class="message-timestamp text-xs text-gray-500">{{ $message->created_at->toDateTimeString() }}</span>
                </div>
                <div class="message-content">
                    {!! $message->message !!}
                </div>
                <!-- Sprechblasen-Tail -->
                <span class="absolute left-2 -bottom-3 w-0 h-0 border-t-8 border-t-blue-100 border-l-8 border-l-transparent"></span>
            </div>
        </div>
    @endforeach
</div>
<div class="message space-y-4">
    @foreach($this->record->messages as $message)
        <div class="flex items-start">
            <div class="relative max-w-lg bg-blue-400 text-gray-800 rounded-2xl px-5 py-3 shadow-md">
                <div class="message-header flex items-center gap-2 mb-2">
                    <span class="message-sender font-semibold">{{ $message->sender->name }}</span>
                    <span class="message-timestamp text-xs text-gray-500">{{ $message->created_at->toDateTimeString() }}</span>
                </div>
                <div class="message-content">
                    {!! $message->message !!}
                </div>
                <!-- Sprechblasen-Tail -->
                <span class="absolute left-2 -bottom-3 w-0 h-0 border-t-8 border-t-blue-100 border-l-8 border-l-transparent"></span>
            </div>
        </div>
    @endforeach
</div>
Problem: The tailwind classes aren't applied -> So i wanted to create a custome theme: I've created a custom theme by running the command: 
wodby@php.container:/var/www/html $ php artisan make:filament-theme
Using npm v10.9.1

   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/acp/theme.css`  
  ⇂ Next, register the theme in the acp panel provider using `->viteTheme('resources/css/filament/acp/theme.css')`  
  ⇂ Finally, run `npm run build` to compile the theme 
wodby@php.container:/var/www/html $ php artisan make:filament-theme
Using npm v10.9.1

   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/acp/theme.css`  
  ⇂ Next, register the theme in the acp panel provider using `->viteTheme('resources/css/filament/acp/theme.css')`  
  ⇂ Finally, run `npm run build` to compile the theme
Than I added the stuff tu vite.config.mjs: 
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/acp/theme.css'],
            refresh: true,
        }),
    ],
});
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/acp/theme.css'],
            refresh: true,
        }),
    ],
});
I added the theme to the provider: 
class AcpPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->viteTheme('resources/css/filament/acp/theme.css')
            ->id('acp')
            ->path('acp')
            ->login()
            ...
    }
}
class AcpPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->viteTheme('resources/css/filament/acp/theme.css')
            ->id('acp')
            ->path('acp')
            ->login()
            ...
    }
}
I've run npm run build: 
ivenschlenther@MacBook-Air-von-Iven laravel % npm run build

> build
> vite build

vite v6.1.0 building for production...
✓ 54 modules transformed.
public/build/manifest.json               0.44 kB │ gzip:  0.18 kB
public/build/assets/app-C6G_3qQV.css     0.06 kB │ gzip:  0.06 kB
public/build/assets/theme-Bs9B5NDh.css   0.19 kB │ gzip:  0.15 kB
public/build/assets/app-Xaw6OIO1.js     34.85 kB │ gzip: 14.03 kB
✓ built in 178ms
ivenschlenther@MacBook-Air-von-Iven laravel % npm run build

> build
> vite build

vite v6.1.0 building for production...
✓ 54 modules transformed.
public/build/manifest.json               0.44 kB │ gzip:  0.18 kB
public/build/assets/app-C6G_3qQV.css     0.06 kB │ gzip:  0.06 kB
public/build/assets/theme-Bs9B5NDh.css   0.19 kB │ gzip:  0.15 kB
public/build/assets/app-Xaw6OIO1.js     34.85 kB │ gzip: 14.03 kB
✓ built in 178ms
Problem, the whole CSS is gone (see image) laravel/public/build/assets/theme-Bs9B5NDh.css says: 
@tailwind base;@tailwind components;@tailwind utilities;@tailwind variants;@layer base{:root.dark{color-scheme:dark}[data-field-wrapper]{scroll-margin-top:8rem}}@config "tailwind.config.js";
@tailwind base;@tailwind components;@tailwind utilities;@tailwind variants;@layer base{:root.dark{color-scheme:dark}[data-field-wrapper]{scroll-margin-top:8rem}}@config "tailwind.config.js";
laravel/resources/css/filament/acp/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',
    ],
}
laravel/resources/css/filament/acp/theme.css: 
@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';
@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';
--- Filament v3.3.33 Laravel v11.45.1 PHP 8.4
No description
Solution:
Not sure whether it makes a difference, but in my projects (and I think in default Laravel) Tailwind runs via PostCSS. Not directly via Vite.
Jump to solution
14 Replies
Lara Zeus
Lara Zeus•3mo ago
its look like you're missing the Vite Plugin for tailwind css?! https://tailwindcss.com/docs/installation/framework-guides/laravel/vite
Baby
Baby•3mo ago
Hello
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
Hi Yes, Vite Plugin was missing. After adding it, I run in to the next issue: 
✓ 3 modules transformed.
[@tailwindcss/vite:generate:build] Can't resolve 'index.css' in '/Users/ivenschlenther/PhpstormProjects/fivem-acp/laravel/vendor/filament/filament/resources/css'
file: /Users/ivenschlenther/PhpstormProjects/fivem-acp/laravel/resources/css/filament/acp/theme.css
✓ 3 modules transformed.
[@tailwindcss/vite:generate:build] Can't resolve 'index.css' in '/Users/ivenschlenther/PhpstormProjects/fivem-acp/laravel/vendor/filament/filament/resources/css'
file: /Users/ivenschlenther/PhpstormProjects/fivem-acp/laravel/resources/css/filament/acp/theme.css
The files are existing in the vendor folder and correctly importet in the filament code its tailwind 3 btw
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
the tailwind v3 docs doesn't say to add tailwind to vite: https://v3.tailwindcss.com/docs/guides/laravel
Install Tailwind CSS with Laravel - Tailwind CSS
Setting up Tailwind CSS in a Laravel project.
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
Does anyone have more ideas
Dennis Koch
Dennis Koch•3mo ago
Hm, it's weird that it's looking for index.css. You don't specify that 🤔 There are many ways to compile Tailwind. Oh, it's looking for the index.css in the vendor folder. That exists? 🤔
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
Yes, it is imported in the core stuff. But only if I add tailwindcss() to vite. - Yes the file is existing in vendor
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
No description
Solution
Dennis Koch
Dennis Koch•3mo ago
Not sure whether it makes a difference, but in my projects (and I think in default Laravel) Tailwind runs via PostCSS. Not directly via Vite.
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
https://github.com/laravel/laravel/blob/11.x/postcss.config.js here?
GitHub
laravel/postcss.config.js at 11.x · laravel/laravel
Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things. - laravel...
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
ouh shit, it is commented out...
No description
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
now it works, crazy
No description
Iven S. | LvckyWorldᶜʳᵉʷ
Iven S. | LvckyWorldᶜʳᵉʷOP•3mo ago
thank you very much hehe :herzen:
Dennis Koch
Dennis Koch•3mo ago
Lol 😅 You're welcome.

Did you find this page helpful?