Tailwindcss를 Vue/Vite 프로젝트와 통합하는 방법

이 게시물에서는 Vue 프로젝트에서 Tailwindcss를 통합하고 구성하는 방법을 보여드리겠습니다! 또한 vue-cli 대신 Vite를 사용할 것입니다!

왜 테일윈드인가?

Css 프레임워크는 현재 꽤 오랫동안 사용되어 왔으며 인터넷에서 광범위하게 사용됩니다. 빠르고 보기 좋은 애플리케이션을 구축하려는 경우 매우 유용한 Bootstrap 또는 Foundation과 같은 프레임워크를 듣거나 사용해 본 적이 있을 것입니다.

이러한 유형의 css 프레임워크의 문제점은 높은 수준으로 간주된다는 것입니다. 즉, 사양에 따라 구성 요소의 스타일을 지정해야 한다는 의미입니다. 프런트 엔드를 사용자 지정하려는 경우 새 css 파일을 만들고 프레임워크가 제공하는 대부분의 클래스를 덮어써야 할 수 있기 때문에 이것은 다소 문제가 됩니다.

이 문제를 해결하기 위해 Tailwindcss는 "고도로 사용자 정의할 수 있는 낮은 수준의 CSS 프레임워크"로 구성 요소 유형을 재정의할 필요 없이 개인 스타일을 추가할 수 있도록 만들어졌습니다.

Vite 프로젝트 설정

터미널이나 명령줄에 입력하기만 하면 Vite 프로젝트를 쉽게 시작할 수 있습니다npm init vite-app . 이렇게만 해도 Vite가 얼마나 빠르고 강력한지 알 수 있습니다!



설정 후 다음 몇 가지 명령에 따라 모든 종속성을 설치하고 처음으로 프로젝트를 실행하십시오. 그리고 그게 다야! 이제 완전히 새로운 Vite 프로젝트가 생겼습니다! 즐겨 사용하는 IDE에서 지금 열고 시작하겠습니다!

Tailwind CSS 설정

이제 메인 이벤트 시간입니다! tailwind를 설치하려면 npm i tailwindcss 명령을 실행하면 됩니다. 설치 후 프로젝트에서 사용하려면 몇 가지 구성이 필요합니다!

먼저 새 css 파일을 만듭니다. 이것은 무엇이든 배치하고 이름을 지정할 수 있으므로 단순화하기 위해 내 tailwind.css라는 이름을 지정하고 프로젝트 src 디렉토리에 저장합니다. 생성 후 파일 내부에 다음을 작성합니다.

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

이렇게 하면 빌드 시간에 모든 tailwindcss 클래스가 CSS 파일에 로드됩니다!



다음으로 tailwind 및 postcss(tailwindcss는 postcss를 사용하므로)에 대한 구성 파일을 생성하여 필요한 경우 원하는 만큼 사용자 지정해야 합니다! 이렇게 하려면 npx tailwindcss init -p 를 실행하십시오. 아시다시피 tailwind.config.js 및 postcss.config.js라는 두 개의 새 파일이 프로젝트 루트 폴더에 생성되었습니다.

마지막으로 postcss.config.js 파일을 다음과 같이 변경하십시오.

module.exports = {
  plugins: [
    require("tailwindcss"), 
    require("autoprefixer")
  ],
};

그러면 tailwindcss와 autoprefixer가 postcss에 로드됩니다. Vite에는 내 postcss 구성을 *.vue 및 가져온 일반.css 파일의 모든 스타일에 자동으로 로드하는 멋진 기능도 있습니다!



마지막으로 파일에 import "./tailwind.css"를 추가하여 tailwind.css 파일을 main.js로 가져오고 모든 것이 그에 따라 작동하는지 확인합시다!

tailwindcss가 애플리케이션에서 실행 중인지 확인하기 위해 HelloWorld.vue 파일에 일부 클래스를 추가해 보겠습니다.

<template>
  <h1 class="text-red-500 bg-blue-500">{{ msg }}</h1>
  <button @click="count++" class="p-4 bg-green-600 rounded-full">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

text-red-500은 h1 색상을 연한 빨간색으로 설정하고 bg-blue-500은 단순히 파란색 배경색을 h1에 추가합니다.
또한 버튼에 몇 가지 클래스를 추가했습니다. p-4 클래스는 버튼에 모든 방향으로 패딩을 추가하고 bg-green-600은 멋진 녹색 배경을 제공합니다. 마지막으로 round-full 클래스는 버튼을 완전히 둥글게 만듭니다!



대박! 모든 것이 작동하고 이제 tailwindcss가 제공하는 놀라운 기능을 사용할 수 있습니다! Tailwind를 탐험하면서 즐거운 시간을 보내세요! 가능한 모든 클래스를 살펴보고 싶다면 해당 클래스documentation를 확인하십시오!