Filament•5mo ago

How to add css to custom theme?

Hi Guys, Can someone please explain to me like to a 5 year old how to use full tailwindcss class. I know I should put it in a custom theme css but how exactly? Which files to modify and where? I know about custom themes https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme but how to add whole tailwindcss to it for local dev and then purge it? I'm using vite. Thank you so much!

Themes - Panel Builder - Filament

22 Replies

toeknee•5mo ago

When you run php artisan make:filament-theme it generates you the files and away you go, add the css and run npm run build. Providing you followed all the steps that CSS will then be used

aurawindsurfing•5mo ago

Yes but how to add whole tailwindcss to the files and which files exactly?

toeknee•5mo ago

It happens as part of the generation You don't add the whole, vite builds what is used in the blade files.

aurawindsurfing•5mo ago

But run dev does not add the classes I used and im still missing classes

toeknee•5mo ago

Where are you using the classes? Have you configured filament to use this css file

aurawindsurfing•5mo ago

As per this example? https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

aurawindsurfing•5mo ago

Yes

toeknee•5mo ago

Ok, so where are you using the classes? The tailwind theme doesn't use classes it includes them, so you must be using them somewhere. Where are you defining the use of classes that are not included

aurawindsurfing•5mo ago

In the custom View::make in a panel.

toeknee•5mo ago

So in the view::make are you including a blade view? That is where the CSS classes should be used, then when runnin npm run build, it will add those css classes into your theme.

aurawindsurfing•5mo ago

Yes, let me try this again if you say it should work Ok it definately works now as I have lost all of my styles. hat should be the contects of theme.css?

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

@config 'tailwind.config.js';

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

@config 'tailwind.config.js';

I created theme for wrong panel. vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/filament/app/theme.css',
            ],
            refresh: true,
        }),
    ],
});

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/filament/app/theme.css',
            ],
            refresh: true,
        }),
    ],
});

AppPAnelProvider:

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

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

recources/css/filament/app/tailwind.config.js

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

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

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

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

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

resources/css/filament/app/theme.css

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

@config 'tailwind.config.js';

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

@config 'tailwind.config.js';

I have no idea why this does not work, or maybe it is that vite is doing only the main and tailwind.config file and not the theme one?

toeknee•5mo ago

What doesn't work?

aurawindsurfing•5mo ago

In my resource I Class I have:

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\Layout\View::make('classified')->view('filament.card'),

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\Layout\View::make('classified')->view('filament.card'),

then in the view card.blade.php I try to use h-20 and it does not work Are the configurations files correct?

awcodes•5mo ago

You need to add your views path to the tailwind.config.js

aurawindsurfing•5mo ago

Thanks it seems to work now! I have put my custom view in incorrect directory! Now I have a strange different error. yarn build - works, but yarn dev does not, it does not compile any styles and page is displayed as would be without any styles, what am I missing?

aurawindsurfing•5mo ago

awcodes•5mo ago

What errors are you seeing in the console?

aurawindsurfing•5mo ago

No errors whatsoever. The vite dev just does not compile. I reverted to use vite build —watch and it works as expected no idea whats the story with dev tough

toeknee•5mo ago

I suspect you are running yarn dev and accessing over the url it provides? Why use Yarn and not NPM when we natively run as npm?

aurawindsurfing•5mo ago

every time I had npm issues the same packages lists was installed without error with yarn. Sick and tired of fixing npm errors. Anyway "vite build —watch" works and thats good enough for me. Thank you!

toeknee•5mo ago

Sounds like NPM is respecting the lock file if you are getting errors.

aurawindsurfing•5mo ago

Thank you for you help. I'm not using NPM.

Gaming

Programming

How to add css to custom theme?