mortgage repayment calc - next js, tailwind

Hi!

I believe you're looking for the group class.

You can use it when you want to change a child element's style based on the parent's state - just like in your case.

Your code would look like this (I put the classes in the beginning):

<div className={`group flex w-full border mb-1 focus:border-none focus-within:ring focus-within:ring-lime hover:border-black rounded-lg ${error.mortgageAmount ? "border-red" : "border-slate-500"} `}>
  <div className={`group-focus-within:bg-lime w-12 text-center text-lg p-2 rounded-tl-lg rounded-bl-lg ${error.mortgageAmount ? "bg-red text-white" : "bg-slate-100 text-slate-700"}`}>
    £
  </div>
  <input
    value={mortgageAmount}
    onChange={(e) => setMortgageAmount(e.target.value)}
    className="w-full px-3 rounded-br-lg focus:outline-none focus:border-lime rounded-tr-lg h-11"
  />
</div>

This is the underlying CSS selector:

.group:focus-within .group-focus-within\:bg-lime