Does purge also work when using twin? #568
Replies: 1 comment 13 replies
-
|
Hey there, Purge is not required with twin - no need for setup. |
Beta Was this translation helpful? Give feedback.
-
The babel macro doesn't have the capability of sniffing the use of styles within your code. It's more the responsibility of the css-in-js package to determine what styles are added to the |
Beta Was this translation helpful? Give feedback.
-
|
It seems like I can't put I'm getting this error when building: > Build error occurred
Error: `pages/500` can not have getInitialProps/getServerSideProps, https://nextjs.org/docs/messages/404-get-initial-propsHere's a branch with the changes. Not sure if I'm doing something wrong https://github.com/jahirfiquitiva/jahir.dev/tree/fixes Question: |
Beta Was this translation helpful? Give feedback.
-
|
Looks like something is pushing the Here's the content for your _document file: yarn add @emotion/css @emotion/server -D// _document.tsx
import { extractCritical } from '@emotion/server';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import React from 'react';
import { DefaultMetaTags } from '~/components/blocks';
const fonts = [
'inter/Inter-Regular.woff2',
'inter/Inter-Medium.woff2',
'manrope/Manrope-Medium.woff2',
'manrope/Manrope-SemiBold.woff2',
'manrope/Manrope-Bold.woff2',
];
export default class MyDocument extends Document {
static async getInitialProps(ctx: any) {
const initialProps = await Document.getInitialProps(ctx);
const critical = extractCritical(initialProps.html);
initialProps.html = critical.html;
initialProps.styles = (
<React.Fragment>
{initialProps.styles}
<style
data-emotion-css={critical.ids.join(' ')}
dangerouslySetInnerHTML={{ __html: critical.css }}
/>
</React.Fragment>
);
return initialProps;
}
render() {
return (
<Html lang={'en'}>
<Head>
<DefaultMetaTags />
{fonts.map((it, i) => {
return (
<link
rel={'preload'}
href={`/static/fonts/${it}`}
as={'font'}
type={'font/woff2'}
crossOrigin={'anonymous'}
key={`font-${i}`}
/>
);
})}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
} |
Beta Was this translation helpful? Give feedback.
-
It avoids a flash of unstyled content, you may not see it with the fade in I see you've added. |
Beta Was this translation helpful? Give feedback.
-
|
@ben-rogerson the changes made it go up to 72 ... any other things that I can do to improve the performance? 😕 |
Beta Was this translation helpful? Give feedback.
-
Hello, I wanted to ask if the tailwind purge feature to remove unused styles still works if I use twin, and if so, do I have to setup something? or will it work right away?
thanks
Beta Was this translation helpful? Give feedback.
All reactions