Tailwind jit 모드

hodu·2023년 3월 31일

JIT 모드

먼저 JIT 모드에 대해 정확히 짚고 넘어가자면 Just-In-Time 이라고 해서 스타일 변경사항을 작성할 수 있게 도와줍니다.

한번 위에서 작성한 결과물의 배경 색상을 밝은 하늘색으로 바꿔보도록 하겠습니다.

JIT 없이 커스텀 색상을 활용하려면 다음과 같이 tailwind.config.js 파일의 theme 프로퍼티에 사용할 색상을 미리 정의해줘야 합니다.

예시


const { PALETTE } = require("./src/constants/palette")

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        customBlue: PALETTE.skyblue
      }
    }
  }
}

위처럼 커스텀 색상을 작성하고,


function App() {
  return (
	// 사전에 정의해둔 커스텀 색상을 활용합니다.
    <figure className="md:flex bg-customBlue rounded-xl p-8 md:p-0">
      ...
    </figure>
  );
}

export default App;

위처럼 적용하는 방식이 일반적입니다.

이는 분명 유용하지만, JIT 모드를 활용하면 훨씬 빠른 설정이 가능합니다.

JIT 모드 설정하기

JIT 모드 설정을 위해서는 tailwind.config.js 에 mode: "jit" 이라는 속성을 직접 정의한 후, purge 설정에는 테일윈드를 적용할 모든 경로 및 파일을 지정해야 합니다.


module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  mode: "jit"
}

jit 작성한 경우

function App() {
  return (
	// 속성명-[커스텀할 값] 으로 테일윈드 클래스명을 직접 커스텀할 수 있습니다.
    <figure className="md:flex bg-[#bae4f5] rounded-xl p-8 md:p-0">
      ...
    </figure>
  );
}

로 빠르게 작성할 수 있습니다.

jit을 사용해도 조건부 스타일을 바로 적용할 순 없습니다.
왜냐하면 tailwindcss는 빌드될때 사용되지 않다고 생각되는 것들은 삭제됩니다.
그래서 아래 가이드라인에 맞추어서 사용할 수 있습니다.

케이스 1. JIT 모드 + 조건부 스타일을 적용할 때

BAD

<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>
GOOD

<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

케이스 2. JIT 모드 + 변수에 의존적인 값을 사용할 때

BAD

<div class="bg-[{{ userThemeColor }}]"></div>
GOOD (?)

<div style="background-color: {{ userThemeColor }}"></div>

테일윈드는 별도의 커스터마이징 없이도 다양한 스타일을 제공하지만, 특히 높이 / 너비나 패딩 등 "길이" 속성이 필요한 경우에서는 사용자가 원하는 값이 없는 경우가 왕왕 있습니다.

바로 이럴 때 JIT 모드가 빛을 필요합니다.
특정 너비를 제공안하기때문에 구체적인 너비를 필요할 때 사용하면 됩니다.

function App() {
  return (
    <button className="h-24 w-[382px] bg-red-200 rounded-md flex justify-center items-center">
      버튼
    </button>
  );
}

export default App;