Tailwind CSS CDN 설치 (v4 최신 가이드) 🚀
Tailwind CSS의 명성은 익히 들었지만, 막상 시작하려니 tailwindcss 패키지 설치부터 postcss, autoprefixer 같은 친구들, 그리고 tailwind.config.js 설정까지… 초반 설정의 벽에 막막함을 느끼셨나요? 😥
걱정 마세요! Tailwind CSS에는 CDN Import로, NextJS나 Vite 같이 복잡한 초기 설정 없이 HTML 파일에 스크립트 한 줄만(사실 두줄) 추가하면 바로 Tailwind의 강력한 유틸리티 클래스들을 경험해 볼 수 있습니다.
특히 “우리 팀에 Tailwind CSS를 도입해볼까?” 고민 중이거나, “일단 한번 써보고 싶은데…” 하는 개인 개발자분들께 이보다 더 좋은 방법은 없을 거예요!
✨ Tailwind CSS v4 기준, CDN 사용법을 알아봅시다! ✨
1. Tailwind CDN 스크립트, HTML에 추가하기 📝
가장 먼저 할 일은 HTML 파일의 <head> 태그 안에 Play CDN 스크립트를 추가하는 것입니다. 최신 v4 버전을 사용하려면 다음 스크립트를 사용하세요.
핵심 코드 한줄은 이겁니다
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 👇 여기가 중요! Tailwind CSS v4 Play CDN 스크립트 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline text-center text-blue-600 p-8">
Hello Tailwind CSS with Play CDN!
</h1>
<div class="m-6 rounded-lg bg-white p-6 shadow-md">
<h2 class="text-2xl font-medium text-purple-700">Tailwind Play CDN 체험</h2>
<p class="text-gray-600 mt-2">
Play CDN을 사용하면 이렇게 쉽고 빠르게 Tailwind를 체험해볼 수 있습니다.
</p>
<button class="mt-4 px-4 py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-600 transition-colors">
멋진 버튼!
</button>
</div>
</body>
</html>
정말 간단하죠? 이제 바로 HTML 태그에 Tailwind 유틸리티 클래스를 적용하며 스타일링을 시작할 수 있습니다.
2. Tailwind 설정 커스터마이징하기 (선택 사항) 🎨
실제 프로젝트에서는 tailwind.config.js 파일을 통해 테마(색상, 폰트 등)를 커스터마이징합니다. Play CDN에서도 이와 유사하게 설정을 변경할 수 있습니다! <script> 태그 안에 tailwind.config 전역 객체를 정의하면 됩니다.
예를 들어, ‘brand-red’라는 커스텀 색상을 추가해볼까요?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script>
tailwind.config = {
theme: {
extend: { // 기존 테마를 확장합니다.
colors: {
'brand-red': '#e63946', // 'brand-red' 라는 이름으로 커스텀 색상 추가
'clifford': '#da373d', // 공식 문서 예시 색상
},
fontFamily: {
'sans': ['Inter', 'sans-serif'], // 기본 sans-serif 폰트 변경
}
},
},
}
</script>
</head>
<body>
<h1 class="text-3xl font-bold text-brand-red underline">
Custom Color!
</h1>
<p class="font-sans text-clifford">This text uses Clifford color.</p>
</body>
3. 나만의 CSS 클래스 추가하기 (선택 사항) 🧩
Tailwind의 유틸리티만으로 부족하거나, 재사용 가능한 컴포넌트 스타일을 만들고 싶다면 @layer 지시문을 사용할 수 있습니다. <style> 태그의 type 속성을 text/tailwindcss로 설정하고 그 안에 CSS 코드를 작성하면 됩니다.
v4에서는 @theme 지시어를 사용하여 테마 값을 CSS 변수처럼 활용할 수도 있습니다.
특이하게 기억해야할 점은 style 태그의 type 이름 입니다
꼭 기억해주세요 !
<style type="text/tailwindcss">
<head>
<!-- ... CDN 스크립트 및 config 설정 ... -->
<style type="text/tailwindcss">
@theme {
--color-primary: theme(colors.blue.500); /* 테마 색상을 CSS 변수로 */
--color-secondary: theme(colors.pink.500);
}
@layer components { /* 'components' 레이어에 커스텀 클래스 추가 */
.btn-custom-blue {
@apply rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-600 transition-colors;
/* 직접 CSS 속성도 추가 가능 */
border: 2px solid theme(colors.blue.700);
}
.text-highlight {
color: var(--color-secondary); /* @theme에서 정의한 변수 사용 */
font-weight: bold;
}
}
@layer utilities { /* 'utilities' 레이어에 커스텀 유틸리티 추가 */
.text-shadow-custom {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
}
</style>
</head>
<body>
<button class="btn-custom-blue m-4">
커스텀 버튼 (Blue)
</button>
<p class="text-highlight m-4">
This is a highlighted text.
</p>
<h2 class="text-2xl text-shadow-custom m-4">Custom Utility Text</h2>
</body>
4. 플러그인 사용하기 (선택 사항) 🔌
@tailwindcss/forms나 @tailwindcss/typography 같은 공식 플러그인을 사용하고 싶다면, CDN 스크립트 URL에 plugins 쿼리 파라미터를 추가하면 됩니다.
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=forms,typography"></script>
</head>
이제 해당 플러그인들이 제공하는 스타일과 유틸리티를 사용할 수 있습니다.
🤩 더 쉬운 방법: Tailwind Play (온라인 에디터)
로컬 환경이나 CodePen 같은 곳에서 Play CDN을 사용하는 것도 편리하지만, Tailwind CSS 공식 웹사이트에서는 Tailwind Play (play.tailwindcss.com) 라는 자체 온라인 코드 에디터를 제공합니다.
https://play.tailwindcss.com/ 에 접속하면 아무 설정 없이 바로 HTML, CSS, Config 탭을 오가며 Tailwind CSS를 체험하고, 실시간으로 결과를 확인할 수 있습니다. 심지어 작성한 코드를 공유할 수도 있어서 스터디나 협업 시 간단한 예제를 보여주기에도 좋습니다!
🚨 정말 중요한 주의사항: Play CDN은 개발 및 테스트용입니다!
Play CDN은 정말 편리하지만, 몇 가지 중요한 한계점이 있습니다:
- 성능 문제: CDN을 통해 실시간으로 스타일을 처리하므로, 실제 빌드된 CSS 파일보다 로딩 속도가 느릴 수 있습니다. 이로 인해 사용자가 스타일이 적용되지 않은 페이지를 잠깐 보게 되는 FOUC(Flash Of Unstyled Content) 현상이 발생할 수 있습니다.
- 최적화 부재: 프로덕션 빌드 과정에서는 사용하지 않는 스타일을 제거(Purging)하고 파일을 압축하여 CSS 크기를 최소화합니다. Play CDN은 이러한 최적화 과정이 없습니다.
- 일부 고급 기능 제한: PostCSS 플러그인 생태계의 모든 기능을 활용하기 어렵거나, 복잡한 설정은 제한될 수 있습니다.
따라서, Play CDN은 다음과 같은 용도로만 사용하시는 것을 강력히 권장합니다:
- Tailwind CSS를 처음 학습하거나 간단히 체험해볼 때
- 빠르게 프로토타입(시제품)을 제작하거나 PoC(Proof of Concept, 개념 증명)를 진행할 때
- 디자인 아이디어를 간단히 테스트해볼 때
실제 상용(Production) 환경의 프로젝트에는 반드시 Tailwind CLI나 PostCSS 플러그인을 통해 빌드 프로세스에 통합하여, 최적화된 CSS 파일을 사용해야 합니다.
마치면서
Tailwind CSS Play CDN은 복잡한 설정 과정 없이 Tailwind의 매력을 맛볼 수 있는 훌륭한 방법입니다. 이 글을 통해 더 많은 분들이 Tailwind CSS를 쉽고 재미있게 경험해보셨으면 좋겠습니다.
이제 Play CDN으로 가볍게 시작해보시고, Tailwind의 진가를 느끼셨다면 실제 프로젝트에 빌드 방식으로 적용해보세요! 😊
