Help me understand why tailwind partially works in livewire component on custom Dashboard?

I have created a custom Dashboard page, and there is method createReport.

public function createReport()
    {
        return Action::make('createReport')
            ->modalHeading('')
            ->color(fn() => Color::Pink)
            ->icon('heroicon-o-presentation-chart-bar')
            ->modalContent(function () {
                return view('livewire.staff.report', [
                    'date' => $this->date,
                ]);
            })
            ->modalSubmitActionLabel('Send report to Milan')
            ->iconSize('w-10 h-10')
            ->action(fn() => dispatch_sync(new DailyReport()));
    }

public function createReport()
    {
        return Action::make('createReport')
            ->modalHeading('')
            ->color(fn() => Color::Pink)
            ->icon('heroicon-o-presentation-chart-bar')
            ->modalContent(function () {
                return view('livewire.staff.report', [
                    'date' => $this->date,
                ]);
            })
            ->modalSubmitActionLabel('Send report to Milan')
            ->iconSize('w-10 h-10')
            ->action(fn() => dispatch_sync(new DailyReport()));
    }

I get my livewire page, but all the tailwind style i want to apply into it fails and styles simply are not applied. So, first i thought somehow this report.blade.php is not aware of tailwind, but it is, as if i change text-gray-500 to text-gray-200 i can see the difference. However, classes with grid, bg-, and others, they simply are not applied on that livewire blade page. So, something like this:

<div class="text-sm text-gray-500">Select a date to view the report</div>

<div class="text-sm text-gray-500">Select a date to view the report</div>

and change to text-gray-200 or change text-2xl works. But if i try to add bg-orange-600 which i use on Dashboard page calling this livewire.staff.report via action, it will not work and no background is added. Also, if i try to use something like grid grid-cols-3 does not work, but if i use flex justify-between it does work. I read someone mention custom themes, and i followed link and honestly absolutely dont understand it. And i dont need any custom theme. What could cause it?

Solution:

Yes. Because resources/views/livewire/**/*.blade.php is not part of your Tailwind config.

Jump to solution

14 Replies

Dennis Koch•3mo ago

as if i change text-gray-500 to text-gray-200 i can see the difference.

Those classes are probably just already available.

However, classes with grid, bg-, and others, they simply are not applied on that livewire blade page.

So they are probably missing from the Filament build.

And i dont need any custom theme.

You do. A "custom theme" is just a CSS file and a Tailwind config that will be compiled into an CSS file with all the TW classes you are using.

and honestly absolutely dont understand it.

Which part you don't understand?

VladimirOP•3mo ago

they do not miss from Filament building as they work on Dashboard i mention. i created theme i follow the instructions in the command to complete the setup process i added it into StaffPanelProvider

VladimirOP•3mo ago

VladimirOP•3mo ago

It exists there:

VladimirOP•3mo ago

still not changes

Dennis Koch•3mo ago

You said:

But if i try to add bg-orange-600 which i use on Dashboard page [...] it will not work and no background is added

bg-orange-600 is not the same as text-gray-500. Just because text-gray-500 works, it doesn't mean that bg-orange-600 will work, too. Did you add it to your vite.config.js? Did you run npm run build or npm run dev?

VladimirOP•3mo ago

Did.

Dennis Koch•3mo ago

Does the tailwind.config.js include the paths of the files you are using TW classes inside?

VladimirOP•3mo ago

Hello @Dennis Koch sorry i was not online to answer. Here is how my vite looks like:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/staff/theme.css'
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**/*.php',
                'app/Filament/**/*.php',
            ],
        }),
    ],
});

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/staff/theme.css'
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**/*.php',
                'app/Filament/**/*.php',
            ],
        }),
    ],
});

Npm run dev "tailwind.config.js "

content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

As per default laravel installation, it includes full view folder there

'resources/css/filament/staff/theme.css'

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

Then in tailwind.config.js

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

export default {
    presets: [preset],
    content: [
        './app/Filament/Staff/**/*.php',
        './resources/views/filament/staff/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

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

export default {
    presets: [preset],
    content: [
        './app/Filament/Staff/**/*.php',
        './resources/views/filament/staff/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

All this i did not write, its stub made on installtion of custom theme. So i presume its Filament defautl stub. SO i draw some conclusions. I have a custom Dashboard page, made by followng documentaiton. I have a custom theme, also made by following docs. ON Custom dashboard, Action createReport is called. That action is calling modal, and modal content is a livewire file.

 return Action::make('createReport')
            ->modalHeading('')
            ->color(fn() => Color::Pink)
            ->icon('heroicon-o-presentation-chart-bar')
            ->modalContent(function () {
                return view('livewire.staff.report', [
                    'date' => $this->date,
                ]);
            })

 return Action::make('createReport')
            ->modalHeading('')
            ->color(fn() => Color::Pink)
            ->icon('heroicon-o-presentation-chart-bar')
            ->modalContent(function () {
                return view('livewire.staff.report', [
                    'date' => $this->date,
                ]);
            })

Th file is not content of this modal, and no style can be applied to it. However, when i for egzample, in dashboard.blade.php create an empty div, and assign it bg-orange-600, and then inside that action modal, in livewire file, i user this class, it works, and bg-orange-600 has been applied. But if i try, for example, to change the bg in livewire file, it does not work. No bg is applied. And then if i add this color somewhere in dahsboard.blade.php, bg color works in livewire file too. So tailiwnd color schema works for me only when i use the color on "highter" level- like dashboard page, and later on is applied to a modal and its content

VladimirOP•3mo ago

Here is public repo for this: https://github.com/coding-wisely/chillin so maybe help you to help me ❤️

GitHub

GitHub - coding-wisely/chillin

Contribute to coding-wisely/chillin development by creating an account on GitHub.

Solution

Dennis Koch•3mo ago

Yes. Because resources/views/livewire/**/*.blade.php is not part of your Tailwind config.

VladimirOP•3mo ago

moment, let me double check it Doh! i was expecting that in original tailwind config file at the root, everything under the resources views is covered already "tailwind.config.js " content: [ './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php', './storage/framework/views/.php', './resources/views/*/.blade.php', ], Now, when i added custom theme and it created me a new tailwind config file under its folder, and added a pth to livewire files, everything worked. I am not sure i would figure it out on my own. THank you @Dennis Koch . Really thank you.

VladimirOP•3mo ago

So, it must be added into the tailwind config file that filament created for me when i created a custom theme. if you get to LaraconEu 2025, i will personally thank you ❤️

Dennis Koch•3mo ago

I won't, but you're welcome 😅

Gaming

Programming

Help me understand why tailwind partially works in livewire component on custom Dashboard?