[Tailwind] @Tailwind 삼형제가 동작하지 않는다면!?!?!?!

근래 Next.js로 개발을 하다 보니 tailwind를 주력으로 사용하고 있다. 

그러던 중, 오랜만에 새로운 프로젝트를 만들어 tailwind를 적용하려고 하니

어라라? 스타일이 전혀 적용되지 않으면서 에러가 나는 것이었다

 

Error Lens가 아주 친절하게 에러를 읊어줘서 에러를 파악해 보았다.

'@tailwind base' is no longer available in v4. Use '@import "tailwindcss/preflight"' instead.

 

"@tailwind base는 v4 버전에서 사용되지 않으므로, 대신 @import "tailwindcss/preflight를 사용하세요!" 라는 말.

 

실제로 v4 버전에서는 @import "tailwindcss"만 사용해도 된다고 나와 있다.

 

반면 3.4.17 버전에서는 @tailwind 삼형제를  써주는게 맞다

 

결론!!

버전 확인을 잘 하자

 

참고로 그럼에도 @tailwind 삼형제를 이용하고 싶다면?

@import "tailwindcss/preflight";  /* 이전 @tailwind base */
@import "tailwindcss/components"; /* 이전 @tailwind components */
@import "tailwindcss/utilities"; /* 이전 @tailwind utilities */

 

진짜 끝!