@twind/next doesn't load custom twind.config.js

[danestves]

Hi! Thank you for the library, i don't know if i'm missing something or what but if i add a custom config for twind the styles doesn't work anymore https://codesandbox.io/s/twind-nextjs-forked-l5r91?file=/twind.config.js

[sastan]

TL;DR replace @twind/next/app with @twind/next/shim/app and @twind/next/document with @twind/next/shim/document

You are using the className attribute for styling and therefore need the shim modules: https://github.com/tw-in-js/use-twind-with/tree/main/examples/next-with-shim

See the this (forked) sandbox

In twind you can either do:

import { tw } from 'twind'

<main className={tw`h-screen bg-purple-400 flex items-center justify-center`}>
  <h1 className={tw`font-bold text(center 5xl white sm:gray-800 md:pink-700)`}>
    This is Twind!
  </h1>
</main>

Or use the shim:

<main className="h-screen bg-purple-400 flex items-center justify-center">
  <h1 className="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
</main>

[danestves]

OMG, i think im lost today! Thank you for the clarification, and if i want to use it mixed i can't right? On with shim or without?

[sastan]

Nope. You can use both! No problem.

[danestves]

Thank you!!!