Importing from Relume to React: Navigating Tailwind Compatibility Challenges

Cc @Nour

Hi Matt, thanks for linking me with Nour, hoping to get help soon. In the meantime, is there any sort of tutorial for importing from Relume to React? I've followed the official documentation as close as I could really but no luck

The pictures show what im seeing as an export vs whats being rendered in React.... seems like a size styling issue. @Nour

Hey @Omer, seems like you haven't set up the Tailwind config correctly. If you can share your project, through github or as a zip, I can help.

Hi Nour, the thing is that tailwindv4 does not have a Tailwind config file

Heres the GitHub link:

https://github.com/OmerK203/DannyAuto

Yeah, we don't support Tailwind V4 yet (we're in the coming few weeks). You'll have to do some manual work to migrate from V3 to V4

Ah I see, is there any sort of documentation I can read for this? Or should I downgrade to v3?

I would recommend downgrading to V3 for now

So you can have Relume's correct variables configured

and that requires downgrading react to 18 as well right?

Downgrading to React 18 will be due to the UI elements, not because of the version of Tailwind.

But we're also upgrading all our UI elements to React 19 next release.

I see, so just for clarification:

React v18.3.1
Tailwind v3.4.17

Until further notice?

Yeah exactly, this is recommended for now

within my tailwind config:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./node_modules/@relume_io/relume-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [require("@relume_io/relume-tailwind")]

}

is this how it is expected or is the import needed over the require statement?

this seems fine, just make sure you remove the @import tailwindcss from the css files.

the App.css and the index.css files?

ye and replace these with the v3 import structure

https://github.com/OmerK203/Testing

Heres the project with the downgraded versions

My css files don't have that import statement

aha, seems you initialized a new vite + tailwind v3 project

thought you would change that manually, nvm

Im a bit lazy haha

if you clone and run that repo you'll see the styling issues I'm having

let me check

thanks

try now

Nice!! Its working!!1

What did you do? thanks so much

You're welcome.
So, the issue was:

1. You didn't have Tailwind imports in the CSS files, these:

@tailwind base;
@tailwind components;
@tailwind utilities;

  content: [
    "./node_modules/@relume_io/relume-ui/dist/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],

ahhh I see it now. I couldn't find any documentation regarding that or perhaps I didn't read what was there correctly

But either way thank you immensely for your help!!

No problem! Take a look at our docs here

If you have any other issues, feel free to mention them at the #C06SZT6UEBA channel

Hey Nour, as Im working on it I see that the page isn't taking up the whole screen as shown in the preview. Seems like only the header is going from edge to edge

I haven't made any changes to the styling or files, just messing around with the words

Yeah, that’s normal and this is how it should be. A container value is applied. If you wish not to have that you can remove the container from all components.

Oh I see, perhaps my monitor is just big thats why it looks like that. Where is the container value ?

Found it, im fairly new to this just a bit curious why do we have a container like that?

Yeah, it depends on your screen pixels, the big your screen, the more it will add whitespace.

I see, so its like standard good practice to have container?

https://v3.tailwindcss.com/docs/container