tailwindlabs/tailwindcss

어떤 프로젝트인가요?

핵심 기능

• 01레이아웃, 간격, 타이포그래피, 색상 등에 사용할 수 있는 저수준 유틸리티 클래스를 제공합니다.
• 02프로젝트에서 사용하는 CSS만 생성합니다.
• 03클래스 접두사를 통해 반응형 브레이크포인트와 hover 및 focus 같은 상태 변형을 지원합니다.
• 04npm으로 설치할 수 있는 PostCSS 플러그인으로 제공됩니다.
• 05클래스 기반 변형을 통해 다크 모드를 지원합니다.

활용 사례

• 별도의 스타일시트를 작성하지 않고 사용자 지정 컴포넌트 디자인을 만드는 경우.
• HTML 또는 JSX 템플릿에서 바로 레이아웃을 프로토타이핑하고 반복 개선하는 경우.
• 일관된 간격과 타이포그래피 스케일을 적용해 반응형 웹사이트를 만드는 경우.

빠른 시작

1. 1

   설치 방법은 tailwindcss.com의 전체 문서를 확인하세요

토픽

자주 묻는 질문

tailwindcss은(는) 무엇인가요?

작고 단일 목적을 가진 클래스를 사용해 HTML과 JSX에서 바로 사용자 지정 UI를 만드는 유틸리티 우선 CSS 프레임워크입니다. Tailwind CSS는 유틸리티 우선 CSS 프레임워크입니다. 개발자는 의미를 담은 클래스 이름으로 사용자 지정 스타일시트를 작성하는 대신, flex, pt-4, text-center 같은 작고 단일 목적을 가진 유틸리티 클래스를 마크업에 바로 적용해 스타일을 조합합니다.

tailwindcss은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

tailwindcss은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

tailwindcss은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. tailwindcss의 마지막 커밋은 2026년 10월 19일입니다.

tailwindcss은(는) 어디에 사용할 수 있나요?

별도의 스타일시트를 작성하지 않고 사용자 지정 컴포넌트 디자인을 만드는 경우. HTML 또는 JSX 템플릿에서 바로 레이아웃을 프로토타이핑하고 반복 개선하는 경우. 일관된 간격과 타이포그래피 스케일을 적용해 반응형 웹사이트를 만드는 경우.

tailwindcss는 어떻게 설치하나요?

설치 방법은 tailwindcss.com의 전체 문서를 확인하세요

tailwindcss은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/tailwindlabs/tailwindcss