[javascript] Parcel에서 Tailwind CSS를 사용하는 방법은?

22 Nov 2023

javascript

프로젝트 설정 및 설치: 우선, 새로운 프로젝트를 만들고 Parcel을 설치합니다. 예를 들어, 다음과 같은 명령어를 사용할 수 있습니다:
```
npm init -y
npm install parcel-bundler --save-dev
```
Tailwind CSS 설치: Tailwind CSS를 설치하기 위해 npm을 사용합니다. 명령어는 다음과 같습니다:
```
npm install tailwindcss --save-dev
```
Tailwind CSS 설정 파일 생성: Tailwind CSS의 기본 설정 파일인 tailwind.config.js를 생성합니다. 다음 명령어를 실행하세요:
```
npx tailwindcss init
```
이 명령어를 실행하면, 기본 설정 파일이 생성됩니다.
CSS 파일 생성: CSS 파일을 생성하고 Tailwind CSS 클래스를 사용할 준비를 합니다. 예를 들어, 다음과 같은 내용을 가진 styles.css 파일을 생성합니다:
```
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 다른 CSS 코드들을 추가할 수 있습니다 */
```
HTML 파일에 연결: HTML 파일에 생성한 CSS 파일과 JavaScript 파일을 연결합니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다:
```
<link rel="stylesheet" href="styles.css">
<script src="index.js"></script>
```
Parcel 실행: 마지막으로, Parcel을 실행하여 애플리케이션을 번들링합니다. 다음 명령어를 실행하세요:
```
npx parcel index.html
```
Parcel은 애플리케이션을 번들링하고 로컬 개발 서버를 시작합니다.

이제 Parcel에서 Tailwind CSS를 사용할 준비가 되었습니다. Tailwind CSS의 모든 기능과 클래스를 사용하여 웹 애플리케이션을 개발할 수 있습니다. 좀 더 자세한 내용은 Parcel과 Tailwind CSS의 공식 문서를 참조하세요.

참고 문서:

Parcel 공식 문서: https://parceljs.org/
Tailwind CSS 공식 문서: https://tailwindcss.com/