[Tailwind] 쉽고 빠른 Tailwind CSS 첫 사용기

 

Tailwind CSS 사용해보기

Tailwind CSS(opens in a new tab) 란 ?
Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.

---

장점

• 유틸리티 우선 프레임워크: Tailwind CSS는 유틸리티 클래스를 사용하여 빠르고 효율적인 스타일링을 가능하게 하며, 프로젝트 전반에 걸쳐 일관된 스타일을 유지하면서도 쉽게 디자인할 수 있습니다.
• 맞춤화 가능: Tailwind CSS는 모든 디자인 시스템에 맞게 확장 및 맞춤설정이 가능해, 다양한 프로젝트에 유연하게 적용할 수 있습니다.
• 다양한 프레임워크와 통합: Next.js, Nuxt.js, Vue.js 등과 잘 통합되며, PostCSS를 지원하여 자동 접두어 지정과 같은 기능을 활성화할 수 있습니다.
• 자바스크립트 코드와 분리: Tailwind는 CSS에만 초점을 맞추므로 JavaScript 코드와 분리되어, 프레임워크 전환 시 유연성이 높습니다.

단점

• 복잡한 코드: 유틸리티 우선 접근 방식은 HTML 파일에 수많은 클래스 이름을 추가해, 기존 CSS보다 가독성이 떨어질 수 있습니다.
• 학습 곡선: 모든 유틸리티 클래스를 익히는 데 시간이 필요하지만, IntelliSense와 같은 도구가 이를 도와줍니다.
• 동적 스타일 지정의 어려움: Tailwind는 CSS-in-JS 솔루션만큼 JavaScript 기반 동적 스타일 지정을 쉽게 지원하지 않아, 추가적인 해결 방법이 필요합니다.

 

---

tailwind.config 파일 속성

content 속성

Tailwind가 프로젝트 내에서 실제로 사용되는 CSS 클래스만 포함하도록 도와줍니다.

• Tailwind는 기본적으로 모든 가능한 유틸리티 클래스를 생성하는데, content 속성을 통해 필요한 파일들만 스캔하여 실제 사용된 클래스들만 포함하도록 할 수 있습니다. 이렇게 하면 최종 CSS 파일의 크기를 최소화하여 성능을 향상시킬 수 있습니다.

const config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}', // 페이지 파일들 스캔
    './src/components/**/*.{js,ts,jsx,tsx}', // 컴포넌트 파일들 스캔
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;