📅 2025-11-24

➡️ Tailwind CSS에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

---

🔎 학습 리마인드

📌 Tailwind CSS

🔗 https://tailwindcss.com/

• Tailwind는 유틸리티 클래스 기반 CSS 프레임워크로, HTML에 작은 스타일 조각(class)을 조합해 디자인을 만드는 방식
• 예)

  Tailwind 유틸리티	의미
  p-4	padding: 1rem
  text-gray-700	글자색 gray-700
  flex	display: flex
  justify-between	justify-content: space-between

💡 설치 및 설정

• 설치

  npm i tailwindcss @tailwindcss/vite
  yarn add tailwindcss @tailwindcss/vite

• 설정 파일 (vite.config.js)

  import { defineConfig } from 'vite'
  import tailwindcss from '@tailwindcss/vite'
  export default defineConfig({
    plugins: [
      tailwindcss(),
    ],
  })

• index.css
  • Tailwind v4에서는 기존 @tailwind base; @tailwind components; @tailwind utilities; 대신 아래 한 줄만 쓰면 됨

    @import 'tailwindcss';

💡 Tailwind vs. Styled-Components

Tailwind 장점

• 빠르고 직관적인 스타일링
• CSS 작성 최소화
• 디자인 시스템 일관성
• 빠른 렌더링 성능
• 파일 크기 매우 작음 (purge + JIT)

Tailwind 단점

• 클래스가 길어져 HTML이 복잡해 보일 수 있음
• 마크업에 스타일이 섞여 가독성이 떨어질 수 있음
• 커스텀 디자인이 많으면 config 커스터마이징을 많이 해줘야 함

Styled-Components 장점

• 컴포넌트 중심 구조
• 동적 스타일 편리
• 스타일 재사용 쉬움

Styled-Components 단점

• 런타임 오버헤드 → 프로젝트 커질수록 성능 저하 가능
• CSS-in-JS 특성상 빌드 파일 크기 증가
• 작은 스타일도 컴포넌트 만들어야 해서 코드량 증가

💡 예제: 다크모드

• 설정 추가

  @custom-variant dark (&:where(.dark, .dark *));

  • dark mode를 활성화하려면 dark: variant을 선언해야 함

• 예시

  <div class="bg-white dark:bg-gray-900 text-black dark:text-white">
    안녕하세요
  </div>

  <button
    onClick={() => {
      document.documentElement.classList.toggle("dark");
    }}
    className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-black dark:text-white"
  >
    🌙 모드 전환
  </button>

  • html 태그의 classList에 “dark” 를 붙여주면 모든 dark: 스타일이 바로 활성화됨

---

tailwindcss v4 달라진 점

• 🔗 https://tailwindcss.com/blog/tailwindcss-v4
• 🔗 https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%EB%9D%BC%EC%A1%8C%EB%82%98%EC%9A%94

---