Tailwind CSS home page
  1. 시작하기
  2. PostCSS를 사용하여 Tailwind CSS 설치

설치

PostCSS 플러그인으로 Tailwind CSS 설치

Tailwind CSS를 PostCSS 플러그인으로 설치하면 webpack, Rollup, Vite, Parcel과 같은 빌드 도구와 가장 원활하게 통합할 수 있습니다.

  1. Tailwind CSS 설치

    tailwindcss와 필요한 의존성을 npm으로 설치하고, tailwind.config.js 파일을 생성하세요.

    Terminal
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init

  2. PostCSS 설정에 Tailwind 추가

    tailwindcss와 autoprefixer를 postcss.config.js 파일에 추가하세요. 프로젝트에서 PostCSS가 설정된 위치에 추가하면 됩니다.

    postcss.config.js
    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

  3. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

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

  4. CSS에 Tailwind 지시문 추가

    Tailwind의 각 레이어에 대한 @tailwind 지시문을 메인 CSS 파일에 추가하세요.

    main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 빌드 프로세스 시작

    npm run dev 또는 package.json 파일에 설정된 명령어로 빌드 프로세스를 실행하세요.

    Terminal
    npm run dev

  6. HTML에서 Tailwind 사용 시작

    컴파일된 CSS가 <head>에 포함되어 있는지 확인하세요 (프레임워크가 이를 처리할 수 있음). 그런 다음 Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

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

문제가 있나요? PostCSS와 함께 Tailwind를 설정하는 것은 빌드 도구마다 조금씩 다를 수 있습니다. 특정 설정에 대한 더 자세한 지침이 있는지 프레임워크 가이드를 확인하세요.프레임워크 가이드 살펴보기

다음에 읽을 내용

Tailwind CSS가 전통적인 CSS 작성과 다른 핵심 개념들을 알아보세요.

  • 유틸리티 퍼스트 원칙

    Using a utility-first workflow to build complex components from a constrained set of primitive utilities.

  • 반응형 디자인

    Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.

  • Hover, Focus & Other States

    Style elements in interactive states like hover, focus, and more using conditional modifiers.

  • 다크 모드

    Optimize your site for 다크 모드 directly in your HTML using the 다크 모드 modifier.

  • Reusing Styles

    Manage duplication and keep your projects maintainable by creating reusable abstractions.

  • Customizing the Framework

    Customize the framework to match your brand and extend it with your own custom styles.