순풍? 나는 통과 할 것이다

최근 프로젝트에서 Tailwindcss를 사용했는데 그거 알아요? 아무리 말해도 눈이 번쩍 뜨이는 경험이었습니다.

Tailwindcss가 무엇인지 궁금하신 분들도 계실 것입니다.

Tailwind CSS는 현재까지 가장 빠르게 성장하는 CSS 라이브러리입니다. 이는 빠르게 프론트엔드 개발자에게 필수적인 도구가 되었습니다. 프런트 엔드의 많은 개발자는 대규모 프로젝트에서 이를 활용하고 있으며 최소한의 문제에 직면하고 있습니다. 웹사이트와 웹앱 개발 및 디자인에 대한 개선은 의심할 여지 없이 놀랍습니다.

그렇다면 문제는 무엇입니까? 왜 제목에 '' Tailwindcss가 있나요? 아니 고마워요 ”?

이 제목은 Tailwind CSS가 우수함에도 불구하고 프로젝트에 최적의 선택이 아닐 수 있는 경우가 있을 수 있음을 시사합니다. 왜 그럴 수 있습니까? 답이 있습니다. 그러나 설명을 자세히 살펴보기 전에 기술 검토를 위한 기반을 구축해 보겠습니다.

모든 CSS는 무엇입니까?

Tailwindcss 및 개발의 복잡성에 대해 알아보기 전에 몇 가지 전제 조건을 충족해야 합니다.

CSS란 무엇입니까?

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 나타냅니다. 내 생각에 CSS에 대한 가장 좋은 정의는 techterms.com 에서 나온 것입니다.

“CSS는 HTML 웹페이지의 콘텐츠 형식을 지정하는 데 사용되는 스타일 시트 언어입니다. CSS 스타일 시트는 콘텐츠 자체와 별도로 텍스트, 표 및 기타 요소의 모양과 서식을 정의할 수 있습니다. 스타일은 웹페이지의 HTML 파일이나 여러 웹페이지에서 참조하는 별도의 문서에서 찾을 수 있습니다.

간단히 말하면 CSS는 스타일링 언어입니다. HTML 요소에 CSS를 사용하여 웹페이지나 웹 앱을 멋지게 보이게 만듭니다.

Tailwindcss란 무엇입니까?

Tailwindcss 팀 자체의 표현에 따르면 Tailwindcss는 " 마크업에서 직접 어떤 디자인이든 구축하도록 구성할 수 있는 flex , pt-4 , text-center 및 rotate-90 과 같은 클래스로 구성된 유틸리티 우선 CSS 프레임워크 입니다. "입니다.

이는 본질적으로 tailwind CSS가 원래의 CSS 절차와 작업을 취하여 이를 수행하고 구현하기가 더 간단해진다는 것을 의미합니다.

우리는 이미 CSS와 Tailwind CSS의 기본 사항을 논의했습니다. 이제 Tailwind CSS가 실제로 어떻게 작동하는지, 해당 CSS와 함께 더 자세히 살펴보겠습니다. 이 탐색은 결국 Tailwind CSS와 관련된 프로젝트에서 도달한 결론으로 이어질 것입니다.

내 결론은 Tailwind CSS가 더 크고 복잡한 프런트엔드 프로젝트에 가장 적합하다는 것입니다. 그러나 대부분의 상황에 대한 기본 선택은 여전히 "바닐라" CSS입니다. 즉, CSS를 가장 순수한 형태로 사용하는 것은 일반적으로 Tailwind CSS나 다른 추가 라이브러리에 비해 대부분의 개인과 시나리오에 더 유리합니다.

CSS와 Tailwindcss의 차이점

Tailwindcss는 어떤 모습인가요? 바닐라 CSS와 동등한 CSS를 만든 다음 Tailwindcss와 동등한 것을 만들어 비교해 보겠습니다.

위의 텍스트에서 무슨 일이 일어나고 있는지 분석해 보겠습니다. 이것은 HTML 5 발췌본이며 우리는 버튼을 구성하고 있습니다.

버튼을 구성하기 위해 웹 사이트나 웹 앱을 변경하기 위한 항목을 입력하는 기본적으로 작은 컨테이너인 " divs "를 통해 버튼을 설정합니다. 각 div에 고유한 " 클래스 "를 제공하므로 나중에 별도의 CSS 파일에서 해당 특정 요소를 참조할 수 있습니다. 그러나 div에 고유한 " id "를 제공할 수도 있습니다. " 인라인 " CSS 변경을 수행할 수 있습니다. 즉, CSS를 HTML 파일에 직접 넣을 수 있지만 대부분은 정리를 위해 이를 피하는 경향이 있습니다.

CSS 파일에서 버튼을 편집하는 코드는 어떤 모습일까요?

위 코드에서는 HTML 발췌 부분의 버튼 클래스와 상호 작용하고 있습니다. CSS 파일에서 HTML 클래스를 인식하도록 하는 방법은 클래스 이름 자체의 시작 부분에 점을 붙이는 것입니다. 그 아래에서는 " align-items "를 사용하여 버튼을 div 중앙에 순서대로 정렬합니다. align-item 아래에는 " background-color "가 늘어나거나 늘어나지 않는 정도를 정의하는 " background 클립 "이 있습니다. " 테두리 "는 버튼 측면의 두께이고 테두리 반경은 가장자리의 곡선 정도입니다. 방금 언급한 모든 내용은 버튼 스타일 개발에 기여합니다. 보시다시피 원래 CSS 스타일은 충분히 단순해 보입니다. Tailwindcss는 동일한 사례를 어떻게 처리합니까?

무엇을 기다립니다? 방금 CSS처럼 보이는 코드를 HTML 파일에 넣었나요? 그래, 우리가 했어. 지금 보고 있는 내용은 Tailwindcss의 이전 코드 예제와 동일합니다. 이는 실제로 Tailwindcss의 더욱 독특한 속성 중 하나입니다. Tailwindcss를 사용할 때 별도의 CSS 코드를 다른 파일에 넣지 마십시오. 모든 Tailwindcss 코드는 HTML 파일로 직접 이동됩니다. 이전에 언급했듯이 개발자는 전통적으로 인라인 CSS 코딩을 피합니다. Tailwindcss를 사용하면 인라인 코딩은 더 이상 선택 사항이 아니라 거의 필수입니다. Tailwindcss는 클래스 식별을 통해 완전히 구현됩니다.

이제 위의 코드는 무엇을 합니까? 약간 다르지만 원본 CSS 코드가 수행하는 작업을 정확하게 수행합니다.

일반 CSS와 Tailwindcss 대응 부분을 다시 살펴보겠습니다.

위 이미지에서 우리는 " card-img " 클래스 아래에 초콜릿 그림을 가져오는 HTML5 문서에 있습니다. 해당 CSS가 어떻게 보이는지 살펴보겠습니다.

위의 CSS 코드는 마지막 코드와 유사합니다. 깊이 있는 추정은 필요하지 않습니다. 우리는 초콜릿 카드의 모양을 정의하고 있습니다. 이제 훨씬 더 흥미로운 Tailwindcss 변형을 살펴보겠습니다.

위의 코드는 Tailwindcss와 동일합니다. 훨씬 더 간단하고 우아하지만 모든 것이 무엇을 의미하는지, 진술을 어떻게 배치하는지 알기 위해서는 훨씬 더 많은 노력이 필요합니다. 그렇다면 이것이 전통적인 CSS에 비해 장점이 있습니까?

Tailwindcss의 특성상 매우 지저분해집니다. HTML과 CSS를 포함한 모든 코드는 하나의 파일에 포함되며 길고 복잡해 보일 것입니다. 이로 인해 개발이 어려워집니다.

Tailwindcss의 주요 단점은 무엇입니까?

• 익숙해지는 데 시간이 걸리는 가파른 학습 곡선.
• 사용자 정의 클래스 구성 요소를 만들어야 합니다. (장기 프로젝트에서는 많은 양이 추가될 수 있습니다).
• HTML과 스타일이 혼합되어 있어 혼란스럽습니다.

그것의 주요 이점은 무엇입니까?

• 고도로 맞춤화 가능

• 더 빠른 개발

• 추가되거나 편집되는 내용에 관계없이 일관된 문구와 패턴.

  
  

우리는 Tailwindcss의 예를 보았으며 이제 주요 장점과 단점을 알고 있습니다. 그런데, 얼마나 인기가 있나요?

이는 기존 개발자와 신규 개발자 모두에게 채택되어 확산되었습니다.

tailwindweekly.com의 Vivian Guillen은 Tailwindcss가 2022년 11월 19일 현재 주간 다운로드 수 450만 건을 기록했다고 밝혔습니다. 제가 이 글을 쓰고 있는 동안 npmjs.com 으로 이동하여 Tailwindcss를 검색하면 다운로드 수가 3억 3,600만 건에 달합니다. 5년 전 출시된 이후 하루 평균 다운로드 수는 184,110건에 달합니다. 엄청난 양의 다운로드.

Tailwind에서 휴식을 취하기

앞서 저는 이 글의 시작 부분에서 “ Tailwindcss가 귀하의 프로젝트에 최적의 솔루션이 아닌 시기가 있을 수 있습니다”라고 썼습니다. 내가 왜 이걸 썼지? 제목과 어떤 상관관계가 있나요? “Tailwindcss? 나는 통과 할 것이다 ".

Tailwindcss 는 거의 모든 프런트엔드 개발자들 사이에서 전 세계적으로 인기가 있으며, 기존 CSS보다 구현하기가 더 쉽고, 같은 유형의 다른 기술보다 더 많은 사용자 정의 기능을 제공합니다. 도대체 내가 사용한 내용은 이 기사 자체에 영감을 주기도 했습니다. 그런데 왜 나는 아직도 그것을 의심하는 걸까? 당연히 사용했으니까 .

Tailwindcss는 모두가 주장하는 것만큼 훌륭합니다. 마찬가지로 사람들이 주장하는 것처럼 그것은 모든 면에서 나쁘다. Tailwindcss의 특성으로 인해 단기 및 중기 프로젝트 작업이 복잡해지고, 학습 곡선이 개발을 완전히 방해하며, 사용자 정의 구성 요소 제작에 대한 고집 등이 있습니다. 이러한 모든 것이 Tailwindcss를 단기적 으로 견딜 수 없게 만듭니다. 단기간에만!

이는 Tailwind CSS가 개발자와 회사가 수행하는 광범위하고 복잡한 프로젝트용으로 예약되어야 함을 의미합니다. 짧은 프로젝트의 경우 기존 CSS를 따르는 것이 좋습니다. 이렇게 하면 CSS 기술이 약화되는 것을 방지하고 Tailwind CSS와 같은 바로가기 프레임워크에 지나치게 의존하는 것을 방지할 수 있습니다. 왜 나를 믿어야합니까? 저는 소규모 프로젝트에 Tailwind CSS를 사용해 보기로 했고, 이는 이것이 실질적이고 지속적인 벤처에 더 적합한 이유를 진정으로 강조했습니다. 저는 다른 CSS 프레임워크를 탐구하고 이에 대한 기사를 작성하게 되어 기쁩니다!

저를 구독 하시면 알 수 있으며 우리는 곧 만나보실 수 있습니다 ;)