🎨 통합 스타일링 환경: Tailwind CSS 모듈 설치 및 적용

---

 

애플리케이션에 기능(로직)을 추가하는 것만큼 중요한 것은 사용자 경험(UX)을 책임지는 스타일링입니다. Nuxt는 모듈 시스템을 통해 CSS 전처리기(SCSS)나 인기 있는 CSS 프레임워크인 Tailwind CSS를 매우 쉽게 통합할 수 있도록 지원합니다.

이번 실습에서는 Nuxt 공식 모듈을 사용하여 Tailwind CSS를 설치하고, 이를 활용해 기본적인 UI 요소에 스타일을 적용해 봅시다.

1. 🚀 Tailwind CSS 모듈 설치

Nuxt의 모듈 시스템은 복잡한 PostCSS 설정 없이도 Tailwind CSS를 즉시 사용할 수 있게 해줍니다.

1. 모듈 설치: 터미널에서 다음 명령어를 실행하여 공식 Tailwind CSS 모듈을 설치합니다.
    

   npm install -D @nuxtjs/tailwindcss
   

2. 모듈 등록: nuxt.config.ts 파일을 열고 modules 배열에 @nuxtjs/tailwindcss를 추가합니다.

   // nuxt.config.ts
   
   export default defineNuxtConfig({
     // ...
     modules: [
       // 새로 추가
       '@nuxtjs/tailwindcss' 
     ],
     // Tailwind CSS 관련 옵션 (기본값 사용 시 생략 가능)
     tailwindcss: {
       cssPath: '~/assets/css/tailwind.css', // 기본 경로 지정
     }
     // ...
   })
   

3. Tailwind CSS 파일 생성: Nuxt가 참조할 기본 CSS 파일을 생성합니다.
    

   
   assets/css/tailwind.css 파일을 생성하고 다음 디렉티브(Directive)를 추가합니다.

   /* assets/css/tailwind.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

   
   
4. 개발 서버 재시작: 변경된 모듈 설정을 적용하기 위해 개발 서버를 재시작합니다.

   npm run dev
   

2. 👩‍💻 실습 1: 버튼 및 카드 컴포넌트에 스타일 적용

이제 Tailwind CSS의 유틸리티 클래스(Utility Classes)를 사용하여 이전에 만들었던 기본 UI 요소에 스타일을 적용해 봅시다.

2.1. 버튼 스타일 적용

pages/login.vue 또는 다른 페이지의 버튼 요소에 스타일을 적용하여 디자인을 개선해 봅시다.

<template>
  <div>
    <button v-if="!isLoggedIn" @click="login" 
            class="px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-300">
      로그인 실행
    </button>
    <button v-else @click="logout" 
            class="px-4 py-2 bg-red-600 text-white rounded-lg shadow-md hover:bg-red-700 transition duration-300">
      로그아웃 실행
    </button>
  </div>
</template>

2.2. 카드 UI 컴포넌트 생성 및 스타일 적용

새로운 카드 컴포넌트를 만들어 Tailwind CSS로 스타일을 완성해 봅시다.

1. components/UserCard.vue 파일을 생성합니다.

   <template>
     <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition duration-300">
       <h3 class="text-xl font-bold text-gray-800 mb-2">{{ user.name }}</h3>
       <p class="text-sm text-gray-500 mb-4">{{ user.email }}</p>
       <span class="inline-block bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
         {{ user.status }}
       </span>
     </div>
   </template>
   
   <script setup>
   const props = defineProps({
     user: {
       type: Object,
       required: true,
       default: () => ({ name: 'N/A', email: 'N/A', status: 'Inactive' })
     }
   });
   </script>
   

2. pages/users.vue 또는 다른 페이지에서 이 카드를 사용해 보세요. (자동 임포트됨)

   <template>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
       <UserCard v-for="user in data" :key="user.id" :user="user" />
     </div>
   </template>
   

3. ⚙️ 추가 설정: Tailwind 설정 파일 생성 (선택 사항)

만약 Tailwind의 색상, 폰트, 간격 등을 커스터마이징 하고 싶다면, 설정 파일을 생성할 수 있습니다.

• 설정 파일 생성: 터미널에서 다음 명령어를 실행합니다.
  • 이 명령어는 프로젝트 루트에 tailwind.config.js 파일을 생성합니다. 이 파일을 수정하여 기본 디자인 시스템을 오버라이드할 수 있습니다.

    npx tailwindcss init
    

---

📝 블로그 마무리: 빠른 스타일링의 힘

이번 실습을 통해 Nuxt 모듈을 사용하여 복잡한 설정 없이 Tailwind CSS를 통합했습니다. 유틸리티 클래스를 활용하여 버튼과 카드에 스타일을 적용하면서, Tailwind가 얼마나 빠르게 UI/UX를 개선할 수 있는지 경험했습니다.