I had been trying to figure out why my PHP code that creates a dynamic HTML table wasn’t styling the table correctly. What was even more confusing was that if I viewed the source in the browser and then copied the table definition and pasted it into tailwind Play it was working perfectly.
The reason is that tailwind is scanning the code before any php variables are resolved. In my case the PHP variables contained the required tailwind colour classes. Even though the resultant html code created by the php code was correct, because tailwind hadn’t seen the resultant code, it didn’t load the required CSS.
In my PHP code I am processing a collection which contains specifications (via the properties theme color selector) of the tailwind colour required by the table.
To get round this problem, I use an Elements @each command to loop down the Collection entries and create a hidden DIV that contains the classes for the required colours. Because, Elements processes the @commands on previewing / publishing, the tailwind classes are setup before tailwind scans the code and will therefore be resolved by tailwind.
This is an article that explains the issue: Just-in-Time friendly style variants in Tailwind CSS UI components
Anyway, I thought I would share in case anyone else hits the issue and needs to know how to resolve it.