adrian
adrian
TTCTheo's Typesafe Cult
Created by adrian on 3/25/2025 in #questions
How to theme with Tailwind v4?
I've followed the setup instructions for tailwind v4. I am able to style the UploadButton and UploadDropzone containers like this:
<UploadDropzone
className="..."
...
/>
<UploadDropzone
className="..."
...
/>
But I am unable to style the nested elements using the appearance prop like this:
appearance={{
button:
"ut-ready:bg-green-500 ut-uploading:cursor-not-allowed rounded-r-none bg-red-500 bg-none after:bg-orange-400",
container: "w-max flex-row rounded-md border-cyan-300 bg-slate-800",
allowedContent:
"flex h-8 flex-col items-center justify-center px-2 text-white",
}}
appearance={{
button:
"ut-ready:bg-green-500 ut-uploading:cursor-not-allowed rounded-r-none bg-red-500 bg-none after:bg-orange-400",
container: "w-max flex-row rounded-md border-cyan-300 bg-slate-800",
allowedContent:
"flex h-8 flex-col items-center justify-center px-2 text-white",
}}
React doesn't even pick up that tailwind is being used within the appearance prop. Am I missing something?
1 replies