[CSS] Tailwind CSS

 

 

Tailwind CSS

Tailwind CSS는 유틸리티 우선(utility-first) 접근 방식의 CSS 프레임워크다. 미리 정의된 클래스들을 조합하여 스타일을 구성하는 방식으로, 보다 빠르고 유연한 웹 개발을 가능하게 한다.

 

환경 세팅

# npm으로 설치
npm install -D tailwindcss
npx tailwindcss init

# PostCSS 설정
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

핵심개념

유틸리티 클래스

<!-- 기존 CSS 방식 -->
<div class="card">
  <h2 class="title">제목</h2>
</div>

<style>
.card {
  padding: 1rem;
  margin: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}
</style>

<!-- Tailwind 방식 -->
<div class="p-4 m-2 rounded shadow-md">
  <h2 class="text-xl font-bold text-gray-800">제목</h2>
</div>

반응형 디자인

<!-- 모바일: 12px, 태블릿: 14px, 데스크톱: 16px -->
<p class="text-xs md:text-sm lg:text-base">
  반응형 텍스트
</p>

<!-- 모바일: 스택, 데스크톱: 그리드 -->
<div class="flex flex-col lg:flex-row gap-4">
  <div class="w-full lg:w-1/3">항목 1</div>
  <div class="w-full lg:w-1/3">항목 2</div>
  <div class="w-full lg:w-1/3">항목 3</div>
</div>

상태 변형

<!-- 호버, 포커스 등의 상태 -->
<button class="bg-blue-500 hover:bg-blue-700 
               text-white font-bold py-2 px-4 rounded
               focus:outline-none focus:shadow-outline">
  버튼
</button>

<!-- 다크 모드 -->
<div class="bg-white dark:bg-gray-800 
            text-gray-900 dark:text-white">
  다크 모드 지원 콘텐츠
</div>

커스텀 설정

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#FF0000',
      },
      spacing: {
        '128': '32rem',
      },
      fontSize: {
        'mega': '4rem',
      }
    }
  }
}

 

 

장점과 단점

빠른 개발속도와 일관된 디자인 시스템을 가지고 있으며 CSS파일의 크기가 작다. 반응형 디자인을 하기 쉽다. 그러나 긴 클래스명과 HTML 가독성이 저하되는 문제가 있다. 하지만 웹 개발에 효율적인 도구이기 때문에 알고 있다면 생산성이 향상되는 장점이 있다.