[React] Tailwind CSS로 React 스타일링하기

React로 화면을 구성하다 보면 HTML 요소에 다양한 스타일을 적용해야 한다.

일반적으로 CSS 파일을 작성하고 HTML 요소에 클래스를 지정하는 방법을 사용할 수 있지만, Tailwind CSS를 사용하면 미리 정의된 유틸리티 클래스를 조합하여 CSS를 작성할 수 있다.

1. Tailwind CSS란?

Tailwind CSS는 CSS 스타일을 미리 정의된 클래스를 통해 적용할 수 있도록 해준다.

일반적인 CSS 방식에서는 HTML에 클래스를 지정하고 CSS 파일에서 해당 클래스의 스타일을 직접 작성한다.

예를 들어 버튼을 만든다고 하면 다음과 같이 작성할 수 있다.

<button class="btn">클릭</button>

그리고 CSS에서 btn의 스타일을 정의한다.

.btn {
    background-color: blue;
    color: white;
    padding: 10px;
    cursor: pointer;
}

Tailwind CSS를 사용하면 필요한 스타일을 클래스 형태로 바로 지정할 수 있다.

<button class="bg-blue-500 text-white p-2 cursor-pointer">
    클릭
</button>

별도의 CSS 클래스를 직접 작성하지 않고 여러 유틸리티 클래스를 조합하여 하나의 요소에 원하는 스타일을 적용할 수 있다.

2. Tailwind CSS 적용하기

이번에는 CDN을 이용하여 Tailwind CSS를 적용하였다.

HTML 파일의 최상단에 다음 Script를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

이후 HTML이나 JSX에서 Tailwind CSS의 클래스를 사용할 수 있다.

HTML에서는 속성으로 class를 사용하지만 React의 JSX에서는 className을 사용한다.

3. Tailwind CSS 기본 클래스 사용하기

Tailwind CSS의 클래스는 각각 특정한 스타일을 담당한다.

예를 들어 다음 버튼을 살펴보자.

<button class="bg-blue-500 text-white p-2 cursor-pointer">
    클릭
</button>

각 클래스의 역할은 다음과 같다.

클래스	의미
bg-blue-500	배경색을 파란색 계열로 설정
text-white	글자색을 흰색으로 설정
p-2	안쪽 여백(Padding) 설정
cursor-pointer	마우스를 올렸을 때 포인터 모양으로 변경
hover:bg-blue-700	마우스를 요소 위에 올렸을 때 적용할 스타일을 지정할 수 있다.

즉, Tailwind CSS에서는 필요한 스타일을 클래스 조합으로 표현할 수 있다.

어떤 속성들이 있는지는 아래 사이트에서 확인해볼 수 있다.

https://nerdcave.com/tailwind-cheat-sheet