TailwindCSS 설치 - CDN

Tailwind CSS 설치 방법 개요

설치 방법 개요

Tailwind CSS는 여러 방식으로 설치할 수 있습니다. 이번 강의에서는 Play CDN을 사용하여 빠르게 설치하고 실습할 수 있는 방법을 다룹니다.

Play CDN을 사용한 Tailwind CSS 설치 및 테스트

Play CDN 사용 설명

Play CDN을 사용하면 Tailwind CSS를 별도의 빌드 없이 HTML 파일에 직접 추가할 수 있습니다.
HTML 파일의 <head> 태그에 Play CDN 스크립트 태그를 추가하는 방식입니다.

HTML 파일에 Tailwind CSS 추가

<!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>

HTML 파일의 <head>에 CDN 스크립트를 추가하고, text-3xl, font-bold, underline 같은 Tailwind CSS 유틸리티 클래스를 사용하여 텍스트 스타일을 빠르게 적용합니다.

실습: Hello world! 텍스트를 Tailwind CSS로 스타일링하는 HTML 파일을 생성합니다. Play CDN을 사용하여 Tailwind CSS를 적용합니다.

<aside> ❗

개발자도구에서 경고가 떠요 🫢 (⚠️ cdn.tailwindcss.com shold not be…) </aside>

Tailwind CSS 커스터마이징

Tailwind 설정 커스터마이징

Tailwind CSS는 기본적으로 제공되는 설정을 커스터마이징할 수 있습니다.
HTML 파일에 tailwind.config 객체를 추가하여, 색상이나 폰트 크기와 같은 디자인 토큰을 직접 설정할 수 있습니다.

예시: 색상 커스터마이징