Tailwind CSS home page
  1. 설치
  2. Parcel과 함께 Tailwind CSS 설치

  1. 프로젝트 생성

    아직 프로젝트를 설정하지 않았다면 새로운 Parcel 프로젝트를 생성하세요. 가장 일반적인 방법은 Parcel을 개발 의존성으로 추가하는 것입니다. 자세한 내용은 Parcel의 시작 가이드를 참고하세요.

    Terminal
    mkdir my-projectcd my-projectnpm init -ynpm install -D parcelmkdir srctouch src/index.html

  2. Tailwind CSS 설치

    tailwindcss와 그 동반 의존성을 npm으로 설치한 후, tailwind.config.js를 생성하기 위해 init 명령어를 실행하세요.

    Terminal
    npm install -D tailwindcss postcssnpx tailwindcss init

  3. PostCSS 설정

    프로젝트 루트에 .postcssrc 파일을 생성하고, tailwindcss 플러그인을 활성화하세요.

    .postcssrc
    {
  "plugins": {
    "tailwindcss": {}
  }
}

  4. 템플릿 경로 설정

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

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

  5. Tailwind 지시어 추가

    ./src/index.css 파일을 생성하고, Tailwind의 각 레이어에 대한 @tailwind 지시어를 추가하세요.

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

  6. 빌드 프로세스 시작

    npx parcel src/index.html 명령어로 빌드 프로세스를 실행하세요.

    Terminal
    npx parcel src/index.html

  7. 프로젝트에서 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="./index.css" type="text/css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>