Tailwind CSS란?

---

CSS 프레임워크. 미리 정의된 클래스를 사용하여 HTML 스타일을 쉽게 적용할 수 있음

• 클래스 기반 : Utility-first라는 개념하에 클래스 이름으로 스타일링 가능. HTML와 CSS를 분리를 최소화하여 재사용성을 높임.
• 커스텀 설정 : tailwind.config.js 파일을 통해 사용자 정의 스타일 및 구성 제공
• 일관된 디자인 : 미리 정의된 클래스로 일관성 있는 디자인 구현 가능
• 반응형 스타일링 : 미디어 크기에 맞는 반응형 디자인을 지원하며, 클래스 접두사로 편리하게 제어 가능
• 풍부한 자료 : 거대한 커뮤니티와 풍부한 자료, 그리고 Tailwind를 이용한 여러가지 컴포넌트들

[장점]

빠른 개발, 커스터마이징, 재사용성, 반응형 디자인 간편하게 구현 가능

[단점]

점점 클래스가 복잡해지고 파일 크기가 커짐, 초기 학습 비용 많이 들어감

Next.js에서 Tailwind CSS 사용하기

---

1. yarn으로 Tailwind CSS 설치 후, Tailwind CSS 구성 파일 생성을 위해 tailwindcss init 커맨드 입력

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. PostCSS 설정 파일에 Tailwind 추가

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
}

1. TailwindCSS 적용할 템플릿 파일 경로를 tailwind.config.js 설정 파일에 명시

module.exports = {
	content: [
		'./src/pages/**/*.{js, jsx, ts, tsx, mdx}',
		'./src/components/**/*.{js, ts, jsx, tsx, mdx}',
	],
	theme: {
		extend: {},
	},
	plugins: [],
}

1. Tailwind CSS를 사용하기 위한 CSS 파일을 생성하고 tailwindcss를 import한다.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

1. 프로젝트를 시작하고, tailwind 클래스를 적용한다

핵심 개념

---

Tailwind CSS 공식 도큐 참고 https://tailwindcss.com/docs/styling-with-utility-classes

• Utility-First Fundamentals (유틸리티-퍼스트 기본 원칙)
• Hover, focus, and Other states (호버 및 포커스 다른 상태 처리)
• Responsive design (반응형 디자인)
• Dark mode (다크 모드)
• Reusing Styles (스타일 재사용)
• Adding Custom Styles (커스텀 스타일 추가)
• Function & Directives (함수 및 디렉티브)