왜 내가 스타일링된 구성품보다 테일윈드씨스를 더 좋아하는가?

반응형

왼쪽에는 스타일 구성 요소가 있고 오른쪽에는 테일윈드씨(tailwindcss)를 사용하는 동일한 코드가 있습니다.

내가 tailwindcss를 사용하는 것이 스타일링된 구성 요소를 사용하는 것보다 더 낫다고 생각하는 이유는 다음과 같습니다.

• 스타일을 추가할 때마다 클래스 이름(.welcome .mention)과 구성 요소(DivStyled)에 이름을 지정할 필요가 없습니다.
• 스타일은 검색할 필요가 없습니다. HTML/JSX에 코로케이션되어 있기 때문에 div의 테두리 블랙이 1px인 것을 알 수 있습니다, 명시적입니다. 그리고 유틸리티 클래스가 너무 많으면 변수에 저장할 수도 있습니다.
• 나는 CSS 선언을 유지할 필요가 없다. 클래스 이름이 .mention인 요소를 제거할 경우 DivStyled에서 선언한 스타일을 반드시 제거해야 합니다. 여기서 .mention 스타일은 아래에 선언되어 있지만 다른 파일에 있는 상위 요소에 선언되어 있으면 어떻게 됩니까?
• 저는 디자인 시스템을 만들 필요가 없습니다, tailwindcss는 놀라운 기본 설정(스패싱, 색상 등)을 가지고 있습니다. 나만의 맞춤 설계 시스템을 사용해야 한다면 tailwind.config.js로 선언하고 정상인 것처럼 사용할 것입니다(이 비디오를 확인하십시오: https://youtu.be/cZc4Jn5nK3k)
• 그것은 일관된 간격을 사용하라고 나에게 촉구한다. text-lg (18px), text-xl (20px) 등을 사용해야 하므로 픽셀 완벽한 통합은 하지 않을 것입니다. 그리고 정확해야 한다면 임의적인 스타일을 사용할 것입니다.