Weird Tailwind CSS behaviour in Next.js compared to React?
Unanswered
Red-billed Tropicbird posted this in #help-forum
Red-billed TropicbirdOP
I am following a Tailwind tutorial, but I seem to get slightly different results with the same code. His hover effect seem to make the background div slighty darker and opaque, while in mine it also changes the text+image color and opacity.
Anyone know why? (he is using React img, and I am using Next.js Image, but it should be the same otherwise?)
Anyone know why? (he is using React img, and I am using Next.js Image, but it should be the same otherwise?)
19 Replies
Are you hovering when it does that?
@!isColonel Are you hovering when it does that?
Red-billed TropicbirdOP
yep
Like putting my mouse over it
@Red-billed Tropicbird yep
Well when you hover the opacity is 30% meaning you can see thru it
The entire div
@!isColonel Well when you hover the opacity is 30% meaning you can see thru it
Red-billed TropicbirdOP
Yes, but the tutorial I was following is writing the exact same thing. His image and the text does not change in color
Mine does.
Mine does.
With the same tailwind css styles and html elements,
Except he uses react and I use next js
If you look at the two photos you can see the difference despite same code
Black Caiman
ah
I see the problem my friend
his code:
your code:
hover:bg-opacity-30your code:
hover:opacity-30really you can just combine this into
hover:bg-gray-800/30and not have two separate
hover: classes
@Black Caiman really you can just combine this into
hover:bg-gray-800/30
Red-billed TropicbirdOP
Thanks a lot
I did make a mistake there
So I did not write the exact same thing ðŸ˜
Black Caiman
hahahaha the number of times I've been in the same situation ðŸ˜