Filament•3y ago•

44 replies

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

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

tailwind.config.js

in the project root and add some

content

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

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

/Tables/**/*.php',

in the tailwind config..

Jump to solution

Tailwind content detection in custom theme not working

sail npm run build

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

tailwind.config.js

in the project root and add some

content

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

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

/Tables/**/*.php',

in the tailwind config..

Jump to solution

Tailwind content detection in custom theme not working

Tailwind content detection in custom theme not working

Similar Threads

Similar Threads

Similar Threads