tailwind.conifng.js에서 추가적인 클래스를 정의할 때 꼭 `theme.extend` 안에 정의해야 한다. 그렇지 않으면 기존 tailwind 클래스들이 `덮어쓰기` 된다. 🚨 예시 theme: { colors: { 'main-color': '#48CFCB', 'sub-color': '#229799', 'light-color': '#F5F5F5', /* 생략 */만약 위의 코드처럼 작성했다면 색상과 관련된 tailwind 클래스는 위에서 커스텀한 3가지를 제외하고는 사용할 수 없다. 즉, 기존의 `colors` 를 덮어쓰게 되는 것이다. 하지만 `extend` 를 사용하게 되면 기존의 속성들은 그대로 두고 확장 하는 개념으로 사용할 수 잇다.
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 사진이 잘 안보여서 버튼이 잘 안보일 수도 있는데 사진 아래 빨간색으로 보이는게 버튼이다. 이번 프로젝트에서 버튼 종류라고 해봐야 검은색, 빨간색 2종류가 있다. 근데 고작 2개의 조건처리를 하는데도 묘한 불편함을 느꼈다(가독성이 특히). 그러다 찾은게 styled-components의 {css} 라이브러리인데 내가 느끼던 불편함을 딱 알맞게 해소해줄 수 있는 녀석이었다. 💡 기존 styled-components의 조건 처리일단 기존의 `styled-components` 로 조건에 따른 스타일을 변화하려면 다음과 같이 작성해야한다. `styled` 내부에서 삼항연산자를 사용..