Is recordClasses working in V3?
Am I doing it wrong? I intentionally used a class that's used elsewhere to avoid a tailwind config problem. In debugging I changed the arrow function to a function so I could include a dd call and the data is being read in on the record, just the class doesn't seem to be applied in the table.
19 Replies
I also tried both -1 and '-1' quoted for the match. Neither worked. I also restarted vite.
Even adding a new color for default didn't work.
What does dd($record->priority) give you?
On the record with a -1 in it for a completed task, it does show a -1.
I'll grab a screensheet in case you see something I don't LOL
Also, what is your exact Filament version. ‘artisan about’
Also check the actual html to see if the class exists in the html.
Some answers:
v 3.0.74
I do not see the classes I expect in the HTML in the browser
Attached is the record data
So priority IS set to -1 and yeah I just don't see the classes being applied
Thought maybe I was doing this wrong. I appreciate the help.
Hmm. Trying to following the code of the table (the most complicated view in the entire code base. 😅) it should be applying it to the tr.
Can you just return something stupid like ‘batman’ and do a find on the source in devtools to see if it’s found at all.
Might also want to try clearing the cache.
OK you're on to it.... now I see the class coming through (both batman and line-through, which is what I really want) but it seems the class binding is not working?
I had trouble with x-bind for dynamic classes elsewhere but have NO idea how to resolve that. Ouch.
Something to consider too is the css cascade. If the class is applied at the row level and the column also has a text color the column will over ride the row class since it’s more specific.
So, the solution would be to add a normal class name then target it inside a custom theme where you have more control.
Something like
Oh put that in a custom Filament theme?
Yea. Due to how tailwind works if you need to have that kind of functionality where you need control of the cascade then you have to have a theme. TW builds a final stylesheet. So you have to use the tool to include customization at that level.
With that said. If you only needed to adjust the text of a particular column then you could do it at the column level instead of the row level, depending on what you need without a custom theme, with extraAttributes() on the specific column.
I'm gonna try theming, see if it resolves another tailwind issue I never could get around. If it solves both these issues I'll be thrilled. I think the docs might want to emphasize this (or maybe I missed it). Filament clearly allows dynamic classes but TW is gonna fight you all the way. I went deep and couldn't resolve it. So fingers crossed on theming, thanks!
That’s fair, but it also assumes an understanding of how tailwind actually works. So, the docs shouldn’t have to cover that as it’s assumed that using tailwind in a stack that uses it implies a certain knowledge of it to start with. 😀
That’s not a slight on you. So please don’t take it that way.
Not at all. I was willing to go down the TW rabbit hole and did go deep and I'm super frustrated that I never nailed it down but that's not Filament's fault. But I have to say, it was easy to go from "Oh cool Filament will let me dynamically change classes!" to "it's been 6 hours and I can't make it work" LOL. So I'll be grateful if theming does the job.
If any TW experts are reading this I sure would love to know why I couldn't make it work. I did update the TW config with the filament path, cleared caches, restarted vite, etc. But yeah those dynamic classes made possible by Alpine and probably purged by TW are not to be taken lightly, so theming is the theme for the weekend.
That’s really more of how the cascade works and not necessarily a tailwind thing. Tailwind has its caveats, but even with tailwind the rules of css still apply.
A div with text-grey-500 will still not apply the text color to a child of that div that has text-blue-500.
Interesting how this turned out. I started down the path of building a theme. And before I finished building it, my existing code started working. What I mean by that is, I finished all the install instructions but hadn’t yet started adding any theme styling.
So I don’t know if that theme building did something with vite or what but now it’s working. 🤷🏻♂️