[ Korean FE Article ] Tailwind CSS에서 혼란을 방지하기 위한 5가지 모범 사례

TailwindCSS 를 사용하기 위해 프로젝트가 충족해야 하는 두 가지 요구 사항

1. 프로젝트에 디자인 시스템이 있어야 한다.

2. 이미 컴포넌트 기반 접근 방식을 사용하고 있어야 한다.

• 유틸리티 우선(Utility-first)접근 방식은 Tailwind 클래스가 요소에 직접 적용되기 때문에 상당히 복잡하고 장황한 HTML 구조로 이어진다.
• 마크업을 읽고 유지 보수하기가 더 어렵다.
• `@apply` 지시문 피하는 것이 좋다. => 컴포넌트 내에서 격리되지 않아서 스타일을 변경할 때 회귀가 없다, CSS 번들 크기 증가한다

모범 사례

가능한 한 적은 수의 유틸리티 클래스 사용

• pt-4 pb-4를 설정하는 대신 py-4사용
• flex flex-row justify-between 대신 flex justify-between 사용 => 기본값 활용

디자인 토큰을 그룹화하고 의미적으로 이름 짓기

• tailwind.config.js에서 관련 토큰을 함께 그룹화
• 토큰에 대해 하나의 의미론적 명명 규칙을 유지하면 애플리케이션이 성장함에 따라 필요한 토큰을 더 쉽게 찾고 시스템 확장 가능

module.exports = { 
    theme: { 
        colors: { 
            primary: 'oklch(75% 0.18 154)', 
            secondary: 'oklch(40% 0.23 283)', 
            error: 'oklch(54% 0.22 29)' }, 
            spacing: { 'sm': '4px', 'md': '8px', 'lg': '12px' }, 
            screens: { 'sm': '640px', 'md': '768px' }, 
          },
    //... 
    }

클래스 순서 유지

• Tailwind CSS용 공식 Prettier 플러그인을 사용해서 자동화하기

빌드 크기 최소화

• 빌드가 무거우면 페이지 로딩 속도가 느려지고 성능이 저하되며, 사용자 경험이 떨어진다.
• 버전 3.0이상은 JIT(Just-In-Time)엔진이 기본적으로 활성화되어있다.
• 이전 버전은 사용하지 않는 CSS를 제거하는 도구인 PurgeCSS를 사용 => 수동으로 JIT 모드 활성화 가능
• module.exports = { mode: 'jit', }
• Tailwind CLI 사용하여 --minify플래그 통해 최종 CSS 축소하기
  공식문서
  npx tailwindcss -o build.css --minify

스타일 덮어쓰기 및 확장 시 불일치 방지

• 프롭을 통해 유틸리티를 받아들이면 일관된 컴포넌트 뷰를 보장하기 더 어려워진다 => 미리 정의된 변형 집합을 정의하여 프롭으로 전달하기

export const Button = ({ className = "bg-white" }) => { 
    return <button className={className}>Test button</button> 
}

• className을 더 편리하게 구성하려면 clsx 사용하기
  특히, 조건부로 클래스를 구성해야 하는 경우 매우 편리하다
  유틸리티 클래스를 한 곳에서 관리 가능 => 유지 보수가 더 간편해진다

const BUTTON_VARIANTS = { 
    primary: "bg-blue-500 hover:bg-blue-600 text-white", 
    secondary: "bg-gray-500 hover:bg-gray-600 text-white", 
    danger: "bg-red-500 hover:bg-red-600 text-white" };

• 미리 정의된 변형 집합을 사용하고 싶지 않은 경우, 스타일 충돌 없이 JS에서 Tailwind클래스를 병합하는 유틸리티 함수 twMerge를 제공하는 tailwind-merge 패키지도 사용해볼 순 있지만, 가장 가볍지 않고 번들 크기가 커지므로 신중한 사용이 필요하다

요약) Tailwind 사용 규칙

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

---

출처)

https://velog.io/@lky5697/5-best-practices-for-preventing-chaos-in-tailwind-css?utm_source=substack

[번역] Tailwind CSS에서 혼란을 방지하기 위한 5가지 모범 사례

 

구독하려면？

https://kofearticle.substack.com/

Korean FE article | Han Jung(한정) | Substack