Filament•14mo ago

Tailwind content detection in custom theme not working

I setup a fresh installation of laravel 10 and filament 3. Unfortunately I can't get the custom theme to work properly to get access to all the tailwind css classes. I followed the steps in the documentation (https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) to create a custom theme. But when I run the build script (sail npm run build), I get this warning, and the classes used in my blade files are not available:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

resources/css/filament/admin/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';

resources/css/filament/admin/tailwind.config.js

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',
    ],
}

vite.config.js

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

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

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

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

If I add a tailwind.config.js in the project root and add some content entries there, the warning disappears, but still the css classes are missing. If I add a syntax error to the resources/css/filament/admin/tailwind.config.js the build process fails, so it appears to read it. Can someone help me?

Themes - Panel Builder - Filament

Solution:

I was missing /Tables/**/*.php', in the tailwind config..

Jump to solution

31 Replies

frieseOP•14mo ago

Can somebody please help me? I'm really stuck here 😦

awcodes•14mo ago

Did you add the ->viteTheme() to your panel?

frieseOP•14mo ago

Yes I did: ->viteTheme('resources/css/filament/admin/theme.css') If I add a background color to theme.css it works

awcodes•14mo ago

Do you have @config() in your theme.css? It could be that it’s trying to use the tailwind config in root. Also your getting that content error because of your app.css. I would recommend not having a tailwindconfig in the root. If you need it for app you can move it and then reference it in app.css with @config(). Sounds like something just isn’t configured right. Hard to say what though.

frieseOP•14mo ago

Yes, I have the @config part @config './tailwind.config.js'; My resources/css/app.css is an empty file. Even if I remove it from the vite input config, the error still persists I don't have a tailwind config in the project root, I just temporarily added it to check if it changes anything. As I didn't change anything stylewise so far, I could remove everything that could interfere and start fresh. Do you can maybe sent me all the default config files regarding this tailwind issue that should work out of the box? I used "admin" as my panel name, and it is a fresh and clean laravel 10 filament 3 install.

awcodes•14mo ago

so the theme is actually working? you're just concerned about the content warning

awcodes•14mo ago

this is my typical setup, but my frontend and backend are seperate so I have to have two configs and stylesheets.

frieseOP•14mo ago

Yes and no 😉 theme.css and build process works. With this content, the background color will get red. But it seems like the contentpart from the tailwind config doesnt work, because the used classes aren't recognized

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@config './tailwind.config.js';
body {
    background-color: red !important;
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@config './tailwind.config.js';
body {
    background-color: red !important;
}

frieseOP•14mo ago

looks identical to me 😦

awcodes•14mo ago

hmm. not seeing anything off in the code you shared.

frieseOP•14mo ago

I added the css-class w-36 to a select: $this->extraInputAttributes(['class' => 'state-column w-36'], true); In the dev-tools in the browser, I can see that the class is added ARGH!!!

awcodes•14mo ago

where are you calling $this->extraInputAttributes()

frieseOP•14mo ago

i'm so sorry...I just found my mistake :/

Solution

friese•14mo ago

I was missing /Tables/**/*.php', in the tailwind config..

awcodes•14mo ago

no worries, sometimes we just have to talk through it.

frieseOP•14mo ago

I once had the class directly in the blade-template, but moved it..

awcodes•14mo ago

but yea, that's why i was asking about where you were calling it.

frieseOP•14mo ago

and then I didn't added the path :/

awcodes•14mo ago

glad you found it though. 🙂

frieseOP•14mo ago

would it hurt to tell tailwind to look into every file in app? 😄

awcodes•14mo ago

yes

frieseOP•14mo ago

damn 😄 can I buy you a coffee for your wasted time?

awcodes•14mo ago

it's a parser so if you include a file that has characters it that it can't handle it'll break the build. no need. thank you though.,

frieseOP•14mo ago

I see...I hope I don't make the same mistake again 😄

awcodes•14mo ago

happens to us all.

frieseOP•14mo ago

you should consider adding a github sponser like Dennis Koch 😉 Thanks again for your help and have a great weekend 🙂

Dennis Koch•14mo ago

Isn’t worth it for support here 😅

frieseOP•14mo ago

Thinks can change 😉

Dennis Koch•14mo ago

Don’t think so 😅

frieseOP•14mo ago

Maybe people need a friendly reminder 😄 Like if the conversation in a topic exceeds 5 message or so with one of you, there could be a nice bump: "Want to sponsor me a beer/coffee/whatever" 😄

Gaming

Programming

Tailwind content detection in custom theme not working