Closed rodrigojmr closed 2 years ago
Same thing here,
import withTwindDocuemnt from '@twind/next/shim/document'
import Document, { Head, Html, Main, NextScript } from 'next/document'
import { setup } from 'twind'
import twindConfig from 'twind.config'
setup({
theme: twindConfig.theme,
darkMode: twindConfig.darkMode,
mode: 'silent',
preflight: true,
})
class RootDocument extends Document {
static async getInitialProps(ctx: any) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html className="dark">
<Head />
<Main />
<NextScript />
</Html>
)
}
}
export default withTwindDocuemnt(twindConfig, RootDocument)
Hey. Sorry for the late reply.
@rodrigojmr I need to take a closer at that. is it possible for you to create a codesandbox for reproduction?
@Omar-Aziz Seams similar. But the color/opacity
stuff will not work with twind v0.16. I hope to release a v0.17 with support for these and most changes from tailwind v3.
thanks for the clarification @sastan. Does JIT work in twind and if yes then does it need any config?
thanks for the clarification @sastan. Does JIT work in twind and if yes then does it need any config?
twind only generates the styles for the classes that are used. We didn't call it JIT. As a side note I do not think of tailwind JIT as a just-in-time generator. It generates all classes it finds in the code base during a build step. twind generates only those classes that are used.
Just want to inform I'm still trying to replicate in a smaller version of the client's site. I started with copying and removing code to make a slimmer, shareable version of the site, then Omar's error tipped me off to an error in my config as well.
After fixing that, it seemed to work fine on both the client site and the slimmed down version in local dev
and build + start
, but the site still broke when deploying on DigitalOcean. Still trying to see if I can deploy to Vercel, and if the same happens. Now it's hard to trace back the cause, and why it only happens in prod.
Well this is embarrassing!
It all comes down to calling tw
outside className and outside components, and not apply
, in attempt to reuse classes. Due to #12 and other similar logs to this, I had turned twind mode to silent, but only with NextJS 12 do these logs seem to happen regardless of the mode, and also cause the app to malfunction. Had no such problems in 11, so I was blissfully, ignorantly unaware of the misuse of tw
.
All else I can wish for is for would be better errors messages or warnings, it's be fantastic. I understand if it's not possible.
Ah I see. Closing this for now. Feel free to re-open if you have any more trouble.
Hello,
I'm aware the package was updated to support Nextjs 12, but when I upgrade Next, I get these errors.
twind.config.ts
(some part of the code deleted for legibility) and then used ontheme.extend
.The only difference between this happening or not is being on Next 11.1.2 or 120.3. It causes styles to get messed up, adding styles to the wrong places, and some not being used at all. Interestingly, it seems similar to this issue but I'm unsure. https://github.com/tw-in-js/twind/issues/47
If I navigate away from a page then return, then the styles are correct.
https://user-images.githubusercontent.com/11283573/141371963-07103b16-e269-4a36-b1a2-5dd12709d648.mp4