CSS 캐스케이드 레이어를 사용하여 Tailwind 프로젝트에서 사용자 정의 스타일 관리

유틸리티 클래스가 한 가지만 수행하는 경우 다른 곳에서 오는 스타일에 의해 재정의되는 것을 원하지 않을 수 있습니다. 한 가지 접근 방식은 !important 100% 특정성 충돌에 관계없이 스타일이 적용될 것이라고 확신합니다.

Tailwind 구성 파일에는 !important 자동으로 추가되는 옵션 !important 모든 유틸리티 클래스에. 사용에는 이상이 없습니다 !important 그러나 요즘에는 특이성을 처리하는 더 나은 방법이 있습니다. 사용 CSS 캐스케이드 레이어 우리는 !important.

캐스케이드 레이어를 사용하면 스타일을 "레이어"로 그룹화할 수 있습니다. 레이어의 우선 순위는 항상 선택기의 특정성을 능가합니다. 특정성은 각 레이어 내에서만 중요합니다. 합리적인 레이어 순서를 설정하면 스타일 충돌 및 특정성 전쟁을 방지하는 데 도움이 됩니다. 이것이 CSS Cascade Layers를 다음을 위한 훌륭한 도구로 만드는 이유입니다. 타사 프레임워크의 스타일과 함께 사용자 정의 스타일 관리, Tailwind처럼.

Tailwind 소스 .css 파일은 일반적으로 다음과 같이 시작합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

살펴 보자 공식 Tailwind 문서 지시문에 대해:

지시문은 Tailwind CSS 프로젝트에 특별한 기능을 제공하는 CSS에서 사용할 수 있는 사용자 지정 Tailwind 특정 at-규칙입니다. 사용 @tailwind Tailwind를 삽입하는 지시문 base, components, utilities 와 variants 스타일을 CSS에 추가합니다.

빌드되는 출력 CSS 파일에서 Tailwind의 CSS 재설정은 프리 플라이트 — 기본 스타일의 일부로 먼저 포함됩니다. 나머지 base Tailwind가 작동하는 데 필요한 CSS 변수로 구성됩니다. components 사용자 정의 클래스를 추가할 수 있는 곳입니다. 마크업에 사용한 모든 유틸리티 클래스가 다음에 나타납니다. 변형은 생성된 CSS 파일에서 마지막에 표시되는 호버 및 포커스 상태 및 반응형 스타일과 같은 항목에 대한 스타일입니다.

순풍 @layer 지령

혼란스럽게도 Tailwind에는 @layer 통사론. 이 기사는 CSS 표준에 관한 것이지만 Tailwind 버전(컴파일되어 CSS 출력으로 끝나지 않음)을 간단히 살펴보겠습니다. 순풍 @layer 지시문은 출력 CSS 파일의 지정된 부분에 고유한 추가 스타일을 삽입하는 방법입니다.

예를 들어, 자신의 스타일을 추가하려면 base 스타일을 사용하려면 다음을 수행합니다.

@layer base {
  h1 {
    font-size: 30px;
  }
}

XNUMXD덴탈의 components 레이어는 기본적으로 비어 있습니다. 자신의 클래스를 넣을 장소일 뿐입니다. Tailwind 방식으로 작업을 수행했다면 아마도 @apply (Tailwind의 제작자는 최근 그것에 대해 조언), 하지만 다음과 같은 일반적인 방법으로 클래스를 작성할 수도 있습니다.

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

CSS 표준은 훨씬 더 강력합니다. 그것으로 돌아가자…

CSS 표준 사용 @layer

CSS 표준을 사용하기 위해 이것을 다시 작성하는 방법은 다음과 같습니다. @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Tailwind 지시문과 달리 이들은 컴파일되지 않습니다. 그들은 브라우저에 의해 이해됩니다. 실제로 Edge, Chrome, Safari 및 Firefox의 DevTools는 정의한 모든 계층도 표시합니다.

원하는 만큼 레이어를 가질 수 있고 원하는 대로 이름을 지정할 수 있지만 이 예에서는 모든 사용자 정의 스타일이 단일 레이어(my-custom-styles). 첫 번째 줄은 레이어 순서를 설정합니다.

@layer tailwind-base, my-custom-styles, tailwind-utilities;

이것은 미리 제공되어야 합니다. 다음을 사용하는 다른 코드 앞에 이 줄을 포함해야 합니다. @layer. 목록의 첫 번째 레이어는 가장 작은 강력하고 목록의 마지막 레이어는 가장 강한. 그것의 의미는 tailwind-base 이다 가장 덜 강력한 레이어와 그 안의 모든 코드는 모든 후속 레이어에 의해 재정의됩니다. 그것은 또한 의미 tailwind-utilities 항상 다른 스타일보다 우선합니다. 소스 순서나 특이성에 관계없이. (유틸리티 및 변형 수 별도의 계층으로 이동하지만, 유틸리티 지시문 아래에 변형을 포함하는 한 Tailwind의 유지 관리자는 변형이 항상 유틸리티보다 우선하도록 합니다.)

레이어에 없는 모든 항목은 레이어에 있는 모든 항목보다 우선 적용됩니다(단, 다음을 사용하는 스타일은 예외입니다. !important). 그래서, 당신은 또한 떠날 수 있습니다 utilities 와 variants 레이어 외부:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

이것은 실제로 우리에게 무엇을 샀습니까? 고급 CSS 선택기가 매우 유용할 때가 많습니다. 의 버전을 만들어 보겠습니다. :focus-within 를 사용하여 마우스 클릭이 아닌 키보드 포커스에만 응답합니다. :has 선택기(Chrome 105에 포함된). 자식이 포커스를 받을 때 부모 요소의 스타일을 지정합니다. Tailwind 3.1 도입 맞춤 변형 — 예 <div class="[&:has(:focus-visible)]:outline-red-600"> — 하지만 때로는 CSS를 작성하는 것이 더 쉽습니다.

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

한 번만 재정의하고 싶다고 가정해 보겠습니다. outline-color 에 blue 다른 것에. 작업 중인 요소에 Tailwind 클래스가 모두 있다고 가정해 보겠습니다. .outline-red-600 그리고 우리 자신의 .radio-container:has(:focus-visible) 수업:

<div class="outline-red-600 radio-container"> ... </div>

어느 outline-color 이길거야?

일반적으로 특이도가 높을수록 .radio-container:has(:focus-visible) 이는 Tailwind 클래스가 소스 순서에서 더 낮더라도 영향을 미치지 않는다는 것을 의미합니다. 하지만 Tailwind와 달리 @layer 소스 순서에 의존하는 지시문, CSS 표준 @layer 특이성을 압도한다.

결과적으로 우리는 우리 고유의 사용자 정의 스타일에서 복잡한 선택기를 사용할 수 있지만 필요에 따라 Tailwind의 유틸리티 클래스로 계속 재정의할 수 있습니다. !important 우리가 원하는 것을 얻기 위한 사용법.