개발 시작, Tailwind CSS 써보기

지난주는 내내 기획 회의를 했고 이번주에 들어서 개발을 시작했다.

기획 회의는 팀원 모두가 일과 시간 내내 의견을 내고 조율하면서 이루어졌는데, 팀원들 모두 열정적이고 적극적이라서 너무 재미있었다.

이번 프로젝트에서는 리액트와 테일윈드를 사용하기로 했다.

오늘은 거의 테일윈드 쓰는법 익히고 간단한 컴포넌트 몇개만드는데 시간이 다 갔다.

테일윈드를 얼마 쓰지도 않았는데도 바로 감이왔다. 이거 진짜 편하고 좋다..라고

element에 css를 입힐 때 테일윈드를 사용하면 class에 바로 테일윈드 속성들을 나열해주면 끝이다.

테일윈드를 사용하지 않는다면 아래와 같이 각각의 클래스명을 정하고, css파일을 새로 만들어서 연결하고 하는 과정을 거쳐야 하는데 이 번거로운 과정을 없애버린다.

중복되지 않게 클래스 이름 만들고.. 해당하는 css파일 찾아서 해당하는 항목 찾아서 수정하고 이런과정이 너무 번거로웠는데 tailwind를 사용하니까 번거로움이 싹 사라졌다. 너무 신세계..

SASS와 같은 전처리기를 사용하면 이름에 대한 걱정은 조금 줄수는 있으나 그래도 CSS파일을 만들고 임포트를 하는건 변함이 없다.

bootstrap과 같은 ui 라이브러리도 결국 커스텀하게 되면 CSS파일을 만들 수 밖에 없는데 tailwind는 그럴 필요가 없어서 너무 좋다 ㅠㅠ감동..

다만 익숙했던 css속성을 tailwind에서는 어떻게 작성하는지 cheatsheet를 보면서 찾아야 하는 시간이 좀 소요가 되는데, 이건 일주일정도만 쓰면 자주 쓰는건 바로 외워질 것 같다.

이제야 쓰게된게 아쉬울정도로 맘에드는 tailwind.. 사랑한다고 해도 될까?❤️

오늘 쓰면서 삽질한 부분

동적으로 클래스 명을 정하면 안된다.

prop으로 받은 문자열을 사용해서 동적으로 클래스명을 지정해주려고 했는데 계속 안됐다.

찾아보니 애초에 tailwind 자체에서 동적인 클래스네임을 사용하지 말라고 한다.

Tailwind는 기본적인 preflight라는 스타일 세트를 기본으로 제공한다.
다음은 스타일 세트의 일부이고 모든 항목은 스타일시트 보기

• 기본 여백 제거
• -h태그들, p,pre등의 요소의 margin값이 0
• 헤딩 스타일 없음.
  • h1,h2와 같은 헤딩 태그들도 기본적인 일반 텍스트와 같은 스타일(크기, 두께)를 가짐.
• 목록(ul,ol)의 스타일이 지정되지 않음.
  • 목록의 리스트 스타일이 none이며 마진과 패딩도 0으로 설정된다. 스타일을 지정하고싶다면 list-style-type,list-style-position 을 사용해야 한다.
• 스타일이 지정되지 않으면 Voice over에서 읽히지 않음.
• 이미지는 display:block
  인라인으로 만들고싶다면 inline 클래스 추가
• border 의 전역 설정
• border-width: 0; border-style: solid; border-color: theme('borderColor.DEFAULT', currentColor);
  • border가 설정 되어 있기 때문에 따로 width,style을 지정하지 않고 border만 추가하더라도 테두리가 보임.

preflight를 비활성화 하려면 tailwind.config.js파일에서 사용 옵션을 바꿔주면 된다.

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

preflight를 유지한 채 기본 스타일을 추가하고 싶다면 css 추가할 수 있음. Adding base styles