PostCSS로 설치하기

PostCSS 기반의 빌드 환경에서 Tailwind CSS를 설치할 때 사용하는 방법이에요. PostCSS 플러그인을 설치하고 설정 파일에 추가해 주면 돼요.

출처: 문서

본문

01 — 패키지 설치하기

npm으로 tailwindcss, @tailwindcss/postcss, postcss를 설치하세요.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

02 — PostCSS 설정에 Tailwind 추가하기

postcss.config.mjs 파일, 또는 프로젝트에서 PostCSS가 설정된 곳에 @tailwindcss/postcss를 추가하세요.

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

03 — Tailwind CSS 가져오기

Tailwind CSS를 가져오는 @import를 CSS 파일에 추가하세요.

CSS

@import "tailwindcss";

04 — 빌드 과정 실행하기

npm run dev 또는 package.json 파일에 설정된 명령으로 빌드 과정을 실행하세요.

Terminal

npm run dev

05 — HTML에서 Tailwind 사용하기

컴파일된 CSS가 <head>에 포함되어 있는지 확인하고(프레임워크가 알아서 처리해 줄 수도 있어요), Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

HTML

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

막혔나요? PostCSS로 Tailwind를 설정하는 것은 빌드 도구마다 조금씩 다를 수 있어요. 자신의 특정 설정에 더 구체적인 안내가 있는지 framework guides를 확인해 보세요.

프레임워크 가이드 살펴보기

PostCSS로 설치하기