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

This article was first posted on devjavu.space

Tailwind CSS은 블록에서 가장 새롭고 멋진 아이들 중 하나입니다. 유틸리티 라이브러리인 Tailwind를 사용하면 UI 구성요소를 쉽게 빌드할 수 있습니다. 다음은 Vue 3 프로젝트에서 순풍 설정에 대한 빠른 가이드입니다.

Psst! There’s an official walkthrough in the Tailwind documentation, here.

먼저 vue-cli을 사용하여 Vue 3 프로젝트를 생성합니다.

vue create my-awesome-app

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

cd my-awesome-app

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

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

또는 원사 사용:

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

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

> Error: PostCSS plugin tailwindcss requires 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 👋🏼
    </div>
  </div>
</template>

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

다음과 같은 결과를 얻게 됩니다.



official documentation에서 Tailwind의 모든 클래스와 옵션을 찾을 수 있습니다.

이 연습은 official docs에서도 간소화됩니다.


건배 ☕️