Tailwind CSS CDN 사용법 (v4, v4.1.7 기준)

 

 

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은 정말 편리하지만, 몇 가지 중요한 한계점이 있습니다:

  1. 성능 문제: CDN을 통해 실시간으로 스타일을 처리하므로, 실제 빌드된 CSS 파일보다 로딩 속도가 느릴 수 있습니다. 이로 인해 사용자가 스타일이 적용되지 않은 페이지를 잠깐 보게 되는 FOUC(Flash Of Unstyled Content) 현상이 발생할 수 있습니다.
  2. 최적화 부재: 프로덕션 빌드 과정에서는 사용하지 않는 스타일을 제거(Purging)하고 파일을 압축하여 CSS 크기를 최소화합니다. Play CDN은 이러한 최적화 과정이 없습니다.
  3. 일부 고급 기능 제한: PostCSS 플러그인 생태계의 모든 기능을 활용하기 어렵거나, 복잡한 설정은 제한될 수 있습니다.

따라서, Play CDN은 다음과 같은 용도로만 사용하시는 것을 강력히 권장합니다:

  • Tailwind CSS를 처음 학습하거나 간단히 체험해볼 때
  • 빠르게 프로토타입(시제품)을 제작하거나 PoC(Proof of Concept, 개념 증명)를 진행할 때
  • 디자인 아이디어를 간단히 테스트해볼 때

실제 상용(Production) 환경의 프로젝트에는 반드시 Tailwind CLI나 PostCSS 플러그인을 통해 빌드 프로세스에 통합하여, 최적화된 CSS 파일을 사용해야 합니다.

마치면서

Tailwind CSS Play CDN은 복잡한 설정 과정 없이 Tailwind의 매력을 맛볼 수 있는 훌륭한 방법입니다. 이 글을 통해 더 많은 분들이 Tailwind CSS를 쉽고 재미있게 경험해보셨으면 좋겠습니다.

이제 Play CDN으로 가볍게 시작해보시고, Tailwind의 진가를 느끼셨다면 실제 프로젝트에 빌드 방식으로 적용해보세요! 😊

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다