[TIL] 230906

Tailwind

동적인 데이터 적용 불가 상태

bg-${특정 데이터} 이런식으로 넣을 경우 제대로 동작하지 않았는데,
https://tailwindcss.com/docs/content-configuration#classes-arent-generated
공식문서에서 빌드할때 필요없는 style은 지우기 때문에 적용이 되지 않는다고 한다.

const backgroundColors = ['bg-MainYellow2', 'bg-MainBlue2', 'bg-MainPurple2', 'bg-MainOrange2'];

이렇게 자체적으로 적용하였을 때 제대로 동작했다.

반응형 디자인 만들기

sm : 640px
md : 768px
lg : 1024px
xl : 1280px
2xl : 1536px
각각 디자인별로 다르게 지정해주면 디자인이 적용되는데 선언해둔 class를 조건문에 넣으면 적용이 안되는 현상이 있다. 주의해서 사용하자

모바일: 360 4grid
타블렛: 1024 12grid
PC: 1920 12grid