📌Tailwindcss

간단히 클래스명을 적어서 css를 변경하는 매우 심플한 프레임워크!

설치

공식문서

번거로우니 next.js 사용자는 설치 할 때 tailwindcss 사용할 것인지 물어보면 yes 하자

사용법

말 그대로 클래스 명에 자신이 사용하고 싶은 css 스타일을 찾아서 넣으면 된다.

css 찾기

• 공식문서 검생창 활용
• sheet로 정리된 사이트

예시

// 바닐라 자바스크립트
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

// React
<h1 className="text-3xl font-bold underline">
  Hello world!
</h1>

---

Tailwind Play

tailwind를 적용하면 바로 미리보기로 보여서 연습을 하거나 미리 디자인을 만들어보거나 할 경우 유용