Filament•11mo 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•11mo 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

aurawindsurfingOP•11mo ago

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

toeknee•11mo ago

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

aurawindsurfingOP•11mo ago

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

toeknee•11mo ago

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

aurawindsurfingOP•11mo ago

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

Themes - Panel Builder - Filament

aurawindsurfingOP•11mo ago

Yes

toeknee•11mo 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

aurawindsurfingOP•11mo ago

In the custom View::make in a panel.

toeknee•11mo 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.

aurawindsurfingOP•11mo 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•11mo ago

What doesn't work?

aurawindsurfingOP•11mo 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•11mo ago

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

aurawindsurfingOP•11mo 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?

aurawindsurfingOP•11mo ago

awcodes•11mo ago

What errors are you seeing in the console?

aurawindsurfingOP•11mo 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•11mo 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?

aurawindsurfingOP•11mo 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•11mo ago

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

aurawindsurfingOP•11mo ago

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

Gaming

Programming

How to add css to custom theme?