강의 목표

• Tailwind CSS의 유틸리티-우선 접근 방식을 이해하고, 이를 통해 효율적으로 스타일링하는 방법을 배웁니다.
• 미리 정의된 유틸리티 클래스를 활용해 커스텀 CSS를 최소화하고, 빠르게 UI를 구현하는 방법을 학습합니다.
• 간단한 버튼을 스타일링하면서 Tailwind CSS의 유틸리티 클래스를 실제로 적용해 봅니다.

Utility-First CSS (유틸리티-우선 접근 방식)

Utility-First CSS는 미리 정의된 작은 유틸리티 클래스들을 사용하여 HTML 요소에 스타일을 직접 적용하는 방식입니다. 각 유틸리티 클래스는 하나의 CSS 속성만 정의하며, 이를 조합하여 복잡한 스타일을 손쉽게 구현할 수 있습니다. CSS를 별도로 작성하지 않고, HTML 내에서 빠르게 스타일링할 수 있어 UI 개발을 효율적으로 할 수 있습니다.

다음은 Utility-First CSS 방식을 사용한 간단한 버튼 스타일링 예시입니다:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

이 코드는 별도의 CSS 파일 없이 Tailwind CSS의 유틸리티 클래스를 사용해 버튼을 스타일링한 예시입니다.

Tailwind CSS

Tailwind CSS는 미리 정의된 유틸리티 클래스를 HTML에서 바로 사용해 빠르게 스타일을 지정하는 방식을 취합니다. 전통적인 CSS에서는 새로운 스타일을 지정할 때마다 별도의 CSS 규칙을 작성해야 하지만, Tailwind CSS는 이를 간소화하여 반복 작업을 줄입니다.

전통적인 CSS 방식과 Tailwind CSS 방식 비교

전통적인 CSS 방식

• 새로운 스타일을 지정할 때마다 별도의 CSS 규칙을 작성.
• 클래스 이름을 직접 만들어야 하며, 사용자 정의 CSS가 필요함.

<!-- HTML -->
<button class="custom-button">Click Me</button>

<!-- CSS -->
<style>
  .custom-button {
    background-color: #1d4ed8;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s;
  }
  .custom-button:hover {
    background-color: #1e40af;
  }
</style>

Tailwind CSS 방식