Parcel로 Tailwind CSS 설치하기

Parcel 프로젝트에서 Tailwind CSS 설정하기

프로젝트 생성

아직 프로젝트를 설정하지 않았다면 새로운 Parcel 프로젝트를 생성하세요. 가장 일반적인 방법은 Parcel을 개발 의존성으로 추가하는 것입니다. 이는 Parcel의 시작 가이드에 설명되어 있습니다.

터미널

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

Tailwind CSS 설치

@tailwindcss/postcss와 그에 필요한 의존성을 npm을 통해 설치하세요.

터미널

npm install tailwindcss @tailwindcss/postcss

PostCSS 설정

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

.postcssrc

{  "plugins": {    "@tailwindcss/postcss": {}  }}

Tailwind CSS 임포트

./src/index.css 파일을 생성하고 Tailwind CSS를 @import로 추가하세요.

index.css

@import "tailwindcss";

빌드 프로세스 시작

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

터미널

npx parcel src/index.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="./index.css" type="text/css" rel="stylesheet" />  </head>  <body>    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  </body></html>