2023년 06월 06일

완벽주의를 버리자

📚 오늘 도전하고, 배운 것

tailwindcss에서 동적 class 적용하기

template literal을 사용해서 원하는 클래스명을 지정할 수 있을 줄 알았는데 아니었다.

tailwindcss에는 엄청난 양의 클래스 모음이 있으므로 최종 stylesheet에 그 모든 것을 넣어두지 않기 때문에 사용된 클래스만 컴파일한다. 동적으로 정해지는 값이 포함된 클래스는 인식하지 못한다고 한다.

그래서 이미 사용된 적이 있는 클래스는 사용 가능하다.

let classes
if (size === 2) {
  classes = `text-2xl`;
}

<span className={classes}>Hello TailwindCSS</span>

공식문서에 여러 해결 방안이 있다.

나의 경우에 calc를 사용해야 했는데 약 200개 정도의 클래스를 미리 선언할 필요가 있어서 selflist를 최후의 수단으로 사용했다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  safelist: [
    ...[...Array(121).keys()]
      .filter(i => i > 12)
      .flatMap(i => [`w-[calc(100%/${i})]`, `basis-[calc(100%/${i})]`]),
  ],
  plugins: [],
};

🤔 학습하면서 궁금하거나 어려웠던 점

🌅 내일은 무엇을?

✒️ log

• 완벽하게 준비되었다고 생각했을 때 시작하려는 경향이 있다. 이걸 이번에야말로 버리자.