[Bug]: Closure column styling don't work?

peroxovy commented 1 year ago

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

No

PowerGrid

3.7.2

Laravel

9.48

Livewire

2.11

Alpine JS

No response

Theme

Tailwind 3.x with tailwind/forms

Describe the bug.

I've tried to add another column with styled div, where I've tried to display a color of Reason.

I've used an example from Closure subpage in documentation, but unfortunately it doesn't read the color properly in TailwindCSS.

There's an example:

->addColumn('color_present', function (Reason $model){
    return '<div class="p-2 bg-['.e($model->color).']">'.e($model->color).'</div>';
})

[...]

Column::make('COLOR PRESENT', 'color_present'),

How does div render on the page:

<div class="p-2 bg-[#e20303]">#e20303</div>

The rest of the Table is working and displaying properly. div is visible in editor mode using F12 key and inspecting, but it's not rendering the Color. Also noticed that it's not visible under element.style option under F12 inspecting in CSS section. When I edit it manually it works...

I've tried also publishing the views again. Using Laravel Vite, building via npm run build and npm run dev - no results.

Any idea?

UPDATE

When I apply styles like:

->addColumn('color_present', function (Reason $model){
     return '<div style="padding:1em; background-color:' . e($model->color) . '; "></div>';;
})

It works. My question now is why it didn't read TailwindCSS class properly even if the Vite is compiled to build?

BenOussama180 commented 1 year ago

are powergrid files detectable in tailwind config file for it to compile those colors ? you need to add their paths in content

peroxovy commented 1 year ago

All file paths are added to tailwind.config.js like:

module.exports = {
    content: [ 
       [...]
        './app/Http/Livewire/**/*Table.php',
        './resources/vendor/livewire-powergrid/resources/views/**/*.php',
        './resources/vendor/livewire-powergrid/src/Themes/Tailwind.php'
]};