리액트에서 tailwind 사용하기

이번에 인턴으로 들어가게 된 회사에서, tailwindcss를 사용한다고 하여 tailwindcss를 미리 공부해보기로 했다.

사실 리액트에서 css 라이브러리는 style component밖에 사용해본적이 없어서, 둘의 차이가 뭔지도 함께 알아볼 것이다.

 

 

1. Tailwind CSS란?

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크이다. 개발자에게 미리 정의된 CSS 클래스를 제공하여, 이를 HTML 요소에 적용함. 

 

유틸리티 클래스란?

유틸리티 클래스(Utility Class)는 특정 스타일 속성 하나만을 정의하는 CSS 클래스이다. 유틸리티 클래스는 스타일을 작은 단위로 쪼개서 제공하므로, 다양한 조합을 통해 복잡한 스타일을 쉽게 구성할 수 있다.

 

Tailwind CSS의 특징:

유틸리티 퍼스트 (Utility-First):

• Tailwind CSS는 유틸리티 클래스들을 통해 스타일을 정의합니다. 예를 들어, bg-blue-500, text-center, p-4 같은 클래스는 각각 배경 색상, 텍스트 정렬, 패딩을 설정한다.

모듈성 (Modularity):

• 각 클래스는 작은 단위의 스타일을 적용하므로, 재사용이 쉽다. 또한 클래스를 조합할 수 있다.

커스터마이즈 가능 (Customizable):

• tailwind.config.js 파일을 통해 테마 설정, 색상, 폰트 등을 커스터마이즈할 수 있다.

 

2. Styled Component와의 차이점

Styled Component의 특징:

CSS-in-JS:

• 스타일을 JavaScript 파일 안에서 정의하고, 컴포넌트별로 스타일을 캡슐화한다.

동적 스타일:

• 컴포넌트의 props를 기반으로 동적인 스타일을 적용할 수 있다.

자동 프리픽싱:

• 브라우저 호환성을 위해 필요한 CSS 프리픽스를 자동으로 추가해준다.

Scoped CSS:

• 스타일이 컴포넌트에 국한되므로, 전역 네임스페이스 문제를 피할 수 있다.

 

스타일을 html에서 설정하기 때문에, 속도 자체는 tailwind가 더 빠르다고 한다.

 

1.  

Tailwind CSS에서의 유틸리티 클래스 예시

<div class="bg-blue-500 text-white">
  Hello, World!
</div>

 

• bg-blue-500: 배경색을 파란색으로 설정.
• text-white: 텍스트 색상을 흰색으로 설정.

 

 

3. 기존 리액트 프로젝트에 Tailwind CSS 설치하기

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

공식 문서를 보고 따라하면 된다.

나는 이미 존재하는 react 프로젝트에 tailwind를 연습용으로 추가하기 위해 위의 방법으로 설치했지만, tailwind에서는 Create React App으로 프로젝트를 만드는게 아니라, Vite, Next.js 등을 이용하기를 권장한다. 

Create React App으로 프로젝트를 만들었을 경우 PostCSS를 지원하지 않는다고 한다.

 

react만 사용해보고, next.js는 사용해본적이 없는데 next.js도 사용해보아야겠다..

 

1. 터미널에서 Tailwind CSS 설치

cd 폴더명으로 프로젝트 파일을 연 후 아래 명령어를 터미널에 입력한다.

npm install -D tailwindcss
npx tailwindcss init

 

2. 템플릿 경로 구성

tailwind.confing.js 파일로 이동한다.

//tailwind.confing.js

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

 

 

3. ./src/index.css 에 지시어 추가

//index.css

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

 

이후 터미널에 npm run start를 입력하여 빌드하면 된다.

 

 

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

이런식으로 활용하면 된다. 

 

4. 같이 쓰면 좋을 extenstion

1. Tailwind CSS IntelliSense

위 사진 처럼 타이핑을 치면 해당 문자로 시작되는 클래스 명을 보여준다고 한다.

 

그 외에도 클래스명을 속성 별로 검색할 수 있는 Tailwind CSS Explorer, 클래스가 설명된 공식 사이트를 열어주는 Tailwind Docs, 정렬을 편하게 해주는 Preitter 등이 있는데 나머지는 직접 써보고 뭐가 더 좋은지 추가하겠다.

 

 

 

그런데 tailwind를 설치하고 나니 css를 적용하지 않은 기본 디자인 (h1, button) 등이 하나도 적용이 되지 않는다. 원래 이런가? 처음부터 다 다시 만들어야하는군...