aspect-ratio: 372 / 220; tailwind에서 설정하는

먼저 플러그인 설치

npm install @tailwindcss/aspect-ratio

 

그런 다음, tailwind.config.js에서 이 플러그인과 원하는 비율을 추가하세요.

 

module.exports = {
  theme: {
    extend: {
      aspectRatio: { 
        '372/220': '372/220',
      }
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

 

이렇게 설정한 이후부터는 다음과 같이 aspect-[name] 클래스를 사용하여 비율을 설정할 수 있습니다.

 

<div className="aspect-[372/220]">
  <!-- ... -->
</div>

 

이 비율이 classname에서 불안정하게 작동한다면, 비율을 소숫점 형태로 제공하는 것도 고려해볼만합니다. 이 경우 위의 설정 부분은 다음과 같이 될 것입니다

module.exports = {
  theme: {
    extend: {
      aspectRatio: { 
        'custom': 372/220,
      }
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

그리고 해당 비율을 사용하려면 아래와 같은 방식으로 classname를 작성할 수 있습니다.

<div className="aspect-[custom]">
  <!-- ... -->
</div>