Latest Updates

Tailwind CSS v4.0를 출시했습니다. 이번 버전은 성능과 유연성을 최적화한 프레임워크로, 재설계된 설정과 커스터마이징 경험을 제공하며 웹 플랫폼의 최신 기술을 최대한 활용합니다.

약 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 미리보기를 공유했습니다 — Tailwind CSS를 위한 새로운 고성능 엔진으로, 개발자 경험을 단순화하고 웹 플랫폼이 발전한 점을 활용하기 위해 개발 중입니다.

오늘은 특별한 날입니다. Catalyst의 첫 개발 프리뷰를 공개합니다. React를 위한 완전한 컴포넌트 기반의 배터리 포함 애플리케이션 UI 키트로, 여러분의 휴가 코딩 세션에 딱 맞는 타이밍입니다.

자신의 도구에 추가하고 싶은 기능을 찾기 위해 주요 신제품을 개발하는 것만큼 좋은 방법은 없습니다. 그래서 우리는 그 영감을 활용해 Tailwind CSS v3.4를 만들었습니다.

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

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

지난 달, 200명 이상의 사람들이 캐나다 온타리오 주 캠브리지에 모여 함께 시간을 보내고, 이야기를 나누며, 우리가 작업 중인 새로운 것들을 엿볼 수 있었습니다.

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

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

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

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

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

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

프로그래밍 경력 초기에 저는 thoughtbot을 즐겨 팔로우했습니다. 그들은 항상 흥미로운 프로그래밍 글을 쓰고 훌륭한 스크린캐스트를 제작했습니다.

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

저희가 작업 중인 내용을 마지막으로 공유한 지 꽤 시간이 지났기 때문에, 이번에는 공유할 내용이 많습니다. 솔직히 너무 많아서 — 이 업데이트를 공개하는 주요 동기는 다음 주에 더 많은 내용이 나올 예정이기 때문입니다. 그리고 이미 출시한 내용을 모두 공유하기 전에는 새로운 내용을 공유할 수 없다는 느낌이 들었습니다. 그래서 수영복을 입고, 라운지 의자에 편안히 앉아, CSS 비타민을 흡수할 준비를 하세요.

Headless UI v1.5가 출시되었으며, 새로운 Combobox 컴포넌트가 포함되었습니다. 콤보박스는 선택 컨트롤과 비슷하지만 자동 완성/타이핑 기능이 추가된 형태입니다.

Tailwind 프로젝트에서 유틸리티 클래스를 정렬하는 최선의 방법에 대해 적어도 4년 동안 논의가 이어져 왔습니다. 오늘 우리는 Tailwind CSS를 위한 공식 Prettier 플러그인을 출시함으로써 이 문제에 대한 걱정을 이제 그만둘 수 있게 되었음을 발표하게 되어 기쁩니다.

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

Tailwind CSS는 자바스크립트로 작성되어 npm 패키지로 배포되기 때문에, 항상 Node.js와 npm이 설치되어 있어야 사용할 수 있었습니다. 오늘 우리는 독립 실행형 CLI 빌드를 발표합니다. 이 빌드는 Node.js나 npm 없이도 Tailwind CLI의 모든 기능을 제공합니다.

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를 발표했습니다. 이는 Tailwind CSS와 완벽하게 어울리는 완전히 스타일이 적용되지 않은 접근성 높은 UI 컴포넌트 라이브러리입니다. 오늘 우리는 Headless UI v1.0을 발표하게 되어 매우 기쁩니다. 이번 버전은 React와 Vue 모두를 위한 컴포넌트 수를 두 배 이상 늘렸습니다.

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

약 1년 전, 우리는 Heroicons의 첫 번째 버전을 출시했습니다. 이는 Tailwind UI와 함께 디자인한 아름다운 UI 아이콘 세트입니다. 그 이후로 우리는 수많은 새로운 아이콘을 추가하고, 전용 웹 경험을 디자인하고 출시했습니다. 오늘 우리는 마침내 Heroicons v1.0을 출시하게 되어 기쁩니다. 이번 버전에는 두 가지 스타일의 450개 이상의 무료 아이콘, 공식 React 및 Vue 라이브러리, 그리고 Figma 에셋이 포함되어 있습니다.

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

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

오늘 우리는 Tailwind CSS: From Zero to Production이라는 새로운 스크린캐스트 시리즈를 발표하게 되어 기쁩니다. 이 시리즈는 Tailwind CSS v2.0을 처음부터 배우고 실행하는 데 필요한 모든 것을 가르쳐 줍니다.

지난 여름부터 David Luhr와 프로젝트 단위로 협력하며 Figma 버전의 Tailwind UI 개발(거의 완료!)과 함께 Tailwind UI 템플릿을 만들 때 그의 접근성 전문 지식을 활용했습니다. 이를 통해 모든 사용자가 어떤 도구를 사용하든 웹을 탐색할 수 있는 마크업을 제공할 수 있었습니다.

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

모든 것이 완벽해 보입니다. 하지만 실제 프로덕션 콘텐츠를 연결하면, 아름다운 블로그 카드 그리드가 무너지는 것을 깨닫게 됩니다. 실제 글의 발췌문은 마법처럼 모두 정확히 세 줄로 이루어지지 않기 때문에 각 카드의 높이가 달라지기 때문입니다.

익숙한 상황인가요? 그렇다면 line-clamp 플러그인이 여러분을 구원할 것입니다.

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

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

Tailwind를 최대한 활용하려면 빌드 단계가 필요합니다. 이는 [`tailwind.config.js`](https://v2.tailwindcss.com/docs/configuration) 파일을 커스터마이징하거나, [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply)로 컴포넌트를 추출하거나, [플러그인](https://v2.tailwindcss.com/docs/plugins)을 포함할 수 있는 유일한 방법입니다.

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

지난번 스크린캐스트를 게시한 이후로 Tailwind에 많은 멋진 기능들이 추가되었습니다. 그래서 우리는 새로운 기능들을 모두 다루는 작은 시리즈를 녹화하는 것이 좋은 아이디어라고 생각했습니다.

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

2월에 우리는 Tailwind UI를 출시했습니다. 이는 여러분의 Tailwind 프로젝트에 복사하여 붙여넣을 수 있는 HTML 컴포넌트 예제 디렉토리로, 여러분만의 디자인을 시작하기 위한 출발점으로 설계되었습니다.

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

새로운 Tailwind 릴리스가 또 등장했습니다! 이번에는 그라디언트, background-clip 지원,@apply를 변형 유틸리티와 함께 사용하는 실험적 지원 등 다양한 기능이 추가되었습니다. 자세히 살펴보겠습니다!

5월에 우리는 팀에 합류할 풀스택 개발자를 찾기 위해 첫 번째 채용 공고를 게시했습니다. 거의 900건의 지원서를 받고 수많은 재능 있는 사람들과 인터뷰를 진행한 끝에, 로빈 말페가 우리의 제안을 수락하고 오늘부터 Tailwind Labs 팀의 공식 멤버가 되었음을 기쁘게 알립니다!

Tailwind CSS v1.5와 비슷하지만, 이제는 애니메이션 지원, 오버스크롤 유틸리티 등이 추가되었습니다!

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

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

v1.5.0을 정말 흥미로운 무언가를 위해 아껴두고 싶었지만, 새로운 @tailwindcss/typography 플러그인을 지원하기 위해 새로운 기능이 필요했기 때문에, 어쩔 수 없이 일찍 여러분에게 새로운 기능을 공개합니다.

지금까지 Tailwind로 글, 문서, 블로그 포스트를 스타일링하는 것은 타이포그래피에 대한 예리한 눈과 복잡한 커스텀 CSS가 필요한 지루한 작업이었습니다.
그래서 오늘 우리는 @tailwindcss/typography 플러그인을 발표하게 되어 기쁩니다. 이 플러그인은 아름다운 타이포그래피 기본값으로 일반 HTML 콘텐츠를 쉽게 스타일링할 수 있게 해줍니다.

팀으로서 우리가 믿는 것 중 하나는 우리가 만드는 모든 것에는 블로그 글이 함께해야 한다는 것입니다. 우리가 작업하는 모든 프로젝트에 대해 짧은 발표 글을 작성하도록 강제하는 것은 내장된 품질 검사 역할을 하며, 세상에 공개할 준비가 되기 전까지는 프로젝트를 "완료"라고 부르지 않도록 합니다.

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