Custom theme - only some styles will apply
phila088 opened this issue · comments
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
PHP Version
No response
PowerGrid
No response
Laravel
No response
Livewire
No response
Alpine JS
No response
Theme
Tailwind 3.x with tailwind/forms
Describe the bug.
Following the guide and using the custom themes (found from my previous issue :)) I have created a custom theme. I have registered it in the config, and have verified that it is being used for my tables. The issue is that only some of the styles that I apply will actually style the table. For instance:
->trBody('odd:bg-red-500')
This does not apply any styling to the table itself. Using the browsers inspector, I see that the style is there, however the color that is shown is not red. Almost every color that I try to apply is shown as just white.
The previous issue I found that is similar, it is suggested to clear all caches, which I did. I have rebuilt the CSS files with npm run dev r and npm run build. I have cleared my browsers cache. I cannot for the life of me understand why. I can set the ->tdBody() color, and the odd columns will color, but not the rows.
I have even applied the TailwindStriped::class and it will not stripe the rows at all. However, as stated, I can change the border radius with no issues. I was able to change the text size, but cannot change the text color. Essentially, it seems anything to do with color, it will not change the style.
To Reproduce...
No response
Extra information
No response
take a look in the dev tools of the browser, maybe the css attributes cant be set cause another class has an !important for this.
It has been corrected. It was a style overriding my styles. Thank you!
I'm struggling to customize my theme too.
I copied the Tailwind theme file into the App/PowerGridThemes folder and changed the configuration parameter in config/livewire-powergrid.php.
This is my custom theme file:
This is my config file:
I also registered the file in tailwind's config file:
Finally I run npm run build
Now, the first time I render a table with the custom theme changes are visible. In the screenshot below you will see the background changed to bg-slate-200
But if I make some changes after, these last changes won't be reflected in the table:
In this example I changed the table background class to bg-slate-800 run npm run build and this is the result
Only If I change the name of the class and references the powergrid configuration to that class changes are reflected again:
Ps: I'm using css variables to configure primary, secondary and so on colors, I don't know if it has something to do with that
Hello @elsoftpy . Can you open a new issue about this? Thank you
Hi, thanks for the quick response. I think I fixed it running php artisan optimize:clear
Congrats on a great! job by the way. This component is a life saver