Tailwind CSS Academy · 강의

Tailwind와 기존 CSS 비교

유틸리티 우선 스타일링을 일반 CSS 및 BEM으로 작성하는 방식과 비교하고, 각 접근 방식이 효과적인 상황을 배웁니다.

레슨 4/413개 단계

Tailwind와 기존 CSS 비교은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

The Old Way: Semantic CSS

The old way is semantic CSS: descriptive class names like .navbar or .card in a separate file, meant to describe purpose. Methods like BEM grew from this.

/* Traditional CSS */
.hero-title {
  font-size: 3rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

<h1 class="hero-title">Build Something Great</h1>

What Is BEM?

BEM means Block, Element, Modifier: a Block like .card, an Element like .card__title, and a Modifier like .card--featured. Clear, but it takes discipline.

<!-- BEM naming convention -->
<div class="card card--featured">
  <img class="card__image" src="thumb.jpg" alt="" />
  <h2 class="card__title">Featured Post</h2>
  <p class="card__description">A short summary...</p>
  <a class="card__link card__link--primary" href="#">Read More</a>
</div>

The Same Card in Tailwind

Here is that same card in Tailwind. No CSS file at all — every choice shows in the HTML: rounded-xl shadow-md for shape, text-xl font-bold for the title.

<!-- Tailwind equivalent -->
<div class="rounded-xl shadow-md overflow-hidden bg-white border border-indigo-200">
  <img class="w-full h-48 object-cover" src="thumb.jpg" alt="" />
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900 mb-2">Featured Post</h2>
    <p class="text-gray-500 text-sm mb-4">A short summary...</p>
    <a class="text-indigo-600 font-semibold hover:underline" href="#">Read More</a>
  </div>
</div>

The Specificity Problem in Traditional CSS

Traditional CSS has a specificity headache: rules fight over which wins, leading to !important everywhere and brittle code. Tailwind utilities stay predictable.

/* Specificity conflict example */
.sidebar .card .card__title { color: red; }    /* specificity: 0,3,0 */
.featured-section .card__title { color: blue; } /* specificity: 0,2,0 */

/* Which color wins? Depends on file order AND specificity */
/* This becomes unmanageable at scale */

CSS File Growth Over Time

Plain CSS files grow forever because nobody dares delete old rules. Tailwind strips unused utilities at build time, so your CSS never piles up dead weight.

Switching Between Files

With classic CSS you keep switching between HTML and CSS for every tweak. Tailwind keeps you in the HTML, which speeds up your workflow a lot.

<!-- With Tailwind: no CSS file to open -->
<button class="py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600">
  Submit
</button>

<!-- With traditional CSS: go find/create .submit-button in your CSS file -->
<button class="submit-button">Submit</button>

When Traditional CSS Still Wins

Sometimes traditional CSS still wins: styling third-party HTML you cannot edit, complex keyframe animations, or a public stylesheet for other developers.

/* Complex animation: better in CSS than utility classes */
@keyframes wave {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.wave-animation {
  animation: wave 1s ease-in-out infinite;
}

Consistency: Scales vs Freeform Values

Tailwind quietly enforces consistency. Instead of hand-typed 13px or 17px padding, you pick from a 4px scale, so designs stay harmonious by default.

<!-- Tailwind spacing: always consistent multiples -->
<div class="p-4">  <!-- 16px -->
<div class="p-6">  <!-- 24px -->
<div class="p-8">  <!-- 32px -->

<!-- vs Traditional CSS: any value is valid -->
div { padding: 13px; } /* Why 13? Nobody knows. */

Performance Comparison

Will all those classes hurt performance? No — repeated classes compress brilliantly, and Tailwind CSS is usually far smaller than an unoptimized stylesheet.

Team Onboarding: Tailwind vs CSS

Onboarding is easier too. Anyone who knows the Tailwind docs can read and edit any component, since class names mean the same thing in every project.

Choosing the Right Approach

So which to choose? Tailwind for app UI and design systems you control; traditional CSS for theming or CMS HTML. Many projects happily use both.

Quick Check

Quick check! Compare Tailwind and CSS in your head. ⚖️

인터랙티브 레슨에서 답해보세요

Lesson Recap

Nice work! Traditional CSS names things in files while Tailwind composes in HTML, BEM does not fix file growth, and the scale enforces consistency. Next: typography.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“Tailwind와 기존 CSS 비교” 강의는 무료인가요?

네 — “Tailwind와 기존 CSS 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Tailwind와 기존 CSS 비교”에서 뭘 배우나요?

유틸리티 우선 스타일링을 일반 CSS 및 BEM으로 작성하는 방식과 비교하고, 각 접근 방식이 효과적인 상황을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Tailwind와 기존 CSS 비교” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기