[tailwind] tailwindcss를 쓰면 reset.css는 이미 포함되어 있음(preflight)

 

 

 

 

Next.js + Tailwindcss로 개발할 때

 

프론트엔드 개발의 시작은 HTML + CSS + JavaSript이고,

웹브라우 저마다 설정된 default 값을 없애고 디자인 통일성을 위해서, reset.css 를 습관적으로 사용합니다.

 

 

그래서 next.js + tailwindcss 조합으로 프로젝트를 생성했을 때도

 

reset.css 파일을 생성해서 불러오거나,

reset.css 파일 내의 초기화 내용을 globals.css 파일에 넣으려는 경우가 있는데, 많은 경우에서 에러가 납니다.

 

일단 결론부터 이야기 하면

tailwind는 자체 리셋 시스템을 이미 내장하고 있습니다.

 

 

Preflight라고 부른다는데, 

tailwind를 쓰는 순간 이미 'reset.css'가 적용된 상태가 되는 것이라고...

 

 

* 공식 문서 참조

https://tailwindcss.com/docs/preflight 

Preflight - Base styles

 

 

 

 

테일윈드를 안 쓸 때는 어떻게 하나요?

 

 

reset.css를 어떻게 로딩해야하는지 물어보면, 

codex나, chatGPT 등이 다양한 해결책을 제시합합니다.

 

 

사람들과 AI가 제일 많이 추천하는 방식은

 

reset.css 파일과

globals.css 파일을

 

루트의 layout.tsx 파일에서

reset.css > globals.css 순서로 로딩해 주라는 것.

 

실제로 이렇게 구현된 예제들도 많이 발견됩니다.

꼭 reset.css로 초기화해주고 싶은 사람은 참고합시다.

 

 

 

 

 

저는 프로젝트 생성을 할 때, 

TypeScript와 Tailwind를 쓰는 것을 기본으로 설정하기 때문에 별도로 reset.css 는 하지 않기로....

 

https://spacechild.net/620

[Next.js] Next.js 새 프로젝트 생성하는 법+옵션선택(Step by Step)