Tailwind CSS: 2022년 내 경험

2022년, Tailwinds가 출시된 지 공식적으로 5년이 되었습니다. 이제 어떤 사람들은 그들의 website에 따라 Tailwind CSS가 정확히 무엇인지 물을 수 있습니다.

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.

저는 항상 부트스트랩 전문가(주로 그리드 열 시스템과 많은 사전 구축된 구성 요소에 대해)였지만 현재 조직에 합류한 후 Tailwind와 함께 일해야 했고 정말 좋은 경험이었습니다. 이 짧은 기사에서는 Tailwind CSS로 작업하면서 겪은 최고점과 최저점을 살펴보겠습니다.

최저

1. 미리 빌드된 구성 요소가 없습니다.
Tailwind를 사용하기 시작했을 때 빠른 내비게이션 바를 원했는데 유용한 것이 하나도 보이지 않아 깜짝 놀랐습니다. 내 필요에 맞게 쉽게 조정할 수 있는 미리 빌드된 Bootstraps 구성 요소를 사용하는 데 익숙했기 때문에 이것은 저에게 큰 충격이었습니다. Tailwind를 사용하면 처음부터 모든 구성 요소를 빌드하고 반응형으로 만들고 필요한 모든 JavaScript 코드를 추가하여 추가로 개선해야 했습니다.

2. HTML 코드가 뒤죽박죽으로 보입니다.
내 HTML 파일은 그 안에서 많은 일이 벌어지고 있는 것처럼 끊임없이 혼란스럽습니다. 일반적으로 스타일을 저장하고 HTML 파일에 마크업이 엄격하게 포함되도록 하려면 별도의 CSS 파일이 필요하지만 Tailwind를 사용하면 HTML 코드와 함께 Tailwind 태그를 인라인으로 코딩해야 합니다.

/*Vanilla CSS*/
div {
   font-weight: 700;
   font-size: 16px;
   border-radius: 8px;
   color: white;
  }

/*Tailwind CSS*/
<div class="font-bold text-base rounded text-white"></div>

정말 많은 일이 벌어지고 있는 것처럼 느껴지고 실제로 그렇습니다.

3. Tailwind 스타일의 반복
나는 끊임없이 Tailwind 스타일을 반복해서 반복하는 것을 봅니다. 여러 파일에 걸쳐 동일한 클래스 속성을 가진 여러 태그div는 결국 엄청나게 반복적이고 성가신 일이 됩니다.

최고점

1. CSS 코드 축소
CSS를 적게 작성하고 있음을 알았습니다. 때때로 div 태그의 배경색을 변경하거나<div class="bg-gray-100"></div> 단순히 수행하여 텍스트의 글꼴 크기를 늘리는 기능<p class="text-lg">Hello World</p>이 외부 스타일시트로 전환하여 작성하는 것보다 더 직관적으로 느껴졌습니다.

2.CSS에 대한 이해도 향상
내가 거의 또는 전혀 알지 못하는 Tailwind의 일부 속성을 우연히 발견할 때마다 나는 신속하게 편집자에게 문의하여 해당 속성에 해당하는 CSS를 찾아 테스트하고 그것이 완전히 작동하고 작동하는 방식을 통해 언어에 대한 전반적인 지식을 향상시킵니다. .

3. 응답성이 정말 쉬워졌습니다.xs , sm , lg 등과 같은 태그를 사용하여 내 HTML 파일의 모든 측면에 적용할 수 있으므로 CSS 중단점을 조작하는 것이 매우 쉬워졌습니다. Tailwind는 반응성 측면을 잘 처리하기 때문에 미디어 쿼리를 작성할 필요가 거의 없습니다.

요약

현재 Tailwind를 사용하는 것은 저에게 흥미로운 경험입니다. 문제는 조직을 떠난 후나 개인 프로젝트를 진행할 때 Tailwind CSS를 계속 사용할 것인가입니다. 글쎄, 지금은 확실하지 않지만 내가 아는 것은 그것이 짜릿한 새로운 경험이고 나는 그것의 모든 부분을 위해 여기에 있다는 것입니다.🥳🥳