반응형
Nextjs와 tailwind , mui로 프로젝트를 진행하면서 amplify에 배포 후 일부 컴포넌트의 css가 개발환경과 다르게 적용되는 문제가 생겼습니다.
코드는 다음과 같습니다.
<div className={`w-full`}>
<Button className={`text-black `} onClick={() => setIsShow(!isShow)}>
{"tses"}
<ArrowDropDownIcon
style={{
transition: "all 0.3s",
transform: isShow ? "rotate(180deg)" : "rotate(0deg)",
}}
/>
</Button>
<Button className={`text-black `} onClick={() => setIsShow(!isShow)}>
{"tses"}
<ArrowDropDownIcon
className={clsx("transition-all duration-300", {
"rotate-180": isShow,
})}
/>
</Button>
</div>
tailwind로 작성된 text-black은 배포 후 버튼 둘다 적용되지 않았고 회전 딜레이를 준 아이콘은 style로 작성한 앞의 버튼만 정상동작했습니다.
해결방법은 mui 공식문서에 나와있습니다.
https://mui.com/material-ui/integrations/interoperability/#tailwind-css
tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
// mui의 preflight를 사용할 수 있도록 false로 설정
corePlugins: {
preflight: false,
},
content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
// 중요 옵션을 사용하면 Tailwind의 유틸리티에 !important로 표시해야 하는지 여부를 제어할 수 있다. 이는 특이도가 높은 기존 CSS와 함께 Tailwind를 사용할 때 정말 유용할 수 있다.
important: "#__next",
theme: {},
plugins: [],
};
export default config;
layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {...};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className}`} id="__next"> // id 추가
{children}
</body>
</html>
);
}
공식 문서에서는 다음과 같이 important에 '#__next' 를 추가하라고 하지만 #__next id는 page router에서만 유효하므로 추가적으로 등록해줘야했습니다.
Step three tells you to add the important option using the id of your app wrapper:
- Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA:
globals.css
#__next {
margin: 0;
}
이 후, 배포환경에서도 css가 올바르게 적용된것을 확일할 수 있습니다.
반응형