Next.js 에서 bootstrap과 tailwind css 같이 사용하기(bootstrap에서 important 제거하기)
이슈
bootstrap과 tailwind 모두 기능 단위로 각 css를 유틸클래스(HTML class 속성)로 정의해놓고 조합해서 사용한다는 공통점이 있습니다
<div class="p-4 rounded border">Hello world!</div>
하지만 bootstrap과 tailwind는 클래스명이 같지만 그 안에 정의된 수치가 다른 경우가 있습니다
특히 shadcn-ui를 사용하는 경우 tailwind에서 정의된 클래스를 기반으로 구성이 되어있는데 이것이 bootstrap에 정의된 클래스라면 bootstrap의 유틸클래스는 !important가 붙어서 bootstrap 스타일이 적용되는 것이 문제입니다
해결
bootstrap의 유틸클래스에 !important를 붙지 않게 할 수 있는 방법이 있습니다
빌드 되기 전에 scss 변수로 $enable-important-utilities: false;를 정의해주면 됩니다
// styles/bootstrap.scss
$enable-important-utilities: false; //this disables !important
@import '../node_modules/bootstrap/scss/bootstrap';
// app/layout.tsx
// import 'bootstrap/dist/css/bootstrap.min.css';
import 'styles/bootstrap.scss'; // 위 기존 bootstrap css를 대체
export default function RootLayout({ children }: { children: React.ReactNode }) {
// ...
return (
<html>
// ...
<body>
{children}
</body>
</html>
)
}
Next.js에서 scss를 사용하려면 npm에서 sass를 설치해야 합니다
