Home 화면구성 및 Tailwind 적용 - 8일차

4 ~ 8 일사이에 많은 일들이 있었다. 당연히 아르바이트 때문에 조금만 작업한 날도 있었지만....

Tailwind가 속을 썩있는 바람에... 

 

 

css 프레임워크는 처음써본다. 기본적으로 React에서는 styled-component를 사용했었고, css파일에 클래스를 정의하여 사용도 해봤다. 그래서 그런지 가독성이 떨어지는 부분이 있긴하다. 또한 유틸리스 클래스를 모르니 공식홈페이지를 보면서 적용하는것도 시간이 들어갔다.

Home component

 

 

 

초기작업이라 기본적인 css설정을 해놓고 추가로 설정들을 넣어볼예정이다. 태그 초기화는 할게 많지만 그때그때 필요한 부분만 하는게 좋을것같아서 아직 다하지는 않았다. router-button 클래스는 기본적으로 페이지를 이동하는 Link 태그의 css인데 많이 사용할거 같아 따로 빼두었다.

globals.css

 

 

제일 시간이 많이 들어간 부분이다. 이정도 설정으로 며칠을 보냈는데... Tailwind를 버릴까도 생각했다. 문제점은 extend 안에서 colors를 작성한것이 아닌 theme 밑에 바로 적용하여 생기는 문제였다. colors를 전역으로 설정을 하면 @apply를 사용하였을때 Tailwind css의 유틸리스 클래스를 인식하지 못하여서 발생하는 문제였다.

taillwind.config

 

 

아래와같이 에러를 뿜는것을 볼수가 있다. 이유는 theme에 colors를 정의를 한다면 HEX값을 정의해야하고 정의한 색상만 사용할수 있다. 그렇기때문에 Tailwind의 색상 유틸리티 클래스를 인식하지 못한다. 그래서 extend에서 사용자정의 컬러를 확장하여 사용했다.