react-rainbow | 🌈 React Rainbow Components | User Interface library

probably too late for OP, but for future people it looks like this should answer the question.

add to _app.js

This was already fixed in the version, if you update the version of react-rainbow-components to v1.24.1, the fonts were moved to a CDN. Here are the release-notes https://github.com/nexxtway/react-rainbow/releases

@juliomalves pointed out that I was importing tailwindcss/tailwind.css while it wasn't needed.

This was because when setting the project up I read this in the docs

Import Tailwind directly in your JS If you aren't planning to write any custom CSS in your project, the fastest way to include Tailwind is to import it directly in pages/_app.js:

After relooking there was also this option

Include Tailwind in your CSS Open the ./styles/globals.css file that Next.js generates for you by default and use the @tailwind directive to include Tailwind's base, components, and utilities styles, replacing the original file contents:

So I removed the tailwindcss import and imported in my scss file the tailwind like this:

Customization is allowed by using the component as a wrapper of your entire application, the component property theme will accept an object where you can specify your palette of colors.

You can make a custom size using the className or style props, for example using style

According to the docs you have imported the button incorrectly -

change