Play CDN으로 시작하기
Play CDN으로 시작하기
HTML 파일의 <head>에 Play CDN 스크립트 태그를 추가하면 바로 Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링할 수 있어요. 별도 빌드 과정 없이 브라우저에서 바로 동작하는 방식이에요.
출처: 문서
본문
01 — 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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
02 — 사용자 정의 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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-clifford: #da373d;
}
</style>
</head>
<body>
<h1 class="text-3xl font-bold underline text-clifford">
Hello world!
</h1>
</body>
</html>