[Node.js] Tailwind CSS 적용하고 최적화하기

개념

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, **flex**와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

코드의 길이

<div
  class="bg-primary-darken text-bold text-white inline-flex items-center p-4 rounded shadow-md"
>
  Not Pretty Code 😵
</div>

내가 이 글을 쓴 계기는 코드의 가독성때문에 찾다가 쓰게 되었다.

그래서 구글링해서 찾아보았더니, styled-component를 쓰던가 아니면 apply방식을 썼다.

가독성 좋게 만들기

1) styled-component

import styled from "styled-components";

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
`;

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

그런데 이 경우에는 이를 다시 설치해줘야 하기에 비효율적일 수도 있다.

2) apply

<button class="btn btn-green mr-4">Button</button>
<button class="btn btn-blue">Button</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
  .btn-blue {
    @apply text-white bg-blue-500 hover:bg-blue-700;
  }
</style>

만일 버튼이나 사이드바 메뉴와 동일한 스타일을 여러 번 사용하게 되는 경우 아래처럼 유틸리티 클래스를 추가로 만들어서 사용할 수도 있다. 이는 tailwind에서 재사용성을 위해 제공하는 기능이다.

최적화

1) purge 사용하기

파일 크기를 최소화하기 위해 purge 옵션을 사용한다. 프로덕션으로 빌드할 때 여기에 설정된 파일에서 사용되지 않는 모든 클래스는 제거된다.

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...
}

2) minify 사용하기

가능한 가장 작은 프로덕션 빌드의 경우 cssnano 와 같은 도구를 사용하여 CSS를 축소하고 Brotli를 사용하여 CSS를 압축하는 것이 좋습니다 . Tailwind CLI를 사용하는 경우 **--minify**플래그를 추가하여 CSS를 축소할 수 있습니다.

tailwind의 공식문서를 참고해보면 위와 같이 말하고 있다.

npx tailwindcss -o build.css --minify

Tailwind를 PostCSS 플러그인으로 설치한 경우 **cssnano**플러그인 목록 끝에 다음을 추가하면 된다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

→ 위와 같이 최적화를 하는 이유는 Tailwind CSS 는 CDN 으로 제공받는 경우, 크기가 500kb정도 제공이 된다. 배포를 하게 된다면 css파일이 차지하는 비중을 줄이는 것이 좋다. 그래야 배포를 했을 때 생각대로 홈페이지 로딩 속도가 빨라지기 때문이다. 그러므로 최적화를 해줘야 한다.

tailwind.config.js 파일에서 수동으로 JIT 모드를 활성화할 수도 있다.

//tailwind.config.js
module.exports = {
	mode: 'jit',
	...
}

👇🏻 참고

https://wonny.space/writing/dev/hello-tailwind-css

https://hae-ong.tistory.com/105

https://tailwindcss.com/docs/optimizing-for-production

https://velog.io/@lky5697/5-best-practices-for-preventing-chaos-in-tailwind-css