Tailwind CSS home page
Go back

Tailwind CSS v1.7.0

Date

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

New features

그라디언트

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

그라디언트는 기본적으로 8가지 방향 중 하나에서 최대 3개의 색상 정지점을 지정할 수 있는 합성 가능한 API로 설계되었습니다:

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

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

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

tailwind.config.js
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가지 새로운 유틸리티가 포함되어 있습니다:

클래스CSS
bg-clip-borderbackground-clip: border-box
bg-clip-paddingbackground-clip: padding-box
bg-clip-contentbackground-clip: content-box
bg-clip-textbackground-clip: text

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

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

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

tailwind.config.js
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에서 기존의 유틸리티를 대체할 예정이지만, 현재는 두 가지가 함께 존재합니다.

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

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  // ...
}

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

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

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

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

이에 대해 더 자세히 알고 싶다면 Rachel Andrew의 훌륭한 글을 참고하세요.

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

이제 tailwind.config.js 테마에서 각 폰트 크기별로 기본 글자 간격 값을 설정할 수 있습니다. 튜플 구문을 사용하여 다음과 같이 설정할 수 있습니다:

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

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

Divide border 스타일 설정

divide 유틸리티에 border 스타일을 설정할 수 있는 기능이 추가되었습니다:

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

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

tailwind.config.js
module.exports = {
  variants: {
    divideStyle: ['responsive'],
  },
}

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

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

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

색상을 클로저로 정의하기

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

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

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

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

Deprecations

Tailwind v1.7에서는 업그레이드를 최대한 쉽게 할 수 있도록 새로운 기능 플래그 및 폐기(deprecation) 시스템을 도입했습니다.

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

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

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

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

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

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

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

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

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

실험적 기능

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

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

그럼에도 불구하고 조금 더 모험을 즐기고 싶다면, 다음과 같이 모든 실험적 기능을 활성화할 수 있습니다:

tailwind.config.js
module.exports = {
  experimental: 'all',
}

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

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

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

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

이 기능에는 이해해야 할 세부 사항이 많기 때문에, 풀 리퀘스트를 읽어보는 것을 추천합니다. 이 기능이 어떻게 작동하는지 자세히 알아볼 수 있습니다.

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

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

tailwind.config.js
module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
}

새로운 색상 팔레트

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

tailwind.config.js
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 플래그를 사용해 확장된 간격 스케일을 활성화할 수 있습니다:

tailwind.config.js
module.exports = {
  experimental: {
    extendedSpacingScale: true,
  },
}

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

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

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

tailwind.config.js
module.exports = {
  experimental: {
    defaultLineHeights: true,
  },
}

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

확장된 폰트 크기 스케일

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

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

tailwind.config.js
module.exports = {
  experimental: {
    extendedFontSizeScale: true,
  },
}

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