search

danmindru / page-ui

📃 Landing page UI components for React & Next.js, built on top of TailwindCSS
https://pageui.dev
MIT License
1.1k stars 48 forks source link

Missin classes at globals.css? #3

Closed Tsabary closed 3 months ago

Tsabary commented 3 months ago

First of all - fantastic project!

I've initialized page-ui following the instructions for Next.js. I am usng the src directory and the App router.

I've noticed that the GlowBg component is always black/colorless? Is it missing the following variabels?

const stopColor = variant === "primary" ? "var(--primary-lighter-hex)" : "var(--secondary-lighter-hex)"; const stopColorTwo = variant === "primary" ? "var(--primary-dark-hex)" : "var(--secondary-dark-hex)";

  This is my repo (empty next project with page-ui setup)
  https://github.com/Tsabary/replyke-landing
danmindru commented 3 months ago

hey @Tsabary. Thanks so much for the kind words! Sorry for this, it was a tiny bug indeed.

Could you please add this to your globals.css file (under the :root selector)

:root {
  --primary-lighter-hex: theme('colors.primary.200');
  --secondary-lighter-hex: theme('colors.secondary.200');
  --primary-dark-hex: theme('colors.primary.800');
  --secondary-dark-hex: theme('colors.secondary.800');
}

let me know if you have any issues afterwards! Dan

Tsabary commented 3 months ago

@danmindru I've added the vars but is still doesn't seem to work? Not sure what could be it now, css variables is not my forte. The repo I've attached is up to date.

EDIT: Sorry! It works, just realized I've placed it inside 

@media (prefers-color-scheme: dark) {
  :root {...

instead of simply 

:root {...
danmindru commented 3 months ago

hey @Tsabary! oh, yeah, should be in the "simple" :root indeed!

So all working as expected now?

I've also updated docs over at https://pageui.shipixen.com/docs/installation/nextjs so you can also grab the entire CSS bit if it's still not working.

Cheers 🍻 Dan

Tsabary commented 3 months ago

@danmindru yeah all working as expected! One thing to mention though, when I've went through the installation following the docs, the components folder the data and the third one (I think there were 3) installed outside of security. I had to manually move them inside.