Filament•12mo ago

Using a theme seems to discard default styles?

I want to use a few tailwind classes that are not in the standard build, so from the documentation I understand I need to make a theme. So I made a simple theme just to run the recompile, and added it to webpack config and reran the npm run prod step. After npm run prod I can now use the custom colors and classes that I needed, but a lot of the default styling is lost, ie. the tabs no longer work and buttons become white on white. Is there something I am missing ?

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Solution:

Thanks for confirming. Found out that the missing background color on buttons was relating to a bg-custom class, so I added a custom color to the list and colors are back, the tab system not working seems to have been a fluke, its working now. ```...

Jump to solution

4 Replies

awcodes•12mo ago

what's in your resources/css/filament/admin/theme.css?

Kleis•12mo ago

for some reason when I upgraded to v3 my panel became app not admin, so in resources/css/filament/app/theme.css I have

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

and in my mix file

mix
    .postCss('resources/css/filament/app/theme.css', 'public/css/filament/app/theme.css', [
    require('tailwindcss'),
    ])

mix
    .postCss('resources/css/filament/app/theme.css', 'public/css/filament/app/theme.css', [
    require('tailwindcss'),
    ])

The path that is it including does exist

jknielsen@abemad:~/dev/CDA/resources/css/filament/app$ cat ../../../../vendor/filament/filament/resources/css/theme.css
@import 'index.css';

jknielsen@abemad:~/dev/CDA/resources/css/filament/app$ cat ../../../../vendor/filament/filament/resources/css/theme.css
@import 'index.css';

jknielsen@abemad:~/dev/CDA/vendor/filament/filament/resources/css$ cat index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root.dark {
        color-scheme: dark;
    }
}

jknielsen@abemad:~/dev/CDA/vendor/filament/filament/resources/css$ cat index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
    }

    :root.dark {
        color-scheme: dark;
    }
}

awcodes•12mo ago

hmm. that looks ok.

Solution

Kleis•12mo ago

'custom' => Color::Blue

'custom' => Color::Blue

Gaming

Programming

Using a theme seems to discard default styles?