[Bug]: Uploadthing styles break My App's styles

[HyperGrapher]

What happened?

After updating npm dep from 5.2.1 to 5.3.3 my app's design has broken which uses Tailwind.

First thing i did was to comment out styles in the _app.tsx, in particular uploadthing styles were the culprit.

import "@uploadthing/react/styles.css";

It's not the whole app altogether but parts of it was broken like footer and some individual components

What did you expect to happen?

uploadthing styles shouldn't interfere with my app's styles.

Version

5.3.3

Reproduction Steps

Use the provided sandbox link

Link to reproduction

https://codesandbox.io/s/q5qms5

Relevant log output

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[markflorkowski]

cc @Mr0Bread @juliusmarminge

[juliusmarminge]

Your stylesheet should come after uploadthings: https://codesandbox.io/s/tailwind-css-and-react-forked-qk62jv?file=/App.js

But the withUt wrapper is the recommended approach. That will make sure your app contains the minimum amount of classes necessary, e.g. if you don't use the UploadDropzone, those styles will be included if you import the stylesheet but not if you use the withUt wrapper: https://codesandbox.io/s/tailwind-css-and-react-forked-f6t4jf?file=/src/App.js

[Mr0Bread]

I see what's the issue is here. Basically, our stylesheet and stylesheet of the author contains same class text-gray-500 but due to customisations inside of tailwind.config, they apply different colour. Because of that, if you load default stylesheet for Uploadthing components, it may be overwritten

To avoid conflicts, please wrap your tailwind config into withUt just like it was proposed before