[Bug]: Tailwind Configuration

[markwillow]

What happened?

I just followed your instruction on how to install the kb panel. However, the design is not the same with my admin panel. It seems that the CSS code is missing or something.

When I try to use npm run build:
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
✓ 47 modules transformed.
public/build/manifest.json 0.42 kB │ gzip: 0.17 kB
public/build/assets/theme-11312fb2.css 65.70 kB │ gzip: 10.53 kB
public/build/assets/app-4ed993c7.js 0.00 kB │ gzip: 0.02 kB
public/build/assets/app-0d91dc04.js 29.03 kB │ gzip: 11.59 kB
✓ built in 4.86s

This is my vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

This is my tailwind.config.js:
import preset from '../../../../vendor/filament/filament/tailwind.config.preset';

export default {
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
'./vendor/guava/filament-knowledge-base/src//*.php',
'./vendor/guava/filament-knowledge-base/resources//*.blade.php',
],
};

Need your help setting this up.

How to reproduce the bug

Just followed your instructions.

Package Version

latest

PHP Version

latest

Laravel Version

latest

Which operating systems does with happen with?

macOS

Notes

No response

[lukas-frey]

Hi, did you configure your knowledge base panel?

The knowledge base acts as a completely different panel, so you need to configure your custom theme for it too.

[markwillow]

Yes. I did. I created a new filament theme using php artisan make:filament-theme admin. Then, here's my vite.config.js file:

`
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/knowledge-base/theme.css',
],
refresh: true,
}),
],
});
`

Here's my tailwind.config.js file:
`
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
'./vendor/guava/filament-knowledge-base/src//*.php',
'./vendor/guava/filament-knowledge-base/resources//*.blade.php',
],
}
`

Here's my AppServiceProvider file:
public function register(): void { KnowledgeBasePanel::configureUsing( fn(KnowledgeBasePanel $panel) => $panel ->viteTheme('resources/css/filament/knowledge-base/theme.css') // your filament vite theme path here ); }

I did run npm run build and the attach is the result.

I'm using Laravel 10.10

[lukas-frey]

Did you also create a custom theme for the knowledge base? You're saying you created one for admin, but in the path you are specifying a knowledge base theme.

Otherwise also try running php artisan filament:assets to install third party assets.

[markwillow]

Yes. I used knowledge-base. Do I need to add codes to theme.css?

[lukas-frey]

No, just create a theme the same way you are supposed to do in filament. And then add it to AppServiceProvider in the register method.

Please create a repository where you reproduce the error and I can take a look at it.

[markwillow]

Is this error message normal:

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

[lukas-frey]

No, not normal. There should be a content option then :D Containing paths to files that tailwind should parse.

[markwillow]

This is my configuration:

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

export default {
    presets: [preset],
        content: [
            './app/Filament/**/*.php',
            './resources/views/filament/**/*.blade.php',
            './vendor/filament/**/*.blade.php',
            './vendor/guava/filament-knowledge-base/src/**/*.php',
            './vendor/guava/filament-knowledge-base/resources/**/*.blade.php',
        ],
        theme: {
            extend: {},},
    plugins: [],
    }

I have already published all the assets.

[lukas-frey]

Can you please format the code correctly using backticks, otherwise it messes up the formatting and changes your code (I edited your comment already to include the formatting).

It looks fine to me, though. I can't reproduce your error and I'm not quite sure what else might be causing this issue, so for me the best would be if you tried to use the package in a brand new project and try implementing it there. If you still encounter the error, just link me to the repository and I'll try to debug it.

But right now, I'm not sure how else to help. The tailwind config looks fine to me.

Did you add your filament theme to your vite.config.js file?

[markwillow]

I tried running npm run dev and it works:

VITE v4.3.9 ready in 1048 ms

➜ Local: http://localhost:5251/
➜ Network: http://172.21.0.7:5251/
➜ Network: http://172.19.0.4:5251/
➜ press h to show help

LARAVEL v10.48.18 plugin v0.7.8

➜ APP_URL: http://cs.localhost

[dharen008]

Is this error message normal:

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

Hi @lukas-frey, how can i fix this issue? here's my demo repo: https://github.com/dharen008/demo/tree/KB-Demo

[lukas-frey]

Hi, not sure what you are running into - your demo works. Make sure you are actually building your assets.