작성자 : 정혜영, 이윤서

---

🎨 Tailwind CSS

• Tailwind CSS는 utility-first 스타일링 방식의 프레임워크입니다.
• 많은 CSS 클래스 이름을 조합해서 스타일을 적용합니다.
• 하나의 역할(기능)만 가진 아주 작은 CSS 클래스들이 엄청 많이 미리 정의합니다.
• 커스텀으로 만들어서 사용도 가능합니다.

❗ 특징

Utility-First Framework

• 클래스 이름 자체가 스타일을 의미합니다.
• 예) bg-blue-500, text-center, p-4

설정 및 커스터마이징

• tailwind.config.js 파일을 통해 색상, 여백, 폰트 등의 테마를 자유롭게 설정 가능합니다.

재사용 가능한 클래스

• 특정 스타일 조합을 클래스 이름으로 재사용 가능합니다.

디자인 일관성

• 미리 정의된 클래스를 활용해 프로젝트 전반에 걸쳐 디자인을 통일시킬 수 있습니다.

JSX와의 호환성

• React 등 컴포넌트 기반 프레임워크에서 JSX와 자연스럽게 통합됩니다.

---

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'my-brand': '#fe6600', // 내 브랜드 전용 컬러 추가!
      },
      fontFamily: {
        logo: ['Montserrat', 'sans-serif'], // 로고에 쓸 폰트 추가
      },
      spacing: {
        72: '18rem', // 새로운 간격값 추가
      },
    },
  },
};
// => bg-my-brand, font-logo, p-72로 바로 사용 가능