Tailwind CSS 시작하기 & Vite 플러그인으로 설치하기

안녕하세요~ :-)

오늘은 웹사이트 UI를 구성할 때 많은 관심을 가지게 만든 Tailwind CSS 라이브러리에 대해서 이야기해보고자 합니다.

 

Vue.js에 Tailwind CSS 설치하기

 

보통 화면을 구성하는 UI&UX 분야에 대해서는 디자이너나 퍼블리셔의 분야였을 것입니다.

이상하게끔 저 같은 경우는 옛날부터 CSS 쪽에 많은 관심이 많았습니다. 정말 한때 빠졌을 때는 퍼블리셔로 전향하고 싶다는 생각도 많이 했었죠.

 

최근에 새로운 모바일웹을 구축하려는 계획을 세웠습니다.

저 같은 경우는 다른 작업보다 사이트 화면 구성하는 작업을 먼저 하곤 하는데요.

이번에는 부트스트랩 같은 CSS 프레임워크로 화면을 구성할까, 처음부터 끝까지 CSS를 구성하면서 작업을 할까, 고민하다가 이전에 Tailwind CSS를 봤던 기억이 있었고, CSS3 이후에 CSS 관련 공부를 게을러했던 점을 감안하여 Tailwind CSS를 적용해서 개발하기로 결정하였습니다.

 

그렇다면 Tailwind CSS가 무엇이며, Vue.js 프로젝트에 적용하는 방법에 대해서 알아보겠습니다.

 

Tailwind CSS란?

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 클래스 기반으로 스타일 적용하는 방식입니다.

특징

1. 유틸리티 클래스 기반

• text-xl, bg-blue-500, flex, p-4 같은 짧고 직관적인 클래스 이름을 사용하여 스타일을 적용합니다.
• CSS를 직접 작성하지 않아도 다양한 스타일을 쉽게 조합할 수 있습니다.

2. 반응형 디자인 지원

• sm: , md: , lg: 등의 접두사를 붙이면 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.
• 예: md:text-lg, lg:text-xl → 중간 크기 화면에서는 text-lg, 큰 화면에서는 text-xl 적용

3. 컴포넌트 스타일링에 유용

• 특정 컴포넌트에 필요한 스타일만 적용할 수 있어, CSS의 전역 오염(global scope 문제)을 줄일 수 있습니다.

4. JIT(Just-In-Time) 컴파일 지원

• 사용된 클래스만 포함하여 최적화된 CSS 파일을 생성하므로, 성능이 뛰어납니다.

예제코드

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

 

Tailwind CSS 설치하기

Vue.js 프로젝트에 Tailwind CSS를 설치해 보도록 하겠습니다.

 

1. Tailwind CSS 설치

• npm을 통해 tailwindcss, @tailwindcss/vite를 설치합니다.

npm install tailwindcss @tailwindcss/vite

npm을 통한 tailwindcss 설치

 

2. Vite 플러그인 구성

• vite.config.js 파일에 @tailwindcss/vite 플러그인을 구성합니다.
• import tailwindcss from '@tailwindcss/vite' 를 추가합니다.
• plugins : 배열에 tailwindcss() 를 추가합니다.

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'


// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

 

3. CSS 파일에 tailwindcss 가져오기

• style.css 파일을 추가하고, tailwindcss 를 import 합니다.

@import "tailwindcss";

 

4. main.js 에 CSS 가져오기

• main.js 파일을 열어 위에서 추가한 style.css 를 가져옵니다.

import './assets/style.css'


import { createApp } from 'vue'
import App from './App.vue'

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

 

5. App.vue 파일에 Tailwind CSS 를 이용해 콘텐츠에 스타일을 지정합니다.

<template>
	<div class="p-4">
		<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
			클릭하세요
		</button>
	</div>
</template>

 

6. 빌드 후 확인하기

• npm run dev 명령어로 빌드 프로세스를 실행 후 결과를 확인합니다.

Tailwind CSS 적용한 버튼

 

마무리

오늘은 간단하게 Vue.js 프로젝트에 Tailwind CSS 를 설치하고 적용하는 아주 간단한 예제에 대해서 확인해보았습니다.

Tailwind CSS를 이용해서 UI를 구성할때 유틸리티 클래스 기반으로 모든 CSS 클래스를 구성해 놓았기에 빠르게 스타일을 할 수 있습니다. 실제로 모바일 웹사이트를 구축할때 사용해봤을때 엄청 빠르게 화면을 구성할 수 있었습니다.

 

하지만, 어느 정도 CSS 요소에 대한 이해가 필요해 보입니다.

앞으로는 기존에 자주 사용하고 있는 모바일앱의 화면을 Tailwind CSS로 구성하는 사례들에 대해서 작성을 해보도록 하겠습니다.

 

감사합니다.