Tailwind CSSのクラス名が上書きされない問題を解決する

はじめに

Reactコンポーネントの props で tailwindcss のクラス名を渡した時にスタイルが上書きされず困ったのでまとめます。

問題

以下のようなPageコンポーネントとButtonコンポーネントがあるとします。

// page.tsx
import Button from ./button

const Page = () => {
  return (
    <Button className={'bg-black'} title={'タイトル'} />
  )
}

export default Page

// button.tsx
import React from 'react'

type Props = {
  children: React.ReactNode
  className?: string
} & React.ButtonHTMLAttributes<HTMLButtonElement>

export const Button = ({
  children,
  className = '',
  ...props
}: Props) => {
  return (
    <button
      className={`px-4 py-2 text-center bg-blue ${className}`}
      {...props}
      >
     { children }
    </button>
  )
}

ButtonコンポーネントのclassNameにbg-blackを指定した際に、背景色が黒色になることを期待しますが、実際にはデフォルトで設定した青色のままになってしまいます。

解決方法

tailwind-mergeを使えば解決できます。

// button.tsx
import React from 'react'
import { twMerge } from "tailwind-merge"

type Props = {
  children: React.ReactNode
  className?: string
} & React.ButtonHTMLAttributes<HTMLButtonElement>

export const Button = ({
  children,
  className = '',
  ...props 
}: Props) => {
  return (
    <button
      className={twMerge(
        'px-4 py-2 text-center bg-blue',
        className,
      )}
      {...props}
    >
      { children }
    </button>
  );
}

おわりに

tailwindcssは後に指定したクラス名が優先されると思ってましたが、必ずしもそうではないということを学びました。

参考