Tailwind CSS home page
  1. 시작하기
  2. Play CDN을 사용해 Tailwind CSS 사용해 보기

설치

Play CDN

Play CDN을 사용하면 빌드 과정 없이 브라우저에서 바로 Tailwind를 사용해 볼 수 있습니다. Play CDN은 개발 목적으로만 설계되었으며, 프로덕션 환경에는 적합하지 않습니다.

  1. HTML에 Play CDN 스크립트 추가하기

    HTML 파일의 <head>에 Play CDN 스크립트 태그를 추가하고, Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

  2. 설정 커스터마이징 시도하기

    tailwind.config 객체를 수정하여 설정을 커스터마이징하고, 자신만의 디자인 토큰을 추가하세요.

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-clifford">
    Hello world!
  </h1>
</body>
</html>

  3. 커스텀 CSS 추가하기

    type="text/tailwindcss"를 사용해 Tailwind의 모든 CSS 기능을 지원하는 커스텀 CSS를 추가하세요.

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
</head>
<body>
  <div class="lg:content-auto">
    <!-- ... -->
  </div>
</body>
</html>

  4. 퍼스트파티 플러그인 사용하기

    plugins 쿼리 파라미터를 사용해 폼이나 타이포그래피와 같은 퍼스트파티 플러그인을 활성화하세요.

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>

다음에 읽을 내용

Tailwind CSS가 전통적인 CSS 작성과 다른 핵심 개념들을 알아보세요.

  • 유틸리티 퍼스트 원칙

    Using a utility-first workflow to build complex components from a constrained set of primitive utilities.

  • 반응형 디자인

    Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.

  • Hover, Focus & Other States

    Style elements in interactive states like hover, focus, and more using conditional modifiers.

  • 다크 모드

    Optimize your site for 다크 모드 directly in your HTML using the 다크 모드 modifier.

  • Reusing Styles

    Manage duplication and keep your projects maintainable by creating reusable abstractions.

  • Customizing the Framework

    Customize the framework to match your brand and extend it with your own custom styles.