목적
이번에 전공동아리 프로젝트에서 Tailwind CSS를 적용하여 개발하게 되어서 Tailwind CSS에 대해 자세히 알아보면 좋을 것 같아 작성하게 되었습니다.
Tailwind CSS?
Tailwind CSS는 클래스가 포함된 유틸리티 중심 CSS 프레임워크로, 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있습니다.
장점
Tailwind CSS의 장점으로는
1. CSS를 작성할 때 시간이 절약된다.
<button class="btn">click</button>.btn {
background-color: #3490dc;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-size: 1rem;
text-align: center;
}css로 작성하면 이렇게 길게 작성하게 되는데 tailwind css로는 html 안에서 바로 css 적용이 가능하고 css 파일을 따로 만들 필요가 없어집니다.
<button className="bg-blue-500 text-white px-4 py-2 rounded text-base text-center">
click
</button>2. 스타일 클래스의 이름을 고민할 필요가 없다.
- 기존 CSS에서는 콘텐츠와 스타일을 고려해 클래스를 만들고, 재사용 여부, 명명 규칙, 기능/외관 구분 등 많은 것을 고민해야 합니다. 이는 팀 내 일관성을 유지하려고 할수록 인지 부하가 커지고, 종종 사소한 이름 논쟁(바이크 쉐딩)으로 이어지기도 합니다.
반면 Tailwind CSS는 문서에 있는 유틸리티 클래스를 그대로 적용하면 되므로, 클래스 이름 고민이 크게 줄고 대부분 직관적으로 사용할 수 있습니다.
3. 반응형 레이아웃을 쉽게 구현할 수 있다.
- 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) { ... }
4. 스타일 유지 관리가 쉽다.
- Tailwind CSS는 컴포넌트의 클래스만 변경하면 스타일을 바로 수정할 수 있어 큰 CSS 파일을 찾아 수정할 필요가 없습니다.
덕분에 스타일 변경으로 인한 충돌이나 예기치 않은 영향을 최소화할 수 있습니다.
단점
Tailwind CSS의 단점으로는
1. 빌드 단계가 필요하다.
- Tailwind CSS를 생성하기 위해 빌드 프로세스를 거쳐야 하며, 이는 초기 설정에 약간의 오버헤드를 추가합니다.
2. 설치 및 설정이 필요하다.
- Tailwind CSS를 사용하려면 프로젝트에 설치하고 빌드 환경을 설정해야 하므로, 초기 준비 과정이 번거로울 수 있습니다.
3. CSS 파일이 커질 수 있다.
- Tailwind CSS는 새로운 스타일을 적용할 때마다 CSS 클래스가 생성되므로, 결과적으로 CSS 파일의 크기가 커지고 페이지 로딩 시간이 늘어날 수 있습니다.
또한 Tailwind로 구현하기 어려운 스타일을 별도의 CSS를 작성해야 해 프로젝트 내 스타일 연관성을 유지하기 어려울 수 있습니다.
사용법
tailwind CLI
1. 설치
npm install -D tailwindcss
npm tailwindcss initnpm을 통해 설치 tailwindcss 합니다.
2. 탬플릿 경로 설정하기
tailwind.config.js파일 안에 있는 모든 템플릿 파일에 경로를 추가하기tailwind.config.js파일에서는 커스텀 클래스와 색상, 폰트 등의 속성을 추가할 수 있음
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}3. CSS에 Tailwind directive 추가
- 메인 CSS 파일의 Tailwind의 모든 layer에
@tailwinddirective를 추가한다.
@tailwind base;
@tailwind components;
@tailwind utilities;4. Tailwind CLI 빌드 프로세스 시작
npx@tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch5. HTML에서 Tailwind 사용 시작
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>- 컴파일된 CSS 파일을 head에 추가하고 tailwind의 유틸리티 클래스를 사용하여 콘텐츠 스타일을 지정한다.
사이즈 설정
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를 사용하면 됩니다.
색상 설정
Tailwind CSS에서 색상 설정은
텍스트 색상 : text-{색상}-{명도}
배경 색상 : bg-{색상}-{명도} 으로 나타낼 수 있습니다.
<p class="text-red-500">빨간색 텍스트</p>
<div class="bg-yellow-300">노란색 배경</div>디스플레이 설정
Tailwind css는 웹 페이지의 레이아웃을 구성할 때 필요한 다양한 디스플레이 설정을 제공합니다.
이러한 설정은 일반적으로 사용되는 flex, inline, inline-block, inline-flex와 같은 속성들을 포함합니다.
Tailwind css를 사용하면 이러한 디스플레이 속성을 클래스 형태로 쉽게 적용할 수 있어 레이아웃을 빠르고 효과적으로 구성할 수 있습니다.
레이아웃 설정
레이아웃 설정은 장점에서 말했던 것처럼 미디어 쿼리(sm, md, lg, xl, 2xl)를 이용하여 설정할 수 있습니다.
여백 설정
p(패딩) m(마진)을 사용하여 요소들 사이의 여백 공간을 조절합니다.
이러한 여백 설정은 p-숫자 또는 m-숫자 형식으로 적용되며 이를 통해 웹 페이지의 요소들 간에 적절한 공간을 생성하고 관리할 수 있습니다.
예를 들어, p-3은 요소 전체 방향에 0.75rem의 간격으로 패딩을 추가합니다.
가로축과 세로축 방향의 여백을 조절하고 싶다면, px-3 또는 py-3을 사용하여 쉽게 적용할 수 있습니다.
폰트 설정
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
상태 변화 설정
Tailwind CSS는 마우스 오버 효과와 같은 상태 변화를 쉽게 구현할 수 있는 기능을 제공합니다.
이 기능은 hover:접두사를 사용하여 적용할 수 있으며 요소에 마우스를 올렸을 때의 시각적 변화를 정의할 수 있습니다.
예를 들어, hover:bg-blue-500 클래스를 버튼에 적용하면 사용자가 버튼 위에 마우스를 올렸을 때 배경색이 파란색으로 변경됩니다.
마무리
여기까지 Tailwind CSS에 대해 알아보았습니다!
이 글을 읽고 더욱 효율적이게 tailwind를 사용하면 좋겠습니다.
감사합니다.
테일윈드 개빡세서 저희도 전공동아리에서 쓰려다가 이모션으로 바꿨는데 대단하시네요