[TIL] Vue + Tailwind CSS

Tailwind

기존의 CSS 프레임워크 - Vuetify, Buefy 등은 UI를 구성하는 데 필요한 컴포넌트들이 미리 정의되어 있어 개발 시 해당 컴포넌트들을 사용해 쉽게 디자인을 입힐 수 있다.

Tailwind는 사전에 CSS들이 정의되어 있다는 점이 기존의 프레임워크들과 같다고 볼 수 있지만, 컴포넌트 형태가 아닌 클래스 형태로 정의되어 있다는 것이 다른 점이다
즉, HTML 문서에 클래스를 정의하고 원하는 대로 가져와서 UI를 구성할 수 있다.

Tailwind CSS 설치

1. Vue CLI 설치
   npm install -g @vue/cli

2. Vue 프로젝트 설치
   vue create tailwindcss-vue

3. Vue 프로젝트가 있다면 Tailwind CSS 설치
   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

configuration file 생성

Tailwind, postcss의 설정 파일을 생성해준다.
npx tailwindcss init -p

최적화 하기

Tailwind CSS 의 용량은 상대적으로 큰 편에 속한다. 용량을 가볍게 만들어주기 위해 최적화 과정을 거친다.
./tailwind.config.js 파일 내, purge 부분을 다음과 같이 변경해야 한다.

purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

CSS 파일 생성

.src 경로 밑에 Tailwind CSS 를 import 하기 위한 css 파일을 생성한다.

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 파일 적용

./src/main.js에 만들어 둔 css 파일을 적용시킨다.

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

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