PHP Code Dynamic Tailwind Classes Heads-Up!

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. :slight_smile:

1 Like

You’re 100% correct! Elements builds Tailwind CSS on the fly, so we only output the classes in use on the page.

I should bookmark your post or add it to the Element Docs as this is bound to come up again in the future :blush:

Nice work!