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?

TTC

Theo's Typesafe Cult•12mo ago

adrian

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?

How to theme with Tailwind v4?

Similar Threads

How to theme with Tailwind v4?

Similar Threads

Similar Threads

Similar Threads