Vue3 + Vite에 Tailwind CLI를 사용하여 Tailwind CSS를 도입했습니다.

호랑이 구멍 실험실의 후루가입니다.

Tailwind CSS v2.2.0에서는 Tailwind CLI가 새로 도입되었습니다.

CLI 도구를 사용하여 Vue3 + Vite 환경에 Tailwind CSS (JIT 모드)를 도입하는 부분을 소개하려고합니다.

Vue3에 폭속 Tailwind CSS를 도입하고 싶은 분의 참고가 되면, , 라고 생각합니다.

환경

macOS Big Sur

Node.js v14.15.1

이용한 라이브러리 소개

Tailwind CSS란?

유틸리티 우선 순위가 낮은 CSS 라이브러리입니다.

Bootstrap, Vuetify, ElementUI처럼 결정된 UI 대신
원래의 UI를 폭속으로 만들 수 있습니다.

구성 파일을 변경하여 Tailwind CSS의 거의 모든 것을 사용자 정의할 수 있습니다.

Tailwind CLI란 무엇입니까?

Tailwind CSS v2.2.0 에서 새로 추가된 도구입니다.

Tailwind CLI의 빌드 기능을 활용하여,
프로젝트에 Tailwind.css를 설치하고 구성하지 않고도 Tailwind.css를 빌드하고 사용할 수 있습니다.

또한 이전 postcss 명령보다 성능이 최적화 된 JIT 모드를 사용할 수 있습니다.

전제 조건

Tailwind CSS는 v2.2.0 이상이 필요합니다.

주의사항

vite에는 postcss가 내장되어 있습니다.

postcss.config.js 에 tailwindcss 가 포함되어 있는 경우, vite 의 postcss 도 tailwindcss 를 빌드 해 버려, 이중 빌드가 되기 때문에 주의! 제발.

1. Vue3 + Vite 설치

$ npm init @vitejs/app sample-application
✔ *Select a framework:* › vue
✔ *Select a variant:* › vue
$ cd sample-application
$ npm install

2. Tailwind CSS 설치

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

3. npm-run-all 설치

$ npm install -D npm-run-all

4. Tailwind CSS에 필요한 파일을 만들고 수정합니다.

4-1. tailwind.config.js를 만듭니다.

$ npx tailwindcss init

4-2. tailwind.config.js의 모드와 퍼지 설정을 변경합니다.

tailwind.config.js

+ mode: 'jit',
- purge: [],
+ purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

4-3. Taiwind CSS를 사용자 정의하기 위해 새 tailwind.css를 만듭니다.

src/assets/css/tailwind.css

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

4-4. Tailwind CLI에서 생성한 tailwind.dist.css를 로드하는 import를 추가합니다.

src/main.js

+ import "./tailwind.dist.css";

4-5. Tailwind CLI를 실행하는 스크립트로 다시 씁니다.

npm-run-all을 사용하여 dev:로 시작하는 모든 스크립트를 병렬로 실행합니다.

package.json

"scripts": {
  "dev": "npm-run-all --parallel dev:*",
  "dev:server": "vite",
  "dev:css": "tailwindcss -i src/assets/css/tailwind.css -o src/tailwind.dist.css -w",
  "build": "tailwindcss -i src/assets/css/tailwind.css -o src/tailwind.dist.css && vite build",
  "build:prod": "NODE_ENV=production npx tailwindcss -i src/
assets/css/tailwind.css -o src/tailwind.dist.css --minify &&
vite build",
  "serve": "vite preview",
  "clean": "npx clear-npx-cache"
},

clean 명령은 npx 명령의 cache 삭제용입니다.
이전 버전의 Tailwind CSS가 실행되고 오류가 발생하면 실행하십시오.

4-6. Tailwind CSS 동작 확인 Vue로 다시 씁니다.

HelloWorld.vue의 클래스를 다시 씁니다.

src/components/HelloWorld.vue

<template>
  <h1 class="bg-red-400">{{ msg }}</h1>

  <p class="bg-[#1da1f1]">
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button type="button" class="bg-yellow-500" @click="state.count++">
    count is: {{ state.count }}
  </button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script setup>
import { defineProps, reactive } from "vue";

defineProps({
  msg: String,
});

const state = reactive({ count: 0 });
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

4-7. dev 서버를 시작합니다.

폭속(1~2초 정도)으로 dev 서버가 상승합니다.

$ npm run dev
# http://localhost:3000/
# Ctrl + C で停止

4-8. 동작을 확인합니다.

아래와 같이 Hello World 화면이 표시되면 OK입니다.

5. 기존 Vue3 + Vite 프로젝트에 Tailwind CLI를 통합할 때

아래 명령을 사용하여 tailwindcss 및 vite를 업데이트하십시오.

# 既存のvue3を対応するとき
$ npm update tailwindcss # v2.2.2以降へ
$ npm update vite # v2.3.8以降へ

그런 다음 3단계부터 수행하십시오.

이미 파일을 만들거나 수정한 부분을 읽어 주십시오.

요약

Tailwind CLI를 사용하여 새로운 Vue3 프로젝트를 만들었습니다.

놀라울 정도로 폭속으로 개발 환경이 일어나 매우 편안하게 개발이 가능하므로 꼭 한번 시도해 주세요 🙏

끝까지 읽어 주셔서 감사합니다.

다른 Tailwind CSS 관련 기사

참고문헌