Tailwind CSS 사용하기

웹 페이지에서 작성하는 html 코드의 class 속성에서 다음과 같이 Tailwind CSS를 사용합니다.

<div class="grid grid-cols-10 gap-2">
    <div class="bg-sky-50 aspect-square"></div>
    <div class="bg-sky-100 aspect-square"></div>
    <div class="bg-sky-200 aspect-square"></div>
    <div class="bg-sky-300 aspect-square"></div>
    <div class="bg-sky-400 aspect-square"></div>
    <div class="bg-sky-500 aspect-square"></div>
    <div class="bg-sky-600 aspect-square"></div>
    <div class="bg-sky-700 aspect-square"></div>
    <div class="bg-sky-800 aspect-square"></div>
    <div class="bg-sky-900 aspect-square"></div>
</div>

웹 페이지 에디터는 Tailwind CSS의 모든 기능을 지원하지 않습니다. 기본 기능만 지원합니다. 동작하지 않는 기능은 쓰리래빗츠 Q&A에 남기면 지원을 검토하겠습니다.

Tailwind CSS가 지원하는 클래스

Tailwind CSS의 문서를 참고합니다.

https://tailwindcss.com/docs

또는 웹 페이지 에디터의 사이드 바 1Tailwind 아이콘을 클릭해 확인할 수 있습니다. 해당 항목의 2이름을 클릭하면 이름을 클립보드에 복사합니다.