Use Tailwind css with prefix

[madushanj]

I am using the tailwind CSS with a prefix (for a unavoidable reasons) So I don't mind adding prefix to all the tailwind classes in the published resources files manually. Problem is it is not enough. There are still so many tailwind CSS classes in the vendor files (in livewire-powergrid/../..theme) which didn't get publish to the resources folder. So is there any suggestions to make this happened?

[luanfreitasdev]

Hello, even with this feature in the documentation you could not?

https://livewire-powergrid.com/#/get-started/configure?id=_42-jit-production

Could you give an example?

[madushanj]

It's not about the purge, it's about the prefix. When I uses a prefix in the tailwind config file like prefix: 'tw-' the generated css file from the tailwind has that prefix. file bg-red-300 will become tw-bg-red-300 and for every other classes as well. But tailwind css classes in the PowerGrid components don't have that prefix at the beginning. So those css classes wont get recognized. So normally what I do is go through every component file and add that prefix manually. So unless every recourses files get published, I can't fix those. There are bunch of tailwind css classes in the vendor theme file, which didn't get published to the recourses folder such as table styling.

[luanfreitasdev]

Do you believe that css classes are only in Themes or have resources as well?

If it's in resources, we'd have to study how to implement it, but if it's only in Themes, you can copy the Tailwind class and change it

[luanfreitasdev]

Is it possible to map all the places that can be customized inside the views? If so, we can put it in the theme class

[madushanj]

Adding it as a customizable option is not something easy to do. But if you can publish the Tailwind.php file from the vendor folder to resources folder alongside the other component files (or at least the styling inside of it) will do the job. That's now I am trying to do, get that file out from the vendor folder.

[luanfreitasdev]

This is not yet documented, but to publish the file in the component is very simple:

• Copy the theme class to your Http/Livewire/MyTheme.php folder

• Inside the powergrid component, name it like this:

public function template(): ?string
{
     return \App\Http\Livewire\MyTheme::class,
}

or inside the config file - livewire-powergrid.php

     'theme' => \App\Http\Livewire\MyTheme::class,

If anyone digs deeper into this content, feel free to contribute to the doc!

https://github.com/Power-Components/powergrid-doc

[magic-thomas]

Thanks for great package.

I did what you said.

Actually I copied PowerComponents\LivewirePowerGrid\Themes directory to App\Themes directory.

And I changed all file's Namespace to app/Themes , and modified livewire-powergrid.php.

But I see this error.

App\Themes\Tailwind::table(): Return value must be of type App\Themes\Components\Table, PowerComponents\LivewirePowerGrid\Themes\Components\Table returned

I have no idea how to fix this.

Can you give me more tip ?

Really I appreciate for this package.

[kolydart]

Did you find a solution on this?

[dansysanalyst]

Hi everybody,

I have merged a PR with a custom theme in PowerGrid Demo repository and you can also find examples here: PowerGrid Demo Misc

I hope it can be helpful!