Filament•10mo ago

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,
        }),
    ],
});

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")]
}

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>

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

2 Replies

Davide Cariola•10mo ago

I solved the base tailwind classes with this guide: https://blog.jpat.dev/build-custom-components-inside-a-filament-v3-panel-with-livewire-and-tailwindcss I'll try again with DaisyUI to see if it works

Patricio on Code

Build custom components inside a Filament V3 Panel with Livewire an...

I know, Livewire and Tailwind are the base for Filament, and this tutorial is not any hidden gem, but my gut feeling tells me I should write it. It shows few steps of the docs, but many don't get there, and don't even know this is possible. Filament ...

Davide Cariola•10mo ago

Everything works now. This is the correct 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',
        './app/Livewire/**/*.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    input: [
        'resources/css/filament/admin/theme.css',
    ],
    plugins: [require("daisyui")],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './app/Livewire/**/*.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    input: [
        'resources/css/filament/admin/theme.css',
    ],
    plugins: [require("daisyui")],
}

Gaming

Programming

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