Tailwind CSS 반응형

tailwind.config.ts

 theme: {
    extend: {
      screens: {
        mobile: { min: "0px", max: "480px" },
        tablet: { min: "481px", max: "768px" },
        pc: { min: "769px" },
      },
    },
  }

컴포넌트에서 사용 시

<div className='pc:w-[800x] tablet:w-[600px] mobile:w-[100px]'>

콜론 뒤에 띄어쓰기를 하면 적용되지 않으니 주의