Help Needed: Importing from Relume to React with Tailwind Issues | Relume Community

Help Needed: Importing from Relume to React with Tailwind Issues

Hi, I need help importing from relume to react. Because there were issues with tailwind v4 not having an tailwind.config.js file I've had to downgrade react, and tailwind both but I am still having issues with the styling. Any help would be greatly appreciated

45 comments

Matt J.
·
·
Cc Nour
Omer
·
·
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
Omer
·
·
The pictures show what im seeing as an export vs whats being rendered in React.... seems like a size styling issue. Nour
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.
Omer
·
·
Hi Nour, the thing is that tailwindv4 does not have a Tailwind config file
Omer
·
·
Heres the GitHub link: https://github.com/OmerK203/DannyAuto
Nour
·
·
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
Omer
·
·
Ah I see, is there any sort of documentation I can read for this? Or should I downgrade to v3?
Nour
·
·
I would recommend downgrading to V3 for now
Nour
·
·
So you can have Relume's correct variables configured
Omer
·
·
and that requires downgrading react to 18 as well right?
Nour
·
·
Downgrading to React 18 will be due to the UI elements, not because of the version of Tailwind.
Nour
·
·
But we're also upgrading all our UI elements to React 19 next release.
Omer
·
·
I see, so just for clarification: React v18.3.1 Tailwind v3.4.17 Until further notice?
Nour
·
·
Yeah exactly, this is recommended for now

Omer

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")]

}

Omer
·
·
is this how it is expected or is the import needed over the require statement?
Nour
·
·
this seems fine, just make sure you remove the @import tailwindcss from the css files.
Omer
·
·
the App.css and the index.css files?
Nour
·
·
ye and replace these with the v3 import structure
Omer
·
·
https://github.com/OmerK203/Testing Heres the project with the downgraded versions
Omer
·
·
My css files don't have that import statement
Nour
·
·
aha, seems you initialized a new vite + tailwind v3 project
Nour
·
·
thought you would change that manually, nvm
Omer
·
·
Im a bit lazy haha
Omer
·
·
if you clone and run that repo you'll see the styling issues I'm having
Nour
·
·
let me check
Omer
·
·
thanks
Nour
·
·
try now
Omer
·
·
Nice!! Its working!!1
Omer
·
·
What did you do? thanks so much
Nour
·
·
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;
2. You were overriding the Relume's classes in the CSS files, removed all classes there. 3. You had to read the files correctly from the Tailwind config's content:
content: [ "./node_modules/@relume_io/relume-ui/dist/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx,mdx}", ],
Omer
·
·
ahhh I see it now. I couldn't find any documentation regarding that or perhaps I didn't read what was there correctly
Omer
·
·
But either way thank you immensely for your help!!
Nour
·
·
No problem! Take a look at our docs here
Nour
·
·
If you have any other issues, feel free to mention them at the 🔒[private feed] channel
❤️1
Omer
·
·
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
Omer
·
·
Omer
·
·
I haven't made any changes to the styling or files, just messing around with the words
Nour
·
·
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.
Omer
·
·
Oh I see, perhaps my monitor is just big thats why it looks like that. Where is the container value ?
Omer
·
·
Found it, im fairly new to this just a bit curious why do we have a container like that?
Nour
·
·
Yeah, it depends on your screen pixels, the big your screen, the more it will add whitespace.
Omer
·
·
I see, so its like standard good practice to have container?
Nour
·
·
https://v3.tailwindcss.com/docs/container