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

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

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

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

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

--primary-500

--primary-500

--primary-600

--primary-600

are not defined.

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

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

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

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

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

--primary-500

--primary-500

--primary-600

--primary-600

are not defined.

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads