Tailwindcss: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering

[JuanCaDev]

The problem:

I am working a small project with React and it generates this error:
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

Tailwind config:

margin: ['responsive', 'first']

---

You have to change the: first-child to: first-of-type

[adamwathan]

How is it "unsafe"?

[JuanCaDev]

How is it "unsafe"?

It is an error that generates react in development. I am not clear why it says it is unsafe.

[LucaRed]

It's "unsafe" because server-rendered components could have a <style> element as the first child. In that case, :first-child would be applied to the wrong element.

[adamwathan]

This doesn't sound like any sort of Tailwind issue to me, everything I am finding points to this being something in Emotion?

https://github.com/emotion-js/emotion/issues/1105

Either way, even if this is the case there's no reason to remove this from Tailwind I don't think, just like there's no reason to remove it from CSS.