Topics

Filament•2mo ago

Importing old project pages onto filament pages

Last year I made fully working Laravel project but it was not using filament. Now project is being continued on and my original project needs to be re-added through filament. I am making filament pages and linking them with same options as my old routes and then I comment off route for it so it goes trought filament panel like building/announcements. Page renders and some of things do work, but certain css and js wont load in. I am not sure if this is correct way of merging old project pages into filament pages

Solution:

now that I am using one with theme it is working I think

Jump to solution

44 Replies

Dennis Koch•2mo ago

Hard to tell. As always it depends on the project. If CSS/JS won't load that probably was included in a stack or in the layout and not readded through Filament

Jack BadasssonOP•2mo ago

it is tailwind so most of css is within view file. For example there is this tag and it uses bg-red-900 but it just wont work but bg-red-500 does work. Same was with bg-green-900 but bg-green-800 did work while bg-red-800 didnt work so I wonder if filament just forbids certain colors and other tailwind elements or just overrides them somehow

Aivirth•2mo ago

if you made custom views and components you need to add their path to the tailwind config for filament to recognize and compile the classes

Dennis Koch•2mo ago

Sounds like you don’t have a custom Filament theme then.

Jack BadasssonOP•2mo ago

I found preset and safelist but with commenting it off nothing much changes. I also imported all content entries and added

'./resources/css/**/*.css'

'./resources/css/**/*.css'

because only external css classes I used were all placed in resources/css/app.css and I copied them all to this project at same file. this is edited tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme'
import forms from '@tailwindcss/forms'
import preset from './vendor/filament/filament/tailwind.config.preset.js'

/** @type {import('tailwindcss').Config} */
export default {
    //presets: [preset],

    content: [
        './app/Filament/Building/**/*.php',
        './resources/views/**/*.blade.php',
        './resources/css/filament/building/**/*.css',
        './vendor/filament/**/*.blade.php',
        './vendor/guava/calendar/resources/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/resident/pages/**/*.blade.php',
        './resources/views/**/*.blade.php',


        // Tailwind sees your Filament theme CSS:
        //'./resources/css/filament/building/**/*.css',

        // Old project settings:
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './resources/css/**/*.css',

    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    /*
    safelist: [
        'bg-green-500',
        'bg-blue-500',
        'bg-red-500',
    ],
    */

    plugins: [
        forms,
        require('tailwindcss'),
        require('autoprefixer'),
    ],
}

import defaultTheme from 'tailwindcss/defaultTheme'
import forms from '@tailwindcss/forms'
import preset from './vendor/filament/filament/tailwind.config.preset.js'

/** @type {import('tailwindcss').Config} */
export default {
    //presets: [preset],

    content: [
        './app/Filament/Building/**/*.php',
        './resources/views/**/*.blade.php',
        './resources/css/filament/building/**/*.css',
        './vendor/filament/**/*.blade.php',
        './vendor/guava/calendar/resources/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/resident/pages/**/*.blade.php',
        './resources/views/**/*.blade.php',


        // Tailwind sees your Filament theme CSS:
        //'./resources/css/filament/building/**/*.css',

        // Old project settings:
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './resources/css/**/*.css',

    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    /*
    safelist: [
        'bg-green-500',
        'bg-blue-500',
        'bg-red-500',
    ],
    */

    plugins: [
        forms,
        require('tailwindcss'),
        require('autoprefixer'),
    ],
}

Dennis Koch•2mo ago

You registed your custom theme via viteTheme and compiled it?

Jack BadasssonOP•2mo ago

I dont use custom theme

Dennis Koch•2mo ago

Then that's your issue. You need a custom theme.

Aivirth•2mo ago

just make one always anyway even if you don't need it at the beginning, you are gonna need it eventually for a plugin or something else

Jack BadasssonOP•2mo ago

but filament page only render style from themes?

Dennis Koch•2mo ago

What? I can't follow. If you want to use Tailwind CSS you need to compile a CSS file to include those classes – that's a "theme" in Filament terms.

Jack BadasssonOP•2mo ago

but what if most of my CSS is within blade files I need to move it all to theme?

Dennis Koch•2mo ago

As <style> tags? That doesn't matter. If they are included inline it should work the same way as before.

Jack BadasssonOP•2mo ago

<div class="flex flex-row w-full gap-y-1 gap-x-2 justify-between md:justify-start 2xl:w-1/3">

<div class="flex flex-row w-full gap-y-1 gap-x-2 justify-between md:justify-start 2xl:w-1/3">

like this

Dennis Koch•2mo ago

That is not CSS, that's Tailwind. And Tailwind requires a compilation step where it scans your files for the used classes and creates a CSS file that only includes classes you used.

Aivirth•2mo ago

i think there's underlying confusion on how tailwind works as a whole compared to something like bootstrap

Jack BadasssonOP•2mo ago

it was like npm run dev or something right because I would still edit tailwind live I wouldnt rebuild after each change

Dennis Koch•2mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Aivirth•2mo ago

not sure if how i could explain is 100% correct but practically: - bootstrap or similar: gives you a premade set of css classes which you import and use directly on the html - tailwind : you define the classes in the html and tailwind reads from its config and compile the classes it finds applying the properties defined in the configuration from the tailwind.config.js file you can do a lot of things: define new classes with styles preapplied, change name of the classes themselves while maintaining their configurated styles, add more colors which will then applied to all utility classes automatically, etc the reason some your styles worked and some didn't was because filament used some of those classes already and had tailwind compile them

Jack BadasssonOP•2mo ago

so I need to move everthing custom into single theme file? I can see in Provider that I use that theme is already made

->viteTheme('resources/css/filament/building/theme.css')

->viteTheme('resources/css/filament/building/theme.css')

Dennis Koch•2mo ago

What do you mean by "move"? You need to create a theme. And that theme needs to be configured via tailwind.config.js to scan the folders that use TailwindCSS.

Jack BadasssonOP•2mo ago

I can see that theme was already made https://i.imgur.com/OFjwRma.png

Imgur

Jack BadasssonOP•2mo ago

and main tailwind.config.js also links to it

Dennis Koch•2mo ago

And the tailwind.config.js contains all the correct paths? There's a separate tailwind.config.js for the theme. Not the main one

Jack BadasssonOP•2mo ago

yeah the main one outside this folder

 
       // Tailwind sees your Filament theme CSS:
        './resources/css/filament/building/**/*.css',

 
       // Tailwind sees your Filament theme CSS:
        './resources/css/filament/building/**/*.css',

Dennis Koch•2mo ago

No, it needs to be the one that belongs to the theme Tailwind doens't care about your CSS file. It cares about your PHP and Blade files which contains Tailwind CSS

Jack BadasssonOP•2mo ago

yeah I linked them too copied paths from my old project linked all views

Dennis Koch•2mo ago

In resources/css/filament/building/tailwind.config.js?

Jack BadasssonOP•2mo ago

no it was linked in global one I will link it here too

Aivirth•2mo ago

your tailwind.config.js inside the building folder would look something like this

No description

Aivirth•2mo ago

in the content array is where you define the paths to your blade files so that then your custom theme can recognize them properly and apply them to filament

Jack BadasssonOP•2mo ago

yeah I was doing it I just was using the global one

Dennis Koch•2mo ago

The global one is not relevant to us. Please ignore this for now,

Solution

Jack Badassson•2mo ago

now that I am using one with theme it is working I think

Jack BadasssonOP•2mo ago

I also moved all my custom theme from app.css to theme.css I just dont know if I am linking too many things

        // Old project settings:
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './resources/css/**/*.css'

        // Old project settings:
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './resources/css/**/*.css'

Aivirth•2mo ago

it's whatever really, on deploy it's gonna precompile them

Dennis Koch•2mo ago

We don't know it either. You need to link all the files that contain TailwindCSS.

Aivirth•2mo ago

in the context of filament i don't think you would need vue files tho

Dennis Koch•2mo ago

Unless he wants to include Vue components inside Filament.

Aivirth•2mo ago

i vaguely remember a library for that existing but i don't remember the name, neither if it's actually supported

Dennis Koch•2mo ago

You mean MingleJS. You can use Full-Page components on a page easily without it. I think MingleJS is for making it work inside reactive Livewire components

Aivirth•2mo ago

aren't all filament pages livewire components at base

Jack BadasssonOP•2mo ago

thanks for help I was stuck on this for 2 days

Dennis Koch•2mo ago

They are. But they don’t need to be reactive. The can also just render a Vue component and never update like plain old Blade

A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire

20KMembers

View on Discord

Did you find this page helpful?