Tailwind를 잘못 사용하고 있었으므로 그럴 필요는 없습니다.-JS 튜토리얼-php.cn

약 3년 전 저는 웹사이트 개발을 위한 멋진 라이브러리인 Tailwind CSS를 발견했습니다. 이 기사를 합리적으로 짧게 유지하기 위해 이 기사를 소개하는 데 말을 낭비하지 않겠습니다. 이미 배울 수 있는 소스가 많이 있습니다. 대신 제가 Tailwind 초창기에 계속해서 저지르던 실수에 대한 이야기를 나누고 싶습니다. 저처럼 같은 구덩이에 빠질 필요는 없습니다.

Tailwind는 CSS 규칙을 소위 유틸리티 클래스로 래핑하여 캐스케이드 스타일 시트의 전통적인 개념을 깨뜨립니다. .css 파일에서 CSS 규칙을 구성하는 대신 DOM 요소에서 직접 클래스 이름을 구성합니다. 이 접근 방식은 처음에는 부자연스럽고 이상하게 느껴지지만 곧 이해가 되기 시작합니다. 이 작업을 시작하는 데 약 하루가 걸렸으며 이제 강제로 작성하지 않는 한 일반 CSS를 다시 작성하고 싶지 않습니다. Tailwind는 제 1위 프레임워크인 Nuxt에 완벽하게 통합되어 있으며 몇 분 안에 시각적으로 매력적이고 반응형 친화적인 웹사이트를 만드는 단순함이 정말 굉장합니다.

하지만 문제가 있습니다. 더 많은 옵션을 알고 포함하기로 선택한 스타일이 많을수록 HTML은 혼란에 빠질 수 있습니다. 제가 초창기에 느꼈던 두 번째 문제는 반복되는 일이었습니다. 명예로운 DRY 원칙 추종자로서 내 템플릿에서 동일한 클래스 순서를 여러 번 보는 것은 눈을 아프게 했습니다.

이것을 최적화하려고 했습니다.

첫 번째 아이디어는 Tailwind 클래스 시퀀스를 문자열 변수로 추출하는 것이었습니다. Vue.js(Nuxt는 Vue 위에 구축됨)에서는 대략 다음과 같습니다.

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

로그인 후 복사

드디어 유지 관리와 변경이 더 쉬워졌습니다. 명확성은 논쟁의 여지가 있습니다. 특히 앱 전체에 동일한 요소가 있고 정의를 전역과 같은 상수로 끌어올려야 하는 경우에는 더욱 그렇습니다.

저는 더 나은 솔루션을 찾고 있었습니다.

그리고 Tailwind의 @apply 지시어를 소개받았습니다. 기본적으로는 전체 개념을 부정하는 것과 같습니다. 구체적인 요소에 직접 정의를 배치하는 대신 자신만의 일종의 스타일시트를 만들고 이를 사용자 정의 클래스 및 요소 조정으로 채울 수 있습니다. 일반 CSS 규칙 대신 Tailwind 유틸리티 클래스에서 솔루션을 추출합니다.

이상하지만 중복된 정의로 인해 정신적인 문제가 해결될 것 같았습니다.

VueSchool 교사와 Tailwind 문서 모두에서 사용하지 말라고 금지 경고했지만 당연히 듣지 않았습니다.

I was using Tailwind wrong, so you don

저는 이 접근 방식을 사용하여 몇 개의 웹사이트를 만들었습니다. 효과가 있었습니다. 문제가 해결되었나요, 아니면?

2024년 후반이 되어갑니다. 내 웹사이트 중 하나에 대한 새로운 아이디어가 생겼습니다. 코딩을 시작했습니다. 나는 1년 전에 했던 @apply shenanigans를 완전히 잊어버렸습니다. 그런데 갑자기 레이아웃을 정리할 수 없게 되었습니다.

내 템플릿에는 명확한 스타일이 사용되지 않았지만 내

는 제 위치에서 벗어났습니다. 무슨 일이야? 렌더링된 HTML을 연구하기 위해 브라우저에서 개발 콘솔을 열었습니다. CSS 스타일이 적용되어 있었습니다.

I was using Tailwind wrong, so you don

몇 분의 답답한 시간이 지나 범인을 알아냈습니다.

갑자기 다음 상황이 발생했습니다.

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

로그인 후 복사

tailwind.css 파일에서 2023년만큼 좋은 아이디어는 아닌 것 같았습니다.

언젠가 다른 것이 필요할지 누가 알겠어요?

강의 #1

요소 선택기에서 @apply를 전역적으로 사용하지 마세요.

새 프로젝트를 시작하는 것이 편리해 보일 수도 있지만 장기적으로는 어려움을 겪을 수 있습니다. 나처럼 당신도 쉽게 잊어버릴 수 있을 뿐만 아니라. 또한 상황을 덜 유연하게 만듭니다. 언젠가 당신은 더 현명하게 돌아와 그것을 제거할 준비를 하게 될 것입니다. 그러나 일단 글로벌 스타일을 제거하면, 그 위에 설립된 사이트의 절반이 예기치 않게 무너질 것입니다. 전체 디자인을 다시 생각해 볼 정신적 준비가 되셨나요?

개인적으로는 이제 tailwind.css에서 @apply를 전혀 사용하지 않는 것이 좋습니다(단지 내가 넣은 모든 프로젝트에서 이를 떼어낼 시간과 인내심이 있다면).

합당한 이유 없이 계속 사용을 고집한다면(Tailwinds 문서에서 말하는 "타사 라이브러리의 스타일을 재정의하려는 경우") 적어도 이를 사용하여 클래스를 생성하세요. .

적어도 스타일을 지정하려는 요소에 첨부해야 하기 때문에 .my-cool-css-class가 있는 것은 용납할 수 없습니다. 마찬가지로 모든 사람(미래의 자신을 포함)이 그곳에서 그것을 볼 수 있으며 필요한 경우 그 정의를 찾을 수 있습니다.

그렇지만

이 규칙을 위반하도록 유혹하는 후보자는 앵커 요소입니다. 각 에 클래스 속성을 첨부하는 것은 정말 지루한 일이기 때문입니다.

한 가지 가능한 대안은 앵커 주위(또는 Nuxt에 내장된 주위)를 감싸는 사용자 정의 링크 구성 요소를 만드는 것입니다. 하지만 당신이 마음에 들지 않을 수도 있고 나는 당신을 비난하지 않을 것입니다.

사실 @apply 지시문을 사용하는 것이 여전히 최고의 솔루션입니다.

전역 요소 스타일이 적합한 더 많은 예를 제작할 수 있습니다. 100% 확신한다면, 그것을 사용하세요. 하지만 이는 항상 근거가 충분한 결정이어야 합니다.

강의 #2

Tailwind 클래스 정의가 너무 길거나 중복되는 실제 이유는 코드 디자인이 좋지 않기 때문입니다.

Vue와 같은 최신 JavaScript 프레임워크를 사용하면 재사용 가능한 작은 구성 요소를 만들고 이를 결합하여 복잡한 솔루션을 구축할 수 있습니다. 활용해보세요.

위의 버튼 예는 다음과 같이 바뀔 수 있습니다.

<-- MyButton.vue -->
<템플릿>
  



<p>이렇게 하면 중복된 코드가 없어집니다.</p><p>반면에 정말 긴 클래스 체인을 보면 언제나 부족한 요소가 너무 많은 고민을 짊어지고 있다는 생각이 듭니다. 가장 좋은 방법은 뒤로 물러서서 결정을 수정하는 것입니다.</p>

<p>제 경험에 따르면 소수의 Tailwind 클래스만으로 멋진 디자인을 만들 수 있습니다. 그리고 더 추가하고 싶다면 일반적으로 하나의 요소에 모두 쌓여서는 안 됩니다. 모든 작업을 수행하는 하나의 큰 구성 요소(또는 원하는 경우 클래스)를 만드는 것과 거의 같습니다. 어떤 시점에서는 더 이상 줄을 추가하는 것을 멈추고 내용을 분리해야 합니다.</p>

<p>최악의 시나리오에서는 시각적으로 까다로운 CSS 요소를 별도의 구성 요소로 캡슐화하여 필요한 상호 작용의 양을 최소화할 수 있어야 합니다. 하지만 솔직히 말해서 이미 누군가가 그렇게 했을 것이므로 여러분이 해야 할 일은 프로젝트에 사용할 올바른 Tailwind 구성 요소 라이브러리를 찾는 것뿐입니다.</p>

로그인 후 복사

위 내용은 Tailwind를 잘못 사용하고 있었으므로 그럴 필요는 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!