Tailwind + Next 13 - 在组件中使用时，.css 中不存在默认背景颜色

Question

我正在了解有关 Tailwind 和 Next JS 的更多信息。

我正在尝试创建一个本地

Button

组件，该组件具有基于 props 的

variant

和

size

，最终将在 Tailwind 字符串中解析，并且这些组件将由

tailwind-merge

与

clsx

合并。

我注意到CSS文件中不存在已解析的背景颜色（例如

bg-blue-500

），并且它不会显示。

但是，当我在

page.tsx

上使用颜色时，会显示颜色（现在也显示在按钮中）。

Tailwind 配置是默认配置，由

create-next-app --tailwind

生成。

类名.ts

import { ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function classnames(...classes: ClassValue[]) {
  return twMerge(clsx(classes))
}

button.const.ts

export const enum ButtonVariant {
  PRIMARY = 'primary',
  SECONDARY = 'secondary',
  DANGER = 'danger',
  SUCCESS = 'success',
  WARNING = 'warning',
}

export const enum ButtonSize {
  SMALL = 'small',
  MEDIUM = 'medium',
  LARGE = 'large',
}

export const BUTTON_TW_COLORS: Record<ButtonVariant, string> = {
  [ButtonVariant.PRIMARY]: 'bg-blue-500 hover:bg-blue-700',
  [ButtonVariant.SECONDARY]: 'bg-gray-500 hover:bg-gray-700',
  [ButtonVariant.DANGER]: 'bg-red-500 hover:bg-red-700',
  [ButtonVariant.SUCCESS]: 'bg-green-500 hover:bg-green-700',
  [ButtonVariant.WARNING]: 'bg-yellow-500 hover:bg-yellow-700',
}

export const BUTTON_TW_SIZES: Record<ButtonSize, string> = {
  [ButtonSize.SMALL]: 'px-3 py-2 text-sm',
  [ButtonSize.MEDIUM]: 'px-3.5 py-2.5 text-base',
  [ButtonSize.LARGE]: 'px-4 py-2 text-lg',
}

按钮.tsx

import { ReactNode } from 'react'

import { BUTTON_TW_COLORS, BUTTON_TW_SIZES, ButtonSize, ButtonVariant } from '@/constants/button.const'
import { classnames } from '@/libs/utils'

export interface ButtonPropos {
  children: ReactNode
  className?: string
  onClick?: () => void
  variant?: ButtonVariant
  size?: ButtonSize
}

export function Button({
  children,
  className,
  onClick,
  variant = ButtonVariant.PRIMARY,
  size = ButtonSize.MEDIUM,
}: ButtonPropos) {
  const classNames = classnames('font-bold rounded-md', BUTTON_TW_COLORS[variant], BUTTON_TW_SIZES[size], className)

  return (
    <button
      onClick={onClick}
      className={classNames}
    >
      {children}
    </button>
  )
}

page.tsx

export default function Home() {
  return (
    <>
      <Button variant={ButtonVariant.SECONDARY}>
        Book an Appointment
      </Button>
    </>
  )
}

结果：

Answer 1

我也发现这个问题需要有人帮助