Tailwind CSS v1.5.0

v1.5.0을 정말 흥미로운 기능과 함께 공개하고 싶었지만, 새로운 @tailwindcss/typography 플러그인을 지원하기 위해 새로운 기능이 필요했습니다. 그래서 어쩔 수 없이 조금 일찍 새로운 기능을 공개합니다.

이번 릴리스는 주요 변경 사항이 없으며, 마이너 릴리스입니다. 우리는 프로답게 일합니다, 이 바보 같은 거위야.

New Features

Tailwind CSS v1.5.0 이전까지는 “유틸리티” 클래스만 variants(예: “responsive”, “hover”, “focus” 등)와 함께 사용하도록 설계되었습니다.

이러한 유틸리티 클래스는 여전히 다른 타입의 클래스보다 훨씬 유용하지만, 이제는 컴포넌트 클래스에 대해서도 variants를 생성할 수 있게 되었습니다. 예를 들어, 새로운 @tailwindcss/typography 플러그인의 prose 클래스가 있습니다:

<article class="prose md:prose-lg">
  <!-- 콘텐츠 -->
</article>

이 기능을 여러분의 컴포넌트 클래스에서 활용하려면, addComponents 플러그인 API의 두 번째 인수에 새로운 variants 옵션을 사용하면 됩니다:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

또는 addUtilities API에서 익숙할 수 있는 배열 단축 문법을 사용할 수도 있습니다:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

플러그인 API를 사용하지 않고 커스텀 CSS에서 이 기능을 활용하려면, 새로운 @layer 지시자를 사용하여 여러분의 스타일이 “components” 버킷에 속한다는 것을 Tailwind에 명시적으로 알릴 수 있습니다:

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

이렇게 하면 Tailwind가 사용하지 않는 CSS를 올바르게 제거할 수 있으며, 기본 “conservative” purge 모드를 사용할 때 반응형 컴포넌트 variants가 제거되지 않도록 보장합니다.

새로운 컴포넌트 variants 지원을 활용하여, 이제 container 클래스도 변형을 지원합니다!

<!-- `md` 크기 이상에서만 너비를 고정 -->
<div class="md:container">
  <!-- ... -->
</div>

기본적으로 반응형 변형을 활성화했지만, 필요에 따라 focus, group-hover와 같은 다른 변형도 수동으로 활성화할 수 있습니다:

tailwind.config.js

module.exports = {
  // ...
  variants: {
    container: ['responsive', 'focus', 'group-hover'],
  },
}

이제 :focus-visible 의사 클래스를 지원하기 위해 새로운 focus-visible 변형을 추가했습니다.

이 기능은 키보드 사용자에게만 포커스 스타일을 적용하고, 마우스 사용자에게는 무시할 때 매우 유용합니다:

<button class="focus-visible:outline-none focus-visible:shadow-outline ...">
  Click me
</button>

기본적으로는 아무것도 활성화되어 있지 않지만, 설정 파일의 variants 섹션에서 활성화할 수 있습니다:

tailwind.config.js

module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'],
  },
}

브라우저 지원은 아직 약하지만 점점 나아지고 있습니다. 그동안 모든 브라우저에서 이 기능을 바로 사용하고 싶다면 폴리필과 해당 PostCSS 플러그인을 확인해 보세요.

체크박스나 라디오 버튼 같은 요소를 조건에 따라 스타일링할 수 있는 새로운 checked 변형을 추가했습니다:

<input type="checkbox" class="bg-white checked:bg-blue-500" />

기본적으로는 아무것도 활성화되어 있지 않지만, 설정 파일의 variants 섹션에서 활성화할 수 있습니다:

tailwind.config.js

module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
}

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