tailwind 레이어가 뭔데? postcss.config 는 뭐지?

tailwind

빌드 시점에 HTML 파일에서 tailwind css 클래스를 찾아서 이를 바탕으로 ccs 정적 파일을 구성합니다.

브라우저 렌더링 과정에 직접 개입하지 않으므로, 런타임에 비용이 들지 않습니다.

전통적인 인라인 스타일과의 차이가 있다면, 미디어 쿼리를 사용할 수가 있게 되고 사전 정의된 디자인 시스템에서 스타일을 선택할 수 있다는 것, 마우스오버, 포커스 등의 상태에도 대응 가능하다는 점입니다.

• 숫자로 보기: Atomic CSS를 사용한 1년 반 - John Polacek
• 아니요, 유틸리티 클래스는 인라인 스타일과 동일하지 않습니다( Algolia의 Sarah Dayan 작성).
• GitHub의 유틸리티 클래스 사용에 대한 Diana Mounter의 팟캐스트 인터뷰

 

레이어

@tailwind base;
@tailwind components;
@tailwind utilities;

 

base 레이어는 일반 HTML 요소에 적용되는 재설정 규칙이나 기본 스타일과 같은 항목을 위한 것입니다.

components 레이어는 유틸리티로 재정의할 수 있는 클래스 기반 스타일을 위한 것입니다.

utilities 레이어는 항상 다른 스타일보다 우선해야 하는 작은 단일 목적 클래스용입니다.

 

스타일이 HTML 에서 사용되지 않는 경우 컴파일된 CSS에 포함되지 않습니다.

항상 포함시키려면 @layer 지시문 없이 그냥 css 스타일시트에 포함시키면 됩니다.

 

Tailwind css 스타일일 반복되는 경우 권장사항

최대한 Loop 문을 사용하고, 디자인 시스템 같이 반복되는 패턴에는 components 레이어로 대응하는 것을 권장합니다.

 

postcss.config 파일 살펴보기

- postcss-import 가 최상단에 위치해야 합니다.

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

postcss-import 는 CSS 가 너무 많아져서 여러 파일로 작성할때 @import 지시문을 사용한 css 파일들을 단일 파일로 합쳐줍니다.

tailwindcss/nesting 은 클래스 중첩 스타일 정의가 가능하게 해줍니다. component 레이어 사용시 특수한 경우 사용됩니다.

autoprefixer 는 css 코드에 vender prefixes 를 자동 추가하는 도구입니다. 브라우저 호환성 유지시켜줍니다.

purgecss 는 사용되지 않는 css 코드를 제거해줍니다. tailwind.css 설치한 경우 따로 설치안해도 됩니다.

cssnano 는 파일 압축(minifier) 해줍니다. postcss 에 내장되어 있어서 설치안해도 됩니다.

 

https://github.com/postcss/postcss-import

GitHub - postcss/postcss-import: PostCSS plugin to inline at-import rules content

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* 다른 파일 */
@import "./src/header.css";
@import "./src/footer.css";