Page background does not transition
Closed this issue · 6 comments
Hi, I'm using Next.js with the same configuration in the Next.js example in the README, and the background of the page does not seem to transition. I couldn't get it to transition using Tailwind without Nightwind, either, but I see https://nightwindcss.com/ has a transition. Is that a custom thing?
nightwindcss.com has no custom setup, as nightwind should be able to handle it.
I would need some more details to understand the issue. Is it just the background transition not working? Is the actual inversion of colors working as expected? Feel free to also share some code snippets or images
Also please note that transitions won't work with gradients, and that you shouldn't apply color classes to the html element but only to the body element or lower
@jjranalli All other things transition perfectly, it's just the page background color that changes instantly. I haven't added any styles related to the background either. It might be worth noting that the page background for the demo site at https://night-tailwindcss.vercel.app/ also changes instantly as well. I'll try to upload a repo that can repro this sometime tomorrow.
Hey @jjranalli, I've uploaded a repo to reproduce this issue at https://github.com/kotx/tsuki. The files of interest are probably just https://github.com/kotx/tsuki/blob/master/src/pages/_app.tsx, https://github.com/kotx/tsuki/blob/master/tailwind.config.js, https://github.com/kotx/tsuki/blob/master/postcss.config.js, and https://github.com/kotx/tsuki/blob/master/src/styles/global.scss.
Thanks for providing the repo. Had a quick look, you're probably just missing @apply bg-white in the body styling in styles/global.css (like the comment, but you don't need to add dark:bg-black)
If you don't specify a starting color, nightwind has nothing to switch from/to
Let me know if that solves your issue, otherwise I'll give it a proper look tomorrow!
@jjranalli That works, thanks so much for the help. I don't know why I commented that line out haha.
Would this be worth adding in the README?
Glad that solved it! I don't think this should be added in the readme as it is an expected behaviour. However, since this has happened already in the past, I added a label in the issue so that it can be more easily found.
In the meantime I'll go ahead and close this