Tailwind CSS v1.7.0

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

새로운 기능

그라데이션

이번 릴리스의 주요 기능 — Tailwind가 이제 배경 그라데이션을 기본적으로 지원합니다!

그라데이션은 기본적으로 8가지 방향 중 하나에서 최대 세 개의 색상 정지점을 지정할 수 있는 고도로 합성 가능한 API로 설계되었습니다:

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">  <!-- ... --></div>

이 기능은 새로운 backgroundImage 코어 플러그인(원하는 배경 이미지에 사용 가능!)과 새로운 gradientColorStops 코어 플러그인 덕분에 가능해졌습니다.

이 플러그인의 기본 설정은 다음과 같습니다:

module.exports = {  theme: {    backgroundImage: {      "gradient-to-t": "linear-gradient(to top, var(--gradient-color-stops))",      "gradient-to-tr": "linear-gradient(to top right, var(--gradient-color-stops))",      "gradient-to-r": "linear-gradient(to right, var(--gradient-color-stops))",      "gradient-to-br": "linear-gradient(to bottom right, var(--gradient-color-stops))",      "gradient-to-b": "linear-gradient(to bottom, var(--gradient-color-stops))",      "gradient-to-bl": "linear-gradient(to bottom left, var(--gradient-color-stops))",      "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",      "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))",    },    gradientColorStops: (theme) => theme("colors"),  },  variants: {    backgroundImage: ["responsive"],    gradientColorStops: ["responsive", "hover", "focus"],  },};

더 자세한 내용은 원본 풀 리퀘스트에서 확인할 수 있습니다.

새로운 background-clip 유틸리티

우리는 엘리먼트 내에서 배경이 어떻게 렌더링되는지 제어할 수 있는 새로운 backgroundClip 코어 플러그인을 추가했습니다.

이 플러그인에는 4가지 새로운 유틸리티가 포함되어 있습니다:

새로운 그라디언트 기능과 함께 사용하면 다음과 같은 멋진 그라디언트 텍스트 효과를 만들 수 있습니다:

<h1 class="text-6xl font-bold">  <span class="bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">    Greetings from Tailwind v1.7.  </span></h1>

기본적으로 backgroundClip 플러그인에는 반응형 변형만 활성화되어 있습니다:

module.exports = {  variants: {    backgroundClip: ["responsive"],  },};

새로운 gap 유틸리티 별칭

어떤 이유에서인지 column-gap와 row-gap 유틸리티를 각각 col-gap-{n}와 row-gap-{n}로 이름 지었는데, 이는 끔찍하지는 않지만 Tailwind의 다른 것들과 일관성이 없습니다.

저는 종종 이들을 혼동했습니다. row-gap이 행 내부의 간격인지, 아니면 행 사이의 간격인지 헷갈렸습니다.

Tailwind v1.7에서는 동일한 기능을 제공하지만 더 나은 이름을 가진 gap-x-{n}와 gap-y-{n} 유틸리티를 도입했습니다. 이제 플렉스 박스에서도 gap이 지원되기 시작하면서, 플렉스 박스에는 "컬럼"이 없으므로 실제 CSS 이름보다 훨씬 더 직관적입니다.

이 유틸리티들은 v2.0에서 기존의 유틸리티를 대체할 예정이지만, 현재는 두 가지가 함께 존재합니다.

새로운 이름으로 마이그레이션하고, 다음 기능 플래그를 사용하여 기존 이름을 비활성화하는 것을 권장합니다:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },  // ...};

이 플래그를 활성화할 때까지 Tailwind는 빌드에 포함된 사용 중단된 클래스에 대해 콘솔에 경고를 표시합니다.

새로운 contents 디스플레이 유틸리티

최근 display: contents CSS 기능을 위한 새로운 contents 클래스를 추가했습니다.

<div class="flex">  <div><!-- ... --></div>  <!-- 이 컨테이너는 유령 컨테이너로 동작하며, 자식 요소들은 부모 플렉스 컨테이너의 일부로 취급됩니다 -->  <div class="contents">    <div><!-- ... --></div>    <div><!-- ... --></div>  </div>  <div><!-- ... --></div></div>

Rachel Andrew의 훌륭한 글에서 이 기능에 대해 더 알아보세요.

폰트 크기별 기본 글자 간격 설정

이제 tailwind.config.js 테마에서 각 폰트 크기에 대한 기본 글자 간격 값을 튜플 구문을 사용해 설정할 수 있습니다:

module.exports = {  theme: {    fontSize: {      2xl: ['24px', {        letterSpacing: '-0.01em',      }],      // 또는 기본 줄 간격과 함께 설정      3xl: ['32px', {        letterSpacing: '-0.02em',        lineHeight: '40px',      }],    }  }}

이 새로운 구문은 최근에 도입된 더 간단한 [{fontSize}, {lineHeight}] 구문과 함께 지원됩니다.

경계선 스타일 분할

divide 유틸리티에 경계선 스타일을 설정하는 기능을 추가했습니다:

<div class="divide-y divide-dashed">  <div><!-- ... --></div>  <div><!-- ... --></div>  <div><!-- ... --></div>  <div><!-- ... --></div></div>

이 유틸리티는 기본적으로 responsive 변형을 포함합니다:

module.exports = {  variants: {    divideStyle: ["responsive"],  },};

플러그인에서 전체 설정 객체 접근하기

플러그인 API에 전달되는 config 함수는 이제 인자 없이 호출될 때 전체 설정 옵션을 반환합니다:

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {  // 전체 설정 객체 반환  config()})

색상을 클로저로 정의하기

이제 색상을 콜백 함수로 정의할 수 있습니다. 이 콜백 함수는 색상 값을 생성하는 데 사용할 수 있는 매개변수들을 받습니다.

이 기능은 backgroundOpacity, textOpacity 등의 유틸리티와 함께 커스텀 색상을 사용하려는 경우에 특히 유용합니다.

module.exports = {  theme: {    colors: {      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`,    },  },};

현재 전달되는 유일한 값은 opacityVariable 속성입니다. 이 속성은 현재 사용 중인 플러그인에 따라 (--background-opacity, --text-opacity 등) 현재 불투명도 변수의 이름을 포함합니다.

기능 중단(Deprecations)

Tailwind v1.7에서는 업그레이드를 최대한 원활하게 진행할 수 있도록 새로운 기능 플래그 및 중단 시스템을 도입했습니다.

기능을 중단하거나 새로운 (안정적인) 주요 변경 사항을 도입할 때마다, 이러한 변경 사항은 tailwind.config.js 파일의 future 속성 아래에서 Tailwind v1.x에서 사용할 수 있습니다.

중단되거나 주요 변경 사항이 있을 때마다, Tailwind는 새로운 변경 사항을 적용하고 설정 파일에서 플래그를 활성화할 때까지 매 빌드마다 콘솔에 경고를 표시합니다:

risk - 주요 변경 사항이 예정되어 있습니다: removeDeprecatedGapUtilitiesrisk - 향후 Tailwind 업그레이드를 간소화하기 위해 지금 이러한 변경 사항을 적용하는 것을 강력히 권장합니다.risk - https://tailwindcss.com/docs/upcoming-changes

tailwind.config.js 파일에서 해당 플래그를 true로 설정하여 주요 변경 사항을 적용할 수 있습니다:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

적용하지 않고 경고를 무시하려면, 명시적으로 플래그를 false로 설정하세요:

module.exports = {  future: {    removeDeprecatedGapUtilities: false,  },};

이 방법은 권장하지 않습니다, Tailwind v2.0으로 업그레이드하는 것이 더 어려워질 수 있습니다.

더 이상 사용되지 않는 gap 유틸리티

앞서 언급했듯이, Tailwind v1.7.0에서는 기존의 col-gap-{n}과 row-gap-{n} 유틸리티를 대체하기 위해 새로운 gap-x-{n}과 gap-y-{n} 유틸리티를 도입했습니다.

기본적으로 두 클래스 모두 존재하지만, 이전 유틸리티는 Tailwind v2.0에서 제거될 예정입니다.

새로운 클래스 이름으로 마이그레이션하려면 기존에 사용하던 이전 이름을 새로운 이름으로 간단히 교체하면 됩니다:

<div class="col-gap-4 row-gap-2 ..."><div class="gap-x-4 gap-y-2 ..."></div>

새로운 이름을 지금 바로 사용하려면 tailwind.config.js 파일에서 removeDeprecatedGapUtilities 플래그를 활성화하세요:

module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

실험적 기능

Tailwind v1.7.0에서는 곧 Tailwind에 추가될 예정이지만 아직 완전히 안정적이지 않은 새로운 기능을 선택적으로 사용할 수 있는 실험적 기능 시스템을 도입했습니다.

실험적 기능은 주요 변경 사항을 도입할 수 있으며, semver를 따르지 않으며 언제든지 변경될 수 있다는 점을 유의해야 합니다.

하지만 조금 더 모험을 즐기고 싶다면, 다음과 같이 모든 실험적 기능을 활성화할 수 있습니다:

module.exports = {  experimental: "all",};

이제 여러분이 직접 사용해 볼 수 있는 몇 가지 흥미로운 기능들을 소개합니다...

@apply를 변형 및 복잡한 클래스와 함께 사용하기

이 기능은 정말 큰 변화입니다. 이제 @apply를 반응형 변형, 의사 클래스 변형, 그리고 다른 복잡한 클래스와 함께 사용할 수 있습니다!

.btn {  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;}

이 기능에는 이해해야 할 세부 사항이 많기 때문에, 풀 리퀘스트를 읽어보는 것을 추천합니다. 이렇게 하면 모든 작동 방식을 배울 수 있습니다.

이 기능은 이전의 @apply 동작 방식에 호환되지 않는 변경 사항을 도입하므로, 단순히 기능을 켜기 전에 모든 세부 사항을 꼭 읽어보세요.

이 기능을 활성화하려면 applyComplexClasses 플래그를 사용하세요:

module.exports = {  experimental: {    applyComplexClasses: true,  },};

새로운 색상 팔레트

오늘부터 uniformColorPalette 플래그를 사용해 새로운 Tailwind 2.0 색상 팔레트를 미리 사용해 볼 수 있습니다:

module.exports = {  experimental: {    uniformColorPalette: true,  },};

새로운 팔레트의 핵심 아이디어는 모든 색상과 모든 색조가 비슷한 밝기를 가지도록 설계되었다는 점입니다. 따라서 indigo-600을 blue-600으로 바꿔도 동일한 색상 대비를 기대할 수 있습니다.

이 색상들은 계속해서 변경될 가능성이 크므로, 사용 시 주의가 필요합니다.

확장된 간격 스케일

더 큰 간격 스케일을 추가했습니다. 이제 0.5, 1.5, 2.5, 3.5와 같은 미세한 값과 72, 80, 96과 같은 큰 값이 포함됩니다. 또한 전체 간격 스케일에 백분율 기반의 분수 값(1/2, 5/6, 7/12 등)도 추가되었습니다.

확장된 간격 스케일은 extendedSpacingScale 플래그를 사용해 활성화할 수 있습니다:

module.exports = {  experimental: {    extendedSpacingScale: true,  },};

이 기능은 상당히 안정적이어서, 변경될 가능성은 거의 없을 것입니다.

기본 폰트 크기에 따른 기본 줄 간격

기본 제공되는 모든 폰트 크기에 권장되는 기본 줄 간격을 추가했습니다. 이 기능은 defaultLineHeights 플래그를 사용해 활성화할 수 있습니다:

module.exports = {  experimental: {    defaultLineHeights: true,  },};

이 변경 사항은 기존에 모든 폰트 크기가 기본 줄 간격 1.5를 사용했던 방식과 달라, 디자인에 영향을 미칠 수 있는 주요 변경 사항입니다.

확장된 폰트 크기 스케일

최근 유행하는 거대한 헤로 텍스트 트렌드에 맞춰 세 가지 새로운 폰트 크기(7xl, 8xl, 9xl)를 추가했습니다. 이들 폰트 크기에는 기본 줄 간격도 포함되어 있습니다.

extendedFontSizeScale 플래그를 통해 이 기능을 활성화할 수 있습니다:

module.exports = {  experimental: {    extendedFontSizeScale: true,  },};

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