Tailwind CSS를 사용하면 성능 이점이 있습니까? 

기본 Tailwind 구성은 36.4kb 축소 및 g-zip으로 제공됩니다. 이것을 22.1kb Boot의 Bootstrap과 비교하십시오 .—Tailwind는 14.3kb 더 무겁습니다. "실제로 성능 측면에서 갈 수 있는 방법입니까?"

그 이유는 간단합니다. Tailwind에는 사용자가 선택할 수 있는 많은 옵션과 스타일이 미리 포함되어 있으며 CSS를 작성하는 경향을 줄이기 위해 이러한 모든 변형이 포함되어 있습니다. 다행히 Tailwind에는 생성 된 CSS를 작고 성능 있게 유지하는 데 사용할 수 있는 몇 가지 전략이 있습니다.

색상 표를 제한 

Tailwind의 모든 내장 유틸리티 모듈은 후드 아래에서 플러그인 시스템을 사용하기 때문에 많은 코드를 삭제하고 플러그인 시스템을 Tailwind에 새 클래스가 등록되는 방식으로 만들 수 있습니다.

이를 통해 오버 헤드 코드가 많은 Bootstrap과 달리 다른 모든 것을 무시하면서 실제로 프로젝트에 필요한 코드만 가질 수 있습니다. 이 업그레이드 기능은 빌드 시간을 158 초에서 8 초로 단축 시킵니다.

다음과 같이 프로젝트에서 필요한 정확한 색상 변형을 얻을 수 있습니다.

// ...

module.exports = {
  // ...

  textColors: {
    'black': colors['black'],
    'grey-darker': colors['grey-darker'],
    'grey-dark': colors['grey-dark'],
    'red-dark': colors['red-dark'],
    'red': colors['red'],
    'blue-dark': colors['blue-dark'],
    'blue': colors['blue'],
    // ...
  }
}

PurgeCSS로 사용하지 않는 CSS를 제거 

또한 Tailwind는 프로젝트에서 사용하지 않는 CSS를 제거하는 도구 인 PurgeCSS를 사용하여 사용하지 않는 CSS를 제거합니다. 템플릿에서 사용 가능한 CSS 클래스 이름을 사용 된 클래스 이름과 비교 한 다음 사용하지 않는 CSS를 제거하면 됩니다.

필요한 화면 수를 정확하게 선택 

Tailwind를 사용하면 필요한 정확한 화면 크기를 선택할 수 있습니다. 더 적은 화면을 정의하면 출력에 영향을 주는 방법은 다음과 같습니다.

• 5 screen sizes (default): 36.4kb
• 4 screen sizes: 29.4kb
• 3 screen sizes: 22.4kb
• 2 screen sizes: 15.4kb
• 1 screen size: 8.4kb

그렇다면 Tailwind®CSS는 얼마나 유연합니까? 

이 준비가 되셨습니까? 확실해요? 따라서 Tailwind는 매우 유연하여 고유 한 유틸리티를 추가하고 이를 구현하기 위한 지침을 제공합니다.

간단한 스타일 구현을 예로 들어 봅시다. 일반적인 Tailwind 설정은 다음과 같은 단일 CSS 파일입니다.

@tailwind preflight;

@tailwind components;

@tailwind utilities;

따라서 기본 유틸리티를 재정의 하려면 재정의를 마지막으로 가져 와서 먼저 적용해야 합니다 (일반 CSS 규칙).

@tailwind preflight;

@tailwind components;

@tailwind utilities;

.bg-cover-image {
  background-image: url('/path/to/image.jpg');
}

그러나 postcss-import 또는 Less, Sass 또는 Stylus와 같은 전처리기를 사용하는 경우 유틸리티를 별도의 파일로 유지하고 가져 오는 것이 가장 좋습니다.

@tailwind preflight;

@tailwind components;

@tailwind utilities;

@import "leveledup-utilities";

참고 : 반응 형 레이아웃에 대해서도 마찬가지입니다. 사용자 정의 유틸리티는 올바르게 수행되는 한 항상 접두사 유틸리티 보다 우선합니다.

@apply를 사용하여 유틸리티 패턴 추출 

여러 곳에서 특정 버튼 스타일을 재사용한다고 가정 해 보겠습니다. 동일한 구성 요소에 대해 동일한 유형의 사양을 다시 입력하면 약간 지루합니다. 걱정하지 마십시오. Tailwind에는 @apply를 사용하여 스타일을 재사용 할 수 있습니다.

예를 들면 다음과 같습니다.

참고 : 마우스 오버 :, 초점 : 및 {screen} : 유틸리티 변형을 직접 혼합 할 수 없습니다.

Tailwind 생산 준비가 되셨습니까? 

Tailwind CSS는 방금 버전 1.0.0.beta를 릴리스했으며 다음 기능은 프로덕션 용입니다.

기본 색상 표 확장 

이 새 버전의 Tailwind는 원래 7 가지 음영, 가장 어두운 것부터 가장 밝은 컬러 시스템을 새로운 9 가지 음영 숫자 색상 시스템으로 대체하여 색상을 유연하게 사용할 수 있도록 몇 가지 업그레이드를 제공합니다. 여기서 100은 가장 밝은 음영이고 900은 가장 어두운 그늘.

점진적 maxWidth scale 사용 

maxWidth (10rem)에 대한 선형 스케일이 이미 있었지만 이 새로운 업그레이드는 너비 값이 증가하고 이제 기본 옵션이 9에서 12로 증가하는 점진적 스케일로 전환됩니다.

구성 파일에서 자신의 프로젝트에 원하는 값을 지정하여 이 기본 maxWidth 스케일을 겹쳐 쓸 수 있습니다.

module.exports = { 
  theme: { 
      maxWidth: { 
      // Your values go here... 
    }, 
  },
}

또한 더욱 안정적이고 생산 준비가 완료됩니다.

이것이 실제로 미래인가? 

Tailwind로 작업하기 CSS는 필요한 것을 정확하게 처리 할 수 있는 일련의 유틸리티 클래스를 사용하고 있습니다. 제 생각에는 이것이 개발자의 창의성에 더 유연한 사용자 인터페이스를 만드는 깔끔한 방법입니다.

제가 정말로 높이 평가하는 또 다른 이점 — 그리고 모든 프론트 엔드 개발자도 또한 감사 할 것 —은 다른 요소에 영향을 주는 요소 하나의 변경에 대해 걱정할 필요가 없습니다. 더 이상 편집기에서 HTML과 스타일 시트를 앞뒤로 탭할 필요가 없으며 더 이상 다른 요소의 이름을 확인하고 확인하지 않아도 됩니다. 제 생각에는 이것이 미래입니다.

공식 문서를 확인 하고 이 멋진 시작하십시오.