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

배타적 서브타입(Exlusive Subtype) 테이블 설계와 백엔드 구현

배타적 서브타입(Exlusive Subtype) 테이블 설계와 백엔드 구현

배타적 서브타입이란? 데이터베이스 테이블 설계에서 슈퍼타입(Super Type)과 서브타입(Sub Type)은 공통 속성을 기준으로 엔티티(테이블)를 상위/하위로 나누는 데이터 모델링 기법입니다. * Super Type (상위 엔티티) * 여러 엔티티가 공통으로 가지는 속성을 모아 놓은 엔티티 * 식별자(PK, ID)를 포함한 공통 정보를 가지고 있음 * Sub Type (하위 엔티티)

By Plato Jung
A2A 메모리 레이어: AI 에이전트를 위한 공유 두뇌 구축하기

A2A 메모리 레이어: AI 에이전트를 위한 공유 두뇌 구축하기

모든 것의 시작이 된 문제 우리를 계속 괴롭히던 것이 있었습니다: 왜 AI 에이전트는 대화가 끝나는 순간 모든 것을 잊어버릴까요? 한번 생각해보세요. 챗봇에게 전화보다 이메일을 선호한다고 말합니다. 다음 세션에서는요? 마치 처음 만난 것처럼 행동합니다. 한 상담원에게 주문 문제를 설명하고, 다른 상담원에게 연결되면, 갑자기 처음부터 다시 시작해야 합니다. 우리 모두 겪어본 일입니다.

By Sardor Madaminov
[시리즈 2편] 실무로 배우는 메시지 큐 - RabbitMQ

[시리즈 2편] 실무로 배우는 메시지 큐 - RabbitMQ

들어가며 [시리즈1]에서는 프로세스 내부 메시지 큐를 다뤘습니다. 이번엔 네트워크 메시지 큐인 RabbitMQ를 다룹니다. RabbitMQ 공식 문서나 기술 블로그는 많지만, 실무에서 어떻게 사용하는지에 대한 글은 의외로 적습니다. "Producer가 뭐고 Consumer가 뭔지는 알겠는데, 그래서 실제로는 어떻게 쓰는데?" 이번 글에서는 우리 MES 시스템에서 RabbitMQ를 어떻게 활용하고 있는지 실제 코드와 함께 공유합니다. 우리

By Jeonggil
[시리즈 1편] 실무로 배우는 메시지 큐 - Windows Message Loop

[시리즈 1편] 실무로 배우는 메시지 큐 - Windows Message Loop

들어가며 이 글은 "실무로 배우는 메시지 큐" 시리즈의 첫 번째 글입니다. 실무에서 발견한 문제를 해결하는 과정에서, IME 입력 문제와 해결 과정을 공유합니다. 메시지 큐는 RabbitMQ, Kafka 같은 네트워크 레벨만 있는 게 아닙니다. 우리가 매일 쓰는 Windows 애플리케이션도 메시지 큐 기반으로 동작합니다. * 시리즈1 (이 글): 프로세스 내부의 메시지 큐 - Windows

By Jeonggil