Next.js 에서 bootstrap과 tailwind css 같이 사용하기(bootstrap에서 important 제거하기)

Taehwan Go

— 1 min read

이슈

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를 설치해야 합니다

Read more

Claude Code와 Obsidian MCP 연동 가이드

Claude Code와 Obsidian MCP 연동 가이드

소개 Claude Code는 Anthropic의 공식 CLI 도구로, MCP(Model Context Protocol)를 통해 다양한 외부 도구와 연동할 수 있습니다. 이 가이드에서는 Claude Code와 Obsidian을 연동하여 AI 에이전트가 여러분의 노트를 읽고 편집할 수 있도록 설정하는 방법을 소개합니다. MCP(Model Context Protocol)란? MCP는 AI 모델이 외부 데이터 소스 및 도구와 상호작용할

By Kyeongrok.kim
기술뉴스, 2025-09-25

기술뉴스, 2025-09-25

끝없이 수정하다 AI 성과 무너뜨린다··· ‘둠프롬프팅’의 함정최근 LLM과 AI 에이전트 결과물을 무한 반복 수정하는 ‘둠프롬프팅’ 현상이 관찰되고 있다. 이는 성과 저하와 막대한 비용을 초래할 수 있다.CIOGrant Gross초보를 위한 Claude Code 안내서Claude Code의 등장으로 코딩의 패러다임이 완전히 바뀌었습니다. AI 시대의 개발이란? 개발자의 역할은 무엇일까요?Subicura's BlogsubicuraShould we revisit Extreme

By Hyonsok
[Terraform 튜토리얼 1-6] 중복 없애다 망한 썰 – DRY 원칙, 정말 항상 맞을까?

[Terraform 튜토리얼 1-6] 중복 없애다 망한 썰 – DRY 원칙, 정말 항상 맞을까?

개발자라면 한 번쯤 들어봤을 말, "Don't Repeat Yourself", 줄여서 DRY 원칙. 이건 소프트웨어 개발에서 아주 중요한 원칙이에요. 중복을 줄이면 버그도 줄고, 유지 보수도 쉬워지고, 코드도 깔끔해지죠. 그런데… Terraform 같은 IaC 세계에서도 DRY가 무조건 좋을까요? 🤔 DRY가 뭔데? DRY 원칙의 핵심은 딱 하나: "같은 걸 반복해서 쓰지 마." * 상수 값, 로직, 설정

By Chansong