ReactJS(NextJS) 에서 tailwindCSS 초기화 설정이 Editor.js 스타일도 초기화 하는 문제 고치기

문제 발단

현재 NextJS 에서 공지사항 게시판을 만들던 중 Eidtor.js 를 사용해보기로 하였습니다. 그래서 적용 후 사용해보려고 하니, 아래와 같이 레벨 1의 Heading 이 적용되어야 하는(h1) 상황임에도 기존에 설정해둔 tailwindcss 의 초기화 설정이 해당 에디터 라이브러리의 CSS 도 같이 초기화 해버리는 문제가 발생하고 있습니다.

 

해결방법

보통 이러한 문제를 개선하기 위해 tailwindcss 에서 제공하는 도구가 존재하는데, 해당 도구를 사용해서 문제를 개선할 수 있습니다.

 

우선 아래 도구를 설치해줍니다.

 npm i @tailwindcss/typography

 

 

tailwind.config.ts 파일로 이동합니다. 아래와 같이 plugins 부분의 앞서 설치한 도구를 require 해주고, 함수의 인자로 'className: 사용자 작명' 형태의 객체를 전달해줍니다.

import {nextui} from '@nextui-org/theme';
import type { Config } from 'tailwindcss'

const config: Config = {
  plugins: [require('@tailwindcss/typography')(
  {className:'no-tailwind'})], // className 을 원하는 이름으로 설정
}
export default config

 

 

그 후 editor.js 가 설정된 파일로 옵니다.

// Editor.tsx
export default function NoticeEditor() {
 // ... 중략 ...
    return (
        <>
            {/* 앞서 config 파일에서 작명한 className 값을 입력해줍니다.  */}
            <div className='no-tailwind' id='editor.js'></div>
        </>
    )
}

 

개선결과

개선 후 확인 해보면, 초기화되는 것을 방지하고, 별도로 적용한 tailwind 와 호환되어 적용되는 것을 볼 수 있습니다.

<div className='p-3 mx-auto bg-white w-[100vw] no-tailwind' id='editor.js'></div>