Tailwind CSS: 신속하고 반응적인 디자인을 위한 유틸리티 우선 CSS 프레임워크 및 API
나는 매일 기술에 깊이 빠져 있지만 우리 회사가 고객을 위해 구현하는 복잡한 통합 및 자동화를 공유하고 싶은 만큼 시간이 없습니다. 또한 발견할 시간이 많지 않습니다. 내가 쓰는 대부분의 기술은 Martech Zone 하지만 가끔은 특히 Twitter를 통해 공유해야 하는 새로운 기술에 대한 소문을 볼 수 있습니다.
웹 디자인, 모바일 앱 개발 또는 콘텐츠 관리 시스템을 구축하는 일을 하고 있다면 여러 스타일시트에 걸쳐 경쟁하는 스타일의 좌절과 씨름했을 것입니다. 각 브라우저에 내장된 놀라운 개발 도구를 사용하더라도 CSS를 추적하고 정리하는 데 너무 많은 시간과 에너지가 필요할 수 있습니다.
CSS 프레임 워크
최근 몇 년 동안 디자이너들은 준비되고 사용할 준비가 된 스타일 컬렉션을 출시하는 놀라운 일을 해냈습니다. 이러한 CSS 스타일시트는 CSS 프레임워크로 더 잘 알려져 있으며 개발자가 CSS 파일을 처음부터 빌드하는 대신 프레임워크를 참조할 수 있도록 다양한 스타일과 반응형 기능을 모두 수용하려고 합니다. 몇 가지 인기 있는 프레임워크는 다음과 같습니다.
- 부트 스트랩 – Twitter에서 처음 도입된 XNUMX년 동안 발전된 프레임워크입니다. 수많은 기능을 제공합니다. JQquery에 의존하고, 덮어쓰기가 어렵고, SASS를 필요로 하는 단점이 있으며, 로드하기가 꽤 무겁습니다.
- 불마 – 개발자 친화적이며 JavaScript에 의존하지 않는 깨끗한 프레임워크.
- Foundation – 쉽게 사용자 정의할 수 있는 수많은 구성 요소가 있는 보다 일반적이고 사용 가능한 CSS 프레임워크. 추가로 있습니다 이메일 기반 과 모션 UI 애니메이션용.
- UI 키트 – HTML, JavaScript 및 CSS의 조합으로 프런트 엔드를 빠르고 쉽게 개발할 수 있습니다.
Tailwind CSS 프레임워크
다른 프레임워크는 인기 있는 사용자 인터페이스 요소를 잘 수용하지만 Tailwind는 다음과 같은 방법론을 사용합니다. 원자 CSS. 요컨대 Tailwind는 자연어를 사용하여 클래스 이름을 독창적으로 구성하여 원하는 대로 수행했습니다. 따라서 Tailwind에는 구성 요소 라이브러리가 없지만 CSS 클래스 이름을 참조하는 것만으로 강력하고 반응이 빠른 인터페이스를 쉽게 구축할 수 있는 기능은 우아하고 빠르며 비교할 수 없습니다.
다음은 정말 좋은 예입니다.
CSS 그리드
CSS 그라디언트
다크 모드 지원을 위한 CSS
Tailwind도 환상적입니다. 확장 가능 Microsoft의 코드 편집기에서 클래스를 쉽게 식별하고 삽입할 수 있도록 VS Code용.
훨씬 더 독창적인 Tailwind는 프로덕션용으로 빌드할 때 사용되지 않는 모든 CSS를 자동으로 제거합니다. 즉, 최종 CSS 번들이 가능한 한 가장 작습니다. 사실, 대부분의 Tailwind 프로젝트는 10kB 미만의 CSS를 클라이언트에 제공합니다.