Vite + React 환경에서 Tailwind 야무지게 사용하기

Vite는 제가 정말 좋아하고 자주쓰는 프론트엔드 빌드 툴입니다.

리액트, 뷰, 스벨트 추가로 타입스크립트 사용 여부까지 맞춰서 빠른 속도로 프로젝트를 세팅할 수 있게 해줍니다.

또 개인적으로 npx CRA로 리액트 개발을 했을 때 보다 빌드나 런타임 소요 시간이 훨씬 빠른 것을 체감할 수 있었습니다.

 

CSS관련 기술 중에서는 Tailwind CSS를 개발할 때 즐겁게 썼습니다.

class 네이밍을 고민하지 않아도 되고, css 파일을 왔다갔다 하며 확인하지 않아도 된다는게 참 편리했습니다.

 

그래서 제가 좋아하는 이 둘을 합쳐, Vite로 세팅한 React 프로젝트에서 Tailwind css를 좀 더 효율적으로 사용 하는 방법을 공유하고자 합니다. (저의 개인 경험을 바탕으로 작성된 글이니, 항상 정답은 아닙니다. 더 좋은 방법이 있다면 공유해주세요!)

 

*이 글은 Tailwind v3.0 이상 기준으로 작성되었습니다.

 

 

 

 

1. Vite로 프로젝트 생성

Vite로 리액트 프로젝트를 생성하기 위해 터미널 창에 아래의 명령어를 입력합니다.

npm create vite@latest

 

그러면 아래처럼 프로젝트 네임을 입력하고, 어떤 프레임워크(또는 라이브러리)를 사용할 것인지 묻는 옵션이 나옵니다. 화살표 방향키로 선택지를 바꿀 수 있고, Enter를 누르면 선택완료 됩니다. React를 선택해줍니다.

 

이 다음에는 타입스크립트를 사용할 것인지, 자바스크립트를 사용할 것인지 묻습니다. 저는 타입스크립트를 선택했습니다.

이렇게 Vite로 간단하게 타입스크립트 + 리액트 프로젝트 세팅이 끝났습니다. 정말 간편하죠? 

 

이제 Tailwind를 설치해봅시다.

 

 

 

 

2. Tailwind 설치 

터미널 창에 아래의 명령어를 입력하여 Tailwind를 설치합니다.

npm install tailwindcss

tailwindcss 모듈이 설치되고, 아직까지 프로젝트 내에선 아무런 파일이 생성되지 않습니다.

 

다음으로는 tailwindcss 사용에 필요한  postcss와 autoprefixer도 설치해줍니다.

npm install -D postcss autoprefixer

autoprefixer는 각 브라우저 호환을 위해 그에 맞는 벤더 프리픽서를 자동으로 붙여주는 도구이고, postcss는 css 후처리기 입니다. postcss에 대해 간단하고 쉽게 설명이 되어 있는 블로그 글이 있어 아래 링크에 첨부해두었습니다. 필요하시면 참고하세요!

PostCSS vs Scss ?

 

 

이제 모든 설치가 끝났습니다. 마지막으로 tailwind.config.js파일과 postcss.config.js 파일 생성을 위해 아래 명령어를 입력합니다.

npx tailwindcss init -p

이제 프로젝트에서 Tailwind를 사용할 수 있습니다.

 

 

 

 

3. Tailwind 사용

더 효율적으로 Tailwind를 사용하기 위해 tailwind.config.js 파일에서 몇가지 옵션을 수정해봅시다.

저는 다음과 같이 수정했습니다.

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#21BF48",
        mainText: "#000000",
        subText: "#767676",
        accentText: "#EB5757",
        background: "#f2f2f2",
      },
      fontFamily: {
        spoqa: ["SpoqaHanSansNeo-Regular"],
        spoqaMedium: ["SpoqaHanSansNeo-Medium"],
        spoqaBold: ["SpoqaHanSansNeo-Bold"],
      },
    },
    screens: {
      ss: "480px",
      sm: "620px",
      sl: "768px",
      md: "1060px",
      lg: "1200px",
    },
  },
	corePlugins: {
			preflight: true,
	}
};

• [content]
  Tailwind를 사용할 파일의 경로 및 확장자를 설정합니다. 저는 src 디렉토리 안의 jsx, tsx, ts, js 확장자를 넣어주었습니다.
  
  
• [theme]
  스타일을 커스터마이징 할 수 있는 옵션입니다. 예를 들어, Tailwind는 기본적으로 font size나 지정된 color palette를 제공합니다. 아래는 Tailwind에서 기본적으로 제공하는 Gray 컬러 옵션입니다.
  

  

  
  위의 색 팔레트 중에서 내가 background color로 사용하고 싶은 색(#6b7280)이 있다면 아래와 같이 class명을 작성하면 됩니다.
  
  

  <div className="bg-primary">
  	<h1>Hello, there!</h1>
  </div>

  
  그런데 디자이너가 요구하는 색상이 Tailwind 기본 제공 팔레트에 없다면?
  
  이 때, theme 옵션을 사용하면 됩니다. 위의 코드와 같이 theme안의 colors 옵션에 사용할 색상의 이름(사용자 지정)과 색상코드를 명시해 주면 됩니다. 위의 코드에서 #21BF48 색상을 'primary'라는 이름으로 지정해뒀다면, 배경색으로 적용할 때 다음과 같이 작성합니다.
  

  <div className="bg-primary">
  	<h1>Hello, there!</h1>
  </div>

  
  
  screen 옵션에서는 반응형 디자인을 위해서 화면 크기에 따른 breakpoint를 설정할 수 있습니다.
  예를 들어, 배경색을 480px 크기 화면에서는 'primary(#21BF48)'로, 620px 크기 화면에서는 'background(#F2F2F2)'로 적용하고 싶다면 다음과 같이 작성할 수 있습니다.
  

  <div className="ss:bg-primary sm:bg-background">
  	<h1>Hello, there!</h1>
  </div>

  이처럼 반응형 스타일 적용도 간편하게 할 수 있습니다.
  
  
• [preflight]
  preflight는 기존적으로 명시하지 않으면 true 값이 적용됩니다. (저는 설명을 위해 명시해 두었습니다.)
  이는 모든 브라우저에서 일정한 스타일을 유지하기 위한 옵션으로, Normalize css나 Reset css처럼 브라우저마다 각각 다른 내장된 스타일을 초기화 시켜주는 역할을 합니다.
  기존 CSS를 사용 할 때 처럼 따로 normalize.css 파일이나 reset.css 파일을 import할 필요가 없습니다!
  브라우저 스타일 초기화를 원치 않으시다면 preflight: false 로 변경하시면 됩니다.
  
  

❕ 참고로 Tailwind v2.x.x 에서는 위와 같이 커스터마이징을 할 때, 보통 mode 옵션에 "JIT(Just-in-time)"을 명시하여 사용하였지만, Tailwind v3.0 이상 부터는 JIT mode가 기본으로 설정되어서 tailwind.config.js 파일에 명시할 필요가 없어졌습니다.

 

저는 보통 이 정도로 옵션을 설정하였고, 더 많은 configuration 옵션을 알고 싶으시다면 Tailwind 공식 문서에 설명이 잘 되어 있으니 참조 하시면 됩니다.

 

마지막으로 최상위 루트 CSS 파일에 다음과 같이 입력해주면 Tailwind 사용 준비가 끝납니다.

/** index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

하지만...... 완전히 끝난 것은 아닙니다.

보너스가 남아있습니다.

 

 

 

4. 더 똑똑하게 Tailwind 사용하기

Tailwind를 사용하다보면, 분명 스타일을 위한 class 명을 고민할 필요가 없다는게 큰 장점이지만, 스타일링 속성을 바로 class에 작성하다보니 class 속성 코드 길이가 너무 길어질 수 있다는 단점이 있습니다.

아래는 그 예시입니다. class가 너무 길어서 코드 가독성이 떨어집니다. 😕

<div className="flex justify-center items-center sm:w-[360px] sm:h-[200px] w-[300px] h-[190px] font-spoqa bg-gray-500">
	<p>이보다 더 길어질 수 있다...</p>
</div>

이 때, 자주 쓰이는 Tailwind 스타일 속성을 또 다른 변수로 설정해 주면 코드의 가독성을 좀 더 높일 수 있습니다.

style.js 파일을 작성해줍니다. (설명을 위해 ts가 아닌 js로 작성했습니다.)

value에는 컴포넌트화 할 수 있는 스타일을 Tailwind 문법으로 작성하고, key에는 커스텀 네임을 입력합니다.

const styles = {
  flexCenter: "flex justify-center items-center",
  responsive: "sm:w-[360px] sm:h-[200px] w-[300px] h-[190px]",
  sectionLayout: "md:w-[85%] w-[95%] bg-white",
  basicButton:
    "w-[220px] h-[68px] rounded-[5px] font-spoqaBold text-[24px] text-white",
};

export default styles;

style.js 파일을 import 하여, 위의 작성한 코드를 다음과 같이 간결하게 작성할 수 있습니다.

import styles from "../../style";

<div className={`${styles.flexCenter} ${styles.responsive} font-spoqa bg-gray-500}`>
	<p>이보다 더 길어질 수 있다...</p>
</div>

이전 코드보다 훨씬 가독성이 좋아졌고, 어떠한 스타일이 적용된건지 명시적으로 알 수 있습니다. 👍



위의 제가 설명한 방법이 무조건 정답은 아니지만, 단순히 Tailwind 문법을 알고 사용하는 것 보다는 생산성 향상은 물론 코드 유지 보수에도 크게 도움이 될 것이라 생각합니다.
아직 Tailwind 사용이 익숙치 않은 분들이 있다면 Tailwind 공식 문서를 참조하는 것을 추천드립니다. 

공식문서에 설명이 잘 정리 되어 있어 저도 덕분에 큰 어려움 없이 Tailwind를 익힐 수 있었습니다. 

 

공식 문서 사이트는 아래에 첨부해두었습니다.

Installation - Tailwind CSS

 

이 글을 통해 Vite를 사용한 React와 Tailwind 사용에 도움이 되었으면 좋겠습니다. 😁