[TailwindCSS] TailwindCSS사용 5가지의 모범사례

개요

• 프로젝트에 디자인 시스템이 있어야 한다.
• 컴포넌트 기반 접근 방식을 사용하고 있어야 한다.
• 유틸리티 클래스 수를 줄여라
• 디자인토큰을 그룹화하고 의미적으로 이름 짓기
• 클래스 순서를 유지해라
• 사용하지 않는 클래스는 빌드에서 제외해봐라
• 스타일 덮어쓰기 및 확장 시 불일치 방지

---

1.

2. 재사용가능하게 컴포넌트 만들어서 거기다가 CSS설정해서 반복하는 걸 최대한 줄여라

3. 유틸리티 클래스 수를 줄여라  ex) pt-4 pb-4 => py-4

4. 명확한 변수명과 코드 명확성을 위한 규칙은 클린 코딩습관에 좋다 ex) bright-red와 같은 이름보다 error와 같이 간결하게 일관성을 높여라

5. 클래스 순서를 정렬해서 보기 편하게 만들어라  Doc (tailwindCSS 공식 prettier)

6. tailwind 3.0 이상이라면 JIT엔진에서 기본적으로 활성화되어 있는만큼만 CSS 스타일을 생성한다 3.0이상 쓰자

7. 

 

 

요약: Tailwind 사용 방법 및 사용 하면 안되는 방법

Tailwind는 강력한 도구이지만, 프로젝트에 혼란이 생기지 않도록 몇 가지 규칙을 지키면서 사용하는 것이 중요합니다. 위에 나열한 원칙을 요약해 보겠습니다.

우선, Tailwind를 최대한 활용하려면 이미 디자인 시스템과 일관된 디자인 토큰이 있고 컴포넌트 기반 접근 방식을 선택한 경우에 Tailwind를 사용해야 합니다. 재사용 가능한 요소를 컴포넌트로 나누지 않고 Tailwind를 사용하면 조만간 반복적이거나 장황한 HTML 구조로 인해 어려움을 겪게 될 것입니다.

1. 가능한 유틸리티 클래스 수를 최소화하세요.
2. 디자인 토큰을 그룹화하고 의미적으로 이름을 지정하는 등 팀 내에서 코드 규칙을 공식화하세요.
3. 마찬가지로 일관된 클래스 순서를 구현하고 린터를 설정하여 깨끗한 코드를 보장하세요.
4. 번들 크기 최소화: 필요한 스타일만 포함했는지 확인하고 프로덕션 빌드용 최종 CSS는 항상 최소화하세요.
5. 적절한 경우 컴포넌트에 대해 미리 정의된 변형 세트를 정의하세요. 이는 컴포넌트 뷰의 불일치 및 스타일 재정의 문제를 방지하는 데 도움이 됩니다.

이 규칙을 준수하면 Tailwind를 문제없이 즐겁게 장기적으로 사용할 수 있으며, 팀원들에게 Tailwind가 제공하는 모든 혜택을 누릴 수 있는 기회를 제공할 수 있습니다.

이블 마션스에서는 성장 단계의 스타트업을 유니콘 기업으로 성장시키고, 개발자 도구를 구축하며, 오픈 소스 제품을 개발합니다. 워프 드라이브에 참여할 준비가 되셨다면 저희에게

 

 

 

https://medium.com/@cameronadams1225/setting-up-a-next-js-13-project-with-eslint-and-prettier-735c3ccfd26c