Filament•3y ago•

4 replies

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

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

bg-orange-500

(default tailwind) and

btn btn-primary

btn btn-primary

(daisy ui) don't work.
I've run

npm run build

npm run build

and have

npm run dev

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

plugins: [require("daisyui")]

, come colors from the side bar disappears

Thank you so much for every help.

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

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

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

bg-orange-500

(default tailwind) and

btn btn-primary

btn btn-primary

(daisy ui) don't work.
I've run

npm run build

npm run build

and have

npm run dev

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

plugins: [require("daisyui")]

, come colors from the side bar disappears

Thank you so much for every help.

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads