According to my research and twin.examples repo for Next.js, twin.macro recommends adding their preflight component, which they name <GlobalStyles />. They often alias it to <BaseStyles /> because, for my understanding, the component exports a set of preflight styles that resets browser behavior to sane defaults. This recommended component, allegedly contains the same styling as tailwind/base.css (aka @tailwind base; in CSS files), plus some keyframes to help with animations provided by twin.
However, when I use this component instead of the preflights provided by my current TailwindCSS 3.2 all my classNames are ignored and styled-components break. Note that I am using twin.macro v3 latest release candidate, because previous versions are not compatible with TailwindCSS 3.
Can anybody explain this, point me to a place where I can learn a workaround, or knows a workaround?
I have an open discussion on the official repo with more context (and screenshots) but no answer just yet. You can check it out here: https://github.com/ben-rogerson/twin.macro/discussions/719
So, I managed to find an answer by trial and error and by waiting out a response on the link above. The solution to the problem was to use the tw and css component properties instead of className (as implicitly described in twin.macro docs).
Also, if you are using other CSS imports like @tailwind/layers and @tailwind/utilities, etc..., you do not need to import these anywhere as long as you are importing twin.macro#GlobalStyles component, as exemplified in the docs.
Hope this helps someone! :)