Tailwind CSS v1.5.0

v1.5.0을 정말 흥미로운 무언가를 위해 아껴두고 싶었지만, 새로운 @tailwindcss/typography 플러그인을 지원하기 위해 새로운 기능이 필요했기 때문에, 어쩔 수 없이 일찍 여러분에게 새로운 기능을 공개합니다.

이번 릴리스는 주요 변경 사항 없이 마이너 업데이트이며, 우리는 프로답게 행동합니다. 걱정하지 마세요.

새로운 기능

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가 제거되지 않도록 보장합니다.

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

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

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

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

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

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

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

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

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

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

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

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

이 기능은 기본적으로 활성화되어 있지 않지만, 설정 파일의 variants 섹션에서 활성화할 수 있습니다:

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

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