이것은 유효성 검사를 위해 Vue.js , Tailwind CSS 및 VeeValidate을 사용하여 유효성 검사가 있는 간단한 로그인 양식을 만드는 방법에 대한 2부 중 1부입니다.

내 저장소Github에서 예제 앱을 복제할 수 있습니다.

1부: Vue.js 및 Tailwind Css 설정

이 파트에서는 ​​Vue.js 및 Tailwind Css 설정을 살펴보겠습니다.

뷰 CLI

Vue.js을 사용하여 Vue CLI 프로젝트를 생성하는 것으로 시작하지만 아직 설치하지 않은 경우 먼저 설치해야 합니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

완료되면 다음을 사용하여 버전을 확인할 수 있습니다.

vue --version

Vue.js 앱 만들기

CLI를 사용하여 기본 앱을 만들려면 다음을 실행하기만 하면 됩니다.

vue create vue-tailwind-app

사전 설정을 선택하라는 메시지가 표시됩니다. 선택하다base
이 명령은 기본 Vue.js 앱을 새 디렉토리 vue-tailwind-app에 생성합니다.

그런 다음 다음을 사용하여 디렉토리로 이동합니다.

cd vue-tailwind-app

실행

npm install && npm run serve

필요한 모든 종속 항목을 설치하고 간단한 서버를 시작합니다. 이제 http://localhost:8080/ 또는 터미널에 표시된 서버 및 포트에서 앱에 액세스할 수 있습니다.

페이지는 다음과 같아야 합니다.

종속 항목으로 Tailwind CSS 설치

이제 vue 앱이 성공적으로 시작되었으므로 프로젝트에서 tailwind 설정으로 넘어갈 수 있습니다.

우리는 먼저 실행해야합니다

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Tailwind CSS , PostCss 7 및 autoprefixer 에 필요한 종속 항목을 설치합니다.

Vue.js 및 Tailwind CSS 구성

이 작업이 완료되면 기본 디렉터리에 Tailwind 구성 파일tailwind.config.js과 PostCSS 구성 파일postcss.config.js을 생성해야 합니다. 이것은 다음을 실행하여 수행할 수 있습니다.

npx tailwindcss init -p

CSS 파일이 없는 경우 자산 폴더src/assets/css/main.css에 CSS 파일을 만들고 지시문을 사용하여 Tailwind의 기본, 구성 요소 및 유틸리티 스타일을 삽입합니다.

/*src/assets/css/main.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

위의 코드를 main.css 파일에 붙여넣습니다. IDE에서 일부 오류가 발생할 수 있지만 무시할 수 있습니다.

이제 최종 연결을 만들기 위해 main.css를 src/main.js에 추가해야 합니다. main.js 파일에서
초기 가져오기에 import './assets/css/main.css'를 추가합니다. 이제 파일은 다음과 같아야 합니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+import './assets/css/main.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Tailwind CSS 테스트

App.vue 파일에서 div를 id='nav'로 대체합니다.
~와 함께

   <nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
      <div class="flex items-center flex-shrink-0 text-white mr-6">
        <svg
          class="fill-current h-8 w-8 mr-2"
          width="54"
          height="54"
          viewBox="0 0 54 54"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
          />
        </svg>
        <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
      </div>
      <div class="block lg:hidden">
        <button
          class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white"
        >
          <svg
            class="fill-current h-3 w-3"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>
      <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div class="text-sm lg:flex-grow">
          <router-link
            to="/"
            class="block mt-4 lg:mr-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white"
            >Home</router-link
          >

          <router-link
            to="/about"
            class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white"
            >About</router-link
          >
        </div>
      </div>
    </nav>

귀하의 페이지는 이제 다음과 같아야 합니다.



짜잔! Tailwind Css를 vue.js 프로젝트에 성공적으로 연결했습니다.



이것으로 파트 1이 끝납니다. 파트 2를 확인하실 수 있습니다.
다음은 Tailwind 테마로 수행할 수 있는 몇 가지 작업에 대한 선택적 가이드입니다.

Tailwind Tweaks(선택사항)

프로덕션을 준비할 때 사용하지 않는 클래스를 제거하도록 제거 옵션을 구성하여 가장 작은 파일 크기를 얻습니다.
이렇게 하려면 tailwind.config.js 를 수정해야 합니다.

module.exports = {
purge: {
    mode:'layers',
    content:['./public/**/*.html', './src/**/*.vue']
  },
...
}

다음을 사용하여 순풍을 테마로 할 수도 있습니다.

const colors = require('tailwindcss/colors')

module.exports = {
...
 theme: {
    extend: {
      colors:{
        emerald:colors.emerald,
        gray: colors.trueGray,
        orange: colors.orange
      }
    },
  },
...
}