Tailwind CSS

Tailwind CSS는 한 가지 역할만 하는 작은 클래스를 HTML에 직접 적어 페이지를 꾸미는 유틸리티 우선(utility-first) CSS 프레임워크입니다. p-4, text-center, bg-blue-500 같은 클래스는 각각 하나의 스타일만 지정합니다. 개발자는 이런 클래스를 조합해 직접 CSS를 많이 쓰지 않고도 어떤 디자인이든 만들 수 있습니다.

유틸리티 우선 CSS는 컴포넌트마다 별도 클래스를 만드는 대신, 각각 한 가지 일만 하는 작은 클래스를 여러 개 모아 디자인을 만드는 방식입니다. 예를 들어 버튼의 모양은 여백, 색상, 모서리 둥글기, 글자 굵기를 지정하는 클래스들로 결정됩니다. 이 방식은 스타일을 마크업 가까이에 두고, 계속 불어나는 거대한 스타일시트를 피하게 해 줍니다.

Tailwind CSS는 스타일 작업 속도를 높이고 최종 CSS 파일을 작게 유지해 주기 때문에 많은 개발자가 선택합니다. 클래스 이름을 새로 지어낼 필요도, 수정할 때마다 HTML과 CSS 파일을 오갈 필요도 없습니다. 여백, 색상, 글자 크기에 일관된 단계가 정해져 있어 디자인도 깔끔하게 유지됩니다.

Tailwind CSS는 나만의 디자인을 만들 수 있는 저수준 유틸리티 클래스를 제공하고, Bootstrap은 내비게이션 바, 카드, 모달 같은 완성된 컴포넌트를 제공합니다. 디자인 작업 없이 표준적인 모습을 빠르게 만들고 싶다면 Bootstrap이 유리합니다. 기본 테마와 씨름하지 않고 고유한 디자인을 만들어야 하는 프로젝트라면 Tailwind CSS가 더 낫습니다.

Tailwind CSS는 npm으로 설치한 뒤 Vite, PostCSS, Tailwind CLI 같은 프로젝트의 빌드 도구에 연결합니다. Tailwind CSS 버전 4에서는 패키지를 추가한 다음 메인 CSS 파일 맨 위에 @import "tailwindcss"를 적어 불러오면 됩니다. 공식 설치 가이드에는 Laravel, Next.js, Vite 등 자주 쓰는 프레임워크별로 짧은 설치 단계가 정리되어 있습니다.

margin, padding, flexbox, grid 같은 기본 CSS 속성을 이미 이해하는 초보자라면 Tailwind CSS를 써도 괜찮습니다. Tailwind의 각 클래스는 실제 CSS 속성에 대응하므로 CSS를 먼저 배우면 클래스가 쉽게 읽힙니다. CSS 기초를 건너뛴 초보자는 Tailwind CSS에서 레이아웃이 깨졌을 때 고치기 어려워하는 경우가 많습니다.

CSS를 아는 개발자라면 대부분 며칠 만에 Tailwind CSS로 실제 작업을 할 수 있습니다. 클래스 이름이 명확한 규칙을 따르기 때문에 한 그룹의 클래스를 익히면 나머지도 짐작할 수 있습니다. 반응형 변형, 사용자 정의 테마, 컴포넌트 패턴까지 능숙해지려면 실제로 몇 주 정도 사용해 봐야 합니다.

Tailwind CSS의 반응형 디자인은 유틸리티 클래스 앞에 sm:, md:, lg: 같은 브레이크포인트 접두사를 붙이는 방식으로 작동합니다. Tailwind CSS는 모바일 우선이라 접두사가 없는 클래스는 모든 화면에 적용되고, 접두사가 붙은 클래스는 해당 브레이크포인트 이상에서 적용됩니다. 예를 들어 text-sm md:text-lg는 휴대폰에서는 작은 글자, 넓은 화면에서는 큰 글자를 보여 줍니다.

Tailwind CSS의 기본 브레이크포인트는 sm 640픽셀, md 768픽셀, lg 1024픽셀, xl 1280픽셀, 2xl 1536픽셀입니다. 각 브레이크포인트는 최소 너비를 뜻하며, 이는 Tailwind의 모바일 우선 방식과 맞아떨어집니다. 프로젝트의 테마 설정에서 이 값을 바꾸거나 새 브레이크포인트를 추가할 수 있습니다.

Tailwind CSS에서는 dark:bg-gray-900처럼 클래스 앞에 dark: 접두사를 붙여 다크 모드를 추가합니다. 기본적으로 Tailwind CSS는 방문자의 운영체제 설정을 따릅니다. 사용자가 버튼으로 다크 모드를 전환하게 하려면 dark 변형이 페이지의 클래스나 data 속성에 따라 작동하도록 설정하면 됩니다.

Tailwind CSS 버전 4에서는 메인 CSS 파일의 @theme 블록 안에 CSS 변수를 정의해 색상과 글꼴을 바꿉니다. --color-brand 같은 변수를 만들면 bg-brand, text-brand 같은 클래스가 자동으로 생깁니다. 이전 버전에서는 같은 일을 tailwind.config.js 파일로 했으며, 이 방식도 버전 4에서 호환 옵션을 통해 계속 사용할 수 있습니다.

요소 하나에 클래스가 많이 붙을 수 있어서 Tailwind CSS를 쓰면 HTML이 복잡해 보일 수 있습니다. 대부분의 팀은 반복되는 패턴을 Blade, React, Vue 같은 프레임워크의 컴포넌트로 만들어 이 문제를 해결합니다. 대신 스타일이 마크업 바로 옆에 보이기 때문에 수정이 빠르고 안전하다는 장점이 있습니다.

Tailwind CSS는 프로젝트 파일을 스캔해 실제로 사용된 클래스만 생성하는 방식으로 CSS 파일을 작게 유지합니다. 쓰지 않는 유틸리티는 최종 스타일시트에 들어가지 않습니다. 그래서 큰 사이트라도 Tailwind CSS로 빌드한 운영용 CSS 파일은 보통 크기가 작습니다.

Tailwind CSS의 @apply 지시어는 직접 작성한 CSS 규칙 안에서 Tailwind 유틸리티 클래스를 사용할 수 있게 해 줍니다. 텍스트 편집기가 만들어 낸 HTML처럼 직접 손댈 수 없는 콘텐츠를 꾸밀 때 편리합니다. 보통은 컴포넌트가 스타일을 재사용하는 더 깔끔한 방법이므로 Tailwind 팀은 @apply를 꼭 필요할 때만 쓰라고 권장합니다.

네, Tailwind CSS는 Laravel과 잘 맞으며, 새 Laravel 프로젝트는 Vite와 함께 Tailwind CSS를 쓰도록 미리 설정되어 있습니다. Blade 템플릿에 Tailwind 클래스를 쓰면 Vite가 최종 CSS를 빌드합니다. Laravel의 스타터 키트도 로그인 화면과 대시보드 화면에 Tailwind CSS를 사용합니다.

네, Tailwind CSS는 React, Vue, Svelte를 비롯한 대부분의 JavaScript 프레임워크에서 작동합니다. 클래스는 React에서는 className, Vue에서는 class로 컴포넌트 마크업에 적습니다. 컴포넌트마다 자기 클래스를 품고 있으므로 Tailwind CSS는 컴포넌트 기반 프레임워크와 특히 잘 어울립니다.

Tailwind CSS가 검색 순위에 직접 영향을 주지는 않지만, CSS 파일을 작게 유지하고 페이지를 빠르게 만들어 간접적으로 SEO에 도움이 될 수 있습니다. 페이지 속도는 Google의 페이지 경험 신호 중 하나입니다. 그래도 스타일 도구보다는 콘텐츠, 페이지 구조, 의미에 맞는 HTML이 훨씬 더 중요합니다.

Tailwind CSS의 임의 값은 테마에 없는 정확한 값을 대괄호 안에 적어 바로 사용할 수 있게 해 주는 기능입니다. 예를 들어 w-[37%]나 top-[117px]라고 쓰면 그 값에 맞는 클래스가 즉석에서 만들어집니다. 한 번만 쓰는 경우에는 유용하지만, 자주 쓰는 값이라면 테마에 넣어 두는 것이 좋습니다.

Tailwind CSS의 hover와 focus 상태는 유틸리티 클래스 앞에 hover:, focus:, active: 같은 상태 접두사를 붙이는 방식으로 작동합니다. 예를 들어 bg-blue-500 hover:bg-blue-600은 마우스를 올렸을 때 버튼 색을 더 진하게 바꿉니다. 접두사는 md:hover:underline처럼 브레이크포인트나 다크 모드와 함께 조합할 수 있습니다.

아니요, Tailwind CSS 자체에는 유틸리티 클래스만 있고 모달이나 내비게이션 바 같은 완성된 컴포넌트는 들어 있지 않습니다. 완성된 컴포넌트는 공식 Tailwind Plus나 daisyUI, Flowbite 같은 커뮤니티 라이브러리 등 별도 모음에서 가져옵니다. 많은 팀은 유틸리티 위에 자신만의 작은 컴포넌트 세트를 만들어 씁니다.

네, Tailwind CSS는 rtl:, ltr: 변형과 논리적 유틸리티 클래스로 오른쪽에서 왼쪽 레이아웃을 지원합니다. ms-4, pe-2 같은 논리적 클래스는 줄의 시작이나 끝을 기준으로 여백과 안쪽 여백을 지정하므로 아랍어에서는 자동으로 방향이 바뀝니다. 덕분에 하나의 마크업으로 영어 페이지와 아랍어 페이지를 모두 만들 수 있습니다.

Tailwind CSS 버전 4에서는 설정이 @theme 블록과 @import 한 줄을 통해 CSS 안으로 옮겨졌습니다. 또한 더 빠른 빌드 엔진, 콘텐츠 파일 자동 감지, 캐스케이드 레이어 같은 최신 CSS 기능이 도입되었습니다. 버전 3에서 업그레이드하는 대부분의 프로젝트는 공식 업그레이드 도구로 코드를 갱신할 수 있습니다.

디자인을 거의 직접 만들지 않고 완성된 컴포넌트 세트 전체가 필요한 프로젝트이거나, 팀이 전통적인 CSS 작성을 선호한다면 Tailwind CSS가 맞지 않을 수 있습니다. 스타일이 몇 개뿐인 작은 정적 페이지라면 프레임워크가 아예 필요 없을 수도 있습니다. Tailwind CSS는 고유한 디자인이 계속 커져 가는 프로젝트에서 가장 큰 효과를 냅니다.

반복되는 패턴을 컴포넌트로 만들고 클래스를 일정한 순서로 정렬하면 Tailwind CSS 클래스를 깔끔하게 정리할 수 있습니다. Tailwind CSS용 공식 Prettier 플러그인은 저장할 때 클래스를 자동으로 정렬해 줍니다. 브랜드 색상과 여백을 테마에 정의해 두면 클래스도 짧고 일관되게 유지됩니다.

네, Tailwind CSS는 MIT 라이선스의 오픈소스라서 개인 프로젝트와 상업 프로젝트 모두에 사용할 수 있습니다. 이 라이선스는 어떤 제품에서든 Tailwind CSS를 사용하고, 수정하고, 배포하는 것을 허용합니다. 소스 코드는 GitHub에 공개되어 있어 누구나 읽어 보고 문제를 신고할 수 있습니다.