[Tailwind CSS] React+Vite 환경에 설치, 그런데 적용이 안됨. 왜죠?

 

Tailwind CSS 공식문서를 보면 설치 방법이 나와있다.

다만 순서대로 진행했는데도 불구하고 스타일이 적용이 안 되는 이슈가 있다.

왜 적용이 안 되는 가를 찾아내려면, 동작 방식을 이해해야겠단 생각이 들었고 정리해 보면 아래와 같다.

 

1. 설정 파일 생성

npx tailwindcss init 명령어를 통해 tailwind 설정 파일(tailwind.config.js)을 생성할 수 있다. 

Tailwind는 설정된 파일들을 스캔하여 클래스 이름을 추출하고, 이를 기반으로 최종 CSS 파일을 생성한다. 설정된 파일의 경로를 제대로 기입하지 않으면 사용한 클래스가 인식되지 않아 스타일이 적용되지 않을 수 있다.

 

아래와 같이 프로젝트 경로와 맞게 content 배열에 스캔할 파일 경로를 정확히 지정해 주면 된다.

 

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

 

 

2. src/index.css 파일에 @tailwind 지시어 추가

CSS 파일에서 Tailwind의 지시어를 사용해 필요한 유틸리티 클래스를 로드한다. 아래 코드는 Tailwind CSS의 기본 스타일(base), 컴포넌트 스타일(components), 유틸리티 클래스(utilities)이다.

 

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

 

 

3. 빌드 과정

@tailwind 지시어를 추가했지만, 이는 브라우저가 직접 읽을 수 없기 때문에 빌드 과정이 필요하다.

아래 이미지는 2번 과정인 src/index.css 파일에 @tailwind 지시어를 추가했지만 빌드가 정상적으로 되지 않아서 단순 텍스트로 남아있는 상태이다. 이렇게 되면 스타일이 적용되지 않는다.

 

 

그럼 정상적으로 빌드를 하려면 어떻게 해야 하는가?

여기서 우리는 PostCSS를 알게 되는데, PostCSS는 CSS를 처리하고 변환하기 위한 도구이다. 즉 

Tailwind CSS는 PostCSS를 통해 CSS를 처리하고, 유틸리티 클래스들을 생성하며, 다양한 플러그인과 통합하여 작업을 할 수 있다. @tailwind 지시어를 해석하고, Tailwind의 설정 파일에 따라 CSS를 생성하는 작업이 PostCSS를 통해 이루어지기 때문에 PostCSS 패키지를 잘 설치해줘야 한다.

 

npm install -D postcss autoprefixer

 

PostCSS 패키지를 설치할 때 Autoprefixer도 함께 설치해 주자.

Autoprefixer는 PostCSS의 플러그인 중 하나로, CSS 코드에 벤더 프리픽스를 자동으로 추가해 주기 때문에 벤더 프리픽스를 신경 쓰지 않고도 다양한 브라우저 호환성을 확보할 수 있습니다.

 

/* index.css */
.container {
  display: flex;
}

/* 빌드 후 최종 css */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

 

 

PostCSS와 Autoprefixer 설치 후에는 프로젝트 경로에 PostCSS 설정 파일(postcss.config.js)을 생성해 준다.

그리고 아래와 같이 설정해주면 된다.

 

export default {
  plugins: {
    tailwindcss: {}, // tailwind css를 컴파일 해주는 플러그인
    autoprefixer: {}, // 브라우저별 호환성을 맞춰주도록 css를 변환시켜주는 플러그인
  },
};

 

 

이 과정이 제대로 되었다면 우리는 Tailwind 유틸리티 클래스(ex. text-3xl font-bold underline italic)를 사용했을 때 잘 적용되는 모습을 확인할 수 있다.

 

import "./App.css";

function App() {
  return <h1 className="text-3xl font-bold underline italic">Vite + React</h1>;
}

export default App;

소스 코드 확인 - https://github.com/ziyunn/tailwindcss-installation