我使用tailwind创建了一个自定义的复选框（作为react项目中的一个组件）。现在我想在选中复选框之前和之后更改复选框的背景颜色。这是我想要的：

这是当前的外观：

我想知道如何在tailwind.css中更改此颜色，这是复选框代码：

<div className="check-box">
    <input type="checkbox"
         value={ value }
         id={ id }
         name={ name }
         onBlur={ onBlur }
         className="absolute h-6 w-6 cursor-pointer" onChange={ onChange } />
                    
     <div className="bg-xaplink_gray_1 border-2 border-   xaplink_gray_3 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-xaplink_black_2">
        <svg className="fill-current hidden w-4 h-4 text-xaplink_white pointer-events-none" version="1.1" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fillRule="evenodd">
              <g transform="translate(-9 -11)" fill="#FFFF" fillRule="nonzero">
                  <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
              </g>
          </g>
         </svg>
  </div>
</div>

字符串
这是我在react中的checkbox组件：

import React, { useEffect, useState }  from "react";
const XCheckBox = ({ value, id, name, onBlur,label, side, error, touched, onChange }) => {
    
    return (
        <>
           <div className=" flex flex-row gap-5 py-2">
               <div className="check-box">
                   <input type="checkbox"
                          value={ value }
                          id={ id }
                          name={ name }
                          onBlur={ onBlur }
                          className="absolute h-6 w-6 cursor-pointer" onChange={ onChange } />
                    <div className="bg-xaplink_gray_1 border-2 border-xaplink_gray_3 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-xaplink_black_2">
                        <svg className="fill-current hidden w-4 h-4 text-xaplink_white pointer-events-none" version="1.1" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
                            <g fill="none" fillRule="evenodd">
                                <g transform="translate(-9 -11)" fill="#FFFF" fillRule="nonzero">
                                    <path d="m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" />
                                </g>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
            <div>
                { touched && error ? (
                    <p className="text-xs pl-2 text-xaplink_red_2 mb-4">{ error }</p>
                ) : null }
            </div>
        </>
    );
};

export default XCheckBox;

型