Tailwind 및 Headwind를 사용하여 구성 요소 템플릿의 CSS 정리

TailwindCSS은 더 이상 제공되지 않습니다. 유틸리티 우선 CSS 프레임워크는 먼 길을 갔고 이제 Proton , Laravel 또는 심지어 GitHub Copilot (및 TailwindCSS 자체와 같은 다양한 웹 사이트에서 사용됩니다. 강의)..

그러나 유틸리티 우선 접근 방식은 class 특성을 다소 장황하게 만드는 경향이 있습니다.

그 자체is not an issue이지만 이러한 클래스 간의 일관성이 있을 수 있습니다.

문제

컨테이너에 래핑된 버튼을 작성한다고 가정해 보겠습니다. 나는 그렇게 할 수 있습니다 :

<div class="flex bg-gray-50 justify-center m-24 p-24">
  <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
    I don't do much
  </button>
</div>

하지만 나중에 요소의 패딩을 변경해야 한다면 순서를 신경 쓰지 않고 클래스를 하나씩 작성했기 때문에 꽤 고통스러울 것입니다. 불행히도 그렇게 함으로써 내 클래스에는 순서 지정 논리가 없으며 동일한 측면에 영향을 미치는 클래스가 모두 혼합되어 있음을 알 수 있습니다.

구출에 역풍!

이 문제는 드문 일이 아니며 이후 다양한 도구로 해결되었습니다.

내가 사용하고 있는 것은 Headwind이며 다음과 같이 정의됩니다.

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

설치는 매우 쉽고 Visual Studio Marketplace을 통해 수행할 수 있습니다.

Angular와 함께 사용

VS Code에 설치되면 이전 코드를 가져와 간단한 구성 요소를 생성해 보겠습니다.

// demo.component.ts
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
})
export class DemoComponent {}

<!-- demo.component.html -->
<div class="flex bg-gray-50 justify-center m-24 p-24">
  <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
    I don't do much
  </button>
</div>

저장을 누르기만 하면 Headwind가 모든 클래스의 순서를 같은 방식으로 처리했음을 알 수 있습니다.

템플릿은 어떻습니까?

우리 구성 요소는 매우 작으며 템플릿을 직접 정의할 수 있습니다.

// demo.component.ts
@Component({
  selector: 'app-demo',
  template: `
    <div class="flex bg-gray-50 justify-center m-24 p-24">
      <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
        I don't do much
      </button>
    </div>
  `,
})
export class DemoComponent {}

저장을 누르고 ... 아무것도 변경되지 않았습니까?

실제로 역풍은 구성 요소 템플릿의 해당 클래스를 즉시 인식할 수 없으므로 약간의 도움이 필요합니다.

VS Codesettings.json에서 역풍이 클래스의 위치를 ​​찾는 데 도움이 되는 사용자 정의 정규식을 추가할 수 있습니다. 다음은 .js 및 .ts 파일에 대한 두 가지(bbugh 에서)입니다.

"headwind.classRegex": {
  "javascript": "(?:\\b(?:class|className|tw)(?:=(?:{\\s*)?)?(?:\\.\\w*)?(?:\\(\\s*\\w*\\s*\\))?[\\\"\\'\\`]((?:[\\w\\s\\-\\/\\:\\.\\[\\]]|\\$\\{(.*?)\\})+)[\\\"\\'\\`]}?)",
  "typescript": "(?:\\b(?:class|className|tw)(?:=(?:{\\s*)?)?(?:\\.\\w*)?(?:\\(\\s*\\w*\\s*\\))?[\\\"\\'\\`]((?:[\\w\\s\\-\\/\\:\\.\\[\\]]|\\$\\{(.*?)\\})+)[\\\"\\'\\`]}?)"
  }

이제 .html에서처럼 다시 저장하고 역풍이 작용하는 것을 볼 수 있습니다!

더 나은 도구?

올해 초 테일윈드announced the release of a plugin with Prettier .

리포지토리 기록을 보면 Headwind는 2021년 중반(이 글을 쓰는 시점) 및 seems not to be actively maintained anymore 이후 업데이트가 없었습니다.

새로운 기능을 보다 적극적으로 지원할 뿐만 아니라 각 개발 환경에서 구성하지 않고 프로젝트에 직접 포함할 수 있는 장점도 있기 때문에 앞으로는 공식 플러그인에 의존하는 것이 좋은 선택이 될 수 있습니다.


그곳에서 유용한 것을 배웠기를 바랍니다. 즐거운 코딩하세요!

Photo by lan deng on Unsplash