🏆 목표


<aside> 💡 TailwindCSS와 Next.js를 이용해서 UI 요소를 만들던 중 개발자 모드에서는 제대로 적용된 것이 식별되었음에도 실제로는 적용이 안된 UI가 발생하였다. 이 문제를 해결해보자.

</aside>

<button class="h-14 w-14 rounded-full border border-black-900 bg-black text-white" data-value="free">FREE</button>

스크린샷 2025-02-23 오후 2.05.09.png

📖 해결 과정


import getButtonBaseStyles, {
  ButtonBaseStyles,
} from "@/utils/func/getButtonStyles";
import clsx from "clsx";
import { MouseEvent } from "react";

interface ButtonProps {
  text: string;
  value?: string;
  isFocused?: boolean;
  style?: ButtonBaseStyles;
  onClickHandler?: (event: MouseEvent<HTMLButtonElement>) => void;
}
const Button = ({
  text,
  value,
  isFocused,
  style = "rounded",
  onClickHandler,
}: ButtonProps) => {
  const baseStyle = getButtonBaseStyles(style);
  console.log(clsx(baseStyle, isFocused ? "bg-black text-white" : ""));
  return (
    <button
      className={clsx(baseStyle, isFocused ? "bg-black text-white" : "")}
      onClick={onClickHandler}
      data-value={value}
    >
      {text}
    </button>
  );
};

export default Button;

[예상 문제 발생 구간]

  1. baseStyle에서 적용되는 style이 문제가 되고있다.
  2. 해당 스타일이 동적으로 switch문을 통해서 return되는 값인데 그 중에서 일부 스타일만 적용이 되지 않고 있다(w-14, h-14, border-black)
  3. 스타일을 적용하는 tailwind.config.ts 파일에 uitls를 추가해보자
import type { Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";
import tailwindcssAnimated from "tailwindcss-animated"; // require 대체

export default {
  content: [
    "./src/utils/**/*.{js,ts,jsx,tsx,mdx}",
    ...
  ],
  ...
} satisfies Config;

🎙️ 시도