Vue 3 앱에 TailwindCSS를 추가하는 방법

vue3 프로젝트를 만드는 방법에는 두 가지가 있습니다. Vue-CLI 또는 Vite 사용. 둘 다 다룰 것입니다.

Vite 사용

아직 전역적으로 Vite를 설치하지 않은 경우 Vite를 설치해야 합니다. 다음 명령으로 설치할 수 있습니다.

npm install -g vite

이제 Vite를 설치했으므로 Vue3 애플리케이션을 만들어야 합니다. 다음 명령으로 만들 수 있습니다.

npm init @vitejs/app vue3-vite-tailwind-app

설치가 완료되면 새로 만든 Vue3 애플리케이션이 포함된 디렉토리로 변경하라는 지침이 제공됩니다. 해당 디렉토리에 있으면 다음 명령을 실행하여 필요한 모든 종속성을 설치할 수 있습니다.

npm install

이제 Vue3 애플리케이션에 TailwindCSS를 추가해야 합니다. Tailwind에는 autoprefixer와 postcss라는 두 가지 피어 종속성이 필요합니다.

다음 명령을 사용하여 Tailwind와 피어 종속성을 모두 설치할 수 있습니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

TailwindCSS를 사용하려면 구성 파일을 만들어야 합니다. Node.js와 함께 제공되는 npx를 사용하여 다음 명령으로 구성 파일을 생성합니다.

npx tailwindcss init -p

Vue3 프로젝트에 두 개의 새 파일이 추가된 것을 볼 수 있습니다. 두 파일은 tailwind.config.js 및 postcss.config.js입니다.

프로젝트에서 TailwindCSS를 활용하려면 애플리케이션에 로드되는 CSS 파일에 몇 줄을 추가해야 합니다. CSS 파일을 열고 다음 3줄을 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 Tailwind를 활용하여 Vue 3 애플리케이션의 스타일을 지정할 수 있습니다.

Vue CLI 사용

아직 Vue CLI를 전체적으로 설치하지 않은 경우 설치해야 합니다. 다음 명령으로 설치할 수 있습니다.

npm install -g @vue/cli

이제 Vue CLI를 설치했으므로 Vue3 애플리케이션을 만들어야 합니다. 다음 명령으로 만들 수 있습니다.

vue create vue3-cli-tailwind-app

응용 프로그램에 설치할 옵션을 선택하라는 메시지가 표시됩니다.

이제 애플리케이션이 생성되었으므로 TailwindCSS를 추가해야 합니다. 다음 명령으로 쉽게 추가할 수 있습니다.

vue add tailwind

생성하려는 Tailwind 구성 파일 유형을 선택하라는 메시지가 표시됩니다. 옵션은 다음과 같습니다.

none - 구성 파일을 만들지 않습니다. 이미 구성이 있는 경우 유용합니다(PurgeCSS를 구성해야 함).

최소(기본값) - 사용자 정의를 정의할 수 있는 최소 tailwind.config.js 파일을 생성합니다.

full - 전체 기본 구성을 포함하는 tailwind.config.js 파일을 생성합니다.

이제 Tailwind를 활용하여 Vue 3 애플리케이션의 스타일을 지정할 수 있습니다.