twin.macro: Global styles get added in the wrong order when using styled-components

I am wondering if it’s actually an issue with styled-components. I am having the exact same issue but with emotion/styled.

I’m actually experiencing this with a custom GlobalStyles component and @tailwindcss/forms. Doesn’t seem to propagate correctly

There is an existing issue with styled-components with the ordering of global styles. This issue only became visible in twin now because of the recent move to supply all base styles via the GlobalStyles import (rather than an external base.min.css file / unsupported addBase in plugins).

The workaround is to export <GlobalStyles /> from an external component:

// GlobalStyles.js
import React from 'react'
import { GlobalStyles } from 'twin.macro'

export default function GlobalStylesComponent() {
  return <GlobalStyles />
}

// index.js
import React from 'react'
import { render } from 'react-dom'
import App from './App'

import GlobalStyles from './GlobalStyles'

render(
  <>
    <GlobalStyles />
    <App />
  </>,
  document.getElementById('root'),
)

As I’m unsure how long this will take to be resolved, I’ll update the examples to show the new way to add GlobalStyles.

@ethanve @anthify I’ve taken a look into the issue with styled-components + twin and found that styled-components is not preserving the global styles ordering. There are a few issues on the topic already (Issue / Issue / Issue) and I’ve added to one of them at the start of 2021 and haven’t noticed action on any of them.

The unfortunate reality is that the styled-components project isn’t being maintained anymore. There has been a lack of updates/fixes by the single remaining maintainer. I’m worried about the future of styled-components and lack of updates/fixes coming through. There are too many critical issues and nothing is being discussed by maintainers or acted upon. It’s a shame given how many developers are still enjoying the project but I cannot recommend anyone to start a new project with styled-components until we start seeing bugfixes again.

Edit: Styled components is being worked on again. But they are focussing on a complete rewrite in typescript for v6 so that explains the lack of fixes for existing issues.

I’m having the same issue where @tailwind/forms is being overridden by the global styles. The workaround doesn’t work for me, and I’m using it with Next.js and styled-components.

I’m running into this issue using the Vite react styled-components typescript template. It looked similar to this issue – the reset was causing my buttons not to have a background color.

Sorry, I don’t have an example, but I have a fix for anyone else who is running into this issue.

1. Remove all references to GlobalStyles from twin.macro.
2. Create an index.css which has the following contents:

   @tailwind base;
   

3. Import index.css in your main.tsx file.

This fixed the issue for me. I’m looking forward to a more proper fix in the future!

I have same issue when created app with Vite and the fix doesn’t works for me

Our team had this issue today using @emotion/react and storybook. The styles were only ordered incorrectly while viewing components in storybook, the issue was not affecting the actual application.

we fixed by moving <GlobalStyles /> to be called after <Story /> like shown below:

@ben-rogerson thank you for the detailed response! What would you recommend using to start a new project then?

@ethanve If you could post a repo up, I could take a look into it further

Here you go – thank you! I’m sure it’s something on my end.

https://github.com/ethanve/twin-macro-cra-styled-form-bug

You’ve found a different issue there @LouisJackson - I’ve split that off to another issue.

@ben-rogerson thank you for the detailed response! What would you recommend using to start a new project then?

Emotion, goober or stitches. All of these libraries have the ability to maintain the ordering of global styles.

I was having the same problem on global styles ordering with a new CRA + styled-components and I “solved” it by switching to emotion. Bummer.

Using your CSSReset fix from above seems to have fixed this for NextJS & Emotion.

https://codesandbox.io/s/twinmacro-example-with-tailwindforms-global-component-workaround-ke6ud

Hey @ben-rogerson.

Yes, that solves it for me as well. Is this considered a permanent or a temporary solution?

Oh, thanks for the great plugin/macro 👍