Tailwind CSS v1.9.0
- Date
- Adam Wathan
Tailwind CSS v1.9이 출시되었습니다. 이번 버전에서는 설정 프리셋 지원, 새로운 CSS 그리드 유틸리티, 확장된 border radius, rotate, skew 스케일, 접근성 개선 등이 추가되었습니다!
주요 기능을 살펴보겠습니다…
- 설정 프리셋
grid-auto-columns
및grid-auto-rows
유틸리티- 포커스 표시기 개선 및 구성 가능한 아웃라인
- 확장된 border radius, rotate, skew 스케일
- v1.9으로 업그레이드
변경 사항의 전체 요약은 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 grid-flow-col auto-cols-max">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
기본적으로 제공되는 새로운 유틸리티 목록은 다음과 같습니다:
클래스 | CSS |
---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
auto-rows-auto | grid-auto-rows: auto; |
auto-rows-min | grid-auto-rows: min-content; |
auto-rows-max | grid-auto-rows: max-content; |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
이 유틸리티들은 기본적으로 responsive
변형을 포함하며, tailwind.config.js
파일의 gridAutoColumns
및 gridAutoRows
섹션에서 기대한 대로 설정할 수 있습니다.
포커스 표시기 개선 및 구성 가능한 아웃라인
기존 outline-none
클래스는 아웃라인을 아예 표시하지 않았지만, 이제는 기본적으로 투명한 아웃라인을 렌더링하도록 업데이트되었습니다. 이 변경은 Windows 고대비 모드를 사용하는 사용자에게 매우 유용합니다. 이 모드에서는 커스텀 박스 쉐도우 기반의 포커스 스타일이 완전히 보이지 않기 때문입니다.
이제 박스 쉐도우를 사용해 안전하게 커스텀 포커스 스타일을 만들 수 있으며, 시각 장애가 있는 사용자도 사이트를 쉽게 이용할 수 있습니다.
<button class="... focus:outline-none focus:shadow-outline">
<!-- ... -->
</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-xl | 0.75rem (12px) |
rounded-2xl | 1rem (16px) |
rounded-3xl | 1.5rem (24px) |
또한 rotate
와 skew
유틸리티를 위한 더 작은 값의 확장 세트도 추가했습니다:
클래스 | 값 |
---|---|
rotate-1 | 1deg |
rotate-2 | 2deg |
rotate-3 | 3deg |
rotate-6 | 6deg |
rotate-12 | 12deg |
skew-1 | 1deg |
skew-2 | 2deg |
이 모든 값에 대해 음수 버전도 포함되어 있습니다. 더 섬세한 회전과 기울기 효과를 위해 매우 유용합니다!
업그레이드
Tailwind CSS v1.9는 비호환적이지 않은 마이너 릴리스입니다. 따라서 업그레이드하려면 다음 명령어를 실행하기만 하면 됩니다.
# npm
npm install tailwindcss@^1.9
# yarn
yarn add tailwindcss@^1.9
이전에 실험적 기능이었던 defaultLineHeights
와 standardFontWeights
를 future
로 승격시켰습니다. 따라서 올가을에 Tailwind CSS v2.0으로 업그레이드할 때 더 쉽게 전환할 수 있도록 이제 해당 변경 사항을 선택적으로 적용하는 것을 권장합니다.
이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →