Tailwind CSS (3) 썸네일형 리스트형 [번역] 왜 Tailwind CSS를 사용하나요? Tailwind CSS가 CSS를 작성하는 최고의 방법인지에 대해선 논란이 있으나, 꽤 다수가 동의하는건 CSS에 충분히 혼쭐나기 전까지는 얼마나 효과적인지 모른다는 것입니다. Tailwind CSS 창시자가 Tailwind CSS를 만들게 된 배경을 살펴봅니다. 아래 원문를 의역한 글입니다. https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ CSS Utility Classes and "Separation of Concerns" Software developer, author, and host of Full Stack Radio. August 7, 2017 adamwathan.me TL;DR 답은 유틸리티 퍼스트 클래스를 이용한 .. Tailwind CSS 간단하게 배워보기 Vue mastery의 utility-first-css-with-tailwind 강의 내용을 정리한 글입니다. 유틸리티 퍼스트 CSS란? 유틸리티 클래스란 예측 가능한 이름을 지닌 저수준 디자인 토큰 유틸리티 CSS를 우선적으로 조합하여 CSS를 만드는 것 디자인 토큰을 CSS 규칙에 우선 반영하는 것 원자 클래스 라고도 합니다. 유틸리티 CSS 토큰의 조합형 사용을 지향합니다. CSS보다는 HTML 자체를 변경하는 것을 권장합니다. CSS를 수정하여 변경하는 경우 변경 사항이 의도하지 않은 영향을 미치지 않도록 각별히 주의해야 합니다. 그러나 HTML만 수정하여 변경하는 경우 변경 사항이 수정하는 바로 그 HTML에만 영향을 미친다는 것을 확실히 알 수 있습니다. Tailwind CSS를 사용하는 이유.. 소프트웨어 엔지니어링 관점에서 바라본 CSS-in-js vs Tailwind CSS 소프트웨어 엔지니어는 항상 확장성과 재사용성을 찾습니다. 해당 기능들은 관심사의 분리 / 합성을 통해 구현됩니다. 위 두 가지 관점에서 Styled Component(Css-in-js 대표)와 Tailwind CSS를 비교해 봅니다. Styled Components가 확장성 / 재사용성을 구현하는 방법 주 : 몇몇 경우 타입스크립트를 이용한 타입 안전성을 제공하기 위한 hack이 필요합니다. 1. ThemeProvider 마크업 구조, 컴포넌트를 변경하지 않으면서 디자인 토큰만 변경하기 위한 추상화 방법. css 변수를 직접 임포트해도 되긴 됩니다. https://styled-components.com/docs/advanced#theming const Button = styled.button` color.. 이전 1 다음
