<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>
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;
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;