FilamentF
Filament•3y ago
Čamap

Unable to load proper styles for components used outside of admin panel

I've got a basic layout blade and I want to use button from filament. No luck so far, I've read the docs but sadly did not find anything or missed it..

app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link type="stylesheet" href="public/css/filament/support/support.css"> <!-- Filament support styles -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <title>Test page</title>
    </head>
    <body>
        <x-filament::button>
            Button
        </x-filament::button>
    </body>
</html>

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'],
            refresh: true,
        }),
    ],
});

and tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}


Am I missing something? It is probably something stupid I forgot about.. the styles actually get loaded but the button is not styled properly.. one thing I noticed is that

--c-400: var(--primary-400); --c-500: var(--primary-500); --c-600: var(--primary-600);

on the button dont work, it says that --primary-400, --primary-500, --primary-600 are not defined.
Was this page helpful?