카테고리 없음
Tailwind Css에서 자주 쓰는 스타일 유틸리티
jimmmy_jin
2025. 2. 6. 19:03
📌 Tailwind CSS - 가장 많이 쓰는 유틸리티 정리 🚀
✅ 1. 레이아웃 (Flexbox & Grid)
📌 레이아웃을 잡을 때 자주 쓰는 Tailwind 클래스
<div className="flex items-center justify-between">
<div>Left</div>
<div>Right</div>
</div>
속성 설명
| flex | Flexbox 컨테이너 생성 |
| flex-row | 가로 정렬 (기본값) |
| flex-col | 세로 정렬 |
| items-center | 세로 중앙 정렬 |
| justify-center | 가로 중앙 정렬 |
| justify-between | 좌우 끝에 배치 |
| gap-4 | 요소 간 간격 추가 |
| grid grid-cols-3 | 3개의 컬럼으로 나누는 Grid |
📌 예제: 그리드 레이아웃
<div className="grid grid-cols-3 gap-4">
<div className="bg-gray-200 p-4">Item 1</div>
<div className="bg-gray-300 p-4">Item 2</div>
<div className="bg-gray-400 p-4">Item 3</div>
</div>
✅ 2. 간격 (Padding, Margin, Gap)
📌 여백 조절 (단위: px, rem 자동 적용)
<div className="p-4 m-4">
Padding & Margin Example
</div>
속성 설명
| p-4 | 내부 여백 (Padding) |
| px-4 | 좌우 Padding |
| py-4 | 상하 Padding |
| m-4 | 바깥 여백 (Margin) |
| mx-auto | 가로 중앙 정렬 |
✅ 3. 크기 (Width & Height)
📌 반응형 크기 조절
<div className="w-full h-64">Full Width, 64px Height</div>
속성 설명
| w-full | 부모 너비 100% |
| w-1/2 | 부모의 50% 너비 |
| w-96 | 고정 너비 (96px) |
| h-screen | 전체 화면 높이 |
| min-h-screen | 최소 화면 높이 |
✅ 4. 배경색 & 테두리 & 그림자
📌 배경색 & 테두리 & 그림자 추가
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
Styled Box
</div>
속성 설명
| bg-blue-500 | 배경색 |
| text-white | 텍스트 색상 |
| rounded-lg | 모서리 둥글게 |
| border border-gray-300 | 테두리 추가 |
| shadow-md | 그림자 효과 |
✅ 5. 타이포그래피 (글자 스타일)
📌 폰트 크기, 굵기, 정렬
<h1 className="text-2xl font-bold text-center">
Centered Title
</h1>
속성 설명
| text-xl | 폰트 크기 (기본 16px 기준) |
| font-bold | 글자 두껍게 |
| text-center | 텍스트 중앙 정렬 |
| leading-loose | 줄 간격 늘리기 |
✅ 6. 버튼 스타일
📌 버튼 스타일 예제
<button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
Click Me
</button>
속성 설명
| px-4 py-2 | 내부 여백 (Padding) |
| bg-indigo-600 | 배경색 |
| text-white | 텍스트 색상 |
| rounded-md | 버튼 모서리 둥글게 |
| hover:bg-indigo-700 | 마우스 오버 시 배경 변경 |
✅ 7. 반응형 디자인 (Responsive)
📌 모바일 & 태블릿 & 데스크탑 대응
<div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
Responsive Width
</div>
속성 설명
| sm: | 640px 이상 적용 |
| md: | 768px 이상 적용 |
| lg: | 1024px 이상 적용 |
| xl: | 1280px 이상 적용 |
✅ 8. 상태 & 효과 (Hover, Focus, Active)
📌 버튼 & 입력 필드 효과 추가
<input className="border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500" />
속성 설명
| hover:bg-gray-200 | 마우스 오버 시 배경색 변경 |
| focus:ring-2 focus:ring-blue-500 | 입력 필드 클릭 시 효과 |
✅ 9. 모달 & 다이얼로그
📌 모달창 스타일
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50">
<div className="bg-white p-6 rounded-lg shadow-lg">Modal Content</div>
</div>
속성 설명
| fixed | 화면에 고정 |
| top-0 left-0 w-full h-full | 전체 화면 크기 |
| bg-opacity-50 | 반투명 배경 |
✅ 10. 애니메이션 & 트랜지션
📌 부드러운 애니메이션 효과
<button className="transform hover:scale-105 transition duration-300">
Hover Me
</button>
속성 설명
| transition duration-300 | 애니메이션 적용 |
| hover:scale-105 | 마우스 오버 시 크기 확대 |
📌 Tailwind CSS - 웹 개발 시 가장 많이 쓰는 유틸리티 정리 (확장판) 🚀
1️⃣ 레이아웃 & 정렬
📌 레이아웃을 잡을 때 자주 쓰는 Tailwind 클래스
<div className="flex items-center justify-between p-4 bg-gray-200">
<div>Left</div>
<div>Right</div>
</div>
속성 설명
| flex | Flexbox 컨테이너 생성 |
| flex-row / flex-col | 가로 / 세로 정렬 |
| items-center | 세로 중앙 정렬 |
| justify-center | 가로 중앙 정렬 |
| justify-between | 좌우 끝 배치 |
| gap-4 | 요소 간 간격 추가 |
| grid grid-cols-3 | 3개의 컬럼으로 나누는 Grid |
📌 2열 정렬 예제
<div className="grid grid-cols-2 gap-4">
<div className="bg-blue-200 p-4">Column 1</div>
<div className="bg-blue-300 p-4">Column 2</div>
</div>
📌 카드 레이아웃 예제
<div className="grid grid-cols-3 gap-6">
<div className="bg-white shadow-lg p-4 rounded-lg">Card 1</div>
<div className="bg-white shadow-lg p-4 rounded-lg">Card 2</div>
<div className="bg-white shadow-lg p-4 rounded-lg">Card 3</div>
</div>
2️⃣ 크기 조절 (Width & Height)
<div className="w-1/2 h-40 bg-gray-300">50% Width</div>
속성 설명
| w-full | 부모 컨테이너 100% 너비 |
| w-1/2 | 부모의 50% 너비 |
| h-screen | 전체 화면 높이 |
| min-h-screen | 최소 화면 높이 |
📌 고정된 크기 박스 예제
<div className="w-96 h-64 bg-gray-300">Fixed Size Box</div>
3️⃣ 반응형 디자인
📌 기본적인 반응형 적용
<div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
Responsive Box
</div>
속성 설명
| sm: | 640px 이상 적용 |
| md: | 768px 이상 적용 |
| lg: | 1024px 이상 적용 |
| xl: | 1280px 이상 적용 |
📌 반응형 네비게이션 바
<nav className="flex flex-col md:flex-row items-center justify-between">
<div>Logo</div>
<ul className="hidden md:flex space-x-4">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
✔️ 모바일에서는 세로 정렬 (flex-col)
✔️ 데스크탑에서는 가로 정렬 (flex-row)
✔️ 모바일에서는 메뉴 숨김 (hidden md:flex)
4️⃣ 다크 모드 적용
Tailwind는 다크모드 테마를 기본적으로 지원해.
<div className="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
This text changes based on theme
</div>
📌 HTML에서 다크모드 설정
<html class="dark">
📌 Tailwind 설정 (tailwind.config.js)
module.exports = {
darkMode: 'class', // 'media'로 하면 자동 감지
};
5️⃣ 버튼 & 폼 스타일링
📌 버튼 스타일
<button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">
Click Me
</button>
속성 설명
| bg-indigo-600 | 배경색 |
| hover:bg-indigo-700 | 마우스 오버 시 색 변경 |
| rounded-md | 모서리 둥글게 |
| transition | 부드러운 애니메이션 |
📌 입력 필드 스타일
<input className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Enter text..." />
📌 체크박스 & 토글 스위치
<label className="flex items-center cursor-pointer">
<input type="checkbox" className="hidden peer" />
<div className="w-10 h-5 bg-gray-300 rounded-full peer-checked:bg-blue-500"></div>
</label>
6️⃣ 애니메이션 & 트랜지션
📌 Hover 효과
<button className="transform hover:scale-105 transition duration-300">
Hover Me
</button>
속성 설명
| transition duration-300 | 애니메이션 적용 |
| hover:scale-105 | 마우스 오버 시 크기 확대 |
📌 Fade-In 효과
<div className="opacity-0 animate-fade-in">Hello World</div>
📌 Tailwind 설정 (tailwind.config.js)
module.exports = {
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out forwards',
},
keyframes: {
fadeIn: {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
},
},
},
},
};
7️⃣ 카드 & 모달 UI
📌 카드 디자인
<div className="bg-white shadow-lg p-4 rounded-lg">
<h3 className="text-xl font-bold">Card Title</h3>
<p className="text-gray-600">Card content here.</p>
</div>
📌 모달창 디자인
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-white p-6 rounded-lg shadow-lg">Modal Content</div>
</div>
🔥 Tailwind CSS 요약
✅ 레이아웃 → flex, grid, gap, justify-between
✅ 크기 조절 → w-full, h-screen, max-w-lg
✅ 반응형 디자인 → md:flex, lg:w-1/3
✅ 버튼 & 폼 스타일링 → bg-indigo-600, hover:bg-indigo-700
✅ 애니메이션 → hover:scale-105, animate-fade-in
✅ 다크모드 지원 → dark:bg-gray-900