Tailwind CSS 정리

IBBI·2024년 5월 27일
CSStailwind
52

CSS

목록 보기
1/1
post-thumbnail

Tailwind css는 유틸리티 우선의 css 프레임워크로, 개발자가 클래스 이름을 통해 직접 스타일을 HTML에 적용할 수 있게 해준다.
이러한 접근 방식은 매우 모듈화되어 있으며, 디자인의 일관성을 유지하면서, 커스텀 디자인을 빠르게 구현할 수 있는 유연성을 제공한다.


Tailwind css의 장단점

⭐️ 장점

개발자가 css를 직접 작성하는 시간을 대폭 줄일 수 있으며, 컴포넌트 기반의 접근 방식을 통해 유지보수가 용이하고, 커스터마이징과 반응형 디자인 구현이 간편해진다.
이는 개발자가 더 빠르게 프로토타입을 만들고, 프로젝트의 스타일 가이드를 효율적으로 관리할 수 있게 해준다.

⭐️ 단점

새로운 스타일을 적용할 때마다 css 클래스가 생성되어 결과적으로 css 파일의 크기가 커질 수 있으며, 이는 페이지 로딩 시간에 영향을 줄 수 있다.
또한, tailwind css로 구현할 수 없는 특정 스타일에 대해서는 별도의 css 파일을 생성해야 하는데, 이는 프로젝트 내에서 일관성 있는 스타일링을 어렵게 만들 수 있다.

개발자는 Tailwind css를 선택하기 전, 장단점을 자세히 분석하고 프로젝트에 적용할지 말지를 선택해야 한다.

Tailwind css 설치 및 사용법

Tailwind css는 공식 홈페이지에서 제공하는 [Get Started] 섹션을 참고하여 설치할 수 있다.

1. 기본 사용법

Tailwind css의 가장 기본적인 사용법은 HTML 태그 내 클래스에 직접 적용하는 것이다.

🔍 예시 코드

<div className="w-12 h-10 text-white bg-gray-400"></div>

위 코드는 Tailwind css의 클래스를 사용해서 특정 요소의 폭(w-12), 높이(h-10), 텍스트 색상(text-white), 그리고 배경 색(bg-gray-400)을 설정한 것이다.
(클래스의 순서에 따라 나중에 적용된 스타일이 이전 스타일을 덮어쓰는 것에 주의해야 한다.)

2. 사이즈 설정

Tailwind css를 사용하여 웹 페이지의 요소들에 길이/크기를 설정하는 것은 매우 간단하다.

넓이를 설정할 때는 w 다음에 숫자를 넣어주면 되는데, Tailwind는 미리 정해진 숫자 값들을 제공한다.
w-1, w-12, w-64 등과 같이 사용하거나, w-1/2, w-full와 같이 비율로도 설정이 가능하다.

높이를 설정할 때의 방식도 비슷하다. h 다음에 숫자를 넣어서 높이를 지정하게 되는데, h-16, h-52와 같이 사용한다. 비율로 설정하는 것도 가능하며, h-full과 같이 사용할 수도 있다.

또한, 화면의 최대 크기를 정할 수도 있다. 양 옆으로 auto margin을 주기 위해서는 mx-auto를 사용하면 된다.
예를 들어, 화면의 최대 크기를 768px로 주고 양 옆의 마진을 auto로 주려면 다음과 같이 해야 한다.

<div className="max-w-3xl mx-auto"></div>
// 참고 : max-w-3xl = max-width: 48rem; /* 768px */

3. 색상 설정

Tailwind CSS는 웹 개발자가 쉽게 색상을 설정하고 관리할 수 있도록 색상 파레트를 제공한다. 공식 문서에서 제공하는 다양한 기본 색상 옵션을 활용하면 아래와 같은 방식으로 텍스트 색상이나 배경 색상을 매우 쉽게 지정할 수 있다.

텍스트 색상 : text-{color name}-number
배경 색상 : bg-{color name}-number

🔍 예시 코드

<div className="w-full h-10 bg-red-400 text-blue-200">text</div>

위 코드는 넓이는 전체, 높이는 10으로 설정하고, 배경색은 red-400으로, 텍스트 색상은 blue-200으로 지정한다.

➕ custom color

// tailwind.config.js
theme: {
  	// extend 안에 작성하면 기본 색상 옵션도 사용 가능
    extend: {
      colors: {
        white: "#FFFFFF", // bg-white
      	black: {
          DEFAULT: "#000000",
          overlay: "rgba(0, 0, 0, 0.70)",
      	},
        gray: {
          100: "#F8FAFB", // text-gray-100
          200: "#EBEBEB",
        },
      },
    }

4. 디스플레이 설정

Tailwind css는 웹 페이지의 레이아웃을 구성할 때 필요한 다양한 디스플레이 설정을 제공한다. 이러한 설정은 일반적으로 사용되는 flex, inline, inline-block, inline-flex와 같은 속성들을 포함한다.
Tailwind css를 사용하면 이러한 디스플레이 속성을 클래스 형태로 쉽게 적용할 수 있어 레이아웃을 빠르고 효과적으로 구성할 수 있다.

예를 들어, flex 클래스를 사용하면 컨테이너를 Flexbox 컨테이너로 만들어 자식 요소들을 유연하게 배치할 수 있으며, 이는 반응형 디자인을 구현하거나 복잡한 레이아웃을 간단히 만드는 데 유용하다.

적용할 수 있는 속성
justify-between : 가로 방향 정렬(좌우 끝)
items-center : 세로 방향 정렬

<div className="flex bg-slate-100 mt-3">
  <div className="bg-red-50">나는 플렉스1</div>
  <div className="bg-yellow-50">나는 플렉스2</div>
</div>

5. 레이아웃 설정

Tailwind css는 미디어 쿼리를 이용하여 다양한 화면 크기에 맞춰 웹 페이지의 레이아웃을 동적으로 조정하는 강력한 기능을 제공한다. 이를 통해, 개발자는 웹사이트를 모든 디바이스에 최적화시킬 수 있다.
레이아웃 설정을 위해 Tailwind는 사이즈 별로 클래스를 적용할 수 있는 시스템을 제공한다.

sm => @media (min-width: 640px) { ... }
md => @media (min-width: 768px) { ... }
lg => @media (min-width: 1024px) { ... }
xl => @media (min-width: 1280px) { ... }
2xl => @media (min-width: 1536px) { ... }

🔍 예시 코드 1

<div className="sm:hidden md:flex lg:inline-block"></div>

위 코드는 sm 사이즈(640px) 이하에서는 해당 요소를 숨기고(hidden), md 사이즈(768px) 이상에서는 flex 레이아웃을 적용하며, lg 사이즈(1024px) 이상에서는 inline-block으로 요소를 디스플레이하도록 설정한다.

🔍 예시 코드 2

<img className="w-16 md:w-32 lg:w-48" src="..." />

위 코드는 보통 w-16의 너비이다가 md 사이즈에서는 w-32, lg 사이즈에서는 w-48이 되게 만들 수 있다.

6. 여백 설정

개발자는 p(패딩) m(마진)을 사용하여 요소들 사이의 여백 공간을 조절한다. 이러한 여백 설정은 p-숫자 또는 m-숫자 형식으로 적용되며, 이를 통해 웹 페이지의 요소들 간에 적절한 공간을 생성하고 관리할 수 있다.

예를 들어, p-3은 요소 전체 방향에 0.75rem의 간격으로 패딩을 추가한다. 가로축과 세로축 방향의 여백을 조절하고 싶다면, px-3 또는 py-3을 사용하여 쉽게 적용할 수 있다.

🔍 크기 정리

참고 사이트: 공식 문서

Name(숫자)SizePixels
00px0px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px

🔍 방향 정리

방향paddingmargin
전체 방향p-3m-3
가로축 방향px-3mx-3
세로축 방향py-3my-3
오른쪽pr-3mr-3
왼쪽pl-3ml-3
위pt-3mt-3
아래pb-3mb-3

7. 폰트 설정

Tailwind css는 폰트 패밀리, 크기, 무게를 쉽게 설정할 수 있어 디자인에 명확성과 다양성을 더할 수 있다.

폰트 패밀리 : font-sans, font-serif, font-mono 등
폰트 크기 : text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl 등
폰트 무게 : font-thin, font-light, font-normal, font-semibold, font-bold

8. 라운드 설정

Tailwind CSS는 요소의 모서리를 둥글게 처리하여 디자인에 부드러운 느낌을 추가하는 다양한 클래스를 제공한다.
rounded는 기본적인 라운드 모서리를 적용하며, rounded-md, rounded-lg, rounded-full 등을 사용하여 라운드의 크기를 조절할 수 있다.

rounded	: border-radius: 0.25rem; /* 4px */
rounded-md : border-radius: 0.375rem; /* 6px */
<div className="rounded"></div>
<div className="rounded-md"></div>
<div className="rounded-lg"></div>

<-- 완전한 원형 -->
<div className="rounded-full"></div>

위 코드는 각각 가장 기본적인 둥근 모서리를 추가하고, 약간 더 둥근 모서리, 더욱 둥근 모서리를 적용한다. rounded-full은 완전한 원형 모서리를 적용하여 요소를 원 모양으로 만들 수 있다.

9. 그림자 설정

Tailwind CSS는 디자인에 깊이와 입체감을 추가하는 데 필요한 다양한 그림자 효과를 제공한다.
이러한 그림자 효과는 drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl 등의 클래스를 사용하여 쉽게 적용할 수 있다.

<div className="drop-shadow-md ..."></div>

위 코드는 중간 정도의 그림자 효과가 요소에 적용되는 예제이다.

10. 상태 변화 설정

Tailwind CSS는 마우스 오버 효과와 같은 상태 변화를 쉽게 구현할 수 있는 기능을 제공한다. 이 기능은 hover:접두사를 사용하여 적용할 수 있으며, 요소에 마우스를 올렸을 때의 시각적 변화를 정의할 수 있다.

예를 들어, hover:bg-blue-500 클래스를 버튼에 적용하면, 사용자가 버튼 위에 마우스를 올렸을 때 배경색이 파란색으로 변경된다.

사용팁

1. Arbitrary values

개발자가 미리 알아두면 좋은 중요한 팁 중 하나는 Arbitrary Values, 즉 임의 값의 사용을 최소화하는 것이다. Arbitrary Values는 Tailwind에서 제공하지 않는 특정 값들을 사용할 수 있게 해주는 기능으로, text-[14px]와 같이 Tailwind가 기본적으로 제공하지 않는 폰트 크기를 직접 지정할 수 있다.

장점 : 유연성 제공
단점 : 빈번한 사용 시 코드의 가독성을 저하시키고 프로젝트의 일관성을 해칠 수 있음

Tailwind는 주로 사용되는 css 속성값들을 지정해두었다.
예를 들어, fontSize의 경우 xs, sm, base, lg, xl, 2xl, …, 9xl과 같이 제한된 범위의 크기를 제공한다.

만약 이런 제한된 범위를 벗어나는 값들이 필요한 경우, Tailwind의 커스터마이징 기능을 활용하여 프로젝트의 요구사항을 더욱 효율적으로 충족시킬 수 있다.
예를 들어, px 단위의 디자인 요구사항을 충족해야 하는 경우라면 다음과 같이 미리 px에 대한 프리셋을 전부 ‘extend’로 등록할 수 있다.

// tailwind.config.js
const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) };
const px0_100 = { ...Array.from(Array(101)).map((_, i) => `${i}px`) };
const px0_200 = { ...Array.from(Array(201)).map((_, i) => `${i}px`) };

module.exports = {
  theme: {
    extend: {
      borderWidth: px0_10,
      fontSize: px0_100,
      lineHeight: px0_100,
      minWidth: px0_200,
      minHeight: px0_200,
      spacing: px0_200,
      ...
    }
  }
}

이렇게 한 번 등록하고 나면 고민 없이 디자인 명세에 표기된 수치를 그대로 옮기기만 하면 되어 편리하다. 위에 꺼냈던 예시도 다음과 같이 보다 간단한 형태로 작성할 수 있다.

// BEFORE
<div className="p-[8px] h-[35px] text-[12px] border-[2px] rounded-[5px]">

// AFTER
<div className="p-8 h-35 text-12 border-2 rounded-5">

tailwind.config.js 파일을 사용하여 fontSize, borderWidth, lineHeight, spacing 등의 값들을 extend 섹션에 추가함으로써 개발자는 디자인 요구사항에 맞는 특정 값들을 미리 정의할 수 있다.

2. Preflight

Tailwind는 디자인 시스템의 일관성을 유지하며 브라우저 간 스타일의 일관성을 보장하기 위해 Preflight라는 기능을 도입했다.
Preflight는 Tailwind css가 적용될 때 브라우저 기본 스타일을 리셋하거나 정규화하는 과정을 말한다.
이는 @tailwind base 설정에 포함되어 있으며, h1, h2, h3, h4, h5, h6 등의 헤딩 요소에 대해 font-size: inherit; font-weight: inherit; margin: 0;와 같은 기본 스타일을 적용함으로써 프로젝트 전반에 걸쳐 일관된 디자인을 유지할 수 있게 해준다.

이러한 Preflight 처리는 Tailwind css를 사용할 때 브라우저의 기본 스타일과의 충돌을 방지하고, 디자인의 예측 가능성을 높여준다.
하지만, 프로젝트의 특정 요구사항에 따라 Tailwind CSS의 Preflight 기능을 비활성화할 필요가 있을 수 있다. 이 경우, tailwind.config.js 파일 내의 corePlugins 섹션을 수정하여 preflight: false로 설정함으로써 Preflight 처리를 비활성화할 수 있다.

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

➕ vscode 확장 프로그램 추천

custom 설정한 것들도 자동완성 됩니다


아래 사이트들을 보고 제 기준 찾아보기 쉽도록 정리하였읍니다.
Tailwind를 처음 공부하시는 분들은 아래 사이트들 들어가셔서 정독하시는 걸 추천드립니다.
넘무나 잘 정리된 사이트를 찾아버렸다 🫠

📎 참고 사이트
Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그
Tailwind CSS를 위한 기본 가이드
tailwind 사용법 - css+ 로 디자인 시스템을 이용하자

profile
IBBI
IBBI의 말하는 감자 탈출 프로젝트

4개의 댓글

comment-user-thumbnail
01SO
2024년 5월 27일

참고하겠습니도

1개의 답글
comment-user-thumbnail
윤병현
2024년 5월 27일

여기 정리 맛집이네요

1개의 답글