Filament•15mo ago

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>

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

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: [],
}

/** @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.

2 Replies

krekas•15mo ago

you don't have filament preset in your tailwind config it's in the docs import preset from './vendor/filament/support/tailwind.config.preset'

module.exports = {
    presets: [preset],

module.exports = {
    presets: [preset],

ČamapOP•15mo ago

I thought that was the case only when installing forms separately, not with full panel builder installation Adding the preset alone did not work, I had to run the php artisan filament:install --scaffold --forms in order to add proper vite and tailwind config (which automatically adds the preset as well) Thank you!!

Gaming

Programming

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