Vue.js에 Tailwind CSS를 설치하는 방법

Tailwind CSS는 최초의 유틸리티 우선 CSS 프레임워크는 아니지만 개발자들 사이에서 가장 인기 있는 프레임워크라고 해도 과언이 아닙니다. 이 프레임워크를 사용하는 것은 HTML 파일에만 국한되지 않습니다. 다른 프로그래밍 프레임워크와 함께 사용할 수 있습니다.

이 tailwind 튜토리얼에서는 Vue.js에서 Tailwind CSS를 사용하는 방법을 살펴보겠습니다. Vue.js는 인기 있는 프런트 엔드 JavaScript 프레임워크입니다. 개발자는 이 프레임워크를 사용하여 프로젝트를 위한 멋진 웹 디자인을 만들 수 있습니다.

내용의 테이블

전제 조건

vue.js 프로젝트 생성 중

Tailwind CSS 설치

tailwind 파일 구성

CSS에 Tailwind 포함

프로젝트 구축

결론

전제 조건

따라 하려면 다음 요구 사항이 필요합니다.

Vue.js에 대한 지식

npm에 대한 지식

기본 CSS 지식

기본 JavaScript 지식

이 tailwind CSS 튜토리얼이 끝나면 VUE.js에 Tailwind CSS를 설치하고 간단한 모달을 만들 수 있습니다. tailwind CSS VUE.js 모달은 아래 이미지와 같습니다.

Vue.js 프로젝트 생성

Vue.js 프로젝트를 만드는 것은 쉽습니다. 아직 프로젝트를 생성하지 않은 경우. 터미널을 열고 다음 명령을 작성하면 됩니다.

암호:

npm init vite my-project

이 명령은 VITE 설치를 시작합니다. 설치할 프레임워크를 선택하라는 메시지가 표시됩니다. 제시된 옵션 중에서 VUE를 선택합니다.



설치할 프레임워크를 선택했으면 아래 이미지와 같이 사용할 변형을 선택할 수 있습니다.



원하는 변형을 선택하면 전체 프레임워크가 설치됩니다. 터미널에서 아래 이미지를 볼 수 있습니다.



다음 단계는 npm을 사용하여 종속성을 설치하는 것입니다.

암호:

npm install.

Tailwind CSS 설치

이 시점에서 우리는 Vue 프로젝트에 Tailwind CSS를 설치할 것입니다.

암호:

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

tailwind 파일 구성

이제 tailwind가 Vue 프로젝트와 함께 작동하도록 일부 파일을 구성해야 합니다. 먼저 터미널에서 다음 코드를 실행하여 tailwind.config.js 및 postcss.config.js 파일을 생성합니다.

암호:

npx tailwindcss init –p.

위의 명령은 두 개의 파일을 생성합니다. 첫 번째 파일‘tailwind.config.js은 아래 코드와 같습니다.

암호:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

두 번째 파일은 postcss.config.js입니다. 이미 'tailwindcss' 및 'autoprefixer'가 구성되어 있으며 아래 코드와 같습니다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Vue.js 프로젝트에 Tailwind 포함

이 단계에서는 Vue 프로젝트 CSS 파일에 Tailwind CSS를 포함할 것입니다. src 폴더 안에 CSS 파일을 만들고 이름을 index.css 로 지정합니다. 원하는대로 부를 수 있습니다. 이제 내부에 다음 코드를 작성할 것입니다.

암호:

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

이제 파일을 저장할 수 있습니다. Tailwind는 구성 디자인 시스템을 기반으로 스타일을 생성하기 위해 만든 지시문을 교체합니다.

이제 CSS를 'src/your main.js' 파일로 가져왔는지 확인할 수 있습니다.

암호:

import { createApp } from 'vue';

import App from './App.vue';

import './index.css';

프로젝트 빌드

이 단계에서는 이제 Tailwind CSS가 vue.js 파일에서 작동하고 있음을 보여주기 위해 tailwind Vue 모달을 빌드할 것입니다. 다음은 App.vue 파일에 작성할 코드입니다.

암호:

<template>
  <div>
    <button
      class="bg-purple-500 text-white active:bg-pink-600 font-bold uppercase 
    text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none 
    focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
      type="button"
      v-on:click="toggleModal()"
    >
      Open regular modal
    </button>
    <div
      v-if="showModal"
      class="overflow-x-hidden overflow-y-auto fixed 
    inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
    >
      <div class="relative w-auto my-6 mx-auto max-w-3xl">
        <!--content-->
        <div
          class="border-0 rounded-lg shadow-lg relative flex flex-col w-full
         bg-white outline-none focus:outline-none"
        >
          <!--header-->
          <div
            class="flex items-start justify-between p-5 border-b 
          border-solid border-blueGray-200 rounded-t"
          >
            <h3 class="text-3xl font-semibold">
              Modal Title
            </h3>
            <button
              class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right
            text-3xl leading-none font-semibold outline-none focus:outline-none"
              v-on:click="toggleModal()"
            >
              <span
                class="bg-transparent text-black opacity-5 
              h-6 w-6 text-2xl block outline-none focus:outline-none"
              >
                ×
              </span>
            </button>
          </div>
          <!--body-->
          <div class="relative p-6 flex-auto">
            <p class="my-4 text-blueGray-500 text-lg leading-relaxed">
              "if you don't have time to do it right , you must have time to do it over
            </p>
          </div>
          <!--footer-->
          <div
            class="flex items-center justify-end p-6 border-t border-solid
           border-blueGray-200 rounded-b"
          >
            <button
              class="text-purple-500 bg-transparent border border-solid border-purple-500
            hover:bg-purple-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6
            py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear
            transition-all duration-150"
              type="button"
              v-on:click="toggleModal()"
            >
              Close
            </button>
            <button
              class="text-purple-500 background-transparent font-bold uppercase
             px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear
              transition-all duration-150"
              type="button"
              v-on:click="toggleModal()"
            >
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
</template>

<script>
  export default {
    name: 'regular-modal',
    data() {
      return {
        showModal: false,
      };
    },
    methods: {
      toggleModal: function() {
        this.showModal = !this.showModal;
      },
    },
  };
</script>

그런 다음 이제 npm run dev를 실행할 수 있습니다. 그러면 우리 웹 페이지는 아래 이미지와 같이 보일 것입니다.

결론

vue.js 프로젝트에 tailwind CSS를 성공적으로 설치했습니다. 또한 Tailwind CSS Vue가 잘 작동하는지 보여주기 위해 Tailwind CSS로 모달을 만들었습니다.