Filament•13mo ago

Custom pages Navigation tailwind question

I have two questions about Custom pages: q1 : When I click on a page made with Custom pages, the navigation does not display correctly. It does not show which page I am currently on. q2 : When I click on a page made with Custom pages, my Tailwind settings are different from other pages. This only happens on one Custom page, but problem 1 happens on all three Custom pages. If you need more information, please let me know. If there is any unclear expression, please also let me know. I used LLM to translate because English is not my strong point.

3 Replies

ghcOP•13mo ago

this pic is for q2

ghcOP•13mo ago

this pic for q1 the place I clicked on is highlighted, but the navigation bar is green, but the page itself is displayed normally.

ghcOP•13mo ago

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import colors from 'tailwindcss/colors' 
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: { 
                danger: colors.rose,
                primary: colors.green,
                success: colors.gray,
                warning: colors.yellow,
            }, 
        },
    },

    plugins: [forms, typography],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import colors from 'tailwindcss/colors' 
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: { 
                danger: colors.rose,
                primary: colors.green,
                success: colors.gray,
                warning: colors.yellow,
            }, 
        },
    },

    plugins: [forms, typography],
};

this is my tailwind setting tailwind.config.js and i create the resources\css\filament.css
add the app\Providers\FilamentServiceProvider.php

 Filament::serving(function () {
            Filament::registerTheme(
                app(Vite::class)('resources\css\filament.css'),
            );

 Filament::serving(function () {
            Filament::registerTheme(
                app(Vite::class)('resources\css\filament.css'),
            );

vite.config.js is set ok

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

Gaming

Programming

Custom pages Navigation tailwind question