CSS보다 3배 빠르게 개발하기 : Tailwind

Tailwind 란?

css 파일 따로 만드는 거 대신 간편한 유틸리티 클래스를 모아 놓은 것이 tailwind이다. 

 

 

별도 CSS파일 사용 코드

.button {
  background-color: #3b82f6; /* Tailwind의 bg-blue-500 */
  color: white; /* Tailwind의 text-white */
  padding: 8px 16px; /* Tailwind의 px-4 py-2 */
  border-radius: 4px; /* Tailwind의 rounded */
  transition: background-color 0.2s; /* Tailwind의 hover 효과 전환 */
}

.button:hover {
  background-color: #2563eb; /* Tailwind의 hover:bg-blue-600 */
}

 

이 긴 코드를 tailwind를 사용하면 한 줄에 뚝딱이다. 🍺

 

Tailwind 사용코드

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click Me
</button>

 

Tailwind를 사용하면 개발 속도가 정말 빨라지지만 좋기만 한 것은 아니다. 

html 코드의 가독성이 안좋아지고, 스타일의 재사용이 어렵다🙁 (→ 이건 react의 component로 해결 가능하긴 함)

 

 

Tailwind 사용법

 

위의 코드에서 보이는 것처럼 tailwind는 약어를 주로 사용하기 때문에 자주쓰는 속성들은 외워야 개발하기 편하다. 

Tailwind 공식문서에 아주 보기 좋게 나와있음!

https://tailwindcss.com/docs/width

Width - Tailwind CSS

 

 

 

 

Tailwind의 주요 클래스

 

1. 레이아웃 관련 클래스

Flexbox

• flex : Flexbox 컨테이너를 활성화.
• inline-flex : 인라인 Flexbox 컨테이너.
• flex-row : Flex 방향을 가로로 설정.
• flex-col : Flex 방향을 세로로 설정.
• justify-start | justify-center | justify-end | justify-between | justify-around | justify-evenly : 가로 정렬.
• items-start | items-center | items-end | items-baseline | items-stretch : 세로 정렬.
• gap-1 | gap-2 | ... : Flexbox 아이템 간 간격.

Grid

• grid: CSS Grid 컨테이너를 활성화.
• grid-cols-1 | grid-cols-2 | grid-cols-3 | ...: 열 개수 지정.
• gap-1 | gap-2 | ...: 그리드 간격.

Positioning

• relative: 상대 위치.
• absolute: 절대 위치.
• fixed: 고정 위치.
• top-0 | right-0 | bottom-0 | left-0: 위치 지정.
• z-0 | z-10 | z-20 | ... : z-index 설정.

Box Sizing

• container: 반응형 컨테이너.
• box-border: 패딩 포함 박스 크기.
• box-content: 패딩 제외 박스 크기.

---

2. 스페이싱 관련 클래스

여백과 간격을 설정하는 클래스:

Margin (m)

• m-0 | m-1 | m-2 | ...: 모든 방향 마진.
• mx-0 | mx-1: 좌우 마진.
• my-0 | my-1: 상하 마진.
• mt-0 | mb-0 | ml-0 | mr-0: 개별 방향 마진.

Padding (p)

• p-0 | p-1 | p-2 | ...: 모든 방향 패딩.
• px-0 | px-1: 좌우 패딩.
• py-0 | py-1: 상하 패딩.
• pt-0 | pb-0 | pl-0 | pr-0: 개별 방향 패딩.

---

3. 크기 관련 클래스

너비와 높이를 조정하는 클래스:

Width (w)

• w-full: 100% 너비.
• w-screen: 화면 전체 너비.
• w-1/2 | w-1/3 | w-2/3 | w-1/4 | ...: 비율 기반 너비.
• w-32 | w-64 | ...: 고정 픽셀 크기.

Height (h)

• h-full: 100% 높이.
• h-screen: 화면 전체 높이.
• h-1/2 | h-1/3 | h-2/3 | ...: 비율 기반 높이.
• h-32 | h-64 | ...: 고정 픽셀 크기.

Max/Min 크기

• max-w-full | max-w-md | max-w-lg: 최대 너비.
• min-w-0 | min-w-full: 최소 너비.
• max-h-screen | min-h-0: 최대/최소 높이.

---

4. 배경 및 컬러 관련 클래스

배경과 색상을 지정하는 클래스:

Background

• bg-transparent | bg-white | bg-black | bg-gray-500 | bg-blue-500: 배경 색상.
• bg-gradient-to-t | bg-gradient-to-r | ...: 그라데이션 배경.

Text Color

• text-white | text-black | text-gray-500 | text-blue-500: 텍스트 색상.

Border

• border: 기본 테두리.
• border-0 | border-2 | border-4: 테두리 두께.
• border-gray-500 | border-blue-500: 테두리 색상.
• rounded | rounded-lg | rounded-full: 둥근 모서리.

---

5. 타이포그래피 관련 클래스

글꼴, 크기, 정렬 등 텍스트 스타일링 클래스:

Font Size

• text-xs | text-sm | text-base | text-lg | text-xl | text-2xl | ...: 글꼴 크기.

Font Style

• font-thin | font-light | font-normal | font-bold | font-extrabold: 글꼴 두께.
• italic | not-italic: 기울임.

Text Alignment

• text-left | text-center | text-right | text-justify: 텍스트 정렬.

Text Decoration

• underline | line-through | no-underline: 텍스트 장식.
• uppercase | lowercase | capitalize: 텍스트 변환.

---

6. 기타 유용한 클래스

• Shadow: shadow | shadow-md | shadow-lg: 그림자 설정.
• Opacity: opacity-0 | opacity-50 | opacity-100: 투명도.
• Transition: transition | duration-300 | ease-in-out: 전환 효과.