테일윈드가 뭐야? 제대로 설정하는 방법도요.

반응형

요즘 CSS를 위해 테일윈드를 사용하고 있습니다. 첫눈에 테일윈드는 꽤 못생기고 해독하기 어려워 보인다. 이걸 좀 봐.

그것은 정말 못생겼지만 잘 작동해요! Atomic CSS와 유틸리티 클래스(1 클래스 = 1 스타일)에서 영감을 받아 Tailwind는 몇 가지 강력한 설계 결정을 내린다.

• 마크업과 스타일은 서로 옆에 있어야 합니다(bye, bye 스타일시트). 따라서 두 개의 다른 파일을 변경할 필요가 없으므로 구성 요소를 더 쉽게 작성하고 업데이트할 수 있습니다. 글로벌 네임스페이스를 변경하면 웹 사이트의 여러 항목에 영향을 미칠 수 있으므로 글로벌 CSS는 시간이 지나도 유지 관리가 어렵습니다.
• 수업 이름을 생각해 내는 것은 시간 낭비입니다.
• CSS는 브라우저 렌더링 모델에 직접 매핑하는 표현형 스타일 언어이므로 스타일링을 위한 새로운 멘탈 모델을 배울 필요가 없다.

이 모든 것이 인라인 CSS에도 해당된다는 것을 알 수 있습니다! 그냥 일반 CSS를 사용하고 스타일시트를 사용하지 않는 것이 어떨까요?

 

<div style={
     color: 'black',
     backgroundColor: 'white'
}>

맞습니다. 인라인 CSS를 사용하면 이러한 이점을 얻을 수 있습니다. 그러나 테일윈드는 몇 가지 면에서 더 잘합니다.

• 인라인 CSS에서는 미디어 쿼리나 호버 상태를 가질 수 없습니다. 테일윈드에서 이 작업은 모든 유틸리티 클래스에 추가할 수 있는 한정자를 통해 수행할 수 있습니다. bg-sky-600 호버:bg-sky-700
• 테일윈드는 디자인 시스템(색상, 글꼴, 간격 등)과 함께 제공됩니다. 정확한 픽셀을 지정하는 대신 m-2(2단위의 여백)와 같은 것을 작성할 수 있습니다. 결과적으로, 당신의 웹사이트 전체에 걸쳐 간격이 균일해지고, 당신의 테마에서 색상이 나올 것입니다.테일윈드는 어떻게 작동하나요?Tailwind는 React 구성 요소의 className 속성을 보고 모든 코드를 처리합니다. 동적으로 생성된 클래스(const class = disabled ? "color-gray-100" : "color-indigo-100")가 있는 경우, 테일윈드는 JS에서도 유틸리티 클래스를 찾습니다. 코드의 모든 유틸리티 클래스를 구문 분석하면 해당하는 CSS를 생성하고 파일에 기록한다. 저는 리액트와 함께 사용하며, 크리에이트 리액트 앱 v5 이상에서 지원됩니다.편집기 설정Tailwind 프로젝트의 VS 코드 설정에 다음 사항을 반드시 추가해야 합니다.

  "css.validate": false
  "editor.quickSuggestions": {
   "strings": true
  }

•  
• 공식 테일윈드 플러그인을 통한 VS 코드 지원은 테일윈드를 작성하기에 매우 쾌적하고 읽기 덜 추하게 만든다. 플러그인은 모든 유틸리티 클래스를 기억할 필요가 없도록 자동 완성 기능을 제공합니다. 또한 유틸리티 클래스 위에 마우스를 놓으면 유틸리티 클래스가 생성할 CSS를 볼 수 있습니다.
• 프레임워크가 이를 지원하지 않는 경우(CRA v4에서 작동하는 데 어려움을 겪었다), 언제든지 CLI를 사용하여 CSS 파일을 보고 생성할 수 있습니다. 감시할 디렉터리를 지정합니다. 그리고 출력 CSS 파일을 HTML로 로드해야 합니다. 여기 좋은 설정과 문제 해결 팁이 있습니다.
•  
• 그게 테일윈드의 정수야. 유틸리티 클래스 및 사용자 지정 가능한 설계 시스템으로 구성된 매우 낮은 수준의 CSS 프레임워크입니다.

두 번째 설정은 VS Code가 문자열의 시작 부분뿐만 아니라 중간에 자동 완성되도록 합니다. 이렇게 하지 않으면 커서가 className="의 끝에 있을 때만 유틸리티 클래스에 대한 자동 완성도를 얻을 수 있으며 className="mx-4"의 끝에 있을 때는 그렇지 않습니다. 즉, 이 설정이 없으면 목록의 첫 번째 클래스에 대해서만 자동 완성됩니다.

드디어 수업 이름 짓는 것에 대해 걱정할 필요가 없게 되었으니, 우리는 또 무엇을 자전거로 헛간으로 쓸 수 있을까? 음, 물론, 실용 수업의 순서입니다. 걱정하지 마세요. 테일윈드는 이러한 무의미한 논쟁을 끝내기 위해 지난달 프리터 플러그인을 출시했습니다. Prette 플러그인은 클래스를 자동으로 정렬합니다. 설정도 안 되고요

플러그인과 관련된 한 가지 불편한 점은 className 특성의 값에서만 기능이 작동한다는 것입니다.

 

다른 유일한 불만은 보풀이 섬세해 보인다는 것이다.

곶카스

문서로부터 "테일윈드가 클래스 이름을 추출하는 방법의 가장 중요한 의미는 소스 파일에서 끊어지지 않은 완전한 문자열로 존재하는 클래스만 찾을 수 있다는 것이다." text-red-600 : text-green-600과 같은 코드가 있으면 text-red-600 및 text-green-600에 대해 CSS가 생성됩니다. 그러나 text-{ error ? red : green }-600"이 있는 경우 Tailwind에서 생성된 CSS 파일에는 text-red-600 및 text-green-600 클래스가 포함되지 않습니다.

이것은 나를 잠시 힘들게 했다. 저는 이것을 모르고 모든 클래스가 조건부 논리로 사용되는 보이지 않는

를 만들었습니다. 하지만 네가 모든 학급 이름에 끈을 끊지 않고 사용한다면, 그게 해결이 될 거야.