Nextjs client side tailwindcss rgb color issue
Answered
Snowshoe posted this in #help-forum
SnowshoeOP
const bgColor = ["bg-white", "bg-indigo-400", "bg-blue-400", "bg-green-400", "bg-yellow-400", "bg-orange-400", "bg-red-400"] <div className="space-y-2"> <p className="tracking-wider">Background<span className="pl-1">:</span></p> <div className="grid grid-cols-4 lg:grid-cols-6 gap-2"> {bgColor.map((e, index) => <button type="button" onClick={() => dispatch(designStructure({id: "", type: "background-light", value: e}))} key={index} className={h-5 w-10 cursor-pointer ${e} ${e === data.linkchisel.designStructure.background.lightmode ? "outline-4 outline-double outline-black dark:outline-slate-200" : ""}}></button>)} <label htmlFor="background-color-lm" className={h-5 w-10 cursor-pointer bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ${data.linkchisel.designStructure.background.lightmode.includes("bg-") ? "" : "outline-4 outline-double outline-black dark:outline-slate-200"}}> <input id="background-color-lm" onChange={(e) => dispatch(designStructure({id: "", type: "background-light", value: bg-[${e.target.value}]}))} className={h-5 w-10 cursor-pointer hidden appearance-none bg-transparent border-none} type="color" /> </label> </div> </div>
Nextjs client side tailwindcss colors bg those in array bgColor work onChange but when I use rgb from input color not work it's apply to div class but not showing in client side when I try to make class rgb color manualy and refresh page it's work but onChange not work
Answered by B33fb0n3
then you can set the chosen variables to the safelist. You can read more about it here: https://tailwindcss.com/docs/content-configuration#safelisting-classes
4 Replies
That’s because tailwind generates all the css classes for the initial code. When you update it, there is no code generated and because of that no styles. You can either set it in the tailwind „safelist“ or apply your background color as inline style
@B33fb0n3 That’s because tailwind generates all the css classes for the initial code. When you update it, there is no code generated and because of that no styles. You can either set it in the tailwind „safelist“ or apply your background color as inline style
SnowshoeOP
In my case is need to use all colors rgb from input color so how I can fix that I try to use style variable for color that came from input color It's work fine but I have in other case dark mode so is not good solution for me without using tailwind
then you can set the chosen variables to the safelist. You can read more about it here: https://tailwindcss.com/docs/content-configuration#safelisting-classes
Answer
SnowshoeOP
ok thanks