오늘 한 일

캐러셀 높이 값 동적으로 안들어오는 문제 해결
북마크 시도

해결한 문제

✅ 문제 상황

이미지 캐러셀컴포넌트를 만들어뒀는데
페이지마다 높이값을 다르게 쓸 것 같아서 높이값을 동적으로 받아오게 만들었다
그런데 처음 서버를 켜고 렌더링을 하면 꼭 한 번은 하드코딩으로 값을 넣어줘야
그 다음부터 동적인 높이값을 제대로 받아오는 문제가 있었다

✅ 원인

tailwindcss를 쓰고 있는데
tailWind는 동적으로 생성된 클래스는 인식하지 않는다 고 한다
그래서 동적인 값을 받아오지 못한 것!

✅ 해결 - safelist 적용

tailwind.config.ts 파일에 safelist를 추가하면
CSS 파일에 무조건 포함시킬 스타일을 지정할 수 있다

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

// 패턴으로도 사용할 수 있다 (정규식)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
  // ...
}

참고: https://tailwindcss.com/docs/content-configuration#safelisting-classes
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
https://daisyui.com/blog/most-common-mistake-when-using-tailwind-css/