Vue 3에서 Tailwind CSS를 설정하는 방법

Tailwind CSS는 블록에서 가장 최신의 멋진 유틸리티 라이브러리 중 하나이며 이를 통해 UI 구성 요소를 쉽게 빌드할 수 있습니다. 다음은 Vue 3 프로젝트에서 Tailwind를 설정하는 방법에 대한 빠른 가이드입니다.

Tailwind CSS는 최초의 유틸리티 우선 CSS 라이브러리는 아니지만 현재로서는 개발자들 사이에서 가장 인기를 얻고 있다고 해도 과언이 아닙니다.

Tailwind 설치는 프로젝트의 프레임워크(React, Nuxt.js, Vue.js, Next.js, Gatsby, Laravel)에 따라 다르므로 상당히 다양한 프레임워크에서 사용할 수 있으므로 더 멋집니다!.

새로운 Vue 3 애플리케이션에서 tailwind를 구성하는 방법을 보여주는 빠른 자습서입니다.

새 Vue 앱 만들기

npm이 설치되어 있다고 가정하면 vue cli도 설치되어 있는지 확인하십시오.

npm install -g @vue/cli

다음으로 vue cli 명령을 사용하여 새 Vue 프로젝트를 만듭니다.

vue create vue3-tailwind

프로젝트 디렉터리로 이동합니다.

cd vue3-tailwind

Vue 3에서 Tailwind CSS 설정

다음으로 tailwind와 관련 종속 항목(PostCSS 및 auto-prefixer)을 설치해야 합니다.

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

또는 원사 사용:

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

참고: 이 오류가 발생한 경우:

오류: PostCSS 플러그인 tailwindcss에는 PostCSS 8이 필요합니다.
PostCSS 7을 지원하는 다른 빌드의 tailwind를 설치해야 합니다.

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

Tailwind 및 게시 CSS 구성 파일을 생성합니다.

npx tailwindcss init -p

이렇게 하면 루트 디렉터리에 tailwind.config.js 및 postcss.config.js라는 두 개의 파일이 생성됩니다. Tailwind 구성 파일은 앱에 대한 사용자 지정 및 테마를 추가하는 위치입니다. 페이지와 구성 요소를 검색할 경로를 Tailwind에 알려주는 곳이기도 합니다. 다음과 같이 보입니다.

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

이러한 각 속성에 대해서는 설명하지 않겠습니다. 그러나 구성 요소 및 페이지에 대한 경로를 포함하도록 "purge"속성을 업데이트해야 합니다.

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

다음으로 "styles"라는 폴더를 만들고 해당 폴더 내에 항목 CSS 파일(app.css)을 만듭니다.

mkdir src/styles && touch src/styles/app.css

항목 CSS 파일 내에서 @tailwind 지시문을 사용하여 Tailwind의 스타일을 가져옵니다.

/* ./src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

마지막으로 항목 CSS 파일을 항목 Javascript 파일(main.js)로 가져옵니다.

import { createApp } from 'vue';
import App from './App.vue';
import './styles/app.css'; // Here

createApp(App).mount('#app');

서버를 가동하고 Vue 3 애플리케이션에서 Tailwind의 장점을 사용하십시오. 다음과 같이 App.vue 구성 요소를 업데이트해 보십시오.

<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello Vue 3 + Tailwind CSS
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

마지막 단계에서 다음 명령을 실행하여 애플리케이션을 시작합니다.

npm run serve

이 기사를 읽어 주셔서 감사합니다.