tailwind css에 대해 알아보자

 

 

안녕하세요 오늘은 css를 좀더 간편하게 작성하기 위해서

tailwind css를 적용해보고 간단한 문법을 알아보겠습니다.

 

먼저 공식문서에서 설치 및 적용 방법이 자세히 설명되어있습니다.

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

해당 링크에서 적용시켜 보세요 

 

만약 해당 방법으로 적용이 되지 않는 경우 input.css를 직접

app.tsx에 import 시켜주니 적용되는 이슈가 저는 있었네요

 

이제 다양한 컴포넌트를 적용시켜 보고 문법을 살펴보겠습니다.

 

 

 

1. 레이아웃

레이아웃을 다룰 때 Tailwind는 display, position, overflow, box-sizing 등의 유틸리티를 제공합니다.

예를 들어, flex는 display: flex;를 적용하며, relative는 position: relative;를 적용합니다.

 

<div class="flex relative">...</div>

 

 

 

2. 크기

width, height, min-width, min-height, max-width, max-height 등의 유틸리티를 제공합니다.

 

<div class="w-1/2 h-32">...</div>

 

위의 예시에서 w-1/2는 너비를 부모 요소의 50%로 설정하며,

h-32는 높이를 8rem으로 설정합니다.

 

 

 

3. 색상

text-color, background-color, border-color 등의 유틸리티를 제공합니다.

 

<div class="bg-green-500 text-white">...</div>

 

위의 예시에서 bg-green-500는 배경색을 초록색으로, text-white는 글자색을 흰색으로 설정합니다.

 

 

 

4. 텍스트

font-size, font-weight, text-align, text-transform, line-height 등의 유틸리티를 제공합니다.

 

<p class="text-lg font-bold text-center">...</p>

 

위의 예시에서 text-lg는 글자 크기를 대형으로,

font-bold는 글자 두께를 두껍게, text-center는 글자 정렬을 가운데로 설정합니다.

 

 

 

5. 반응형 디자인

Tailwind는 반응형 디자인을 쉽게 구현할 수 있게 도와줍니다.

클래스 이름 앞에 sm:, md:, lg:, xl:, 2xl: 등의 접두사를 추가하면 해당 화면 크기에서만 유틸리티가 적용됩니다.

 

<div class="text-sm md:text-lg">...</div>

 

위의 예시에서 text-sm는 작은 화면에서의 글자 크기를 작게 설정하며,

md:text-lg는 중간 크기의 화면에서부터의 글자 크기를 대형으로 설정합니다.

이 외에도 Tailwind CSS는 여백, 테두리, 그림자, 투명도 등 다양한 유틸리티를 제공합니다.

아까 제공한 공식 문서에서 더 많은 정보를 찾을 수 있습니다.

 

tailwind는 강력하고 유연한 라이브러리로 다양한 프로젝트에 저수준의 css를 간편하게 제공합니다.

저는 scss를 주로 사용하였는데 해당 라이브러리를 통해 프로젝트의 진행 속도가

좀더 빨라지는 것을 느꼈습니다.

감사합니다.