Tailwind CSS home page
  1. 시작하기
  2. 설치

설치

Tailwind CLI 설치

Tailwind CSS를 처음부터 빠르게 시작하는 가장 간단하고 빠른 방법은 Tailwind CLI 도구를 사용하는 것입니다. Node.js를 설치하지 않고 사용하려면 독립 실행형 실행 파일로도 사용할 수 있습니다.

  1. Tailwind CSS 설치

    npm을 통해 tailwindcss를 설치하고 tailwind.config.js 파일을 생성하세요.

    터미널
    npm install -D tailwindcssnpx tailwindcss init

  2. 템플릿 경로 설정

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

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

  3. Tailwind 지시어를 CSS에 추가

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

    src/input.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. Tailwind CLI 빌드 프로세스 시작

    템플릿 파일에서 클래스를 스캔하고 CSS를 빌드하기 위해 CLI 도구를 실행하세요.

    터미널
    npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

  5. HTML에서 Tailwind 사용 시작

    컴파일된 CSS 파일을 <head>에 추가하고 Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

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

다음에 읽을 내용

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.