PostCSS란?

PostCSS는 CSS를 변환하는 JavaScript 기반의 도구로, 플러그인 시스템을 통해 CSS를 처리하고 변형할 수 있도록 설계된 빌드 도구입니다. 단순한 CSS 전처리기가 아니라, 플러그인 기반의 유연한 CSS 처리 엔진이라는 점이 큰 특징입니다.

 

PostCSS는 기본적으로 CSS를 읽고 변환한 후 다시 출력하는 엔진이며, 다양한 플러그인을 조합하여 기능을 확장할 수 있습니다.

 

PostCSS 주요 기능

1. 자동 접두사 추가 (Autoprefixer)

/* 입력 */
.foo {
  display: flex;
}

/* 출력 (Autoprefixer 적용) */
.foo {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Autoprefixer 플러그인을 사용하면, 브라우저 호환성을 고려한 자동 접두사가 추가됩니다.

 

2. 변수사용

/* 입력 */
:root {
  --primary-color: #3498db;
}

.button {
  color: var(--primary-color);
}

 

3. SCSS/SASS 같은 기능 추가

/* 입력 */
@import "base.css";

.container {
  display: flex;
}

/* 출력 (PostCSS 플러그인 적용) */
@import url(base.css);

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

postcss-import 플러그인을 사용하면 @import 기능을 지원할 수 있습니다.

 

4. CSS 최적화 (Minify, 정리)

/* 입력 */
h1 {
  color: red;
  color: blue;
}

/* 출력 (postcss-csso 적용) */
h1 {
  color: blue;
}

postcss-csso 플러그인을 사용하면 CSS 파일 크기를 줄이고, 불필요한 코드 제거가 가능합니다.

 

PostCSS 설치하기

npm install postcss postcss-cli autoprefixer --save-dev

 

PostCSS 설정 파일 만들기 (postcss.config.js)

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-csso')
  ]
};

 

CLI 명령어 실행

npx postcss styles.css -o output.css

styles.css 파일을 변환하여 output.css로 출력합니다.

 

PostCSS는 단순한 전처리기가 아니라, CSS를 변환하는 강력한 도구입니다.

---

Vite 와 Tailwindcss 에서 사용하기

1. 기본적으로 PostCSS는 Vite에서 자동 적용됨

 

Vite는 내부적으로 postcss를 사용하며, vite.config.js에 설정한 경우 PostCSS가 자동으로 적용됩니다.

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: './postcss.config.js'
  }
});

와 같이 설정하면 PostCSS가 Vite의 개발 서버에서 자동 적용됩니다.

 

2. npm run dev 실행 시 자동 반영되는 경우

 

Vite는 **HMR(Hot Module Replacement)**을 지원하기 때문에 CSS 파일이 변경되면 자동으로 브라우저가 업데이트됩니다.

즉, npm run dev를 실행한 후 CSS를 변경하면 자동으로 반영됩니다.
단, PostCSS 플러그인에 따라 다시 빌드가 필요할 수도 있습니다.

 

✔️ 대부분의 PostCSS 플러그인은 npm run dev에서 자동으로 반영됨
✔️ CSS 변경 시 HMR을 통해 실시간 업데이트 가능
✔️ 일부 플러그인(postcss-import 등)은 서버 재시작이 필요할 수도 있음
✔️ 자동 반영이 안 되면 vite.config.js에서 server.watch 옵션 추가

 

Vite에서 Tailwind CSS + PostCSS 함께 사용하는 방법

Vite는 Tailwind CSS와 PostCSS를 자연스럽게 통합할 수 있습니다.
PostCSS는 Tailwind의 핵심 엔진이므로 별도로 추가 설정 없이도 자동으로 적용됩니다.

 

1. Tailwind CSS & PostCSS 설치

npm install -D tailwindcss postcss autoprefixer

postcss와 autoprefixer는 Tailwind에서 기본적으로 필요하므로 함께 설치합니다.

 

2. Tailwind CSS 설정 파일 생성

npx tailwindcss init -p

-p 옵션을 추가하면 postcss.config.js 파일도 자동 생성됩니다.

 

• tailwind.config.js → Tailwind 설정
• postcss.config.js → PostCSS 설정

3. Tailwind 설정 파일 수정 (tailwind.config.js)

 

Tailwind가 Vite 프로젝트의 파일을 제대로 감지할 수 있도록 content 옵션을 수정하세요.

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

content 배열에 Tailwind가 스타일을 적용할 파일 경로를 지정합니다.

 

4. PostCSS 설정 파일 확인 (postcss.config.js)

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind는 PostCSS 플러그인으로 동작하며, autoprefixer가 포함됩니다.

5. Tailwind 스타일 적용 (index.css 또는 src/main.css)

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

위 코드가 없으면 Tailwind 스타일이 적용되지 않습니다.

 

6. Vite에서 Tailwind CSS 로드 (main.js 또는 main.tsx)

import './index.css'; // 또는 import './src/main.css'

Tailwind 스타일이 적용되도록 import해야 합니다.

 

7. 개발 서버 실행 (npm run dev)

npm run dev

 

✔️ npm install -D tailwindcss postcss autoprefixer 설치
✔️ npx tailwindcss init -p 명령어로 설정 파일 생성
✔️ tailwind.config.js에서 content 경로 지정
✔️ index.css에서 @tailwind 지시어 추가
✔️ Vite에서 main.js에 import './index.css' 추가