Tailwind로 Google의 입력란을 만드는 방법은 무엇인가요?
3966 단어 tailwindcssjavascriptreactcss
const inputClasses = {
root: /*tw:*/ `group relative h-14 w-full rounded-md border border-[#a5a5a6] focus-within:border-primary focus-within:ring-1 focus-within:ring-primary`,
label: /*tw:*/ `absolute left-2 top-1/2 z-0 -translate-y-1/2 bg-white px-1 text-base pointer-events-none duration-200 group-focus-within:top-0 group-focus-within:text-xs group-focus-within:text-primary`,
input: /*tw:*/ `z-10 h-full w-full rounded-md px-3.5 py-4 outline-none`,
};
function Input({ placeholder, ...props }: React.ComponentProps<'input'>) {
return (
<div className={inputClasses.root}>
<label
className={cnMerge([inputClasses.label, props.value && 'top-0 text-xs'])}
htmlFor={props.id ?? props.name}
>
{placeholder}
</label>
<input id={props.id ?? props.name} {...props} className={inputClasses.input} />
</div>
);
}
Reference
이 문제에 관하여(Tailwind로 Google의 입력란을 만드는 방법은 무엇인가요?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gabrielmlinassi/how-to-create-googles-input-field-with-tailwind-3io5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)