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()));
    }

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>

<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

text-gray-200

text-gray-200

text-gray-200 or change

text-2xl

text-2xl

text-2xl

text-2xl works.
But if i try to add

bg-orange-600

bg-orange-600

bg-orange-600

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

grid grid-cols-3

grid grid-cols-3

grid grid-cols-3 does not work, but if i use

flex justify-between

flex justify-between

flex justify-between

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

resources/views/livewire/**/*.blade.php

resources/views/livewire/**/*.blade.php

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

Jump to solution

Dennis Koch•9/14/24, 8:33 AM

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?

DDennis Koch > as if i change text-gray-500 to text-gray-200 i can see the difference. Those ...

VladimirOP•9/14/24, 1:21 PM

they do not miss from Filament building as they work on Dashboard i mention.

VladimirOP•9/14/24, 1:30 PM

i created theme

VladimirOP•9/14/24, 1:31 PM

i follow the instructions in the command to complete the setup process

VladimirOP•9/14/24, 1:32 PM

i added it into StaffPanelProvider

VladimirOP•9/14/24, 1:33 PM

VladimirOP•9/14/24, 1:34 PM

It exists there:

VladimirOP•9/14/24, 1:34 PM

still not changes

VVladimir they do not miss from Filament building as they work on Dashboard i mention.

Dennis Koch•9/14/24, 1:50 PM

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

bg-orange-600

is not the same as text-gray-500text-gray-500. Just because text-gray-500text-gray-500 works, it doesn't mean that

bg-orange-600

bg-orange-600

will work, too.

VVladimir i follow the instructions in the command to complete the setup process

Dennis Koch•9/14/24, 1:51 PM

Did you add it to your vite.config.jsvite.config.js? Did you run

npm run build

npm run build

npm run dev

npm run dev

DDennis Koch Did you add it to your `vite.config.js`? Did you run `npm run build` or `npm run...

VladimirOP•9/14/24, 2:19 PM

Did.

Dennis Koch•9/14/24, 2:22 PM

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

VladimirOP•9/15/24, 11:06 AM

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

VladimirOP•9/15/24, 11:10 AM

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

VladimirOP•9/15/24, 11:18 AM

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.

VladimirOP•9/15/24, 11:20 AM

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•9/15/24, 11:25 AM

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

VVladimir So tailiwnd color schema works for me only when i use the color on "highter" lev...

Dennis Koch•9/15/24, 2:18 PM

Yes. Because

resources/views/livewire/**/*.blade.php

resources/views/livewire/**/*.blade.php

is not part of your Tailwind config.

VladimirOP•9/15/24, 2:19 PM

moment, let me double check it

VladimirOP•9/15/24, 2:23 PM

Doh!

VladimirOP•9/15/24, 2:23 PM

i was expecting that in original tailwind config file at the root, everything under the resources views is covered already

VladimirOP•9/15/24, 2:24 PM

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

VladimirOP•9/15/24, 2:25 PM

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•9/15/24, 2:25 PM

So, it must be added into the tailwind config file that filament created for me when i created a custom theme.

VladimirOP•9/15/24, 2:26 PM

if you get to LaraconEu 2025, i will personally thank you

VladimirOP•9/15/24, 2:26 PM

VVladimir if you get to LaraconEu 2025, i will personally thank you

Dennis Koch•9/15/24, 2:27 PM

I won't, but you're welcome

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

Similar Threads

Similar Threads

Similar Threads