Zenn
Open6

TailwindCSS メモ

Tailwind CSS
かっこかっこ

TailwindCSSのclass detectionでちょっと嵌まった
classNameを変数に入れてたせいでCSSが生成されなかった

ダメな書き方
// 'border-solid' のスタイルが生成されない
const cn = twMerge('border-solid', className);
return (<div className={cn}>{children}</div>);
正しい書き方
return (<div className={twMerge('border-solid', className)}>{children}</div>);
かっこかっこ

これがOKらしいからいけると思い込んでたけど…

const sizes = {
  md: 'px-4 py-2 rounded-md text-base',
  lg: 'px-5 py-3 rounded-lg text-lg',
}

const colors = {
  indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
  cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}

export default function Button({ color, size, children }) {
  let colorClasses = colors[color]
  let sizeClasses = sizes[size]

  return (
    <button type="button" className={`font-bold ${sizeClasses} ${colorClasses}`}>
      {children}
    </button>
  )
}
かっこかっこ

どっちもOKだ

OK
const base = 'border-solid';
return (<div className={twMerge(base, className)}>{children}</div>);
OK
const styles = {
  base: 'border-solid',
};
return (<div className={twMerge(styles.base, className)}>{children}</div>);
かっこかっこ

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

最初のダメな書き方は complete unbroken string じゃないのか

Instead, map props to complete class names that are statically detectable at build-time:

twMerge 使ってて statically な文字列じゃないからダメってことなのかな

かっこかっこ

よく考えれば単純な話か

  • Tailwindは単純な文字列だけを検知してCSSの生成する
  • 実行時に計算された className に基づいて生成されたCSSのスタイルが適用される