nextjs 에서 antd 5.x 와 tailwind 적용

tailwind 적용은 https://tailwindcss.com/docs/guides/nextjs 참고

 

보통 antd 에 tailwind 를 추가로 쓰려고하는 사람은 아마? 대부분 간단한 스타일링을 할 때 (ex: padding, margin 등) inner style은 싫고, 그렇다고 css module 이나 css-in-js 를 사용해 파일을 추가로 생성하는게 부담스러울 때 쓰려고 한다고 생각한다.

 

※ tailwind 만으로 컴포넌트를 백프로 제작하길 원한다면 쿨하게 antd와 같은 UI 디자인은 버리기를 추천(UI Design 이중화 방지!)한다!

 

tailwind 기본 설정이 끝났다면 tailwind.config.js 에 딱 두줄만 추가해주면 된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
    colors: {
      primary: '#441151',
    }
  },
  corePlugins: {
    preflight: false,
  },

  plugins: [],
}

바로 Preflight 를 무효화하고 tailwind의 스타일은 !important 로 최우선적 스타일 속성을 삽입시키게 하면 된다.

 

3번째 줄에 important: true, 로 설정하면 tailwind의 클래스명에 해당하는 스타일 속성에 모두 !important가 뒤에 붙게된다.

예를 들면

<button className="pb-1">버튼</button>

위와 같이 사용한다면 실제 스타일은  padding-bottom: 0.25rem !important; 와 같이 적용된다.

하지만 이는 현재의 UI 디자인의 스타일 속성을 강제로 무효화 하기 위함이기 때문에, 다른 UI 디자인과 혼용해서 사용하는게 아니라면 해당 속성은 false로 사용하길 추천한다. 

 

Preflight 는 브라우저에서 기본적으로 설정된 스타일과 충돌을 피하기 위해 기본 스타일을 무효화 시키는 기능이며, 이 preflight 는 @tailwind base 에 기본설정이 되어있다. tailwind 만 사용하는 프로젝트라면 해당 기능을 비활성화 시킬 필요는 없겠지만, 다른 UI 디자인과 함께 사용해야 한다면 해당 설정은 비활성화 시키는 것을 추천한다.

corePlugins: {
  preflight: false,
}