React | Tailwind CSS

Tailwind CSS 설치 & 사용방법

Tailwind

유틸리티-퍼스트(Utility-First) 접근 방식을 사용하는 CSS 프레임워크

스타일을 빠르게 적용할 수 있는 다양한 작은 유틸리티 클래스들을 제공하여, 커스텀 CSS를 작성하지 않고도 쉽게 원하는 디자인을 구현할 수 있으며 Tailwind CSS는 컴포넌트 기반의 스타일링을 쉽게 만들고 유지할 수 있도록 도와준다

 

Utility-First란

스타일을 작은 단위의 유틸리티 클래스(예: text-center, mt-4, bg-blue-500 등)로 구성하는 스타일링 접근 방식

이 방식은 CSS의 반복적인 코드 작성을 줄이고, 유지보수와 개발 속도를 높이는 데 도움을 준다

Tailwind CSS는 이러한 유틸리티 클래스들을 활용하여 빠르고 직관적인 스타일링을 가능하게 함

 

Tailwind CSS 설치과정

Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• tailwindcss: Tailwind CSS 프레임워크
• postcss: Tailwind CSS와 같은 CSS 툴들을 위한 플러그인 런타임
• autoprefixer: CSS에 필요한 브라우저 접두사를 자동으로 추가

 

Tailwind CSS 설정 파일 수정

tailwind.config.js 파일을 열어 콘텐츠 지정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

Tailwind CSS를 CSS 파일에 추가

src/index.css 또는 사용할 CSS 파일에 Tailwind CSS 지시문 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

 

프로젝트 실행

npm run dev

 

---

Tailwind CSS 장단점

Tailwind CSS의 장점

• 빠른 개발 속도: 유틸리티 클래스들로 구성되어 있어 CSS를 작성하지 않고도 빠르게 스타일 적용 가능
• 일관성 있는 디자인: 미리 정의된 클래스들을 사용하여, 프로젝트 전반에 걸쳐 일관성 있는 스타일 유지 가능
• 작은 파일 크기: 사용하지 않는 CSS는 자동으로 제거(Purge)되어, 최종 CSS 파일 크기 최소화
• 유연한 커스터마이징: Tailwind의 설정 파일을 통해 쉽게 테마나 스타일을 커스터마이징
• 반응형 디자인 지원: 반응형 유틸리티 클래스가 기본으로 제공되어 모바일부터 데스크탑까지 쉽게 대응

 

Tailwind CSS의 단점

• 초기 학습 곡선: Tailwind의 유틸리티 클래스가 많아 익숙해지기까지 시간이 걸릴 수 있음
• 클래스 중복: HTML 코드에 많은 클래스가 중첩될 수 있어 가독성이 떨어질 수 있음
• 의존성 문제: 프로젝트의 스타일링이 Tailwind에 종속되므로, 다른 CSS 프레임워크로 전환하기 어려울 수 있음
• JSX의 가독성 저하: React 같은 프레임워크에서 JSX 코드가 복잡해질 수 있음
• 커스터마이징 제약: 매우 구체적인 디자인 커스터마이징이 필요한 경우 Tailwind의 기본 제공 클래스만으로는 한계가 있을 수 있음

 

VS Code 추천 익스텐션

• Tailwind CSS IntelliSense: Tailwind CSS 클래스에 대한 자동 완성 및 오류 검사를 제공하여 개발 속도를 높이고, 정확한 클래스 사용을 도와준다.
  • 설치 명령: ext install bradlc.vscode-tailwindcss
• PostCSS Language Support: Tailwind CSS와 함께 사용하는 PostCSS에 대한 지원을 제공한다.
  • 설치 명령: ext install csstools.postcss
• Headwind: Tailwind CSS 클래스들을 자동으로 정렬하여 코드 가독성을 높이고, 일관된 스타일링을 유지한다.
  • 설치 명령: ext install heybourn.headwind

 

---

Tailwind 공식

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind에서 제공하는 속성들은 공식 사이트를 통해 확인 할 수 있다!!!