Tailwind CSS v1.9.0

Date

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

주요 기능을 살펴보겠습니다…

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


설정 프리셋

Tailwind CSS v1.9부터 tailwind.config.js 파일에 새로운 presets 키가 추가되었습니다. 이를 통해 프로젝트에 맞는 커스텀 “기본 설정”을 구성할 수 있습니다.

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

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

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

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

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


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

grid-auto-columnsgrid-auto-rows CSS 속성을 위한 새로운 gridAutoColumnsgridAutoRows 코어 플러그인을 추가했습니다. 이 유틸리티들은 암시적으로 생성된 그리드 컬럼과 행의 크기를 제어할 수 있게 해줍니다. 그리드에 컬럼이나 행의 수를 명시하지 않을 때 기본 크기를 설정하는 데 사용할 수 있습니다.

<div class="grid grid-flow-col auto-cols-max">
  <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);

이 유틸리티들은 기본적으로 responsive 변형을 포함하며, tailwind.config.js 파일의 gridAutoColumnsgridAutoRows 섹션에서 기대한 대로 설정할 수 있습니다.


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

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

이제 박스 쉐도우를 사용해 안전하게 커스텀 포커스 스타일을 만들 수 있으며, 시각 장애가 있는 사용자도 사이트를 쉽게 이용할 수 있습니다.

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

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

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

whiteblack 두 가지 변형을 모두 제공하므로, 어떤 배경색을 사용하더라도 충분한 대비를 가진 옵션을 항상 선택할 수 있습니다.

<!-- 어두운 배경에서는 `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 파일에서 커스텀 아웃라인을 정의할 수 있습니다.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      outline: {
        blue: '2px solid #0000ff',
      },
    },
  },
}

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

tailwind.config.js
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)

또한 rotateskew 유틸리티를 위한 더 작은 값의 확장 세트도 추가했습니다:

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

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

업그레이드

Tailwind CSS v1.9는 비호환적이지 않은 마이너 릴리스입니다. 따라서 업그레이드하려면 다음 명령어를 실행하기만 하면 됩니다.

# npm
npm install tailwindcss@^1.9

# yarn
yarn add tailwindcss@^1.9

이전에 실험적 기능이었던 defaultLineHeightsstandardFontWeightsfuture로 승격시켰습니다. 따라서 올가을에 Tailwind CSS v2.0으로 업그레이드할 때 더 쉽게 전환할 수 있도록 이제 해당 변경 사항을 선택적으로 적용하는 것을 권장합니다.

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