Back
Featured image of post [Vue] Vue에 Tailwind CSS 적용하기
Frontend

[Vue] Vue에 Tailwind CSS 적용하기

CSS 프레임워크 TailWind 소개와 Vue에 연동해보기

tailwind?

tailwind는 CSS 프레임워크이다. 사용방법은 공식 문서를 보면 잘 나와있다. 기본적으로 태그 내에 inline형태로 클래스 형태로 스타일을 입히는 방식이다. 기존 css로 작업했을 때와 tailwind를 사용했을 때를 비교해 보자면 다음과 같다.

  1. 브라우징 최적화

    autoprefixer를 내장해서 사용하고 있기 때문에, 브라우저별로 상이한 스타일 문제로 골머리를 앓지 않아도 된다.

  2. 클래스 기반 스타일 tailwind 기본 사용법은 태그 내에 클래스로 스타일을 입히는 방식이다. 예를 들어 특정 태그에 배경색을 입히려면 아래와 같이 작성한다. 클래스 명도 이해하기 쉽도록 구성되어 있기 때문에 대충 이름만 봐도 어떠한 역할인지는 파악이 된다.

    <p class="bg-green-300">light green.</p>

    하지만 매번 태그에 중복된 스타일을 입히게 되면 나중엔 태그 클래스가 너무 길어져 가독성이 떨어지는 건 단점이 되기도 한다.

  3. 편리한 커스터마이징

    tailwind는 맞춤형 사용자 인터페이스를 지향하는 프레임워크이기 때문에, 사용자가 커스텀하기 쉽게 구성되어있다.

    tailwind.config.js파일을 생성해 사용자가 원하는대로 다시 구성할 수 있다.

    //사용자 지정 breack point
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px'
    }
  }
};

tailwindCSS 설치

먼저 tailwindcss 의존한 라이브러리들을 설치한다. 참고로 최소 node 환경은 12.13.0이상이다.
vue 프로젝트를 먼저 생성하고, tailwind-css를 설치한다.

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

공식사이트에서는 아래와 같이 모든 종속 라이브러리들을 최신 버전으로 설치하라고 가이드되어 있지만 postcss 버전이 문제가 되는 거같아 아래와 같이 설치하였더니 오류가 해결되었다.

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

tailwind 설정 파일을 생성한다. 아래 명령어를 입력하면 프로젝트 루트에 tailwind.config.js파일이 만들어지는데, 해당 파일에서 사용자 입맛에 맞게 여러 스타일을 초기화할 수 있다.

자세한 내용은 configuration 공식 문서 참고!

npx tailwindcss init -p

공식 가이드에 따르면, 사용하지 않는 스타일 용량 최적화를 위해 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: []
};

이제 설정한 tailwind css파일을 전역으로 import 해주면 된다.
main.js에 import해주면 사용준비는 끝, 이제 문서를 보면서 스타일링을 해주면 된다.

import { createApp } from 'vue';
import 'tailwindcss/tailwind.css';
import App from './App.vue';

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

tailwind IntelliSense

혹시 vscode로 vue를 개발하는 상황이라면 Tailwind CSS 인텔리센스 익스텐션을 적극 추천!!
클래스를 사용할 때 마다 자동완성이 지원되서 작성 시간을 확 줄일 수 있다.
색상같은 경우도 바로 눈으로 확인할 수 있어 확실히 편하다.

tw-intellisense

tailwind Components

tailwind components는 커뮤니티 형식으로 자신이 만든 여러 컴포넌트 CSS를 공유하는 사이트이다. button, modal 등 컴포넌트 종류에 따라 퀄리티 있는 여러 컴포넌트가 공개되어 있다. 필요에 따라 단순히 템플릿에 가져다 붙여도 사용해도 좋고, 아직 tailwind 사용법에 대한 감이 잘 오지 않는다면 참고해서 클론 해보는 것도 좋은 방법인 것 같다.

tw-components

© 2020 - 2023 Jiny