tailwind에서 form style 바꾸기

import InputStyle from './Input.module.css';

function Input({ placeholder, helper, InputType }: InputProps): JSX.Element {
  let helpermessage = helper ? helper : '';
  return (
    <div className={InputStyle.Div}>
      <input
        className={InputStyle.InputBox}
        type={InputType}
        placeholder={placeholder}
      />
      <div className={InputStyle.Helper}>{helpermessage}</div>
    </div>
  );
}

export default Input;

.Div {
  @apply w-[21.875rem]
  flex
  flex-col
  gap-1;
}

.InputBox {
  @apply w-full
  p-4
  /* shadow */
  appearance-none
  border
  border-main-30
  rounded-lg
  text-body
  focus:border-none focus:outline-main-50 focus:shadow
  invalid:border-red invalid:text-red;
}

.Helper {
  @apply text-red
    text-caption1
    pl-2;
}

일반 vs 클릭했을 때 (focus 상태)

일반의 border는 border이지만, focus 상태에서는 outline 속성을 바꿔주어야 한다는 것을 기억하자.

참고문서 :

Handling Hover, Focus, and Other States - Tailwind CSS

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target. For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class: How does this compare to traditional CSS?

https://tailwindcss.com/docs/hover-focus-and-other-states#placeholder-text

Forms - Tailwind CSS

Tailwind doesn't include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities. Here are a few examples to help you get an idea of how to build components like this using Tailwind.

https://v1.tailwindcss.com/components/forms

Uploaded by N2T