Tailwind CSSで一部のクラスが認識されない問題

問題

以下のコンポーネントのgap-${gap}クラスに対してスタイルが適用されない

Grid.tsx

import React from 'react'
import clsx from 'clsx'

interface GridProps {
  gap: 0 | 1 | 2 | 4
  children: React.ReactNode
}

const Grid: React.FC<GridProps> = ({ gap, children }) => {
  const className = clsx('grid', `gap-${gap}`)
  return <div className={className}>{children}</div>
}

export default Grid

解決方法

以下のようにgap-0やgap-1といった完全なクラス名をコードに記述すればよい

import React from 'react'
import clsx from 'clsx'

interface GridProps {
  gap: 0 | 1 | 2 | 4
  children: React.ReactNode
}

const Grid: React.FC<GridProps> = ({ gap, children }) => {
  const className = clsx('grid', {
    'gap-0': gap === 0,
    'gap-1': gap === 1,
    'gap-2': gap === 2,
    'gap-4': gap === 4,
  })
  return <div className={className}>{children}</div>
}

export default Grid

原因

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

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.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Tailwind CSSはコードに記述されているクラス名を静的に完全一致検索するため、gap-${gap}のように動的に構築される文字列はクラス名として認識されない
クラス名が認識されないとそのクラスに対応するCSSが出力されないため、結果としてスタイルが適用されなくなる