Latest Updates

약 8개월 전, 우리는 Tailwind CSS v4.0의 진행 상황을 오픈소스로 공개했습니다. 버그 수정, 하위 호환성 작업, 그리고 Windows CI 실패 문제 해결에 수백 시간을 투자한 끝에, 이제 첫 번째 공개 베타 버전을 출시하게 되어 매우 기쁩니다.

지난 몇 달 동안 우리는 Tailwind UI를 위한 새로운 SaaS 마케팅 사이트 템플릿을 작업해왔습니다. 이 템플릿은 Radiant라고 불리며, 오늘부터 사용할 수 있습니다.

React용 Headless UI v2.1을 출시했습니다. 이번 버전에서는 트랜지션 API를 크게 간소화하고, 여러 다이얼로그를 형제 엘리먼트로 렌더링하는 기능을 추가했습니다.

정렬 시 불필요한 공백과 중복 클래스를 제거하는 기능을 추가한 prettier-plugin-tailwindcss의 새 버전을 출시했습니다.

Catalyst의 첫 번째 주요 업데이트를 발표했습니다. 두 가지 새로운 애플리케이션 레이아웃, 네비게이션 바 및 사이드바 컴포넌트, 설명 목록 등이 추가되었습니다.

자신의 도구로 실제 무언가를 만들어보는 것만큼 개선점을 찾는 데 좋은 방법은 없습니다. 지난 몇 달 동안 Catalyst를 작업하면서, Headless UI에 수십 가지 개선 사항을 적용해 더 적은 코드를 작성하고 개발자 경험을 더욱 향상시켰습니다.

우리는 야심 찬 새 프로젝트를 함께할 디자인 엔지니어와 스태프 소프트웨어 엔지니어를 채용합니다. 두 직군 모두 완전 원격 근무이며, 연봉은 $275,000 USD입니다.

지난 여름 Tailwind Connect에서 Oxide 미리보기를 공유했습니다. Oxide는 Tailwind CSS를 위한 새로운 고성능 엔진으로, 개발자 경험을 단순화하고 Tailwind가 처음 출시된 이후 웹 플랫폼이 어떻게 진화했는지를 활용하도록 설계되었습니다.

지난 4개월 동안 우리는 Tailwind UI에 그 어느 때보다 많은 작업을 진행했고, 마침내 목표를 달성한 지금 여러분께 그 모든 것을 공개하게 되어 기쁩니다.

오늘은 바로 그 날입니다. 여러분의 휴가 코딩 세션에 딱 맞춰, React를 위한 완전한 컴포넌트화와 기본 기능이 포함된 애플리케이션 UI 키트인 Catalyst의 첫 개발 프리뷰를 공개했습니다.

주요 신제품을 만들면서 자신의 도구에 있으면 좋을 만한 기능들을 찾는 것만큼 좋은 방법은 없습니다. 그래서 우리는 그 영감을 활용해 Tailwind CSS v3.4를 만들었습니다.

Heroicons v2.1을 출시했습니다. 이번 버전에는 더 조밀하고 고밀도 UI를 위해 설계된 16×16 크기의 새로운 마이크로 스타일 아이콘 세트가 포함되어 있습니다.

우리는 Studio를 출시했습니다. 이는 지난 몇 달 동안 Tailwind UI를 위해 작업해온 아름다운 새로운 에이전시 웹사이트 템플릿입니다.

지난달, 200명 이상의 사람들이 캐나다 온타리오 주의 캠브리지에 모여 함께 시간을 보내고, 새로운 작업물을 엿보는 자리를 가졌습니다.

Tailwind CSS v3.3이 출시되었습니다. 오랫동안 요청받았던 기능들과 여러분이 원하는지도 몰랐던 새로운 기능들이 추가되었습니다.

몇 달 동안 준비해온 끝에, 우리의 다음 웹사이트 템플릿인 Protocol을 드디어 출시하게 되어 기쁩니다. Protocol은 멋진 API 참조 웹사이트를 구축하기 위한 아름다운 스타터 키트입니다.

다시 그 시간이 왔습니다! _“새로운 Tailwind 릴리스에 추가할 게 뭐가 있을지 전혀 모르겠다”_에서 _“와, 이건 정말 엄청난 양의 새로운 기능들이네 — 상황이 완전히 통제 불능이 되기 전에 릴리스를 태그해야겠다”_로 빠르게 전환되는 그 시간 말이죠.

Tailwind UI를 위한 멋진 새로운 개인 웹사이트 템플릿을 출시했고, Heroicons를 처음부터 다시 디자인했으며, 흥미로운 새로운 기능이 추가된 Headless UI의 새 버전을 출시했습니다.

방금 출시한 새로운 Tailwind UI 템플릿, 공식 Tailwind CSS 채용 게시판, 그리고 앞으로 몇 주 안에 나올 여러 프로젝트에 대한 소식입니다.

프로그래밍 커리어 초기에 나는 thoughtbot을 팔로우하는 것을 좋아했습니다. 그들은 항상 흥미로운 프로그래밍 글을 쓰고, 훌륭한 스크린캐스트를 제작하며, 놀라운 책을 출판했습니다. 그들이 자신들의 기술을 진심으로 아끼고 있다는 것을 느낄 수 있었고, 그것은 나에게 큰 영감을 주었습니다.

Tailwind CSS v3.0을 출시한 지 약 6개월이 지났고, 그동안 코드베이스에 많은 작은 개선 사항을 모아왔지만, 아직까지 _“좋아, 이제 출시할 때가 됐다”_고 말할 만한 _그-하나의-기능_이 없었습니다.

오랜만에 우리가 진행 중인 작업에 대해 글을 쓰게 되었습니다. 사실 공유할 내용이 너무 많아서, 이 업데이트를 작성하는 주요 동기는 다음 주에 더 많은 내용이 나올 예정이기 때문입니다. 이미 출시한 내용을 공유하지 않으면 새로운 내용을 공유할 수 없다는 느낌이 들었습니다.

Headless UI v1.5를 출시했습니다. 이번 버전에는 새로운 Combobox 컴포넌트가 포함되어 있습니다. 콤보박스는 선택 컨트롤과 비슷하지만 자동 완성/타이핑 기능이 추가된 형태입니다. 대규모 데이터셋을 다룰 때 적절한 옵션을 빠르게 필터링할 수 있어 일반적인 선택 박스 대신 유용하게 사용할 수 있습니다.

Tailwind 프로젝트에서 유틸리티 클래스를 정렬하는 최선의 방법에 대해 최소 4년 동안 논의가 이어져 왔습니다. 오늘 우리는 Tailwind CSS용 공식 Prettier 플러그인을 출시하며, 이제 더 이상 걱정할 필요가 없음을 알리게 되어 기쁩니다.

오늘 우리는 Tailwind CSS Typography 플러그인의 다음 버전을 발표합니다. 이번 버전은 쉬운 다크 모드 지원, 새로운 커스텀 API, 그리고 지원 방법을 찾기 어려웠던 not-prose 클래스를 제공합니다.

Tailwind CSS는 자바스크립트로 작성되었으며 npm 패키지로 배포됩니다. 이는 항상 Node.js와 npm이 설치되어 있어야 사용할 수 있다는 것을 의미합니다.

Tailwind CSS v3.0이 출시되었습니다. 놀라운 성능 향상, 큰 워크플로우 개선, 그리고 정말 엄청난 수의 새로운 기능들을 소개합니다.

약 6개월간의 작업 끝에, 우리는 마침내 Tailwind UI Ecommerce를 출시했습니다. 이는 2020년 2월 초출시 이후 Tailwind UI의 첫 번째 완전히 새로운 컴포넌트 키트입니다.

방금 Headless UI v1.4를 출시했습니다. 이번 버전에는 새로운 Tab 컴포넌트와 Popover, Disclosure 컴포넌트를 더 쉽게 수동으로 닫을 수 있는 새로운 API가 포함되어 있습니다.

우리가 정말로 계획하고 있었다고 말할 수는 없지만, 지난 몇 주 동안 Tailwind에 새롭고 흥미로운 기능들을 추가하는 데 재미를 느꼈고, 이제는 릴리즈를 할 적절한 시기라고 생각합니다. 그래서 여기 있습니다 — Tailwind CSS v2.2!

작년에 우리는 Tailwind UI를 출시했습니다. 이는 Tailwind CSS로 제작된 전문적으로 디자인된 UI 예제들의 방대한 디렉토리입니다. 지금까지 Tailwind UI의 모든 예제는 순수 HTML로 작성되어 모든 웹 개발자들이 공통적으로 사용할 수 있는 가장 기본적인 형태였으며, 이를 어떤 템플릿 언어나 JavaScript 프레임워크에도 적용할 수 있도록 했습니다.

지난 가을, 우리는 Headless UI를 발표했습니다. 이 라이브러리는 완전히 스타일이 적용되지 않은 접근성 있는 UI 컴포넌트로, Tailwind CSS와 완벽하게 어울리도록 설계되었습니다.

Tailwind CSS v2.0 이후 첫 번째 기능 업데이트가 도착했습니다. 이번 업데이트에는 다양한 멋진 기능들이 포함되어 있습니다! 새로운 JIT 엔진이 코어에 통합되었고, 합성 가능한 CSS 필터에 대한 퍼스트클래스 지원이 추가되었으며, 블렌딩 모드 유틸리티와 더 많은 기능들이 포함되었습니다.

1년 전쯤, 우리는 Tailwind UI와 함께 디자인한 아름다운 UI 아이콘 세트인 Heroicons의 첫 번째 버전을 출시했습니다. 그 이후로 수많은 새로운 아이콘을 추가하고, 전용 웹 경험을 디자인하고 출시했습니다.

Tailwind CSS를 개선해 오면서 가장 어려웠던 제약 중 하나는 개발 환경에서 생성되는 파일 크기였습니다. 설정 파일을 충분히 커스터마이징하면 생성된 CSS가 10MB 이상에 이를 수 있으며, 빌드 도구와 브라우저가 원활하게 처리할 수 있는 CSS 양에는 한계가 있습니다.

몇 년 전, Steve로부터 이런 메시지를 받았습니다: “이 사람의 Dribbble 프로필을 전에 보여준 적 있나? 오랫동안 팔로우했는데, 내가 본 작품 중 가장 마음에 드는 작품들이야”. 그 사람은 James McDonald였고, 오늘 우리는 James가 풀타임으로 팀에 합류한다는 소식을 전하게 되어 매우 기쁩니다.

오늘 우리는 Tailwind CSS: 제로부터 프로덕션까지라는 새로운 스크린캐스트 시리즈를 발표하게 되어 기쁩니다. 이 시리즈는 Tailwind CSS v2.0을 처음부터 시작하여 프로덕션까지 사용하는 데 필요한 모든 것을 가르칩니다.

지난 여름부터 David Luhr와 프로젝트 단위로 협력하며 Tailwind UI의 Figma 버전 개발 (거의 완료!), 그리고 Tailwind UI 템플릿 제작 시 접근성 전문 지식을 활용해 모든 사용자를 위한 마크업을 제공하기 위해 노력해 왔습니다. 오늘 David가 정식으로 팀에 합류하게 되어 기쁘게 생각합니다.

여러분이나 팀원이 Figma에서 신중하게 만든 아름다운 디자인을 구현한다고 상상해 보세요. 각 브레이크포인트에서 다양한 레이아웃을 완벽하게 구현했고, 여백과 타이포그래피도 완벽하게 조정했으며, 사용한 사진이 디자인에 생기를 불어넣고 있습니다.

정확히 18개월 전, 우리는 Tailwind CSS v1.0을 출시했습니다. 이는 안정성을 약속하면서도 매번 마이너 릴리스마다 흥미로운 새로운 기능을 추가하며 한계를 뛰어넘겠다는 의지를 보여주었습니다.

Tailwind CSS v1.9이 출시되었습니다. 이번 버전에서는 설정 프리셋 지원, 새로운 CSS 그리드 유틸리티, 확장된 border radius, rotate, skew 스케일, 접근성 개선 등이 추가되었습니다!

Tailwind를 최대한 활용하려면 빌드 단계가 필요합니다. tailwind.config.js 파일을 커스터마이징하거나, @apply로 컴포넌트를 추출하거나, 플러그인을 포함시키려면 이 방법밖에 없습니다.

모던 웹 애플리케이션을 구축할 때 가장 큰 고통 중 하나는 선택 메뉴, 드롭다운, 토글, 모달, 탭, 라디오 그룹과 같은 커스텀 컴포넌트를 만드는 것입니다. 이러한 컴포넌트는 프로젝트마다 비슷하지만 완전히 동일하지는 않습니다.

마지막으로 스크린캐스트를 발표한 이후 Tailwind에 많은 멋진 기능들이 추가되었습니다. 그래서 새로운 기능들을 모두 다루는 짧은 시리즈를 녹화하면 좋겠다고 생각했습니다.

Tailwind CSS v1.8이 출시되었습니다. 새로운 유틸리티 몇 가지, 몇 가지 새로운 기능, 그리고 흥미로운 실험적 기능이 추가되었습니다!

올해 2월, 우리는 Tailwind UI를 출시했습니다. 이는 여러분의 Tailwind 프로젝트에서 디자인을 시작할 때 복사하여 붙여넣을 수 있는 HTML 컴포넌트 예제 모음입니다.

몇 달 전, 우리는 Tailwind UI의 컴포넌트를 지원하기 위해 처음 설계한 무료 SVG 아이콘 세트인 Heroicons를 조용히 출시했습니다. 오늘 우리는 공식 Heroicons 웹 경험을 출시하며, 이제 아이콘을 검색하고 Tailwind-ready HTML 또는 JSX로 클립보드에 빠르게 복사할 수 있습니다.

또 다른 Tailwind 릴리스가 도착했습니다! 이번에는 그라데이션, background-clip, 그리고 @apply를 변형 유틸리티와 함께 사용할 수 있는 실험적 지원 등 다양한 기능이 추가되었습니다. 자세히 살펴보겠습니다!

5월에 우리는 팀에 합류할 풀스택 개발자를 찾기 위해 첫 번째 채용 공고를 게시했습니다.

Tailwind CSS v1.6.0은 v1.5와 비슷하지만, 이제 애니메이션 지원과 overscroll 유틸리티 등이 추가되었습니다!

오늘 Simon Vrachliotis가 Tailwind Labs 개발팀에 합류했다는 소식을 전하게 되어 매우 기쁩니다! (참고로, 우리는 최근에 새로운 사업명을 확정했는데, 꽤 멋지죠?)

지난 6월, 브래드 코너스가 우리 회사의 첫 번째 팀원으로 합류했습니다. 당시에는 이를 알릴 블로그가 없었지만, 늦었다고 생각하지 않습니다.

v1.5.0을 정말 흥미로운 기능과 함께 공개하고 싶었지만, 새로운 @tailwindcss/typography 플러그인을 지원하기 위해 새로운 기능이 필요했습니다. 그래서 어쩔 수 없이 조금 일찍 새로운 기능을 공개합니다.

지금까지 Tailwind로 글, 문서, 블로그 포스트를 스타일링하는 것은 타이포그래피에 대한 예리한 눈과 많은 복잡한 커스텀 CSS가 필요한 지루한 작업이었습니다.

우리 팀은 만드는 모든 것에 블로그 포스트를 작성해야 한다고 믿습니다. 진행하는 모든 프로젝트에 대해 간단한 발표 포스트를 작성하도록 강제하는 것은 내재된 품질 검사 역할을 하며, 세상에 공개할 준비가 되기 전까지 프로젝트를 ‘완료’라고 선언하지 않도록 합니다.

오늘 우리는 Visual Studio Code용 Tailwind CSS IntelliSense 확장 프로그램의 새 버전을 출시합니다. 이 버전은 CSS와 마크업 모두에 Tailwind 전용 린팅 기능을 추가합니다.