React ANT 设计按钮操作不适用于 Tailwind UI 按钮

Question

//更改名称

const [editNameState, setEditNameState] = useState(false);
const [name, setName] = useState({
    firstName: '',
    lastName: ''
});

//当前功能

<div className="border-2 border-gray-300  py-3 text-sm px-4 mb-6">
     <div className="flex flex-row justify-between mb-2">
          <p>Full Name</p>
          <Buttons 
             title={!editNameState ? 'Edit Full Name' : 'Cancel'} outline onClick={() => {
                    setEditNameState(!editNameState)
                    }}/>
      </div>
      <div className="flex flex-row justify-between my-6">
            <div>
               {editNameState ?
                    <div>
                        <label>First Name</label>
                          <Input value={name.firstName || user.firstName} onChange={(event) => {
                                            setName({...name, firstName: event.target.value})
                                        }}/><br/>
                         <label>Last Name</label>
                           <Input value={name.lastName || user.lastName} onChange={(event) => {
                                            setName({...name, lastName: event.target.value})
                                        }}/>
                                    </div>
                                    :
                                <p>{user.firstName + ' ' + user.lastName}</p>
                }
                </div>
                   {editNameState && <Buttons title="Save" onClick={async () => {
                      setEditNameState(false)
                    await handleNameChange()
                   }}/>}
             </div>
       </div>

//我需要tailwind UI中的新按钮格式

    <button  
        title={!editNameState ? 'Edit Full Name' : 'Cancel'} 
        outline onClick={() => {
                            setEditNameState(!editNameState)
                        }} 
        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400 hover:bg-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
        Edit Full Name
    </button>

//Ant设计按钮是但在 Tailwind UI 按钮中是按钮文本，在这种情况下 editNameState 不适用于 tailwind 请帮助我像 ant design 一样工作