문서컴포넌트블로그쇼케이스

Tailwind CSS v1.9.0

Adam Wathan

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

주요 내용을 살펴보겠습니다...

변경 사항의 전체 요약은 GitHub의 릴리스 노트에서 확인할 수 있습니다.

설정 프리셋

Tailwind CSS v1.9는 tailwind.config.js 파일에 새로운 presets 키를 추가하여 프로젝트에 대한 커스텀 "기본 설정"을 구성할 수 있게 합니다.

module.exports = {  presets: [require("@my-company/tailwind-base")],  theme: {    extend: {      // 프로젝트별 오버라이드...    },  },};

presets 아래에 제공하는 내용은 기본 Tailwind 설정을 _대체_합니다. 따라서 여러분만의 완전히 커스텀된 시작점을 정의할 수 있습니다. 이는 여러 개의 Tailwind 프로젝트를 작업하는 팀에서 동일한 브랜드 색상, 폰트 커스터마이징, 또는 간격 스케일을 공유해야 할 때 매우 유용합니다.

여러 개의 프리셋을 나열할 수도 있으며, 이는 위에서 아래로 병합됩니다:

module.exports = {  presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")],  theme: {    extend: {      // 프로젝트별 오버라이드...    },  },};

프로젝트별 설정을 커스텀 기본 설정과 병합하는 로직은 기본 설정과 동일하게 작동합니다. 따라서 extend와 같은 익숙한 기능들은 여러분이 예상한 대로 정확히 동작합니다.

grid-auto-columns와 grid-auto-rows 유틸리티

grid-auto-columns와 grid-auto-rows CSS 속성을 위한 새로운 유틸리티를 추가한 gridAutoColumns와 gridAutoRows 코어 플러그인을 도입했습니다.

이 유틸리티는 암시적으로 생성된 그리드 컬럼과 행의 크기를 제어할 수 있게 해줍니다. 그리드의 컬럼/행 수를 명시하지 않을 때 기본 컬럼/행 크기를 설정하는 데 사용할 수 있습니다.

<div class="grid auto-cols-max grid-flow-col">  <div>1</div>  <div>2</div>  <div>3</div></div>

기본적으로 제공되는 새로운 유틸리티 목록은 다음과 같습니다:

클래스CSS
auto-cols-autogrid-auto-columns: auto;
auto-cols-mingrid-auto-columns: min-content;
auto-cols-maxgrid-auto-columns: max-content;
auto-cols-frgrid-auto-columns: minmax(0, 1fr);
auto-rows-autogrid-auto-rows: auto;
auto-rows-mingrid-auto-rows: min-content;
auto-rows-maxgrid-auto-rows: max-content;
auto-rows-frgrid-auto-rows: minmax(0, 1fr);

이 유틸리티는 기본적으로 반응형 변형을 포함하며, tailwind.config.js 파일의 gridAutoColumns와 gridAutoRows 섹션에서 기대한 대로 설정할 수 있습니다.

포커스 표시기 개선 및 구성 가능한 아웃라인

기존 outline-none 클래스는 아웃라인을 표시하지 않았지만, 이제는 기본적으로 투명한 아웃라인을 렌더링하도록 업데이트되었습니다. 이 변경은 Windows 고대비 모드를 사용하는 사용자에게 특히 유용합니다. 이 모드에서는 커스텀 박스 쉐도우 기반의 포커스 스타일이 완전히 보이지 않기 때문입니다.

이제 여러분은 시각 장애가 있는 사용자에게 불편을 주지 않으면서도 박스 쉐도우를 사용해 안전하게 커스텀 포커스 스타일을 만들 수 있습니다.

<button class="focus:shadow-outline focus:outline-none ...">  <!-- ... --></button>

또한 두 가지 새로운 아웃라인 스타일인 outline-white와 outline-black을 추가했습니다.

이 유틸리티들은 각각의 색상으로 2px 점선 아웃라인을 렌더링하며, 2px 오프셋을 가집니다. 이 스타일은 키보드 사용자가 화면에서 어떤 엘리먼트가 선택되었는지 쉽게 확인할 수 있도록 도와주는 일반적인 포커스 표시기로 적합합니다. 또한 디자인과 너무 충돌하지 않으면서도 명확하게 표시됩니다.

white와 black 두 가지 변형을 제공하여 어떤 배경색을 사용하더라도 충분한 대비를 가진 옵션을 항상 사용할 수 있도록 했습니다.

<!-- 어두운 배경에서 `outline-white` 사용 --><div class="bg-gray-900">  <button class="focus:outline-white ...">    <!-- ... -->  </button></div><!-- 밝은 배경에서 `outline-black` 사용 --><div class="bg-white">  <button class="focus:outline-black ...">    <!-- ... -->  </button></div>

물론, 배경색, 박스 쉐도우, 테두리 등을 사용해 원하는 커스텀 포커스 스타일을 자유롭게 만들 수도 있습니다. 하지만 너무 복잡하게 만들고 싶지 않다면 이 스타일이 적합합니다.

또한 outline 속성을 구성 가능하도록 만들어, 이제 tailwind.config.js 파일에서 커스텀 아웃라인을 정의할 수 있습니다:

module.exports = {  theme: {    extend: {      outline: {        blue: "2px solid #0000ff",      },    },  },};

[outline, outlineOffset] 형태의 튜플을 사용해 커스텀 아웃라인 유틸리티에 outline-offset 값을 제공할 수도 있습니다:

module.exports = {  theme: {    extend: {      outline: {        blue: ["2px solid #0000ff", "1px"],      },    },  },};

확장된 border-radius, rotate, skew 스케일

기본적으로 세 가지 새로운 border-radius 유틸리티를 추가했습니다:

클래스값
rounded-xl0.75rem(12px)
rounded-2xl1rem(16px)
rounded-3xl1.5rem(24px)

그리고 rotate와 skew 유틸리티를 위한 더 작은 값의 확장 세트도 추가했습니다:

클래스값
rotate-11deg
rotate-22deg
rotate-33deg
rotate-66deg
rotate-1212deg
skew-11deg
skew-22deg

이 모든 값에 대한 음수 버전도 포함되어 있습니다. 더 섬세한 회전과 기울기 효과를 위해 매우 유용합니다!

업그레이드

Tailwind CSS v1.9는 비호환 변경이 없는 마이너 릴리스입니다. 따라서 업그레이드하려면 다음 명령어를 실행하면 됩니다:

# npmnpm install tailwindcss@^1.9# yarnyarn add tailwindcss@^1.9

이전에 실험적 기능이었던 defaultLineHeights와 standardFontWeights를 future로 승격했습니다. 따라서 올가을에 출시될 Tailwind CSS v2.0으로의 업그레이드를 더 쉽게 하기 위해 이제 해당 변경 사항을 적용하는 것을 권장합니다.

이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →

모든 업데이트를 직접 받아 볼 수 있습니다.
뉴스레터에 가입하세요.