Cozy Coding

2024년에 Tailwind CSS는 쓸만한가

2024년에 Tailwind CSS는 쓸만한가
Cozy CodingPosted On Aug 3, 20244 min read

테일윈드 CSS는 자동 완성, 널리 사용되는 클래스명 및 믹스인 등을 통합한 놀라운 도구 세트입니다. 이 도구는 재능 있는 사람들에 의해 개발되었습니다. 그러나 사용하는 데는 큰 비용이 듭니다. 이미 복잡한 프론트엔드 개발 프로세스에 더 많은 복잡성을 추가합니다.

장점을 살펴보겠습니다:

  • 더 빠른 개발(일정 기간 이후).
  • 레이아웃과 스타일 파일 간 전환 불필요.
  • 캐스케이드가 거의 없음.
  • 디자인 시스템 개발이 쉽습니다.
  • 모든 프로젝트에 동일한 클래스 및 믹스인을 만들 필요 없음. sass, less 등을 이별하고.
  • 놀라운 오류 처리 및 자동 완성.
  • 통일된 개발자-디자이너 소통, 모두가 같은 언어로 의사소통합니다.

컨텍스트 스위칭은 어려워요. HTML과 CSS를 같은 곳에 가지고 있는 것은 이 면에서 좋아요. 전역 CSS 규칙/믹스인/변수를 찾기 위해 곳곳을 뒤지지 않아도 됩니다. 설정 파일만 엔트리 포인트로 사용합니다. 자주 사용되는 스타일은 의미 있는 기본 값으로 그룹화되어 이름이 붙여집니다. 강점에 대해 더이상 말할 것이 많지 않습니다. 그것들은 상당히 명백하고 타협할 여지가 없습니다.

제 주관적인 약점들은 다음과 같아요:

  • 한 줄에 여러개의 CSS 클래스를 작성할 때 각각이 하나 이상의 속성을 담당하면 커지는 경향이 있어요. 때로는 화면에 맞지 않을 수도 있어요. 그래서 여러분께서 정규화된 코드 대신에 Markdown 포맷을 사용하기로 했어요:

.chat-notification { display: flex; align-items: center; max-width: 24rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

{
  "테마": {
    "채팅알림": {
      // ...규칙
    }
  }
}

그러나 이렇게 하면 CSS 파일의 모든 규칙을 한 클래스명 아래로 이동시킨 것과 다를 바 없습니다.

  • 테일윈드 클래스를 HTML 레이아웃 바깥으로 이동하면 자동 완성과 테일윈드 오류 처리가 사라집니다. 예시:
// 모두 잘 작동

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4" />

// 오타가 발생하기 쉬워져서 실수하기 쉽습니다

const getClassNames = (options) => "p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4";
<div className={getClassNames(options)} />
  • CSS에는 500여 가지 이상의 개별 속성이 정의되어 있어, 그 중 일부 구문을 기억하는 것은 거의 불가능합니다. 특히 테일윈드 "버전"에 대해 이야기할 때 더욱 그렇습니다. 테일윈드 문서를 찾아보는 데 익숙해질 수는 있지만, 기본 구문을 찾는 것만큼 자연스럽지는 않을 것입니다 (때로는 두 배의 시간이 걸림).
  • 테일윈드 CSS는 사용하는 사람들에게 대부분의 CSS 지식을 추가하지 않습니다. 또한 파생 요소인 그리드, :is, :where, :has 및 기타 많은 CSS 기능은 숨겨졌거나 버려졌거나 간단히 배제되었습니다.

마지막 포인트를 더 자세히 살펴보고 싶어요.

카스케이딩, 상속, 우선순위 등이 복잡하다는 것을 알아요. 많은 규칙이 있고 때로는 일관성이 없고, 때로는 각종 이유로 이해하기 어렵다고 하죠. 오류 처리 기능이 없어요 — 세미콜론을 빼먹으면 화면이 공백으로 나오기도 하죠. 예쁘지 않네요.

역사적으로 CSS는 결코 완벽하지 않았고 항상 비즈니스와 디자이너의 요구 사항보다 뒤쳐지기 일쑤였어요. 아마도 정확히 디자이너들이 더 나은 명세를 위해 최선을 다한 사람들이었을지도 모르겠네요.

하지만 완벽한 기술을 한 가지만이라도 꼽아보세요. 없죠. CSS는 웹 페이지를 스타일링하기 거의 완벽한 도구에요. 어떤 것이 어떻게 보이기를 설명하는 언어의 표현이 더 간결하고 표현력이 풍부한 방법이 있을 수 있을지는 모르겠어요. 아마 yaml은 더 좋을 수도 있겠죠. 하지만 비슷한 것들은 stylus(광고 아님)로 쉽게 구현할 수 있어요 — 과거에는 멋진 도구였고, CSS 전처리기 중에서 명확히 소수자였어요.

테일윈드(Tailwind)가 사람을 더 나은 개발자로 만들어 주지는 않습니다. 그렇지만 사람을 어느 정도 더 빠른 개발자로 만들어 줍니다. 이 둘은 같지 않습니다. 저는 테일윈드(Tailwind) 팀이 산업에 해로운 유틸리티 접근 방식을 취하는 것으로 생각합니다. 테일윈드(Tailwind)가 표준이 된 이후로, 우리는 아마도 비대한 HTML이 단지 얼음산의 일각일 뿐이라는 것조차 이해하지 못할지도 모릅니다. 여기서는 관심사 분리를 언급하지 않겠습니다. 이를 언급하는 것은 저를 너무 보수적으로 만들어 버린다고 생각합니다.

우리는 마치 스타일을 속성에 맞는 곳이 아니라 어디에든 작성하려고 애를 쓰고 있는 것 같습니다 — CSS in JS, JSS, HTML 등. 유일하게 중요한 매개변수는 개발 속도입니다. 다른 어떤 타협이 있던간에요.

요즘 테일윈드(Tailwind)를 사용하지 않는 가장 큰 단점은 따로 CSS 파일을 유지하는 것입니다. 이것은 제를 포함한 개발자들에게 큰 문제입니다. 대부분은 시간이 돈이기 때문입니다. 도구가 중요합니다.

결론

카스케이드는 복잡해요. 유지보수 가능한 CSS 작성도 복잡해요. 만약 우리가 이것을 진정한 언어로 간주하지 않는 CSS와 결합한다면, 유지보수가 어려운 CSS를 얻게 될 거예요.

Tailwind는 진화할 거예요. 아마 더 나은 유사한 도구로 대체될 수도 있어요. 하지만 CSS는 항상 한 발 앞서 있을 거예요. 유틸리티 우선 라이브러리는 현재의 트렌드예요. 그건 미래의 일이 아니에요.

좋은 자바스크립트 프레임워크와는 달리, 브라우저/자바스크립트 API를 더 잘 사용하도록 밀어주었던 것처럼, Tailwind는 CSS의 미래와는 아무 상관이 없고 영향을 미치지 않을 거에요.