Theo's Typesafe Cult•2y ago

onHover tailwindCSS

although this generated the correct class name, but the onHover property is still empty? Is there a way to do this? other than hardcoding it?

6 Replies

oa•2y ago

this generates hover:[color], you might want something like hover:bg-[color]

adigunoOP•2y ago

mb, should've included this:

const hightLightedButtonColors = [
  "bg-red-700",
  "bg-green-700",
  "bg-purple-700",
  "bg-blue-700",
  "bg-cyan-700",
];

const hightLightedButtonColors = [
  "bg-red-700",
  "bg-green-700",
  "bg-purple-700",
  "bg-blue-700",
  "bg-cyan-700",
];

niels•2y ago

i dont think that gets compiled correctly

adigunoOP•2y ago

yeah..

Sybatron•2y ago

i found your problem you still generate class like this and tailwind doesn't work like that tailwind needs to know the whole class beforehand So you need to have in your object the css class as text so tailwindcss can include Solution is

const hightLightedButtonColors = [
  "hover:bg-red-700",
  "hover:bg-green-700",
  "hover:bg-purple-700",
  "hover:bg-blue-700",
  "hover:bg-cyan-700",
];

const hightLightedButtonColors = [
  "hover:bg-red-700",
  "hover:bg-green-700",
  "hover:bg-purple-700",
  "hover:bg-blue-700",
  "hover:bg-cyan-700",
];

adigunoOP•2y ago

oh, whole class Okay, that was the issue thank you so much

Gaming

Programming

onHover tailwindCSS