Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Style problems when visiting the page for the first time after next.js-twind build

See original GitHub issue

After next.js-twind is build, when you visit the page for the first time.

the style cannot be loaded immediately, and there will be a short process of no style.

this problem will not appear when it is developed locally, but it will appear after build.

This is an example ↓

https://user-images.githubusercontent.com/63690944/167306258-884c8bc0-0e86-4a1a-a7e7-1feffc818ab0.mov

If you look at it carefully, you will see that at the beginning, This is Twind! The text is on the left

But that was only for a moment, and then style came along

This is the related code image ↓

126941652029239_ pic

This is a simple code example, you may need to download it locally for testing. ↓

https://codesandbox.io/s/nextjs-twind-prod-transition-error-t9r2i8

# step 1
yarn
# step 2
yarn build
# step 3
yarn start

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

1reaction

sastancommented, May 9, 2022

I can reproduce the issue. It seems the the HTML response those not contain any twind style (the tag is empty). The cause may very likely be the the tw calls outside of render. But I do not know why ATM. Could you try v1 (it is compatible with tailwind v3)? There this issue is certainly fixed.

https://codesandbox.io/s/nextjs-twind-prod-transition-error-forked-y2chi3?file=/src/pages/index.tsx

0reactions

sastancommented, Oct 4, 2022

The vscode and typescript plugins are not yet compatible with twind@next.

Closing for now. Please re-open if you need to.