[React] React + Tailwind CSS 시작하기

 

이전에 리액트 프로젝트를 진행할 때는 주로 SCSS를 사용해왔습니다.

SCSS는 CSS를 확장한 기능으로 가독성이 좋고 재사용 가능한 스타일링에 유용했지만

이제는 프로젝트에서 많이 사용하는 Tailwind를 도입해보기로 했습니다.

1. SCSS vs Tailwind CSS

1) SCSS

SCSS는 가독성 높은 코드와 변수, 믹스인, 중첩 규칙으로 유연한 스타일링이 가능합니다.

하지만 큰 프로젝트에서는 스타일이 충돌할 수 있고 관리가 어렵습니다.

2) Tailwind CSS

테일윈드는 클래스를 통해 스타일을 빠르게 작성할 수 있습니다.

하지만 초기 학습이 필요하고 클래스 네이밍이 길어질 수 있습니다.

이러한 SCSS 대신 Tailwind를 사용하여 생산성을 높이고 유지보수를 간편히 할 수 있을 것이라 생각해 이번 프로젝트에서는 테일윈드를 적용해보기로 했습니다.

2. React에 Tailwind 설정하기

1) 프로젝트 준비

리액트 프로젝트를 생성합니다.

npx create-react-app my-app
cd my-app

2) Tailwind 설치

필요한 패키지 3개를 설치해야 합니다.

npm install -D tailwindcss postcss autoprefixer  
npx tailwindcss init

3) 설정 파일 수정

tailwind.config.js 파일의 content에 테일윈드를 적용할 파일을 추가합니다.

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4) CSS 파일에 Tailwind 디렉티브 추가

src/index.css 파일에 아래 내용을 작성합니다.

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

3. Tailwind의 기본

Tailwind를 처음 시작할 때 필요한 주요 클래스들을 정리해보았습니다.

1) 레이아웃 (Layout)

Flexbox

• flex: Flex 컨테이너로 지정
• flex-row, flex-col: 방향 설정
• justify-start, justify-center, justify-end, justify-between, justify-around: 수평 정렬
• items-start, items-center, items-end: 수직 정렬

Grid

• grid: Grid 컨테이너 지정
• grid-cols-1, grid-cols-2, ...: 열 개수 설정
• gap-4: 열과 행 간 간격 설정

2) 박스 모델 (Box Model)

여백(Spacing)

• m-4: 전체 마진 1rem
• mt-4, mr-4, mb-4, ml-4: 방향별 마진
• p-4: 전체 패딩 1rem
• pt-4, pr-4, pb-4, pl-4: 방향별 패딩

크기(Size)

• w-full, w-1/2, w-1/4: 너비 설정
• h-full, h-64: 높이 설정
• min-w-0, min-h-screen: 최소 크기
• max-w-sm, max-h-screen: 최대 크기

3) 타이포그래피 (Typography)

텍스트 스타일

• text-sm, text-lg, text-xl: 글자 크기
• font-light, font-bold: 글꼴 굵기
• italic, not-italic: 기울임 여부

텍스트 정렬

• text-left, text-center, text-right: 정렬
• tracking-wide, tracking-tight: 글자 간격

4) 색상 (Colors)

배경색

• bg-blue-500: 배경색 파랑
• bg-red-100, bg-green-700: 밝고 어두운 색상

텍스트 색상

• text-gray-500: 텍스트 색상 회색
• text-white: 텍스트 색상 흰색

테두리(Border)

• border, border-2: 테두리 두께
• border-gray-500: 테두리 색상
• rounded, rounded-lg, rounded-full: 테두리 모서리 둥글게

5) 반응형 디자인 (Responsive Design)

브레이크포인트

• sm:, md:, lg:, xl:: 반응형 접두사
• 예: sm:text-sm md:text-lg lg:text-xl: 화면 크기에 따라 글자 크기 변경

6) 상태 기반 스타일 (Pseudo-classes)

• hover:bg-blue-700: 마우스 오버 시 배경색 변경
• focus:outline-none: 포커스 시 외곽선 제거
• active:text-red-500: 클릭 시 텍스트 색상 변경

결론

Tailwind CSS는 기존의 CSS 작성과 달리, 클래스 기반 접근으로 일관된 스타일링이 가능합니다.

이에 따라 생산성이 향상되고 유지보수가 용이하며 반응형 디자인을 만들 때

브레이크포인트 접두사를 사용하여 손쉬운 적용이 가능합니다.

아직 클래스 이름이 익숙하지 않지만 공식 문서를 활용하여 기능을 적용해나가보려고 합니다.

이번 프로젝트에서 Tailwind를 적용하여 개발 속도를 높일 수 있을 것이라 기대합니다.