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

[xlboy]

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 ↓

---

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

---

[xlboy]

*

[xlboy]

After testing, I found something.

This problem occurs whenever tw is called outside the component.

If it is called inside the component, this problem will not occur.

---

In the example I provided above, it belongs to the nature of external call.

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

[sastan]

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

[xlboy]

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

Thank you very much, It does solve this problem.

However, I found that after upgrading to 1.0.0-next.38, it no longer seems to be compatible with @twind/typescript-plugin. (When the version is still v0, it can be used normally)

I don't know if this is a configuration problem on my side. I may need your help. 😂

---

The example of this link is based on the one you provided above. It only adds an extra @twind/typescript-plugin. ↓

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

[xlboy]

I tested it and found that the problem seemed to occur when loading the configuration file.

Caused by @twind/preset-tailwind (v1.0.0-next.38) inside the configuration file.

[sastan]

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

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