Tailwind CSS — 유틸리티 우선 CSS

기술 카탈로그 / tailwindcss.html

미리 만들어 둔 작은 클래스 이름을 조합해 스타일을 만드는 방식입니다. 별도 CSS 파일을 크게 늘리지 않고 화면을 구성할 수 있습니다.

💬 Tailwind는 "스타일 이름"을 조합해 화면을 만듭니다.

예를 들어 p-4(안쪽 여백), text-center(가운데 정렬)처럼 이미 정의된 클래스를 붙입니다. 클래스 이름이 곧 스타일이라, 스타일을 어디에 정의했는지 찾아 헤맬 일이 줄어듭니다.

• 유틸리티 클래스: 하나의 작은 규칙을 담당합니다.
• 반응형: md:, lg: 접두사로 화면 크기별 스타일을 지정합니다.
• JIT: 실제로 사용한 클래스만 최종 CSS에 포함됩니다.

설치 (기존 프로젝트)

npm install -D tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

사용 예

<div class="p-4 bg-white rounded shadow">
  <p class="text-center text-gray-700">Hello</p>
</div>

자주 겪는 문제

• 스타일이 적용되지 않음: content 경로(스캔 대상 파일)에 소스 파일이 포함됐는지 확인하세요.
• 클래스가 너무 길어짐: 반복되는 조합은 컴포넌트로 묶는 편이 좋습니다.

검증일은 자료의 최신성을 나타냅니다. 오래된 자료는 적용 조건을 확인하세요.