FilamentF
Filament•3y ago
Davide Cariola

Daisy UI on a Livewire component to use in a custom page

Hi everyone!

I'm trying to apply base tailwind classes and Daisy UI ones in a Livewire component used in a custom page.

I've read the previous conversations about it, created a custom theme, but I can't seem to make it work.

This is my vite.config.js:
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/admin/theme.css'],
            refresh: true,
        }),
    ],
});

This is my 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',
    ],
    plugins: [require("daisyui")]
}

My AdminPanelProvider:
])->viteTheme('resources/css/filament/admin/theme.css');

My component:
<div class="bg-orange-500">
    <button class="btn btn-primary">Primary</button>

    <hr>

    This is the table!

    {{ $this->table }}
</div>

Both bg-orange-500 (default tailwind) and btn btn-primary (daisy ui) don't work.
I've run 
npm run build
 and have npm run dev active. I receive the daisy ui message when building the assets.

I also notice that if in my tailwind.config.js lives plugins: [require("daisyui")], come colors from the side bar disappears

Thank you so much for every help.
Was this page helpful?