Closed danestves closed 3 years ago
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>
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?
Nope. You can use both! No problem.
Thank you!!!
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