Filament•12mo ago

make all tailwind classes available

Hi i have a custom infolists component which is a table and not many of the tailwind classes work like bg-gray-100 would work but if i change it to something else it wont i have created a new theme and reg like this

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

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

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/app/theme.css','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/app/theme.css','resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});

am i missing something ? thanks

13 Replies

DrByte•12mo ago

If you're used to using Tailwind, you know that building production assets scans your code for classes it should include, and it excludes everything else. Filament ships with all the assets that Filament implements. If you want to add more, or change some, rebuild the assets yourself, incorporating your custom components etc. EDIT: You'll need to add some more paths to your build.

vasOP•12mo ago

how can i do that i assumed creating a new theme will do it

DrByte•12mo ago

You may need to list your app namespace as additional files for it to parse You'll find this is one of the most common questions people ask. I think a search for vite or tailwind will probably reveal the answer you're looking for. awcodes often gives great answers about this topic, so look for what he's got to say in the search results you find.

vasOP•12mo ago

right ill have a look thanks

DrByte•12mo ago

This one might help? https://discord.com/channels/883083792112300104/1186782132639633438/1187514383279075388

vasOP•12mo ago

thanks ill have a read

Thijmen•12mo ago

I think one of your tailwind configs is wrong. Looks like the custom class isnt being included in the purged tailwind file Where do you put the bg-gray-100?

vasOP•12mo ago

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
    <div class="w-full">

        <table class="min-w-full table-auto">
            <thead class="bg-gray-100 dark:bg-gray-800 p-12">

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
    <div class="w-full">

        <table class="min-w-full table-auto">
            <thead class="bg-gray-100 dark:bg-gray-800 p-12">

Thijmen•12mo ago

Did you include the blade files in the tailwind config?

vasOP•12mo ago

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

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

this is from what filament generated for the theme in css/filament/admin

Thijmen•12mo ago

is your blade in that location?

vasOP•12mo ago

no its in infolists i just saw that now works now thanks

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

export default {
    presets: [preset],
    content: [
        './app/Filament/App/**/*.php',
        './resources/views/infolists/**/*.blade.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/infolists/**/*.blade.php',
        './resources/views/filament/app/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Thijmen•12mo ago

Great!

Gaming

Programming

make all tailwind classes available