Custom breakpoints not working

[josbroers]

I'm trying to change the default breakpoints, but it's not working. I followed the docs and used ThemeProvider, but Rebass is still using the default breakpoints. Instead of using emotion-theming, I use @emotion/react because of this error:

Error: `emotion-theming` has been removed and all its exports were moved to `@emotion/react` package

I use these versions:

"@emotion/react": "^11.1.5",
"rebass": "^4.0.7"

My code:

_app.js

import { ThemeProvider } from "@emotion/react";

const theme = {
  breakpoints: ["768px", "1024px"]
};

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

index.js

import { Box, Flex } from "rebass";

export default function IndexPage() {
  return (
    <Flex flexDirection={["column", "column", "row"]}>
      <Box width={[1, 1, 1 / 2]} marginBottom={[10, 25, 0]}>
        Hello
      </Box>
      <Box width={[1, 1, 1 / 2]}>World</Box>
    </Flex>
  );
}

CodeSandbox

I've also created a sandbox for reproduction: https://codesandbox.io/s/rebass-themeprovider-wcc6b

Expectations

The breakpoints should be 768px and 1024px instead of 40em and 52em.

[josbroers]

Rebass isn't up-to-date. That's why it isn't working as it should. I'm no longer using Rebass, because of the lack of upgrades... Instead now using TailwindCSS.