CSS styling of a div within a tailwind grid no longer works since upgrading > 4.0

[beckwithj]

Hi there, I have been using tailwind with much success and pleasure over the past nine months or so. I recently updated my gems and have noticed that some of my inline CSS (to e.g. apply a bespoke font) no longer works within a Tailwind Grid element?? It used to work just fine! Any help gratefully received!
When I look at the firefox inspector, in live (old version) the format for the Div within the grid element is perfectly catered for, in the new version of tailwind the Div class is ignored, serving up the body tag formatting??

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[beckwithj]

Hey, thanks for the quick reply - I created a really small Rails environment from scratch and loaded nothing but the html of concern. It formatted up just perfectly! Which is uber annoying. I am due a holiday... I will look at this again after my holiday.
Thank you for your help today!
I will consider this closed for now. I'll be back ;¬) (if I cant solve it)

[beckwithj]

OK, so I didn't go on holiday yet - but I have this morning got to the bottom of the problem.

It turns out that it's something to do with either my knowledge of HTML or Rails partials, or it is the Firefox update that happened earlier in the week??

I was putting the inline style into the header section of my webpage and delivering the whole style entry via a partial. The result looks like what is shown below:

<style><!-- BEGIN app/views/application/_style.html.erb -->
div.side-head {margin-top: 5px; margin-bottom: 5px; font-size: 40px; font-weight: 600; font-family: lucida, monospace; color: #0284c7;}
.........
<!-- END app/views/application/_style.html.erb --></style>

However, very recently this stopped working, i.e. the first css rule for div.side-head does not get loaded up and interpreted by the browser??

If I stuff a dummy first rule into the style section via the same partial like below:

<style><!-- BEGIN app/views/application/_style.html.erb -->div.ignore {}
div.side-head {margin-top: 5px; margin-bottom: 5px; font-size: 40px; font-weight: 600; font-family: lucida, monospace; color: #0284c7;}
........
<!-- END app/views/application/_style.html.erb --></style>

my side-head formatting springs to life once more!

Am I going mad here, or is Firefox having a go at my sanity??

I hope this helps others also!

Johnb.

[beckwithj]

For completeness - putting the style tag within the partial rather than hugging the partial from the outer template also seemed to fix things....