I'm trying to use emotion/react and TailwindCss in my projects. But I got stuck.
Of course, If I add /** @jsxImportSource @emotion/react */ to every component, I'm able to use both libraries, but I want to find a way to not add the pragma for all of my components.
Here is what I tried:
- Changing my tsconfig.
I add
"jsx": "preserve", "jsxImportSource": "@emotion/react",to my tsconfig. - I set my babelrc like this:
{
"presets": ["next/babel"],
"plugins": ["@emotion/babel-plugin"]
}
- Changing the __document.tsx
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import { extractCritical } from "@emotion/server";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
const styles = extractCritical(initialProps.html);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style
data-emotion-css={styles.ids.join(" ")}
dangerouslySetInnerHTML={{ __html: styles.css }}
/>
</>
),
};
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
The emotion css still not applied even though I set it like this.
Does anyone know how to fix this issue?
Thank you.