[tailwind] tailwind.config 수정할 때 주의 사항

tailwind.conifng.js에서 추가적인 클래스를 정의할 때 꼭 `theme.extend` 안에 정의해야 한다. 

 

그렇지 않으면 기존 tailwind 클래스들이 `덮어쓰기` 된다. 

 

 

🚨 예시

 theme: {
  colors: {
    'main-color': '#48CFCB',
    'sub-color': '#229799',
    'light-color': '#F5F5F5',
    /* 생략 */

만약 위의 코드처럼 작성했다면 색상과 관련된 tailwind 클래스는 위에서 커스텀한 3가지를 제외하고는 사용할 수 없다. 

즉, 기존의 `colors` 를 덮어쓰게 되는 것이다.

 

하지만 `extend` 를 사용하게 되면 기존의 속성들은 그대로 두고 확장 하는 개념으로 사용할 수 잇다.