TailwindCSS

생산성을 높여주는 css프레임워크이다. css파일 없이도 빠른 css 작성, 넓은 문법지원 폭, 기본 제공되는 디자인 토큰들과 UI 컴포넌트, config를 통한 커스텀 디자인시스템 세팅 등 제공이 다양하다.

PurgeCSS

PurgeCSS는 tailwindcss가 2점대까지 jit모드를 사용하지 않을 때, 주력으로 사용하던 css최적화 라이브러리다. 여러 css 프레임워크가 사용중이며, 이에대한 추가 옵션 툴이다. 최적화를 진행한다면 이 옵션을 명확히 할 필요가 있다.

purge옵션

Tailwind CSS v3에서는 purge 옵션을 사용하여 템플릿 경로를 구성하는 것이 중요하다. 그렇지 않으면 대상에서 제외되어 컴파일된 CSS가 비어 있게 된다.

tailwind.config.js에서 purge

/** @type {import('tailwindcss').Config} */ module.exports = {
	purge: [
		'./pages/**/*.{html,js}',
		'./components/**/*.{html,js}',
	 ],
  // ... }

JIT mode

tailwindCSS는 3버전 부터 JIT 모드가 기본화 되었다. 이와 동시에 PurgeCSS는 내부적으로 사용하지않고, 옵션에서 제거되어야 한다. 참고

Tailwind는 Just In Time이라는 컴파일 엔진을 자체 제작하였다. 사전 css 빌드가 아닌 런타임에 빌드를 진행한다. 이는 사전 빌드량을 매우 줄였고, 개발 단계에서 성능차이를 명확히 보여준다.

JIT모드 이전엔 디자인 토큰에해당하는 커스텀 config가 사전 빌드의 양을 매우 거대하게 만든다. darkMode, color 팔레트 등등.

html class에서 css 값을 직접 이용 가능

런타임에 컴파일하기 때문에, 우리 서비스의 디자인시스템에 없는 특정 커스텀 디자인 토큰(카카오 옐로우)같은 경우는 html에서 직접 값을 이용해도 무관하다.

<div class="p-16">
	<div class="h-[120px] w-[120px] rounded-full border bg-red-400 hover:bg-blue-400 cursor-pointer"></div>
</div>

그 외 다양한 기능들은 공식문서를 참고하자.

content 옵션

기존 purge옵션에서 content옵션으로 변경되었다. 더 이상 purgeCSS를 사용하지 않기 때문이다.

/** @type {import('tailwindcss').Config} */ module.exports = {
	content: [
		'./pages/**/*.{html,js}',
		'./components/**/*.{html,js}',
	 ],
  // ... }

Production 환경을 위한 최적화

프러덕션 빌드 시,

• CSS 최적화: cssnano
• CSS 압축: Brotli 을 추천하고 있다.

# PostCSS plugin으로써 tailwind를 사용 시, `cssnano` plugin 최하단에 추가해주면된다.

`postcss.config.js`

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

참조

https://www.martyfriedel.com/blog/using-the-jit-compiler-in-tailwind-css : purgeCSS 단점 https://velog.io/@gamjajeon0212/Tailwind-CSS-%ED%8C%8C%EC%9D%BC%ED%81%AC%EA%B8%B0%EC%99%80-%EC%B5%9C%EC%A0%81%ED%99%94 ...