설치
Tailwind CSS는 모든 HTML 파일, JavaScript 컴포넌트, 그리고 다른 템플릿들을 스캔하여 클래스 이름을 찾고, 해당 스타일을 생성한 후 정적 CSS 파일로 작성합니다.
Tailwind CSS는 빠르고 유연하며 신뢰할 수 있습니다. 또한 런타임 오버헤드가 없습니다.
Play CDN을 사용해 빌드 과정 없이 브라우저에서 바로 Tailwind를 사용해 보세요. Play CDN은 개발 목적으로만 설계되었으며, 프로덕션 환경에서는 사용하지 않는 것이 좋습니다.
HTML 파일의 <head>에 Play CDN 스크립트 태그를 추가하고, Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://unpkg.com/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>type="text/tailwindcss"를 사용해 Tailwind의 모든 CSS 기능을 지원하는 커스텀 CSS를 추가하세요.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://unpkg.com/@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>